Skip to content
Snippets Groups Projects
Commit 6fe4ea82 authored by Konstantinos Platis's avatar Konstantinos Platis
Browse files

Fixed hero frame height in special cases of toolbars

parent 36089473
No related branches found
No related tags found
2 merge requests!79Merge release candidate v2.7.1 to master,!72Resolve "Set height of Hero Header subtitle for all cases"
Hide whitespace changes
Inline Side-by-side
patterns/molecules/header-block/css/header-component.css
+ 18
− 2
View file @ 6fe4ea82
......@@ -270,23 +270,35 @@ body.has-header.cern-toolbar .is_half_height .cern-component-header-blocks.compo
@media only screen and (max-width: 767px) {
body.has-header.cern-toolbar.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header {
height: calc(100vh - 79px); }
body.has-header.cern-toolbar.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header .header-block__title {
height: 60vh; }
body.has-header.cern-toolbar.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header {
height: calc((100vh - 79px) / 2);
min-height: calc((100vh - 79px) / 2); } }
min-height: calc((100vh - 79px) / 2); }
body.has-header.cern-toolbar.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header .header-block__title {
height: 25vh; } }
body.has-header.cern-toolbar.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header {
height: calc(100vh - 79px); }
body.has-header.cern-toolbar.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header .header-block__title {
height: 60vh; }
body.has-header.cern-toolbar.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header {
height: calc((100vh - 79px) / 2);
min-height: calc((100vh - 79px) / 2); }
body.has-header.cern-toolbar.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header .header-block__title {
height: 25vh; }
body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header {
height: calc(100vh - 79px); }
body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header .header-block__title {
height: 60vh; }
body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header {
height: calc((100vh - 79px) / 2);
min-height: calc((100vh - 79px) / 2); }
body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header .header-block__title {
height: 25vh; }
body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header {
height: calc(100vh - 118px); }
body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header .header-block__title {
height: 65vh; }
height: 60vh; }
body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header {
height: calc((100vh - 118px) / 2);
min-height: calc((100vh - 118px) / 2); }
......@@ -294,6 +306,10 @@ body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_half_h
height: 30vh; }
body.has-header.no-admin-toolbar .is_full_height .cern-component-header-blocks.component-header {
height: calc(100vh - 39px) !important; }
body.has-header.no-admin-toolbar .is_full_height .cern-component-header-blocks.component-header .header-block__title {
height: 60vh; }
body.has-header.no-admin-toolbar .is_half_height .cern-component-header-blocks.component-header .header-block__title {
height: 25vh; }
@media only screen and (max-width: 991px) and (min-width: 767px) {
.cern-component-header-blocks {
......
patterns/molecules/header-block/sass/header-component.scss
+ 46
− 1
View file @ 6fe4ea82
......@@ -487,6 +487,7 @@ body {
}
}
// cern toolbar is on and mobile toolbar is on
&.cern-toolbar.toolbar-vertical {
@media only screen and (max-width: 767px) {
......@@ -495,6 +496,10 @@ body {
.cern-component-header-blocks {
&.component-header {
height: calc(100vh - 79px);
.header-block__title{
height: 60vh;
}
}
}
}
......@@ -506,6 +511,10 @@ body {
//height: calc(50vh - 79px);
height: calc((100vh - 79px) / 2);
min-height: calc((100vh - 79px) / 2);
.header-block__title{
height: 25vh;
}
}
}
}
......@@ -513,6 +522,7 @@ body {
}
// cern toolbar is on and admin toolbar is closed
&.cern-toolbar.toolbar-fixed {
// 79px
......@@ -520,6 +530,10 @@ body {
.cern-component-header-blocks {
&.component-header {
height: calc(100vh - 79px);
.header-block__title{
height: 60vh;
}
}
}
}
......@@ -531,11 +545,16 @@ body {
//height: calc(50vh - 79px);
height: calc((100vh - 79px) / 2);
min-height: calc((100vh - 79px) / 2);
.header-block__title{
height: 25vh;
}
}
}
}
}
//user is logged in and mobile devices
&.cern-toolbar.toolbar-fixed.toolbar-vertical {
// 79px
......@@ -543,6 +562,11 @@ body {
.cern-component-header-blocks {
&.component-header {
height: calc(100vh - 79px);
.header-block__title{
height: 60vh;
}
}
}
}
......@@ -554,6 +578,10 @@ body {
//height: calc(50vh - 79px);
height: calc((100vh - 79px) / 2);
min-height: calc((100vh - 79px) / 2);
.header-block__title{
height: 25vh;
}
}
}
}
......@@ -569,7 +597,7 @@ body {
height: calc(100vh - 118px);
.header-block__title{
height: 65vh;
height: 60vh;
}
}
}
......@@ -592,6 +620,7 @@ body {
}
// user is not logged in as admin
&.no-admin-toolbar {
// 39px
......@@ -599,9 +628,25 @@ body {
.cern-component-header-blocks {
&.component-header {
height: calc(100vh - 39px) !important;
.header-block__title{
height: 60vh;
}
}
}
}
// 39px
.is_half_height {
.cern-component-header-blocks {
&.component-header {
.header-block__title{
height: 25vh;
}
}
}
}
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment