Skip to content
Snippets Groups Projects
Commit 0c4066fe authored by Patrick Groeger's avatar Patrick Groeger
Browse files

[WT-637]Fixed center alignment of image galleries

parent d35e2a09
No related branches found
No related tags found
1 merge request!2Several Fixes
Hide whitespace changes
Inline Side-by-side
patterns/molecules/gallery/css/gallery-component.css
+ 187
− 141
View file @ 0c4066fe
@font-face { @font-face {
font-family: "sourcesans-regular"; 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-face {
font-family: "sourcesans-semibold"; 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-face {
font-family: "sourcesans-bold"; 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-face {
font-family: "sourcesans-light"; 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-face {
font-family: "opensans-regular"; 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-face {
font-family: "opensans-semibold"; 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-face {
font-family: "opensans-bold"; 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-face {
font-family: "cern-icons"; 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 { .component-gallery .owl-stage {
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
position: relative; } position: relative;
.component-gallery .owl-stage .owl-item { }
display: -webkit-box;
display: -moz-box; .component-gallery .owl-stage .owl-item {
display: -ms-flexbox; display: -webkit-box;
display: -webkit-flex; display: -moz-box;
display: flex; display: -ms-flexbox;
min-height: 100%; display: -webkit-flex;
opacity: 0; } display: flex;
.component-gallery .owl-stage .owl-item.active { min-height: 100%;
opacity: 1; opacity: 0;
display: -webkit-box; }
display: -moz-box;
display: -ms-flexbox; .component-gallery .owl-stage .owl-item.active {
display: -webkit-flex; opacity: 1;
display: flex; } display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.component-gallery__item { .component-gallery__item {
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
...@@ -52,7 +74,9 @@ ...@@ -52,7 +74,9 @@
display: flex; display: flex;
min-height: 100%; min-height: 100%;
min-width: 100%; min-width: 100%;
padding-bottom: 35px; } padding-bottom: 35px;
}
.component-gallery__image { .component-gallery__image {
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
...@@ -60,119 +84,132 @@ ...@@ -60,119 +84,132 @@
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
min-height: 100%; min-height: 100%;
min-width: 100%; } min-width: 100%;
.component-gallery__image img { }
max-width: 100%;
max-height: 500px; .component-gallery__image img {
width: auto !important; max-width: 100%;
height: auto !important; max-height: 500px;
top: auto !important; width: auto !important;
position: relative; } height: auto !important;
.component-gallery__image__wrapper, top: auto !important;
.component-gallery__image figure { position: relative;
display: -webkit-box; }
display: -moz-box;
display: -ms-flexbox; .component-gallery__image__wrapper,
display: -webkit-flex; .component-gallery__image figure {
display: flex; display: -webkit-box;
-webkit-align-items: center; display: -moz-box;
-moz-align-items: center; display: -ms-flexbox;
-ms-align-items: center; display: -webkit-flex;
align-items: center; display: flex;
-webkit-align-content: center; -webkit-flex-wrap: wrap;
-moz-align-content: center; -moz-flex-wrap: wrap;
-ms-align-content: center; -ms-flex-wrap: wrap;
align-content: center; flex-wrap: wrap;
-webkit-justify-content: center; -webkit-flex-direction: column;
-moz-justify-content: center; -moz-flex-direction: column;
-ms-justify-content: center; -ms-flex-direction: column;
justify-content: center; flex-direction: column;
-ms-flex-pack: center; min-height: 100%;
-webkit-flex-wrap: wrap; min-width: 100%;
-moz-flex-wrap: wrap; height: auto !important;
-ms-flex-wrap: wrap; margin-bottom: 0 !important;
flex-wrap: wrap; }
-webkit-flex-direction: column;
-moz-flex-direction: column; .component-gallery__image__wrapper img,
-ms-flex-direction: column; .component-gallery__image figure img {
flex-direction: column; margin: 0 !important;
min-height: 100%; position: relative;
min-width: 100%; }
height: auto !important;
margin-bottom: 0 !important; } .component-gallery__image__wrapper a span.cds-background,
.component-gallery__image__wrapper img, .component-gallery__image figure a span.cds-background {
.component-gallery__image figure img { position: absolute !important;
margin: 0 !important; width: 300px !important;
position: relative; } height: 250px !important;
.component-gallery__image__wrapper a span.cds-background, top: calc(50% - 125px);
.component-gallery__image figure a span.cds-background { left: calc(50% - 150px);
position: absolute !important; min-height: 10px !important;
width: 300px !important; }
height: 250px !important;
top: calc(50% - 125px); .component-gallery__image__wrapper figcaption,
left: calc(50% - 150px); .component-gallery__image figure figcaption {
min-height: 10px !important; } filter: alpha(opacity=0);
.component-gallery__image__wrapper figcaption, -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
.component-gallery__image figure figcaption { -webkit-opacity: 0;
filter: alpha(opacity=0); -khtml-opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0;
-webkit-opacity: 0; -ms-opacity: 0;
-khtml-opacity: 0; -o-opacity: 0;
-moz-opacity: 0; opacity: 0;
-ms-opacity: 0; padding: 5px;
-o-opacity: 0; min-width: 200px;
opacity: 0; }
padding: 5px;
min-width: 200px; }
.component-gallery__link { .component-gallery__link {
left: 5px; left: 5px;
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
bottom: 0; } bottom: 0;
.component-gallery__link label { }
display: inline-block;
font-size: 14px; .component-gallery__link label {
font-weight: 600; display: inline-block;
padding: 0 0 0 20px; font-size: 14px;
position: relative; } font-weight: 600;
.component-gallery__link label::before { padding: 0 0 0 20px;
font-size: 36px; position: relative;
font-size: 3.6rem; }
font-family: "cern-icons";
-moz-osx-font-smoothing: grayscale; .component-gallery__link label::before {
-webkit-font-smoothing: antialiased; font-size: 36px;
font-weight: normal; font-size: 3.6rem;
content: '\q'; font-family: "cern-icons";
display: inline-block; -moz-osx-font-smoothing: grayscale;
position: absolute; -webkit-font-smoothing: antialiased;
top: -3px; font-weight: normal;
left: 3px; content: '\q';
line-height: 25px; display: inline-block;
width: 16px; position: absolute;
text-indent: -11px; } top: -3px;
.component-gallery__link a { left: 3px;
display: inline-block; line-height: 25px;
font-size: 14px; width: 16px;
font-weight: 600; text-indent: -11px;
margin: 0 10px; }
position: relative; }
.component-gallery__link a::before { .component-gallery__link a {
background: #292929; display: inline-block;
content: ""; font-size: 14px;
display: block; font-weight: 600;
height: 10px; margin: 0 10px;
left: -14px; position: relative;
position: absolute; }
width: 1px;
top: 4px; } .component-gallery__link a::before {
.component-gallery__link a.component-gallery__link__first::before { background: #292929;
display: none; } content: "";
.component-gallery__link.component-gallery__link__first::before { display: block;
display: none; } 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 { .owl-thumbs {
margin: 0 0 0 -5px; margin: 0 0 0 -5px;
display: inline; } display: inline;
}
button.owl-thumb-item { button.owl-thumb-item {
background: none; background: none;
...@@ -182,21 +219,30 @@ button.owl-thumb-item { ...@@ -182,21 +219,30 @@ button.owl-thumb-item {
height: 100px; height: 100px;
margin: 5px 5px 10px; margin: 5px 5px 10px;
overflow: hidden; overflow: hidden;
position: relative; } position: relative;
button.owl-thumb-item img { }
display: none; }
button.owl-thumb-item img {
display: none;
}
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link label::before { .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link label::before {
top: -10px; top: -10px;
left: 10px; } left: 10px;
}
.component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link label span { .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 { .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link a {
margin: 0 8px; } margin: 0 8px;
.component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link a::before { }
left: -11px; .component-gallery .owl-stage .owl-item .component-gallery__item .component-gallery__link a::before {
top: 4px; } left: -11px;
top: 4px;
}
.component-gallery button.owl-thumb-item { .component-gallery button.owl-thumb-item {
width: 60px; width: 60px;
height: 50px; } } height: 50px;
}
}
patterns/molecules/gallery/sass/gallery-component.scss
+ 0
− 3
View file @ 0c4066fe
...@@ -80,9 +80,6 @@ ...@@ -80,9 +80,6 @@
&__wrapper, &__wrapper,
figure { figure {
@include flexbox; @include flexbox;
@include align-items(center);
@include align-content(center);
@include justify-content(center);
@include flex-wrap(wrap); @include flex-wrap(wrap);
@include flex-direction(column); @include flex-direction(column);
min-height: 100%; min-height: 100%;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment