diff --git a/CHANGELOG.md b/CHANGELOG.md index 886296029e67159508c79ce354d1117a7c4a6fcc..26bd445bb34d2d4880d5e102d836c8924d0ff889 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.3.0] - 21-01-2019 +### Fixed +- Applying 'CDS-loading-error' to all thumbnail items instead of only affected images +- Issue with Preview cards overflowing under mega menu + +### Added +- Text shadow for Hero Frames titles and subtitles + ## [2.2.2] - 16-01-2019 ### Fixed diff --git a/cern_components.info.yml b/cern_components.info.yml index 3ee01a275c06ad520322371f360b036bcdeef97c..6fde5d7b356d61232213d7b6ac9cd26461f50fac 100755 --- a/cern_components.info.yml +++ b/cern_components.info.yml @@ -2,7 +2,7 @@ name: "CERN Components" type: module description: "Provides all the necessary modules regarding CERN Web Components." core: 8.x -version: 2.2.2 +version: 2.3.0 package: CERN Components dependencies: - components:components (>=8.x-1.1-alpha1) diff --git a/patterns/molecules/gallery/css/gallery-component.css b/patterns/molecules/gallery/css/gallery-component.css index e3701d670e04ff7195c5c86ac83e2e05e668e066..fd3452a4265f69b017cccf41bbf99e1e818c4e07 100755 --- a/patterns/molecules/gallery/css/gallery-component.css +++ b/patterns/molecules/gallery/css/gallery-component.css @@ -112,7 +112,6 @@ -ms-flex-direction: column; flex-direction: column; min-height: 100%; - min-width: 100%; height: auto !important; margin-bottom: 0 !important; } diff --git a/patterns/molecules/gallery/js/gallery_carousel.js b/patterns/molecules/gallery/js/gallery_carousel.js index df4e8bacd9b72a12108247fe63b851235200e876..472dfbe899c8c8dfcd87e132a668ebf446edf51b 100755 --- a/patterns/molecules/gallery/js/gallery_carousel.js +++ b/patterns/molecules/gallery/js/gallery_carousel.js @@ -64,10 +64,13 @@ .on('error', function () { $(this).prev('span').removeClass('cds-background-hidden'); $(this).closest('figure').addClass('loading-cds-error'); + var errorurl = $(this).attr('src'); //gets the url which throws the error to find it afterwards in the thumbnail items + $(this).closest('.owl-carousel').find('.owl-thumb-item').each(function () { var background = $(this).attr('style'); - if (background.indexOf("//cds.cern.ch/") >= 0) { + if (background.indexOf(errorurl) >= 0) { $(this).addClass('loading-cds-error'); + return false; //returning false to break out of the each() loop as the thumb item was found } }); }); diff --git a/patterns/molecules/gallery/sass/gallery-component.scss b/patterns/molecules/gallery/sass/gallery-component.scss index 9f32d2d49b2064f69ab66656ac9f1bc39eb41dbc..ba3674c8587ee4c62c6c4b12a6a2272d3efcb44c 100755 --- a/patterns/molecules/gallery/sass/gallery-component.scss +++ b/patterns/molecules/gallery/sass/gallery-component.scss @@ -83,7 +83,6 @@ @include flex-wrap(wrap); @include flex-direction(column); min-height: 100%; - min-width: 100%; height: auto !important; margin-bottom: 0 !important; img { diff --git a/patterns/molecules/header-block/css/header-component.css b/patterns/molecules/header-block/css/header-component.css index 31780d473331beb295a6634a3bb81d0c8c209e17..af3db30c51963d62bbbe840f759826d27b2fe7c8 100755 --- a/patterns/molecules/header-block/css/header-component.css +++ b/patterns/molecules/header-block/css/header-component.css @@ -1,525 +1,360 @@ .cern-component-header-blocks .component-header__carousel { - clear: both; -} - -.cern-component-header-blocks .component-header__carousel:before, .cern-component-header-blocks .component-header__carousel:after { - content: ""; - display: table; -} - -.cern-component-header-blocks .component-header__carousel:after { - clear: both; -} + clear: both; } + .cern-component-header-blocks .component-header__carousel:before, .cern-component-header-blocks .component-header__carousel:after { + content: ""; + display: table; } + .cern-component-header-blocks .component-header__carousel: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__display__fluid .cern-component-header-blocks .component-header__carousel .owl-item { - margin: 0; -} - -.component-row__display__fluid .cern-component-header-blocks .component-header__carousel .owl-item.active { - margin: 0px -2px -2px -2px; - width: calc(100vw + 4px) !important; -} + margin: 0; } + .component-row__display__fluid .cern-component-header-blocks .component-header__carousel .owl-item.active { + margin: 0px -2px -2px -2px; + width: calc(100vw + 4px) !important; } .cern-component-header-blocks *, .cern-component-header-blocks *::after, .cern-component-header-blocks *::before { - box-sizing: border-box; -} - + box-sizing: border-box; } .cern-component-header-blocks.component-header { height: 100vh; width: 100%; - position: relative; -} - + position: relative; } .cern-component-header-blocks .component-header__carousel { height: 100%; width: 100%; font-family: 'sourcesans-regular'; - position: relative; -} - -.cern-component-header-blocks .component-header__carousel .owl-stage-outer { - height: 100%; - width: 100%; -} - -.cern-component-header-blocks .component-header__carousel .owl-stage { - height: 100%; - width: 100%; -} - -.cern-component-header-blocks .component-header__carousel .owl-item { - position: relative; - height: 100%; - width: 100%; - filter: alpha(opacity=0); - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - -webkit-opacity: 0; - -khtml-opacity: 0; - -moz-opacity: 0; - -ms-opacity: 0; - -o-opacity: 0; - opacity: 0; -} - -.cern-component-header-blocks .component-header__carousel .owl-item.active { - filter: alpha(opacity=100); - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - -webkit-opacity: 1; - -khtml-opacity: 1; - -moz-opacity: 1; - -ms-opacity: 1; - -o-opacity: 1; - opacity: 1; -} - -.cern-component-header-blocks .component-header__carousel .header-block { - min-height: 100%; - min-width: 100%; -} - -.cern-component-header-blocks .component-header__carousel .header-block__veil { - min-height: 100%; - position: absolute; - z-index: 0; - min-width: 100%; - background-color: rgba(13, 13, 13, 0.5); - z-index: 0; -} - -.cern-component-header-blocks .component-header__carousel .header-block .background__image, -.cern-component-header-blocks .component-header__carousel .header-block .background__cds_media { - position: absolute; - min-height: 100%; - min-width: 100%; -} - -.cern-component-header-blocks .component-header__carousel .header-block .background__image figure.cds-image img, -.cern-component-header-blocks .component-header__carousel .header-block .background__cds_media figure.cds-image img { - position: absolute !important; -} - -.cern-component-header-blocks .component-header__carousel .header-block__video { - min-height: 100%; -} - -.cern-component-header-blocks .component-header__carousel .header-block__title { - position: absolute; - z-index: 10; - padding: 0 10%; - right: 0; - left: 0; - margin: 120px auto 0; - color: white; -} - -@media only screen and (max-width: 991px) and (min-width: 768px) { - .cern-component-header-blocks .component-header__carousel .header-block__title { - margin: 180px auto 0; - } -} - -.cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name { - font-family: opensans-bold; - font-weight: 500; - font-size: 39px; - line-height: 1; - margin: 0 0 50px; - position: relative; - text-align: center; -} - -.cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name a { - position: relative; -} - -.cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name a:after { - -webkit-transition: all 0.3s ease-in-out 0s; - -khtml-transition: all 0.3s ease-in-out 0s; - -moz-transition: all 0.3s ease-in-out 0s; - -ms-transition: all 0.3s ease-in-out 0s; - -o-transition: all 0.3s ease-in-out 0s; - transition: all 0.3s ease-in-out 0s; - content: ""; - display: block; - height: 2px; - position: absolute; - width: 0px; - left: 0; - margin: auto; - bottom: -10px; -} - -.cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name a:hover:after { - width: 100%; -} - -.cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name__underline { - content: ""; - display: block; - height: 2px; - position: absolute; - width: 135px; - right: 0; - left: 0; - margin: auto; - bottom: -23px; -} - -@media only screen and (max-width: 991px) { - .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name { - font-size: calc(100vh / 20); - margin-bottom: calc(100vh / 20); - } -} - -.cern-component-header-blocks .component-header__carousel .header-block__subhead { - color: white; -} - -.cern-component-header-blocks .component-header__carousel .header-block__subhead hr { - width: 135px; - border-top-width: 2px; -} - -@media only screen and (max-width: 991px) { - .cern-component-header-blocks .component-header__carousel .header-block__subhead p { - margin: 0 0 5px; - } - .cern-component-header-blocks .component-header__carousel .header-block__subhead h1, - .cern-component-header-blocks .component-header__carousel .header-block__subhead h2, - .cern-component-header-blocks .component-header__carousel .header-block__subhead h3 { - font-size: calc(100vh / 20) !important; - } -} - -.cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb { - text-align: center; - background: transparent; -} - -.cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb li:not(:first-child):before { - content: '\6a'; - font-family: "cern-icons"; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - position: relative; - top: 5px; - font-size: 1.3em; - padding: 0; -} - -.cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb li a:hover { - text-decoration: none; -} - -.cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb * { - color: inherit; -} - -.cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb *:before { - color: inherit; -} - -.cern-component-header-blocks .component-header__carousel .header-block b.highlight { - background: #0855a0; -} - -.cern-component-header-blocks .component-header__carousel .owl-dots { - position: absolute; - left: 10%; - bottom: 25px; -} - -.cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot { - -webkit-border-radius: 50%; - -khtml-border-radius: 50%; - -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; - border-radius: 50%; - height: 18px; - margin: 0 10px; - width: 18px; - position: relative; - top: 2px; -} - -.cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot span { - -webkit-border-radius: 50%; - -khtml-border-radius: 50%; - -moz-border-radius: 50%; - -ms-border-radius: 50%; - -o-border-radius: 50%; - border-radius: 50%; - filter: alpha(opacity=100); - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - -webkit-opacity: 1; - -khtml-opacity: 1; - -moz-opacity: 1; - -ms-opacity: 1; - -o-opacity: 1; - opacity: 1; - height: 8px; - margin: 3px auto 0; - padding: 0; - width: 8px; -} - -.cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot.active, .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot:hover { - border: 2px solid; - top: 0; -} - + position: relative; } + .cern-component-header-blocks .component-header__carousel .owl-stage-outer { + height: 100%; + width: 100%; } + .cern-component-header-blocks .component-header__carousel .owl-stage { + height: 100%; + width: 100%; } + .cern-component-header-blocks .component-header__carousel .owl-item { + position: relative; + height: 100%; + width: 100%; + filter: alpha(opacity=0); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + -webkit-opacity: 0; + -khtml-opacity: 0; + -moz-opacity: 0; + -ms-opacity: 0; + -o-opacity: 0; + opacity: 0; } + .cern-component-header-blocks .component-header__carousel .owl-item.active { + filter: alpha(opacity=100); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + -webkit-opacity: 1; + -khtml-opacity: 1; + -moz-opacity: 1; + -ms-opacity: 1; + -o-opacity: 1; + opacity: 1; } + .cern-component-header-blocks .component-header__carousel .header-block { + min-height: 100%; + min-width: 100%; } + .cern-component-header-blocks .component-header__carousel .header-block__veil { + min-height: 100%; + position: absolute; + z-index: 0; + min-width: 100%; + background-color: rgba(13, 13, 13, 0.5); + z-index: 0; } + .cern-component-header-blocks .component-header__carousel .header-block .background__image, + .cern-component-header-blocks .component-header__carousel .header-block .background__cds_media { + position: absolute; + min-height: 100%; + min-width: 100%; } + .cern-component-header-blocks .component-header__carousel .header-block .background__image figure.cds-image img, + .cern-component-header-blocks .component-header__carousel .header-block .background__cds_media figure.cds-image img { + position: absolute !important; } + .cern-component-header-blocks .component-header__carousel .header-block__video { + min-height: 100%; } + .cern-component-header-blocks .component-header__carousel .header-block__title { + position: absolute; + z-index: 10; + padding: 0 10%; + right: 0; + left: 0; + margin: 120px auto 0; + color: white; + text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; } + @media only screen and (max-width: 991px) and (min-width: 768px) { + .cern-component-header-blocks .component-header__carousel .header-block__title { + margin: 180px auto 0; } } + .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name { + font-family: opensans-bold; + font-weight: 500; + font-size: 39px; + line-height: 1; + margin: 0 0 50px; + position: relative; + text-align: center; } + .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name a { + position: relative; } + .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name a:after { + -webkit-transition: all 0.3s ease-in-out 0s; + -khtml-transition: all 0.3s ease-in-out 0s; + -moz-transition: all 0.3s ease-in-out 0s; + -ms-transition: all 0.3s ease-in-out 0s; + -o-transition: all 0.3s ease-in-out 0s; + transition: all 0.3s ease-in-out 0s; + content: ""; + display: block; + height: 2px; + position: absolute; + width: 0px; + left: 0; + margin: auto; + bottom: -10px; } + .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name a:hover:after { + width: 100%; } + .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name__underline { + content: ""; + display: block; + height: 2px; + position: absolute; + width: 135px; + right: 0; + left: 0; + margin: auto; + bottom: -23px; } + @media only screen and (max-width: 991px) { + .cern-component-header-blocks .component-header__carousel .header-block__title h3.header-block__name { + font-size: calc(100vh / 20); + margin-bottom: calc(100vh / 20); } } + .cern-component-header-blocks .component-header__carousel .header-block__subhead { + color: white; } + .cern-component-header-blocks .component-header__carousel .header-block__subhead hr { + width: 135px; + border-top-width: 2px; } + @media only screen and (max-width: 991px) { + .cern-component-header-blocks .component-header__carousel .header-block__subhead p { + margin: 0 0 5px; } + .cern-component-header-blocks .component-header__carousel .header-block__subhead h1, + .cern-component-header-blocks .component-header__carousel .header-block__subhead h2, + .cern-component-header-blocks .component-header__carousel .header-block__subhead h3 { + font-size: calc(100vh / 20) !important; } } + .cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb { + text-align: center; + background: transparent; } + .cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb li:not(:first-child):before { + content: '\6a'; + font-family: "cern-icons"; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + position: relative; + top: 5px; + font-size: 1.3em; + padding: 0; } + .cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb li a:hover { + text-decoration: none; } + .cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb * { + color: inherit; } + .cern-component-header-blocks .component-header__carousel .header-block ol.breadcrumb *:before { + color: inherit; } + .cern-component-header-blocks .component-header__carousel .header-block b.highlight { + background: #0855a0; } + .cern-component-header-blocks .component-header__carousel .owl-dots { + position: absolute; + left: 10%; + bottom: 25px; } + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot { + -webkit-border-radius: 50%; + -khtml-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + border-radius: 50%; + height: 18px; + margin: 0 10px; + width: 18px; + position: relative; + top: 2px; } + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot span { + -webkit-border-radius: 50%; + -khtml-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + border-radius: 50%; + filter: alpha(opacity=100); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + -webkit-opacity: 1; + -khtml-opacity: 1; + -moz-opacity: 1; + -ms-opacity: 1; + -o-opacity: 1; + opacity: 1; + height: 8px; + margin: 3px auto 0; + padding: 0; + width: 8px; } + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot.active, .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot:hover { + border: 2px solid; + top: 0; } .cern-component-header-blocks .component-header__scroll { display: block; position: absolute; right: 0; left: 0; margin: auto; - bottom: 30px; -} + bottom: 30px; } body.has-header.toolbar-fixed .cern-component-header-blocks.component-header { - height: calc(100vh - 39px); -} - + height: calc(100vh - 39px); } body.has-header.toolbar-fixed.toolbar-vertical .cern-component-header-blocks.component-header { - height: calc(100vh - 39px); -} - + height: calc(100vh - 39px); } body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .cern-component-header-blocks.component-header { - height: calc(100vh - 78px); -} - + height: calc(100vh - 78px); } body.has-header.cern-toolbar .cern-component-header-blocks.component-header { - height: calc(100vh - 40px); -} - + height: calc(100vh - 40px); } @media only screen and (max-width: 767px) { body.has-header.cern-toolbar.toolbar-vertical .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); - } -} - + height: calc(100vh - 79px); } } body.has-header.cern-toolbar.toolbar-fixed .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); -} - + height: calc(100vh - 79px); } body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); -} - + height: calc(100vh - 79px); } body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .cern-component-header-blocks.component-header { - height: calc(100vh - 118px); -} + height: calc(100vh - 118px); } body.has-header.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 39px); -} - + height: calc(100vh - 39px); } body.has-header.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 39px); -} - + height: calc(100vh - 39px); } body.has-header.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 78px); -} - + height: calc(100vh - 78px); } body.has-header.cern-toolbar .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 40px); -} - + height: calc(100vh - 40px); } @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); - } -} - + height: calc(100vh - 79px); } } body.has-header.cern-toolbar.toolbar-fixed .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); -} - + height: calc(100vh - 79px); } body.has-header.cern-toolbar.toolbar-fixed.toolbar-vertical .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 79px); -} - + height: calc(100vh - 79px); } body.has-header.cern-toolbar:not(.toolbar-vertical).toolbar-tray-open .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 118px); -} - + height: calc(100vh - 118px); } body.has-header.no-admin-toolbar .is_full_height .cern-component-header-blocks.component-header { - height: calc(100vh - 39px) !important; -} + height: calc(100vh - 39px) !important; } body.toolbar-fixed .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 39px) / 2); - min-height: calc((100vh - 39px) / 2); -} - + min-height: calc((100vh - 39px) / 2); } body.toolbar-fixed.toolbar-vertical .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 39px) / 2); - min-height: calc((100vh - 39px) / 2); -} - + min-height: calc((100vh - 39px) / 2); } body.toolbar-fixed:not(.toolbar-vertical).toolbar-tray-open .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 78px) / 2); - min-height: calc((100vh - 78px) / 2); -} - + min-height: calc((100vh - 78px) / 2); } body.cern-toolbar .is_half_height .cern-component-header-blocks.component-header { height: calc((100vh - 40px) / 2); - min-height: calc((100vh - 40px) / 2); -} - + min-height: calc((100vh - 40px) / 2); } @media only screen and (max-width: 767px) { body.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.cern-toolbar.toolbar-fixed .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.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); -} - + min-height: calc((100vh - 79px) / 2); } body.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); -} + min-height: calc((100vh - 118px) / 2); } @media only screen and (max-width: 991px) and (min-width: 767px) { .cern-component-header-blocks { - position: relative; - } -} - + position: relative; } } @media only screen and (max-width: 767px) { .cern-component-header-blocks { - position: relative; - } - .cern-component-header-blocks .component-header__carousel .header-block__title { - margin: 85px auto 0; - padding: 0 5%; - } - .cern-component-header-blocks .component-header__carousel .header-block__name { - font-size: 40px; - font-size: 4rem; - } - .cern-component-header-blocks .component-header__carousel .header-block__subhead { - line-height: 1.2; - font-size: 14px; - } - .cern-component-header-blocks .component-header__carousel .owl-controls, - .cern-component-header-blocks .component-header__carousel .owl-dots { - position: absolute; - left: 5px; - bottom: 25px; - right: 0; - margin: auto; - text-align: left; - } - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page, - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot { - height: 25px; - margin: 0 2px; - width: 25px; - top: 0; - } - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page span, - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot span, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page span, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot span { - height: 17px; - width: 17px; - } - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page.active, .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page:hover, - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot.active, - .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot:hover, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page.active, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page:hover, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot.active, - .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot:hover { - top: -1px; - border: 1px solid; - } - .cern-component-header-blocks .component-header__scroll { - transform: scale(0.7, 0.7); - } -} - + position: relative; } + .cern-component-header-blocks .component-header__carousel .header-block__title { + margin: 85px auto 0; + padding: 0 5%; } + .cern-component-header-blocks .component-header__carousel .header-block__name { + font-size: 40px; + font-size: 4rem; } + .cern-component-header-blocks .component-header__carousel .header-block__subhead { + line-height: 1.2; + font-size: 14px; } + .cern-component-header-blocks .component-header__carousel .owl-controls, + .cern-component-header-blocks .component-header__carousel .owl-dots { + position: absolute; + left: 5px; + bottom: 25px; + right: 0; + margin: auto; + text-align: left; } + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page, + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot { + height: 25px; + margin: 0 2px; + width: 25px; + top: 0; } + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page span, + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot span, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page span, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot span { + height: 17px; + width: 17px; } + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page.active, .cern-component-header-blocks .component-header__carousel .owl-controls .owl-page:hover, + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot.active, + .cern-component-header-blocks .component-header__carousel .owl-controls .owl-dot:hover, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page.active, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-page:hover, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot.active, + .cern-component-header-blocks .component-header__carousel .owl-dots .owl-dot:hover { + top: -1px; + border: 1px solid; } + .cern-component-header-blocks .component-header__scroll { + transform: scale(0.7, 0.7); } } @media screen and (max-width: 479px) { .cern-component-header-blocks .component-header__carousel .owl-dots { - bottom: 45px; - } + bottom: 45px; } + .component-header__scroll { - display: none; - } + display: none; } + /* dots on half-height header */ .is_half_height .cern-component-header-blocks .component-header__carousel .owl-dots { - bottom: 25px; - } -} - + bottom: 25px; } } @media screen and (max-height: 360px) { .cern-component-header-blocks .component-header__scroll { - display: none; - } -} - + display: none; } } .header-block { - color: transparent; -} + color: transparent; } + .header-block .header-block__title { + color: white; } -.header-block .header-block__title { - color: white; -} +/*# sourceMappingURL=header-component.css.map */ diff --git a/patterns/molecules/header-block/sass/header-component.scss b/patterns/molecules/header-block/sass/header-component.scss index dc2180d035c077fb345ef7d214218c6ff32553db..97c16c409d4a2704486ef09226e7c9cb383e8111 100755 --- a/patterns/molecules/header-block/sass/header-component.scss +++ b/patterns/molecules/header-block/sass/header-component.scss @@ -139,6 +139,7 @@ left: 0; margin: 120px auto 0; color: white; + text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; @media only screen and (max-width: 991px) and (min-width: 768px) { margin: 180px auto 0;