diff --git a/CHANGELOG.md b/CHANGELOG.md index b5599e517d307b842ba1edc2516658e60974056a..66e6752655fa8b7ce9598bcc59321a3cd6c1a67f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [2.7.2] - Fixed Related Card/Preview Card components not receiving correct colors when used in Landing Pages +- Fixed issue of half height images w/o has Header looking squashed ## [2.7.1] - 25/05/2020 diff --git a/patterns/molecules/header-block/css/header-component.css b/patterns/molecules/header-block/css/header-component.css index e5f99d77899f87c5968a4c7d7e48d89adcb5535f..836bf1b32b79f67593b3605f0992ced7619510e9 100644 --- a/patterns/molecules/header-block/css/header-component.css +++ b/patterns/molecules/header-block/css/header-component.css @@ -41,7 +41,7 @@ .cern-component-header-blocks *::before { box-sizing: border-box; } .cern-component-header-blocks.component-header { - height: 100vh; + height: 100%; width: 100%; position: relative; } .cern-component-header-blocks .component-header__carousel { @@ -310,6 +310,14 @@ body.has-header.no-admin-toolbar .is_full_height .cern-component-header-blocks.c height: 60vh; } body.has-header.no-admin-toolbar .is_half_height .cern-component-header-blocks.component-header .header-block__title { height: 25vh; } +body:not(.has-header) .is_full_height .cern-component-header-blocks.component-header .header-block__title { + padding: 5% 0 0 0; + margin: 60px auto 0; } +@media only screen and (max-width: 1071px) { + body:not(.has-header) .is_half_height .cern-component-header-blocks { + height: 45vh; } } +body:not(.has-header) .is_half_height .cern-component-header-blocks.component-header .header-block__title { + margin: 60px auto 0; } @media only screen and (max-width: 991px) and (min-width: 767px) { .cern-component-header-blocks { @@ -359,7 +367,7 @@ body.has-header.no-admin-toolbar .is_half_height .cern-component-header-blocks.c border: 1px solid; } .cern-component-header-blocks .component-header__scroll { transform: scale(0.7, 0.7); - bottom: 5px !important; } + bottom: 5%; } body:not(.has-header) .cern-component-header-blocks .component-header__carousel .header-block__title { margin: 35px auto 0; } } @@ -372,7 +380,7 @@ body.has-header.no-admin-toolbar .is_half_height .cern-component-header-blocks.c /* dots on half-height header */ .is_half_height .cern-component-header-blocks .component-header__carousel .owl-dots { - bottom: 25px; } } + bottom: 25px !important; } } @media screen and (max-height: 360px) { .cern-component-header-blocks .component-header__scroll { display: none; } } diff --git a/patterns/molecules/header-block/sass/header-component.scss b/patterns/molecules/header-block/sass/header-component.scss index c7d4f944c5a7a0626f55cb70d1cb1ddac66b921f..0ff1057709642a209041be7b488e77ca70bc425d 100644 --- a/patterns/molecules/header-block/sass/header-component.scss +++ b/patterns/molecules/header-block/sass/header-component.scss @@ -69,7 +69,7 @@ } &.component-header { - height: 100vh; + height: 100%; width: 100%; position: relative; } @@ -649,6 +649,41 @@ body { } } + + &:not(.has-header){ + + .is_full_height { + .cern-component-header-blocks { + &.component-header { + .header-block { + &__title { + padding: 5% 0 0 0; + margin: 60px auto 0; + } + } + } + } + } + + // 39px + .is_half_height { + .cern-component-header-blocks { + + @media only screen and (max-width: 1071px) { + height: 45vh; + } + + &.component-header { + .header-block{ + &__title{ + margin: 60px auto 0; + } + } + } + } + } + + } } @media only screen and (max-width: 991px) and (min-width: 767px) { @@ -718,7 +753,7 @@ body { .component-header__scroll { transform: scale(0.7, 0.7); - bottom: 5px !important; + bottom: 5%; } } @@ -755,7 +790,7 @@ body { .cern-component-header-blocks { .component-header__carousel { .owl-dots { - bottom: 25px; + bottom: 25px !important; } } } diff --git a/patterns/molecules/header-blocks/js/android-fix.js b/patterns/molecules/header-blocks/js/android-fix.js deleted file mode 100644 index 150579319a9d759b2d54a1ccb4f3a9d4a8cf6b9b..0000000000000000000000000000000000000000 --- a/patterns/molecules/header-blocks/js/android-fix.js +++ /dev/null @@ -1,9 +0,0 @@ -var ua = navigator.userAgent; -if (ua.indexOf('Chrome') > -1 && ua.indexOf('Mobile') > -1) { - (function ($) { - $(document).ready(function() { - $('.owl-dots').first().css('bottom', '55px'); - $('.component-header__scroll').first().css('bottom', '55px'); - }); - })(jQuery); -} diff --git a/patterns/molecules/header-blocks/js/header_carousel.js b/patterns/molecules/header-blocks/js/header_carousel.js index a5f1ddcb83895ecc5c9f381959f6eb5c62a307c9..327b44ff819dbfbc40f4946f66f64c1a005886ef 100755 --- a/patterns/molecules/header-blocks/js/header_carousel.js +++ b/patterns/molecules/header-blocks/js/header_carousel.js @@ -48,10 +48,6 @@ runCarouselHeader(); - jQuery(function () { - fixHalfheight(); - }); - var resizeId; $(window).resize(function () { clearTimeout(resizeId); @@ -60,18 +56,9 @@ function doneResizing() { runCarouselHeader(); - fixHalfheight(); } - /* $(window).on('resize', function () { - runCarouselHeader(); - fixHalfheight(); - }); */ - jQuery(window).on("orientationchange", function (event) { - fixHalfheight(); - }); - function runCarouselHeader() { var $owl = $(".header-carousel", context).owlCarousel({ nav: false, @@ -148,44 +135,6 @@ }, 400, 'swing'); }); - /*function scrollTo(element, to, duration) { - var start = document.documentElement.scrollTop, - change = to - start, - currentTime = 0, - increment = 20; - - var animateScroll = function () { - currentTime += increment; - var val = Math.easeInOutQuad(currentTime, start, change, duration); - document.documentElement.scrollTop = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - animateScroll(); - } - - function scrollTo2(element, to, duration) { - var start = document.body.scrollTop, - change = to - start, - currentTime = 0, - increment = 20; - - var animateScroll = function () { - currentTime += increment; - var val = Math.easeInOutQuad(currentTime, start, change, duration); - document.body.scrollTop = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); - } - }; - animateScroll(); - }*/ - - //t = current time - //b = start value - //c = change in value - //d = duration Math.easeInOutQuad = function (t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t + b; @@ -206,56 +155,6 @@ } } - function fixHalfheight() { - jQuery(".header-carousel").each(function () { - var $owl = jQuery(this); - if ($owl.closest('.component-row').hasClass('is_half_height')) { - var owlMinHeight = 0; - var theItem = null; - $owl.find('.owl-item').each(function () { - if (jQuery(this).outerHeight(true) > owlMinHeight) { - owlMinHeight = jQuery(this).find('.header-block__title').outerHeight(true); - theItem = jQuery(this); - jQuery(this).closest('.cern-component-header-blocks').css('height', (Math.round(owlMinHeight) + 25) + 'px'); - } - }); - } - // if ($owl.closest('.field--item')) - if ($owl.closest('.field--item').index() == 0) { - //jQuery("nav.tabs").hide(); - } - setTimeout(function () { - if ($owl.closest('.field--item').index() == 0) { - if (theItem) { - jQuery("nav.tabs").css("top", (theItem.closest('.field--item').next('.field--item').position().top - 15) + "px"); - } - jQuery("nav.tabs").show(); - } - }, 1000); - }); - } - - /* - var $owl = jQuery(this); - if ($owl.closest('.component-row').hasClass('is_half_height')) { - var owlMinHeight = 0; - var theItem = null; - $owl.find('.owl-item').each(function(){ - if (jQuery(this).outerHeight(true) > owlMinHeight) { - owlMinHeight = jQuery(this).find('.header-block__title').outerHeight(true); - theItem = jQuery(this); - jQuery(this).closest('.cern-component-header-blocks').css('height', (Math.round(owlMinHeight) + 25) + 'px'); - jQuery(this).closest('.is_half_height').css('height', (Math.round(owlMinHeight) + 25) + 'px'); - } - }); - //theItem.closest('.cern-component-header-blocks').css('height', (Math.round(owlMinHeight) + 25) + 'px'); - //theItem.closest('.is_half_height').css('height', (Math.round(owlMinHeight) + 25) + 'px'); - if($owl.closest('.field--item').index() == 0) { - jQuery("nav.tabs").css("top", theItem.closest('.field--item').next('.field--item').top()+"px"); - } - } - */ - /* jQuery(function(){}) */ if ($('.cern-component-header-blocks .owl-dots').length > 0) { $('.cern-component-header-blocks .owl-dots .owl-dot').each(function () { diff --git a/patterns/molecules/row/css/row.component.css b/patterns/molecules/row/css/row.component.css old mode 100755 new mode 100644 index 978ddf854ecdf19cb9f537079c828b4966623e77..e146e5e83932587a1962cfcca8ca9ffdb0c434ad --- a/patterns/molecules/row/css/row.component.css +++ b/patterns/molecules/row/css/row.component.css @@ -1,56 +1,35 @@ .component-row__row { - clear: both; -} - -.component-row__row:before, .component-row__row:after { - content: ""; - display: table; -} - -.component-row__row:after { - clear: both; -} + clear: both; } + .component-row__row:before, .component-row__row:after { + content: ""; + display: table; } + .component-row__row:after { + clear: both; } @font-face { font-family: "sourcesans-regular"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/regular.svg#sourcesans-regular") format("svg"); } @font-face { font-family: "sourcesans-semibold"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/semibold.svg#sourcesans-semibold") format("svg"); } @font-face { font-family: "sourcesans-bold"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/bold.svg#sourcesans-bold") format("svg"); } @font-face { font-family: "sourcesans-light"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/sourcesanspro/light.svg#sourcesans-light") format("svg"); } @font-face { font-family: "opensans-regular"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/regular.svg#opensans-regular") format("svg"); } @font-face { font-family: "opensans-semibold"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/semibold.svg#opensans-semibold") format("svg"); } @font-face { font-family: "opensans-bold"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/open-sans/bold.svg#opensans-bold") format("svg"); } @font-face { font-family: "cern-icons"; - src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg"); -} - + src: url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.eot?") format("eot"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff2") format("woff2"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.woff") format("woff"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.ttf") format("truetype"), url("//framework.web.cern.ch/framework/3.0/fonts/cern/cern.svg#cern-icons") format("svg"); } .component-row { box-sizing: border-box; position: relative; @@ -61,89 +40,56 @@ &.is_half_height { min-height: 50vh; } - */ -} - -.component-row *, -.component-row *::after, -.component-row *::before { - box-sizing: border-box; -} - -.component-row__display__centered { - margin: auto; - max-width: 1140px; -} - -.component-row__row { - position: relative; - z-index: 3; -} - -.component-row__row .box-effects-wrapper { - height: 100%; -} - -.component-row__column { - vertical-align: top; -} - -.component-row__sidebar-left { - padding-right: 25px !important; -} - -.component-row__sidebar-right { - padding-left: 25px !important; -} - -.component-row.has_title .component-row__row { - padding-top: 9rem; -} - -.component-row__display__fluid .component-row__image { - position: absolute; - height: 100%; -} - -.component-row__display__fluidcenter .component-row__image { - position: absolute; - height: 100%; -} - -.component-row__display__fluidcenter .component-row__row { - margin: auto; - max-width: 1140px; -} - -.component-row .component-row__column, -.component-row .component-row__row { - height: 100%; -} - -.component-row .row-component-title { - position: absolute; - z-index: 4; - width: 100%; - padding: 0 5%; - text-align: center; - text-transform: uppercase; -} - -.component-row .component-row__image { - position: absolute; - height: 100%; -} - -@media only screen and (min-width: 992px) { - .component-row .attach-bg, - .component-row .attach-bg-force { - background-attachment: fixed !important; - } -} + */ } + .component-row *, + .component-row *::after, + .component-row *::before { + box-sizing: border-box; } + .component-row__display__centered { + margin: auto; + max-width: 1140px; } + .component-row__row { + position: relative; + z-index: 3; } + .component-row__row .box-effects-wrapper { + height: 100%; } + .component-row__column { + vertical-align: top; } + .component-row__sidebar-left { + padding-right: 25px !important; } + .component-row__sidebar-right { + padding-left: 25px !important; } + .component-row.has_title .component-row__row { + padding-top: 9rem; } + .component-row__display__fluid .component-row__image { + position: absolute; + height: 100%; } + .component-row__display__fluidcenter .component-row__image { + position: absolute; + height: 100%; } + .component-row__display__fluidcenter .component-row__row { + margin: auto; + max-width: 1140px; } + .component-row .component-row__column, + .component-row .component-row__row { + height: 100%; } + .component-row .row-component-title { + position: absolute; + z-index: 4; + width: 100%; + padding: 0 5%; + text-align: center; + text-transform: uppercase; } + .component-row .component-row__image { + position: absolute; + height: 100%; } + @media only screen and (min-width: 992px) { + .component-row .attach-bg, + .component-row .attach-bg-force { + background-attachment: fixed !important; } } .component-row.effect_background_rotation .background-component.background__image { - background-size: contain !important; -} + background-size: contain !important; } /* // FULL HEIGHT :: HEIGHT @@ -178,148 +124,97 @@ body.has-header { } */ body:not(.has-header) .component-row.effect_cover_parallax_full { - min-height: calc(100vh - 40px - 111px); -} - + min-height: calc(100vh - 40px - 111px); } body:not(.has-header).sticky-header .component-row.effect_cover_parallax_full { - min-height: calc(100vh - 76px); -} + min-height: calc(100vh - 76px); } body.has-header .component-row.effect_cover_parallax_full { - min-height: calc(100vh - 40px); -} - + min-height: calc(100vh - 40px); } body.has-header.sticky-header .component-row.effect_cover_parallax_full { - min-height: calc(100vh); -} + min-height: calc(100vh); } body.toolbar-fixed .component-row.is_full_height { - height: calc(100vh - 115px); -} + height: calc(100vh - 115px); } body.toolbar-fixed.toolbar-vertical .component-row.is_full_height { - height: calc(100vh - 115px); -} + height: calc(100vh - 115px); } body.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .component-row.is_full_height { - height: calc(100vh - 154px); -} + height: calc(100vh - 154px); } body.cern-toolbar .component-row.is_full_height { - height: calc(100vh - 116px); -} + height: calc(100vh - 116px); } @media only screen and (max-width: 767px) { body.cern-toolbar.toolbar-vertical .component-row.is_full_height .cern-component-header-blocks body.component-header { - height: calc(100vh - 155px); - } -} + height: calc(100vh - 155px); } } body.cern-toolbar.toolbar-fixed .component-row.is_full_height { - height: calc(100vh - 155px); -} + height: calc(100vh - 155px); } body.cern-toolbar.toolbar-fixed.toolbar-vertical .component-row.is_full_height { - height: calc(100vh - 155px); -} + height: calc(100vh - 155px); } body.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .component-row.is_full_height { - height: calc(100vh - 194px); -} + height: calc(100vh - 194px); } body.has-header.toolbar-fixed .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 39px); -} - + height: calc(100vh - 39px); } body.has-header.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 39px); -} - + height: calc(100vh - 39px); } body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 78px); -} - + height: calc(100vh - 78px); } body.has-header.cern-toolbar .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 40px); -} - + height: calc(100vh - 40px); } @media only screen and (max-width: 767px) { body.has-header.cern-toolbar.toolbar-vertical .field--items > .field--item:first-child .component-row.is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); - } -} - + height: calc(100vh - 79px); } } body.has-header.cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 79px); -} - + height: calc(100vh - 79px); } body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 79px); -} - + height: calc(100vh - 79px); } body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 118px); -} - + height: calc(100vh - 118px); } body.has-header.no-admin-toolbar .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 39px) !important; -} + height: calc(100vh - 39px) !important; } body:not(.has-header).toolbar-fixed .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 150px); -} - + height: calc(100vh - 150px); } body:not(.has-header).toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 150px); -} - + height: calc(100vh - 150px); } body:not(.has-header).toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 189px); -} - + height: calc(100vh - 189px); } body:not(.has-header).cern-toolbar .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 151px); -} - + height: calc(100vh - 135px); } @media only screen and (max-width: 767px) { body:not(.has-header).cern-toolbar.toolbar-vertical .field--items > .field--item:first-child .component-row.is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 190px); - } -} - + height: calc(100vh - 190px); } } body:not(.has-header).cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 190px); -} - + height: calc(100vh - 190px); } body:not(.has-header).no-admin-toolbar.cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 150px); -} - + height: calc(100vh - 150px); } body:not(.has-header).cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 190px); -} - + height: calc(100vh - 190px); } body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_full_height { - height: calc(100vh - 229px); -} + height: calc(100vh - 229px); } @media only screen and (min-width: 992px) { body.toolbar-fixed .component-row.is_half_height { min-height: calc((100vh - 115px) / 2); - height: calc((100vh - 115px) / 2); - } + height: calc((100vh - 115px) / 2); } + body.toolbar-fixed.toolbar-vertical .component-row.is_half_height { min-height: calc((100vh - 115px) / 2); - height: calc((100vh - 115px) / 2); - } + height: calc((100vh - 115px) / 2); } + body.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .component-row.is_half_height { min-height: calc((100vh - 154px) / 2); - height: calc((100vh - 154px) / 2); - } + height: calc((100vh - 154px) / 2); } + body.cern-toolbar .component-row.is_half_height { min-height: calc((100vh - 116px) / 2); - height: calc((100vh - 116px) / 2); - } + height: calc((100vh - 116px) / 2); } + /* body.cern-toolbar.toolbar-vertical { @media only screen and (max-width: 767px) { // tool bars: 79px + sticky header: 76px @@ -334,16 +229,16 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie } */ body.cern-toolbar.toolbar-fixed .component-row.is_half_height { min-height: calc((100vh - 155px) / 2); - height: calc((100vh - 155px) / 2); - } + height: calc((100vh - 155px) / 2); } + body.cern-toolbar.toolbar-fixed.toolbar-vertical .component-row.is_half_height { min-height: calc((100vh - 155px) / 2); - height: calc((100vh - 155px) / 2); - } + height: calc((100vh - 155px) / 2); } + body.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .component-row.is_half_height { min-height: calc((100vh - 194px) / 2); - height: calc((100vh - 194px) / 2); - } + height: calc((100vh - 194px) / 2); } + body.has-header { /* &.cern-toolbar.toolbar-vertical { @media only screen and (max-width: 767px) { @@ -358,36 +253,29 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie } } } - } */ - } - body.has-header.toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 39px) / 2); - height: calc((100vh - 39px) / 2); - } - body.has-header.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 39px) / 2); - height: calc((100vh - 39px) / 2); - } - body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 78px) / 2); - height: calc((100vh - 78px) / 2); - } - body.has-header.cern-toolbar .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 40px) / 2); - height: calc((100vh - 40px) / 2); - } - body.has-header.cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 79px) / 2); - height: calc((100vh - 79px) / 2); - } - body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 79px) / 2); - height: calc((100vh - 79px) / 2); - } - body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 118px) / 2); - height: calc((100vh - 118px) / 2); - } + } */ } + body.has-header.toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 39px) / 2); + height: calc((100vh - 39px) / 2); } + body.has-header.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 39px) / 2); + height: calc((100vh - 39px) / 2); } + body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 78px) / 2); + height: calc((100vh - 78px) / 2); } + body.has-header.cern-toolbar .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 40px) / 2); + height: calc((100vh - 40px) / 2); } + body.has-header.cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 79px) / 2); + height: calc((100vh - 79px) / 2); } + body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 79px) / 2); + height: calc((100vh - 79px) / 2); } + body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 118px) / 2); + height: calc((100vh - 118px) / 2); } + body:not(.has-header) { /* &.cern-toolbar.toolbar-vertical { @media only screen and (max-width: 767px) { @@ -402,48 +290,36 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie } } } - } */ - } - body:not(.has-header).toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 150px) / 2); - height: calc((100vh - 150px) / 2); - } - body:not(.has-header).toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 150px) / 2); - height: calc((100vh - 150px) / 2); - } - body:not(.has-header).toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 189px) / 2); - height: calc((100vh - 189px) / 2); - } - body:not(.has-header).cern-toolbar .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 151px) / 2); - height: calc((100vh - 151px) / 2); - } - body:not(.has-header).cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 190px) / 2); - height: calc((100vh - 190px) / 2); - } - body:not(.has-header).cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 190px) / 2); - height: calc((100vh - 190px) / 2); - } - body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { - min-height: calc((100vh - 229px) / 2); - height: calc((100vh - 229px) / 2); - } -} - + } */ } + body:not(.has-header).toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 150px) / 2); + height: calc((100vh - 150px) / 2); } + body:not(.has-header).toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 150px) / 2); + height: calc((100vh - 150px) / 2); } + body:not(.has-header).toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 189px) / 2); + height: calc((100vh - 189px) / 2); } + body:not(.has-header).cern-toolbar .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 151px) / 2); + height: calc((100vh - 151px) / 2); } + body:not(.has-header).cern-toolbar.toolbar-fixed .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 190px) / 2); + height: calc((100vh - 190px) / 2); } + body:not(.has-header).cern-toolbar.toolbar-fixed.toolbar-vertical .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 190px) / 2); + height: calc((100vh - 190px) / 2); } + body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .field--items > .field--item:first-child .component-row.is_half_height { + min-height: calc((100vh - 229px) / 2); + height: calc((100vh - 229px) / 2); } } @media only screen and (max-width: 1245px) { .component-row__display__centered { - margin: 0 3%; - } - .component-row__display__centered .component-row__column { - margin: 0 !important; - } + margin: 0 3%; } + .component-row__display__centered .component-row__column { + margin: 0 !important; } .component-row__display__fluidcenter .component-row__column { - padding: 0 3% !important; - } + padding: 0 3% !important; } + /* .component-row { &__sidebar-left { padding-right: 15px !important; @@ -453,42 +329,29 @@ body:not(.has-header).cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .fie } } */ .has-header .layout__region--content .field--items .field--item:first-child .component-row__display__centered { - margin: 0 !important; - } + margin: 0 !important; } .has-header .layout__region--content .field--items .field--item:first-child .component-row__display__fluidcenter .component-row__column { width: 100%; float: none; - margin: auto; - } -} - + margin: auto; } } @media only screen and (min-width: 992px) { .box-effects-wrapper.enable-effects { - margin-right: -90px; - } -} - + margin-right: -90px; } } @media only screen and (max-width: 991px) { .component-row__sidebar-left { - padding: 0 0 10px !important; - } - .component-row__sidebar-right { - padding: 0 0 10px !important; - } -} + padding: 0 0 10px !important; } + .component-row__sidebar-right { + padding: 0 0 10px !important; } } @media only screen and (max-width: 767px) { .component-row .row-component-title { - font-size: calc(100vh / 20); - } + font-size: calc(100vh / 20); } + .component-row.effect_background_rotation .background__image { right: -50% !important; - opacity: 0.4 !important; - } -} - + opacity: 0.4 !important; } } @media only screen and (min-width: 992px) { .component-row.effect_cover_parallax .background-component { - background-attachment: fixed !important; - } -} + background-attachment: fixed !important; } } + +/*# sourceMappingURL=row.component.css.map */ diff --git a/patterns/molecules/row/row.html.twig b/patterns/molecules/row/row.html.twig index a25eb987760e9f6c920fb216dc508d0078bf928b..2fc3e62cd104bcb4383c0e092c17475037363f5c 100755 --- a/patterns/molecules/row/row.html.twig +++ b/patterns/molecules/row/row.html.twig @@ -35,10 +35,6 @@ {% set attributes_bg_image_attachment = 'scroll' %} -{% if variants.full_height.value == 1 %} - {% set attributes = attributes.addClass('is_full_height') %} -{% endif %} - {% if variants.height.value %} {% set attributes = attributes.addClass(variants.height.value) %} {% endif %} diff --git a/patterns/molecules/row/scss/row.component.scss b/patterns/molecules/row/scss/row.component.scss index f1323c6bcc7c1b6cade8569276399a424b27f900..34f9843f15dd7792ac57482dc172cbc96eb1afa1 100755 --- a/patterns/molecules/row/scss/row.component.scss +++ b/patterns/molecules/row/scss/row.component.scss @@ -404,7 +404,7 @@ body:not(.has-header) { // tool bars: 40px + header: 111px .field--items > .field--item:first-child { .component-row.is_full_height { - height: calc(100vh - 151px); + height: calc(100vh - 135px); } } }