diff --git a/patterns/molecules/gallery/css/gallery-component.css b/patterns/molecules/gallery/css/gallery-component.css index 73be41868eb8f688fd3be9a3f1225652937d1d15..e3701d670e04ff7195c5c86ac83e2e05e668e066 100755 --- a/patterns/molecules/gallery/css/gallery-component.css +++ b/patterns/molecules/gallery/css/gallery-component.css @@ -1,49 +1,71 @@ @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-gallery .owl-stage { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; - position: relative; } - .component-gallery .owl-stage .owl-item { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - min-height: 100%; - opacity: 0; } - .component-gallery .owl-stage .owl-item.active { - opacity: 1; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; } + position: relative; +} + +.component-gallery .owl-stage .owl-item { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + min-height: 100%; + opacity: 0; +} + +.component-gallery .owl-stage .owl-item.active { + opacity: 1; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + .component-gallery__item { display: -webkit-box; display: -moz-box; @@ -52,7 +74,9 @@ display: flex; min-height: 100%; min-width: 100%; - padding-bottom: 35px; } + padding-bottom: 35px; +} + .component-gallery__image { display: -webkit-box; display: -moz-box; @@ -60,119 +84,132 @@ display: -webkit-flex; display: flex; min-height: 100%; - min-width: 100%; } - .component-gallery__image img { - max-width: 100%; - max-height: 500px; - width: auto !important; - height: auto !important; - top: auto !important; - position: relative; } - .component-gallery__image__wrapper, - .component-gallery__image figure { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - -moz-align-items: center; - -ms-align-items: center; - align-items: center; - -webkit-align-content: center; - -moz-align-content: center; - -ms-align-content: center; - align-content: center; - -webkit-justify-content: center; - -moz-justify-content: center; - -ms-justify-content: center; - justify-content: center; - -ms-flex-pack: center; - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-flex-direction: column; - -moz-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - min-height: 100%; - min-width: 100%; - height: auto !important; - margin-bottom: 0 !important; } - .component-gallery__image__wrapper img, - .component-gallery__image figure img { - margin: 0 !important; - position: relative; } - .component-gallery__image__wrapper a span.cds-background, - .component-gallery__image figure a span.cds-background { - position: absolute !important; - width: 300px !important; - height: 250px !important; - top: calc(50% - 125px); - left: calc(50% - 150px); - min-height: 10px !important; } - .component-gallery__image__wrapper figcaption, - .component-gallery__image figure figcaption { - 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; - padding: 5px; - min-width: 200px; } + min-width: 100%; +} + +.component-gallery__image img { + max-width: 100%; + max-height: 500px; + width: auto !important; + height: auto !important; + top: auto !important; + position: relative; +} + +.component-gallery__image__wrapper, +.component-gallery__image figure { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + min-height: 100%; + min-width: 100%; + height: auto !important; + margin-bottom: 0 !important; +} + +.component-gallery__image__wrapper img, +.component-gallery__image figure img { + margin: 0 !important; + position: relative; +} + +.component-gallery__image__wrapper a span.cds-background, +.component-gallery__image figure a span.cds-background { + position: absolute !important; + width: 300px !important; + height: 250px !important; + top: calc(50% - 125px); + left: calc(50% - 150px); + min-height: 10px !important; +} + +.component-gallery__image__wrapper figcaption, +.component-gallery__image figure figcaption { + 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; + padding: 5px; + min-width: 200px; +} + .component-gallery__link { left: 5px; min-width: 100%; position: absolute; - bottom: 0; } - .component-gallery__link label { - display: inline-block; - font-size: 14px; - font-weight: 600; - padding: 0 0 0 20px; - position: relative; } - .component-gallery__link label::before { - font-size: 36px; - font-size: 3.6rem; - font-family: "cern-icons"; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-weight: normal; - content: '\q'; - display: inline-block; - position: absolute; - top: -3px; - left: 3px; - line-height: 25px; - width: 16px; - text-indent: -11px; } - .component-gallery__link a { - display: inline-block; - font-size: 14px; - font-weight: 600; - margin: 0 10px; - position: relative; } - .component-gallery__link a::before { - background: #292929; - content: ""; - display: block; - height: 10px; - left: -14px; - position: absolute; - width: 1px; - top: 4px; } - .component-gallery__link a.component-gallery__link__first::before { - display: none; } - .component-gallery__link.component-gallery__link__first::before { - display: none; } + bottom: 0; +} + +.component-gallery__link label { + display: inline-block; + font-size: 14px; + font-weight: 600; + padding: 0 0 0 20px; + position: relative; +} + +.component-gallery__link label::before { + font-size: 36px; + font-size: 3.6rem; + font-family: "cern-icons"; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-weight: normal; + content: '\q'; + display: inline-block; + position: absolute; + top: -3px; + left: 3px; + line-height: 25px; + width: 16px; + text-indent: -11px; +} + +.component-gallery__link a { + display: inline-block; + font-size: 14px; + font-weight: 600; + margin: 0 10px; + position: relative; +} + +.component-gallery__link a::before { + background: #292929; + content: ""; + display: block; + height: 10px; + left: -14px; + position: absolute; + width: 1px; + top: 4px; +} + +.component-gallery__link a.component-gallery__link__first::before { + display: none; +} + +.component-gallery__link.component-gallery__link__first::before { + display: none; +} .owl-thumbs { margin: 0 0 0 -5px; - display: inline; } + display: inline; +} button.owl-thumb-item { background: none; @@ -182,21 +219,30 @@ button.owl-thumb-item { height: 100px; margin: 5px 5px 10px; overflow: hidden; - position: relative; } - button.owl-thumb-item img { - display: none; } + position: relative; +} + +button.owl-thumb-item img { + display: none; +} @media only screen and (max-width: 767px) { .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link label::before { top: -10px; - left: 10px; } + left: 10px; + } .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link label span { - display: none; } + display: none; + } .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link a { - margin: 0 8px; } - .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link a::before { - left: -11px; - top: 4px; } + margin: 0 8px; + } + .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link a::before { + left: -11px; + top: 4px; + } .component-gallery button.owl-thumb-item { width: 60px; - height: 50px; } } + height: 50px; + } +} diff --git a/patterns/molecules/gallery/sass/gallery-component.scss b/patterns/molecules/gallery/sass/gallery-component.scss index 4e1a3165ec2138c9627b674c9209481ead2565a5..9f32d2d49b2064f69ab66656ac9f1bc39eb41dbc 100755 --- a/patterns/molecules/gallery/sass/gallery-component.scss +++ b/patterns/molecules/gallery/sass/gallery-component.scss @@ -80,9 +80,6 @@ &__wrapper, figure { @include flexbox; - @include align-items(center); - @include align-content(center); - @include justify-content(center); @include flex-wrap(wrap); @include flex-direction(column); min-height: 100%;