273 lines
8.3 KiB
SCSS
Executable File
273 lines
8.3 KiB
SCSS
Executable File
// COLUMN LAYOUT
|
|
.sek-gal-wrapper {
|
|
&:not(.nb-auto-column-width) {//<= classes added by nb pro when auto-fill option is enabled
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.sek-gal-items {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 1fr 20px 1fr;
|
|
grid-template-columns: 1fr 1fr;
|
|
-ms-grid-rows: 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-row-gap: 20px;
|
|
grid-column-gap: 20px;
|
|
// Fix for ie11. @see https://github.com/presscustomizr/nimble-builder/issues/450
|
|
@media all and (-ms-high-contrast:none) {
|
|
display: block!important;
|
|
}
|
|
}
|
|
// The following has been added automatically when autoprefixing with https://autoprefixer.github.io/
|
|
// not sure why...
|
|
.sek-gal-items > *:nth-child(1) {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.sek-gal-items > *:nth-child(2) {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 3;
|
|
}
|
|
|
|
// images
|
|
.sek-img-gal-item {
|
|
-webkit-transition: all 0.15s ease-in-out;
|
|
-moz-transition: all, 0.15s ease-in-out;
|
|
-ms-transition: all, 0.15s ease-in-out;
|
|
-o-transition: all, 0.15s ease-in-out;
|
|
transition: all 0.15s ease-in-out;
|
|
overflow: hidden;
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
&:hover {
|
|
opacity: .9;
|
|
}
|
|
}
|
|
}//.sek-post-grid-wrapper COLUMN LAYOUT
|
|
|
|
// Item box shadow
|
|
.sek-module-inner .nb-gal-item-box-shadow .sek-gal-items figure {
|
|
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
|
|
// Masonry
|
|
.sek-module-inner .nb-masonry-gal-grid {
|
|
// &.nb-waiting-for-images-to-be-loaded {
|
|
// article figure {
|
|
// a {
|
|
// height: auto!important;
|
|
// padding-top: 0!important;
|
|
// }
|
|
// img {
|
|
// position: relative;
|
|
// height: auto;
|
|
// }
|
|
// }
|
|
|
|
.sek-gal-items {
|
|
//display: grid;
|
|
// grid-gap: 10px;
|
|
//grid-template-columns: repeat(auto-fill, minmax(250px,1fr))!important;
|
|
//grid-auto-rows: 5px;
|
|
&.nb-masonry-gal-images-loaded {
|
|
grid-auto-rows: 5px;
|
|
}
|
|
.sek-img-gal-item {
|
|
img {
|
|
height: auto;
|
|
}
|
|
}
|
|
// CSS class added while resizing masonry gallery
|
|
// => let img have a natural height so NB can determine the height when resizing
|
|
&.sek-gal-img-natural-height {
|
|
img {
|
|
height: auto!important;
|
|
}
|
|
}
|
|
// CSS class added when masonry resizing is complete
|
|
&.sek-gal-img-height-100-percent {
|
|
img {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// synchronized with default on registration
|
|
// [data-sek-module-type="czr_accordion_module"] .#{$project-prefix}module-inner {
|
|
// text-align: center;
|
|
// }
|
|
/*************************************
|
|
* ACCORDION MODULE
|
|
*************************************/
|
|
// .sek-accord-wrapper {
|
|
// text-align: left;
|
|
// .sek-accord-item {
|
|
// border: 1px solid #e3e3e3;//consistent with default on registration
|
|
// overflow: hidden;
|
|
// &:not(:last-child) {
|
|
// margin-bottom: 0px;//space between items, consistent with defaults on registration
|
|
// }
|
|
// .sek-accord-title {
|
|
// cursor: pointer;
|
|
// color: #565656;//consistent with default on registration
|
|
// background: #ffffff;//consistent with default on registration
|
|
// display: -webkit-box;
|
|
// display: -ms-flexbox;
|
|
// display: flex;
|
|
// -webkit-box-align: center;
|
|
// -ms-flex-align: center;
|
|
// align-items: center;
|
|
// -webkit-box-pack: justify;
|
|
// -ms-flex-pack: justify;
|
|
// justify-content: space-between;
|
|
|
|
// padding: 15px 20px;
|
|
|
|
// border-top: none;
|
|
// border-right: none;
|
|
// border-left: none;
|
|
// border-bottom: 1px solid #e3e3e3;//consistent with default on registration
|
|
// font-size: 16px;
|
|
// line-height: 1.5em;
|
|
// font-weight: 600;
|
|
// -webkit-box-flex: 1;
|
|
// -ms-flex-positive: 1;
|
|
// flex-grow: 1;
|
|
|
|
// // Default active color and button bg
|
|
// &:hover * {
|
|
// color: #1e261f;//consistent with default on registration
|
|
// }
|
|
// &:hover .expander span {
|
|
// background:#1e261f//consistent with default on registration
|
|
// }
|
|
// @at-root [data-sek-expanded="true"] {
|
|
// .sek-accord-title * {
|
|
// color: #1e261f;//consistent with default on registration
|
|
// }
|
|
// .sek-accord-title .expander span {
|
|
// background:#1e261f//consistent with default on registration
|
|
// }
|
|
// }
|
|
|
|
|
|
// .sek-inner-accord-title {
|
|
// padding-right: 10px;
|
|
// max-width: calc(100% - 30px);
|
|
// }
|
|
|
|
// .sek-inner-accord-title, .expander span {
|
|
// -webkit-transition: all 0.15s ease-in-out;
|
|
// -moz-transition: all, 0.15s ease-in-out;
|
|
// -ms-transition: all, 0.15s ease-in-out;
|
|
// -o-transition: all, 0.15s ease-in-out;
|
|
// transition: all 0.15s ease-in-out;
|
|
// }
|
|
// // morphing + / -
|
|
// // inspired from https://stackoverflow.com/questions/38136077/how-to-morph-a-plus-sign-to-a-minus-sign-using-css-transition
|
|
// .expander {
|
|
// color: #1e261f;//consistent with default on registration
|
|
// width: 30px;
|
|
// height: 30px;
|
|
// // reset some properties
|
|
// padding: 0;
|
|
// margin: 0;
|
|
// outline: none;
|
|
// border: 0;
|
|
// background: none;
|
|
|
|
// -webkit-box-shadow: none;
|
|
// box-shadow: none;
|
|
// font-size: 1.5em;
|
|
// position: relative;
|
|
// cursor: pointer;
|
|
// }
|
|
|
|
// .expander span {
|
|
// position: absolute;
|
|
// -webkit-transition: .3s;
|
|
// -o-transition: .3s;
|
|
// transition: .3s;
|
|
// background: #565656;//consistent with default on registration
|
|
// border-radius: 2px;
|
|
// }
|
|
|
|
// .expander span:first-of-type {
|
|
// top: 25%;
|
|
// bottom: 25%;
|
|
// width: 10%;
|
|
// left: 45%;
|
|
// }
|
|
|
|
// .expander span:last-of-type {
|
|
// left: 25%;
|
|
// right: 25%;
|
|
// height: 10%;
|
|
// top: 45%;
|
|
// }
|
|
|
|
// @at-root [data-sek-expanded="true"] {
|
|
// .expander span:first-of-type, .expander span:last-of-type {
|
|
// -webkit-transform: rotate(90deg);
|
|
// -ms-transform: rotate(90deg);
|
|
// transform: rotate(90deg);
|
|
// }
|
|
// .expander span:last-of-type {
|
|
// left: 50%;
|
|
// right: 50%;
|
|
// }
|
|
// }
|
|
// }//.sek-accord-title
|
|
|
|
|
|
// // make sure we don't have a double bottom border when the item is collapsed
|
|
// @at-root [data-sek-has-global-border="true"][data-sek-has-title-border="true"] [data-sek-expanded="false"] .sek-accord-title {
|
|
// border-bottom: none;
|
|
// }
|
|
|
|
// @at-root [data-sek-has-global-border="true"][data-sek-has-title-border="true"] .sek-accord-item:not(:last-child) {
|
|
// border-bottom: none;
|
|
// }
|
|
|
|
// &[data-sek-expanded="true"] .sek-accord-title {
|
|
// .expander span:first-of-type, .expander span:last-of-type {
|
|
// -webkit-transform: rotate(90deg);
|
|
// -ms-transform: rotate(90deg);
|
|
// transform: rotate(90deg);
|
|
// }
|
|
// .expander span:last-of-type {
|
|
// left: 50%;
|
|
// right: 50%;
|
|
// }
|
|
// }
|
|
|
|
// .sek-accord-content {
|
|
// padding: 15px 20px;
|
|
// background: #f2f2f2;
|
|
// color: #1e261f;
|
|
// font-size: 16px;
|
|
// line-height: 1.5em;
|
|
// }
|
|
// &[data-sek-expanded="true"] > .sek-accord-content {
|
|
// display: block;
|
|
// }
|
|
// &[data-sek-expanded="false"] > .sek-accord-content {
|
|
// display: none;
|
|
// }
|
|
|
|
// }
|
|
// } |