first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,71 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* <GLOBAL RESET>
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// SHOULD BE PRINTED WHEN NIMBLE BUILDER HEADER AND FOOTER IS USED ONLY
|
||||
// May 2020 : the global reset is added
|
||||
// It is normally implemented in a well designed theme
|
||||
// Nimble Builder will propose options to dequeue theme stylesheet in the future, which makes it crucial to have our own reset embedded.
|
||||
html {
|
||||
min-height: 100vh;//<= shall we include this ?
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
// https://css-tricks.com/box-sizing/#article-header-id-3
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit; //<= because defined as 'border-box' for html element
|
||||
}
|
||||
// Note: The use of <meta name="viewport"> tag overrides @viewport
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;//fill the viewport, even when empty
|
||||
scroll-behavior: smooth;
|
||||
// System Fonts as used by GitHub
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
//Using optimizeLegibility makes your text look nicer, but can have serious performance issues
|
||||
//https://dev.to/hankchizljaw/a-modern-css-reset-6p3
|
||||
text-rendering: optimizeSpeed;
|
||||
// Direction : https://developer.mozilla.org/en-US/docs/Web/CSS/direction
|
||||
@if ( true == $is_rtl ) {
|
||||
direction: rtl;
|
||||
}
|
||||
@else {
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
|
||||
// https://gist.github.com/DavidWells/18e73022e723037a50d6
|
||||
// ensures we don't inherit the browser style for html, boy and div
|
||||
// for example, if not set, there can be a default margin of a few pixels applied to the body element.
|
||||
html, body, div {
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
|
||||
// HTML5 display-role reset for older browsers
|
||||
// https://meyerweb.com/eric/tools/css/reset/
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* </GLOBAL RESET>
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@@ -0,0 +1,31 @@
|
||||
// Bootstrap functions
|
||||
//
|
||||
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
|
||||
|
||||
// Ascending
|
||||
// Used to evaluate Sass maps like our grid breakpoints.
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// Starts at zero
|
||||
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map) {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
$project-base: 'sek' !default;
|
||||
$project-prefix: $project-base + '-' !default;
|
||||
$project-base-wrapper: 'sektion-wrapper' !default;
|
||||
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-transitions: true !default;
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
// Sek grid breakpoints
|
||||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
$sek-grid-breakpoints: (
|
||||
xs: 0,
|
||||
md: 768px,
|
||||
) !default;
|
||||
|
||||
@include _assert-ascending($sek-grid-breakpoints, "$sek-grid-breakpoints");
|
||||
@include _assert-starts-at-zero($sek-grid-breakpoints);
|
||||
|
||||
|
||||
// Grid Columns
|
||||
$sek-column-sizes: (
|
||||
//col suffix: percentage
|
||||
8: 8.333, //12 columns
|
||||
9: 9.090909, //11 columns
|
||||
10: 10, //10 columns
|
||||
11: 11.111, //9 columns
|
||||
12: 12.5, //8 columns
|
||||
14: 14.285, //7 columns
|
||||
16: 16.666, //6 columns
|
||||
20: 20, //5 columns
|
||||
25: 25, //4 columns
|
||||
30: 30,
|
||||
33: 33.333, //3 columns
|
||||
40: 40,
|
||||
50: 50, //2 columns
|
||||
60: 60,
|
||||
66: 66.666,
|
||||
70: 70,
|
||||
75: 75,
|
||||
80: 80,
|
||||
83: 83.333,
|
||||
90: 90,
|
||||
100: 100 //1 column
|
||||
);
|
||||
|
||||
@include _assert-ascending($sek-column-sizes, "$sek-column-sizes");
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
|
||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 20px !default;
|
||||
|
||||
$is_rtl: false !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
|
||||
$cursor-disabled : not-allowed !default;
|
||||
|
||||
$monotypeFont : monospace !default;
|
||||
$serviceFont : sans-serif !default;
|
||||
|
||||
|
||||
$transition-base: all .2s ease-in-out !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
|
||||
// Colors
|
||||
$grey : #808080;
|
||||
$grey-mid-light : #aaa;
|
||||
$grey-light : #eceeef;
|
||||
$grey-lightest : #f7f8f9;
|
||||
$grey-dark : #777;
|
||||
$black : #313131;//#202020;
|
||||
|
||||
|
||||
// Typography
|
||||
$serviceFont : sans-serif;
|
||||
$monotypeFont : monospace;
|
||||
// font family as of Bootstrap https://getbootstrap.com/docs/4.0/content/reboot/
|
||||
// also used on github.com
|
||||
$font-family-sans-serif:
|
||||
// Safari for OS X and iOS (San Francisco)
|
||||
-apple-system,
|
||||
// Chrome < 56 for OS X (San Francisco)
|
||||
BlinkMacSystemFont,
|
||||
// Windows
|
||||
"Segoe UI",
|
||||
// Android
|
||||
"Roboto",
|
||||
// Basic web fallback
|
||||
"Helvetica Neue", Arial, sans-serif,
|
||||
// Emoji fonts
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$base-line-height: 1em * 1.25;
|
||||
@@ -0,0 +1,9 @@
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/screen-reader";
|
||||
@import "mixins/utilities";
|
||||
@import "mixins/transition";
|
||||
// // Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/grid-framework";
|
||||
@@ -0,0 +1,65 @@
|
||||
// A global reset should be added when Nimble Builder uses its own header and footer
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* <SCOPED RESET>
|
||||
/* -------------------------------------------------------------------------- */
|
||||
// Does a "scoped" reset for Nimble Builder wrapper.
|
||||
// Make sure Nimble Builder doesn't inherit invalid CSS reset set by a theme, in particular the box-sizing, but also margin, padding, etc....
|
||||
// May 2020 @todo => this is not exhaustive
|
||||
.sektion-wrapper {
|
||||
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
// https://css-tricks.com/box-sizing/#article-header-id-3
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// https://gist.github.com/DavidWells/18e73022e723037a50d6
|
||||
span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure:not([class*="wp-block-"]), figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// text-align: inherit;<= commented for https://github.com/presscustomizr/nimble-builder/issues/816
|
||||
}
|
||||
// https://gist.github.com/DavidWells/18e73022e723037a50d6
|
||||
blockquote::before,
|
||||
blockquote::after,q:before, q:after {
|
||||
content: "";
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
border-style: none; // Remove the border on images inside links in IE 10-.
|
||||
display: inline;// make sure image are not treated as block by third party css ( this is the case for example in the Twenty Twenty official WP theme )
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden; // Hide the overflow in IE
|
||||
}
|
||||
|
||||
// EMBEDS
|
||||
// Fixes https://github.com/presscustomizr/nimble-builder/issues/249
|
||||
embed, iframe, object {
|
||||
max-width: 100%;
|
||||
}
|
||||
}//.sektion-wrapper
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* </SCOPED RESET>
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@@ -0,0 +1,359 @@
|
||||
// FOR THE DEFAULT STYLING OF HEADINGS, LINKS, etc, see the _modules.scss file
|
||||
|
||||
// Structural base
|
||||
// @todo create a specific scss file for the code after this line
|
||||
/* make sure that the location level occupies 100% of the width */
|
||||
[data-sek-level="location"] {
|
||||
clear: both;
|
||||
font-size: 16px;//reset the base font-size. we can't use 1rem there because too far from the <html> tag, the base font has already been defined by the theme.
|
||||
}
|
||||
|
||||
/* To make vertical alignment possible in sections */
|
||||
.sek-section, .sek-column, .sek-module {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sek-column-inner, .sek-module-inner {
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* To allow horizontal centering of modules
|
||||
@see https://github.com/presscustomizr/nimble-builder/issues/119
|
||||
*/
|
||||
/* - sections in locations */
|
||||
// .sektion-wrapper {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
|
||||
// .sek-section {
|
||||
// align-self: center;
|
||||
// max-width: 100%;
|
||||
// width: 100%;
|
||||
// }
|
||||
/* - columns in sections */
|
||||
// .sek-sektion-inner {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
// .sek-column {
|
||||
// align-self: center
|
||||
// }
|
||||
|
||||
/* - modules in columns */
|
||||
.sek-column-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sek-module {
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
// overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* a nested sektion should reset its parent column padding
|
||||
@see https://github.com/presscustomizr/nimble-builder/issues/25
|
||||
*/
|
||||
[data-sek-is-nested="true"] .sek-container-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* MODULE PLACEHOLDER */
|
||||
/*@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2') format('woff2');
|
||||
}*/
|
||||
/* @see https://github.com/google/material-design-icons/blob/master/iconfont/material-icons.css */
|
||||
// @font-face {
|
||||
// font-family: 'Material Icons';
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// src: url('../fonts/material-icons/MaterialIcons-Regular.eot'); /* For IE6-8 */
|
||||
// src: local('Material Icons'),
|
||||
// local('MaterialIcons-Regular'),
|
||||
// url('../fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2'),
|
||||
// url('../fonts/material-icons/MaterialIcons-Regular.woff') format('woff'),
|
||||
// url('../fonts/material-icons/MaterialIcons-Regular.ttf') format('truetype');
|
||||
// }
|
||||
|
||||
// .material-icons {
|
||||
// font-family: 'Material Icons';
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// font-size: 24px; /* Preferred icon size */
|
||||
// display: inline-block;
|
||||
// line-height: 1;
|
||||
// text-transform: none;
|
||||
// letter-spacing: normal;
|
||||
// word-wrap: normal;
|
||||
// white-space: nowrap;
|
||||
// direction: ltr;
|
||||
|
||||
// /* Support for all WebKit browsers. */
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// /* Support for Safari and Chrome. */
|
||||
// text-rendering: optimizeLegibility;
|
||||
|
||||
// /* Support for Firefox. */
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
|
||||
// /* Support for IE. */
|
||||
// font-feature-settings: 'liga';
|
||||
// }
|
||||
.sek-module-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
.sek-module-placeholder .material-icons {
|
||||
font-size: inherit;
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
||||
|
||||
/* LEVEL VISIBILITY BY DEVICE */
|
||||
// Dec 2019 : since issue https://github.com/presscustomizr/nimble-builder/issues/555, we use a dynamic CSS rule generation instead of static CSS
|
||||
// The CSS classes are kept only for information when inspecting the markup
|
||||
// @see sek_add_css_rules_for_level_visibility()
|
||||
// @media (min-width:768px){
|
||||
// [data-sek-level="location"] .sek-hidden-on-desktops { display: none; }
|
||||
// }
|
||||
// @media (min-width:575px) and (max-width:767px){
|
||||
// [data-sek-level="location"] .sek-hidden-on-tablets { display: none; }
|
||||
// }
|
||||
// @media (max-width:575px){
|
||||
// [data-sek-level="location"] .sek-hidden-on-mobiles { display: none; }
|
||||
// }
|
||||
|
||||
/* NIMBLE TEMPLATE GENERAL STYLING */
|
||||
/* <inspired by Twenty Seventeed WP theme> */
|
||||
.sek-screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
#nimble-page {
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
/* </inspired by Twenty Seventeen WP theme> */
|
||||
|
||||
/* Nimble btn in admin top bar */
|
||||
#wpadminbar .sek-nimble-icon {
|
||||
// padding-left: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
#wpadminbar .sek-nimble-icon img {
|
||||
width:28px;
|
||||
position:absolute;
|
||||
top: 2px;
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: gray;
|
||||
filter: gray;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all, 0.3s ease-in-out;
|
||||
-ms-transition: all, 0.3s ease-in-out;
|
||||
-o-transition: all, 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#wpadminbar .sek-nimble-icon:hover img {
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
#wpadminbar .sek-nimble-icon .sek-nimble-admin-bar-title {
|
||||
padding-left:30px
|
||||
}
|
||||
|
||||
|
||||
// LEVEL BACKGROUND
|
||||
[data-sek-has-bg="true"] {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
[data-sek-level="location"] [data-sek-bg-parallax="true"] {
|
||||
//background-repeat: repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
[data-sek-level="location"] .sek-has-bg {
|
||||
position: relative;//so we can center the CSS loader
|
||||
}
|
||||
|
||||
// the background-attachment:fixed rule is not well supported on mobile devices
|
||||
// fix for https://github.com/presscustomizr/nimble-builder/issues/414
|
||||
@supports (-webkit-overflow-scrolling:touch) {
|
||||
body [data-sek-level="location"] [data-sek-bg-parallax="true"], body [data-sek-level="location"] [data-sek-bg-fixed="true"] {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/15789026/smoothing-the-parallax-scrolling-of-a-background-image
|
||||
// ensure that Nimble sets its own transition rules, prevents any bg rules from third party theme or plugin to be applied
|
||||
[data-sek-level="location"] [data-sek-level] {
|
||||
-webkit-transition: 0s linear;
|
||||
-o-transition: 0s linear;
|
||||
transition: 0s linear;
|
||||
-webkit-transition-property: background-position;
|
||||
-o-transition-property: background-position;
|
||||
transition-property: background-position;
|
||||
}
|
||||
|
||||
|
||||
// COMPATIBILITY WITH HUEMAN THEME
|
||||
// fixes https://github.com/presscustomizr/nimble-builder/issues/511
|
||||
.sek-module .sek-module-inner .alx-tab.thumbs-enabled > li {
|
||||
padding-left: 94px;
|
||||
}
|
||||
.sek-module .sek-module-inner .widget_hu_tabs ul,
|
||||
.sek-module .sek-module-inner .widget_hu_tabs ol {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sek-module .sek-module-inner .widget_hu_tabs .alx-tabs-nav {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// SEPT 2020 => LEVEL SHADOW
|
||||
[data-sek-level].sek-level-has-shadow {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
}
|
||||
.customizer-preview [data-sek-level].sek-level-has-shadow {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px!important;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px!important;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px!important;
|
||||
}
|
||||
|
||||
|
||||
// VIDEO BG
|
||||
[data-sek-level][data-sek-video-bg-src] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-sek-level] embed,
|
||||
[data-sek-level] iframe,
|
||||
[data-sek-level] object,
|
||||
[data-sek-level] video {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
}
|
||||
[data-sek-level] .sek-custom-embed {
|
||||
line-height: 0;
|
||||
}
|
||||
[data-sek-level] .sek-bg-video-wrapper,
|
||||
[data-sek-level] .sek-background {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute!important;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
[data-sek-level] .sek-bg-video-wrapper {
|
||||
-webkit-transition: opacity 0.5s linear;
|
||||
-o-transition: opacity 0.5s linear;
|
||||
transition: opacity 0.5s linear;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
[data-sek-level] .sek-bg-video-wrapper.sek-bg-loading {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
[data-sek-level] .sek-bg-youtube-video-wrapper, [data-sek-level] .sek-background-vimeo-element {
|
||||
max-width: none;
|
||||
}
|
||||
[data-sek-level] .sek-bg-youtube-video-wrapper, [data-sek-level] .sek-background-video-local , [data-sek-level] .sek-background-vimeo-element {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
[data-sek-level] .sek-background-video-local {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// added for https://github.com/presscustomizr/nimble-builder/issues/688
|
||||
.sek-module-inner .sek-debug-modules {
|
||||
margin: 1em;
|
||||
padding: 5px;
|
||||
border: 1px solid rgba(221, 221, 221, 0.43);
|
||||
box-shadow: 1px 1px 2px 0 rgba(75, 75, 85, 0.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 0 rgba(75, 75, 85, 0.2);
|
||||
background-color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
color: #6d6d6d;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
// @media (min-width:575px) and (max-width:768px){
|
||||
// .customizer-preview [data-sek-video-bg-on-mobile="false"] .sek-bg-video-wrapper {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// when customizing, emulate hiding on mobile
|
||||
@media (max-width:575px){
|
||||
.customizer-preview [data-sek-video-bg-on-mobile="false"] .sek-bg-video-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// SEPT 2020 : Animate
|
||||
body:not(.customizer-preview) .sek-animate-candidate:not(.sek-animate-displayed-before-starting) { opacity: 0;}
|
||||
.sek-overflow-hidden-while-animating { overflow: hidden;}
|
||||
|
||||
// Janv 2021 : Pro header
|
||||
// default background color on scroll, consistent with default registration param in nimble-builder-pro\inc\front\nb-pro-menu.php
|
||||
.nb-scroll-down #nimble-header:not(.sek-header-mobile-menu-expanded), .nb-scroll-up #nimble-header:not(.sek-header-mobile-menu-expanded) {
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
// July 2021 : Fix button style Magnific Popup
|
||||
.mfp-wrap {
|
||||
button.mfp-arrow, button.mfp-close {
|
||||
background: none!important;
|
||||
background:transparent!important;
|
||||
}
|
||||
img.mfp-img {
|
||||
padding: 40px 0 0;
|
||||
}
|
||||
&::after {
|
||||
bottom: 20px;
|
||||
}
|
||||
.mfp-bottom-bar {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.#{$project-prefix}service-font {
|
||||
font-family: $serviceFont;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.#{$project-prefix}container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but with 100% width for
|
||||
// fluid, full width layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.#{$project-prefix}container-fluid {
|
||||
@include make-container();
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.#{$project-prefix}row {
|
||||
@include make-row();
|
||||
}
|
||||
.#{$project-prefix}container-no-padding {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Remove the negative margin from default .row, then the horizontal padding
|
||||
// from all immediate children columns (to prevent runaway style inheritance).
|
||||
.#{$project-prefix}no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .#{$project-prefix}col,
|
||||
> [class*="#{$project-prefix}col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-sek-grid-columns();
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
// .sek-fade {
|
||||
// @include transition($transition-fade);
|
||||
|
||||
// &:not(.show) {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
/*
|
||||
.#{$project-prefix}collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
//@include transition($transition-collapse);
|
||||
}*/
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "utilities/clearfix";
|
||||
//@import "utilities/display";
|
||||
//@import "utilities/flex";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/embed";
|
||||
@@ -0,0 +1,305 @@
|
||||
.#{$project-base-wrapper} {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
.sek-text-right { text-align: right !important; }
|
||||
.sek-text-left { text-align: left !important; }
|
||||
|
||||
// LIST FORMATTING
|
||||
// Conservative
|
||||
.#{$project-prefix}module .#{$project-prefix}module-inner {
|
||||
ul {
|
||||
list-style: disc;
|
||||
}
|
||||
ol {
|
||||
list-style: decimal;
|
||||
& > li {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
@if ( true == $is_rtl ) {
|
||||
margin: 0 1.5rem 3rem 0;
|
||||
}
|
||||
@else {
|
||||
margin: 0 0 1.5rem 3rem;
|
||||
}
|
||||
& > li {
|
||||
padding: .15rem .25rem;
|
||||
}
|
||||
}
|
||||
li > ul, li > ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// VARIOUS
|
||||
// mostly inspired from Customizr
|
||||
.sek-module-inner {
|
||||
// January 15th 2020 => dl dt and dd styling has been commented following https://github.com/presscustomizr/nimble-builder/issues/579
|
||||
// dl {
|
||||
// dt {
|
||||
// overflow: hidden;
|
||||
// clear: left;
|
||||
// text-align: left;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// padding: 1.25em 1.25em .625em 1.25em;
|
||||
// position: relative;
|
||||
// &::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// width: $base-line-height;
|
||||
// height: 2px;
|
||||
// bottom: calc(#{$base-line-height} - 6px);
|
||||
// left: 0;
|
||||
// background: $black;
|
||||
// }
|
||||
// }
|
||||
// .wp-caption-dt::before { content: none }
|
||||
// dd { padding-left: $base-line-height; }
|
||||
// }
|
||||
|
||||
pre code, tt {
|
||||
@include box-sizing(border-box);
|
||||
font-size: inherit;
|
||||
white-space: pre-wrap !important;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: $monotypeFont;
|
||||
}
|
||||
pre {
|
||||
background: $grey-lightest;
|
||||
padding: $base-line-height*2;
|
||||
word-wrap: normal;
|
||||
white-space: pre-wrap !important;
|
||||
color: $black;
|
||||
font-family: $monotypeFont !important;
|
||||
}
|
||||
|
||||
figure { text-align: center; }
|
||||
figcaption { text-align:center; }
|
||||
cite {
|
||||
color:$black;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
// inspired from twentytwenty
|
||||
caption, code, code, kbd, samp, .wp-block-table.is-style-stripes tbody tr:nth-child(odd), :root .has-subtle-background-background-color {
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
blockquote {
|
||||
// This style is consistent with the quote module one
|
||||
@if ( true == $is_rtl ) {
|
||||
border-right: 5px solid rgba(0,0,0,.1);
|
||||
}
|
||||
@else {
|
||||
border-left: 5px solid rgba(0,0,0,.1);
|
||||
}
|
||||
background: none;
|
||||
font-size: 1.2em;
|
||||
font-style: inherit;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding: 15px;
|
||||
}
|
||||
}//.sek-module-inner
|
||||
|
||||
|
||||
|
||||
|
||||
// INSPIRED FROM CUSTOMIZR THEME
|
||||
// implemented in nov 2019 for https://github.com/presscustomizr/nimble-builder/issues/525
|
||||
%table-base {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@include media-breakpoint-down(sm) {
|
||||
table-layout: fixed;
|
||||
}
|
||||
/*&:not([id^=wp-calendar]) {
|
||||
border: 2px solid $grey-lightest;
|
||||
th { @extend .caps; @extend .letter-spacing-2; font-family: $serviceFont; }
|
||||
th, td { @extend .demi-small; padding: $base-line-height; border: 1px solid $grey-lightest; }
|
||||
td { color: $grey-dark; }
|
||||
}*/
|
||||
}
|
||||
%table-style {
|
||||
border: 2px solid $grey-light;
|
||||
th { text-transform: uppercase; letter-spacing: 2px; font-family: $serviceFont; }
|
||||
th, td { font-size: 0.95em;; padding: $base-line-height; border: 1px solid $grey-light; }
|
||||
td { color: $grey-dark; }
|
||||
}
|
||||
|
||||
.sek-module-inner table {
|
||||
@extend %table-base;
|
||||
&:not([id^=wp-calendar]):not(.ui-datepicker-calendar):not(.tribe-mini-calendar) {
|
||||
@extend %table-style;
|
||||
}
|
||||
}
|
||||
|
||||
// STYLE OF SEARCH FORM ADDED WITH {{the_search_form}}
|
||||
.sek-search-form {
|
||||
float: none;
|
||||
.sek-search-form-group {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
// -webkit-box-pack: center;
|
||||
// -ms-flex-pack: center;
|
||||
// justify-content: center;
|
||||
label {
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
input[type=search] {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
border: 2px solid #ddd;
|
||||
color: #777;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 7px 8px;
|
||||
padding-left: 5px;
|
||||
line-height: 1.5em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[type=submit] {
|
||||
line-height: 15px;
|
||||
margin: 0;
|
||||
background: #808080 !important;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 10px 10px;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// customizr like
|
||||
// .#{$project-prefix}module .#{$project-prefix}module-inner {
|
||||
// ul, ol {
|
||||
// margin: 0;
|
||||
// padding:0;
|
||||
// list-style: none;
|
||||
// li {
|
||||
// line-height: 1.5;
|
||||
// }
|
||||
// }
|
||||
|
||||
// //formatting
|
||||
// //http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
|
||||
// //https://css-tricks.com/almanac/properties/l/list-style/
|
||||
// //https://en.oxforddictionaries.com/punctuation/bullet-points
|
||||
// ol {
|
||||
// counter-reset: item;
|
||||
// > li {
|
||||
// position: relative;
|
||||
// padding: 0.25rem 0.5rem;
|
||||
// }
|
||||
// > li::before {
|
||||
// content: counters(item, ".") ".";
|
||||
// counter-increment: item;
|
||||
// word-wrap: normal;
|
||||
// word-break: normal;
|
||||
// position: absolute;
|
||||
// width: 1em;
|
||||
// }
|
||||
// @if ( true == $is_rtl ) {
|
||||
// > li::before {
|
||||
// margin-left: 0.5em;
|
||||
// right: -1em;
|
||||
// padding-left: .5em;
|
||||
// }
|
||||
// > li li::before {
|
||||
// right: -1.8em;
|
||||
// }
|
||||
// > li li li::before {
|
||||
// right: -2.5em;
|
||||
// }
|
||||
// }
|
||||
// @else {
|
||||
// > li::before {
|
||||
// margin-right: 0.5em;
|
||||
// left: -1em;
|
||||
// padding-right: .5em;
|
||||
// }
|
||||
// > li li::before {
|
||||
// left: -1.8em;
|
||||
// }
|
||||
// > li li li::before {
|
||||
// left: -2.5em;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ul {
|
||||
// list-style: square outside;
|
||||
// > li {
|
||||
// padding: 0.25rem 0.5rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// ol, ul {
|
||||
// @if ( true == $is_rtl ) {
|
||||
// padding: 0.5rem 1.5rem 1rem 0;
|
||||
// @include media-breakpoint-down(xs) {
|
||||
// padding: 0.5rem 1rem 1rem 0;
|
||||
// }
|
||||
// }
|
||||
// @else {
|
||||
// padding: 0.5rem 0 1rem 1.5rem;
|
||||
// //(max-width: 576px)
|
||||
// @include media-breakpoint-down(xs) {
|
||||
// padding: 0.5rem 0 1rem 1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ol, ul {
|
||||
// ol, ul {
|
||||
// margin-bottom: 0;
|
||||
// padding-bottom: 0;
|
||||
// @if ( true == $is_rtl ) {
|
||||
// margin-right: 1em;
|
||||
// @include media-breakpoint-down(xs) {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
// }
|
||||
// @else {
|
||||
// margin-left: 1em;
|
||||
// @include media-breakpoint-down(xs) {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,95 @@
|
||||
//
|
||||
// Button Base styles (bs based)
|
||||
//
|
||||
.sek-module .sek-module-inner %btn_base {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
line-height: 1.25em;
|
||||
text-align: center;
|
||||
/*white-space: nowrap;*/
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 2px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
font-size: 1em;
|
||||
@extend .#{$project-prefix}service-font;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
// Share hover and focus styles
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: $cursor-disabled;
|
||||
opacity: .65;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: none;
|
||||
box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sek-btn {
|
||||
@extend %btn_base;
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
a.sek-btn.disabled,
|
||||
fieldset[disabled] a.sek-btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.#{$project-base-wrapper} {
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
// Commented because generating error when validating with https://jigsaw.w3.org/
|
||||
// see https://github.com/presscustomizr/nimble-builder/issues/597
|
||||
// .sek-btn {
|
||||
// padding: 0.5em 1em;
|
||||
// border-style: solid;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
&.sek-btn {
|
||||
-wekbit-appearance: none !important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
//
|
||||
// WordPress Specifics
|
||||
//
|
||||
[data-sek-level="module"] .sek-module-inner {
|
||||
.wp-caption figcaption {
|
||||
color: #6d6d6d;
|
||||
font-style: italic;
|
||||
max-width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
/* Keep wide captions from overflowing their container. */
|
||||
padding: 4px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
figure {
|
||||
display: block;
|
||||
}
|
||||
// Image block
|
||||
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright {
|
||||
display: table;
|
||||
}
|
||||
.wp-block-image figcaption {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Gallery block
|
||||
.wp-block-gallery, ul.blocks-gallery-grid {
|
||||
@if ( true == $is_rtl ) {
|
||||
margin-right: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Generic block style
|
||||
[class*="wp-block-"]:not(:last-child) {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
// Gutenberg alignments
|
||||
@at-root .sek-col-100 .sek-module-inner {
|
||||
.alignfull {
|
||||
margin-left: calc(-100vw / 2 + 100% / 2);
|
||||
margin-right: calc(-100vw / 2 + 100% / 2);
|
||||
max-width: 100vw;
|
||||
width: auto;
|
||||
}
|
||||
.alignwide {
|
||||
margin-left: calc((100% - 80vw) / 2);
|
||||
width: 80vw;
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Other core WP default classes
|
||||
.aligncenter, .aligncenter img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.alignleft {
|
||||
float: left;
|
||||
}
|
||||
.alignright {
|
||||
float: right;
|
||||
}
|
||||
.alignnone, .aligncenter, .alignleft, .alignright {
|
||||
margin-top: 1.5rem;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* WP Search Widget */
|
||||
[role=search].search-form {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
@if ( true == $is_rtl ) {
|
||||
float:left;
|
||||
} @else {
|
||||
float:right;
|
||||
}
|
||||
//max-width: 768px)
|
||||
@include media-breakpoint-down(sm) {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
[role=search].search-form label {
|
||||
position: relative;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
[role=search].search-form label input {
|
||||
padding-left: 5px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
max-width: 185px;
|
||||
min-width: 80px;
|
||||
//max-width: 768px)
|
||||
@include media-breakpoint-down(sm) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
[role=search].search-form input[type=submit] {
|
||||
line-height: 15px;
|
||||
/*width: 25%;*/;
|
||||
}
|
||||
|
||||
input[type="submit"]{
|
||||
background: $grey;
|
||||
color: #fff;
|
||||
padding: 10px 10px;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.search-form input[type="search"] {
|
||||
margin: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
border: 2px solid #ddd;
|
||||
color: #777;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding: 7px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Password Protected page/post
|
||||
// april 2020 for https://github.com/presscustomizr/nimble-builder/issues/673
|
||||
.sektion-wrapper.sek-password-protected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
form.post-password-form {
|
||||
max-width: 450px;
|
||||
height: auto;
|
||||
padding: 4em 1em;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.sektion-wrapper .sek-module-inner .avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sek-next-post-link::after, .sek-previous-post-link::before {
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left-color: inherit;
|
||||
border-right-color: inherit;
|
||||
}
|
||||
// Template tags
|
||||
@if ( true == $is_rtl ) {
|
||||
.sek-previous-post-link::before {
|
||||
content: '';
|
||||
border-left: 6px solid;
|
||||
left: 7px;
|
||||
}
|
||||
.sek-next-post-link::after {
|
||||
content: '';
|
||||
border-right: 6px solid;
|
||||
right: 7px;
|
||||
}
|
||||
} @else {
|
||||
.sek-previous-post-link::before {
|
||||
content: '';
|
||||
border-right: 6px solid;
|
||||
right: 7px;
|
||||
}
|
||||
.sek-next-post-link::after {
|
||||
content: '';
|
||||
border-left: 6px solid;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@import "modules/heading";
|
||||
@import "modules/menu";
|
||||
@import "modules/image";
|
||||
@import "modules/special_image";
|
||||
@import "modules/advanced_list";
|
||||
@import "modules/divider";
|
||||
@import "modules/spacer";
|
||||
@import "modules/icon";
|
||||
@import "modules/quote";
|
||||
@import "modules/button";
|
||||
@import "modules/post_grid";
|
||||
@import "modules/simple_form";
|
||||
@import "modules/tiny_mce_editor";
|
||||
@import "modules/social_icons";
|
||||
@import "modules/img_slider.scss";
|
||||
@import "modules/accordion.scss";
|
||||
@import "modules/shortcode.scss";
|
||||
@import "modules/gallery.scss";
|
||||
@@ -0,0 +1,16 @@
|
||||
//@import "modules/heading";
|
||||
//@import "modules/menu";
|
||||
//@import "modules/image";
|
||||
//@import "modules/special_image";
|
||||
//@import "modules/icon";
|
||||
//@import "modules/quote";
|
||||
//@import "modules/button";
|
||||
//@import "modules/post_grid";
|
||||
//@import "modules/simple_form";
|
||||
//@import "modules/social_icons";
|
||||
//@import "modules/img_slider.scss";
|
||||
//@import "modules/accordion.scss";
|
||||
@import "modules/divider";
|
||||
@import "modules/spacer";
|
||||
@import "modules/tiny_mce_editor";
|
||||
@import "modules/shortcode.scss";
|
||||
@@ -0,0 +1,65 @@
|
||||
// Normalize styling for modules
|
||||
// Make sure that some basic html tags like Hx and p have a correct default line-height and spacing
|
||||
.#{$project-prefix}module-inner {
|
||||
line-height: 1.5em;
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
line-height: 1.5em;
|
||||
font-weight: 400;
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
// hx font-size are inspired from the ones of the Customizr theme
|
||||
h1 {font-size: 2.48em;}
|
||||
h2 {font-size: 2.07em;}
|
||||
h3 {font-size: 1.73em;}
|
||||
h4 {font-size: 1.44em;}
|
||||
h5 {font-size: 1.2em;}
|
||||
h6 {font-size: 1em;}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
padding: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-transition: color 0.2s ease-in-out;
|
||||
-o-transition: color 0.2s ease-in-out;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
// Links style => should be underlined by default in most of the module
|
||||
// fix for https://github.com/presscustomizr/nimble-builder/issues/524
|
||||
[data-sek-module-type="czr_tiny_mce_editor_module"],
|
||||
[data-sek-module-type="czr_shortcode_module"],
|
||||
[data-sek-module-type="czr_accordion_module"],
|
||||
[data-sek-module-type="czr_simple_html_module"]{
|
||||
.sek-module-inner a:not(.wp-block-button__link) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
// No background on link focus
|
||||
// compatibility with TT1 WP default theme
|
||||
body .sektion-wrapper .sek-row [data-sek-level="module"] .sek-module-inner a:not(.sek-btn):not(.button):focus {
|
||||
background: none;
|
||||
// color: initial;
|
||||
}
|
||||
|
||||
// fix for https://github.com/presscustomizr/nimble-builder/issues/319
|
||||
// => Twenty nineteen theme heading styling, adding a border ::before Hx
|
||||
body .#{$project-prefix}module-inner {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
&:before {
|
||||
content: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.02px
|
||||
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
|
||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
@include media-breakpoint-up($lower, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
@include media-breakpoint-down($upper, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
@include media-breakpoint-up($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
@include media-breakpoint-down($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// Framework specific SEK grid generation
|
||||
// inspired by Bootstrap, this uses only one breakpoint though
|
||||
|
||||
// Used only by Sektions to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
@mixin make-sek-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $sek-grid-breakpoints) {
|
||||
// Common properties for all breakpoints
|
||||
%grid-column {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent columns from collapsing when empty
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
@each $sek-column in map-keys($sek-column-sizes) {
|
||||
.#{$project-prefix}col-#{$sek-column} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$project-prefix}col-base,
|
||||
.#{$project-prefix}col,
|
||||
.#{$project-prefix}col-auto {
|
||||
@extend %grid-column;
|
||||
}
|
||||
|
||||
//Provide base column width class which will always stretch the width to 100%
|
||||
.#{$project-prefix}col-base {
|
||||
@include make-col(100,100);
|
||||
}
|
||||
// Provide basic `.sek-col-{bp}` classes for equal-width flexbox columns
|
||||
.#{$project-prefix}col {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.#{$project-prefix}col-auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%; // Reset earlier grid tiers
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up( 'md', $breakpoints) {
|
||||
|
||||
@each $sek-column-key, $sek-column-size in $sek-column-sizes {
|
||||
.#{$project-prefix}col-#{$sek-column-key} {
|
||||
@include make-col($sek-column-size,100);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$project-prefix}order-first { order: -1; }
|
||||
|
||||
.#{$project-prefix}order-last { order: $columns + 1; }
|
||||
|
||||
@for $i from 0 through $columns {
|
||||
.#{$project-prefix}order-#{$i} { order: $i; }
|
||||
}
|
||||
|
||||
//no offsets
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/// Grid system
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container() {
|
||||
width: 100%;
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// For each breakpoint, define the maximum width of the container in a media query
|
||||
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
||||
@each $breakpoint, $container-max-width in $max-widths {
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
max-width: $container-max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-row() {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
}
|
||||
|
||||
@mixin make-col-ready() {
|
||||
position: relative;
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// later on to override this initial width.
|
||||
width: 100%;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
$num: $size / $columns;
|
||||
@if ( true == $is_rtl ) {
|
||||
margin-right: if($num == 0, 0, percentage($num));
|
||||
}
|
||||
@else {
|
||||
margin-left: if($num == 0, 0, percentage($num));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// Only display content to screen readers
|
||||
//
|
||||
// See: https://a11yproject.com/posts/how-to-hide-content/
|
||||
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
|
||||
@mixin sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
//
|
||||
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
//
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
@mixin sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// stylelint-disable property-blacklist
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
@if length($transition) == 0 {
|
||||
transition: $transition-base;
|
||||
} @else {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
@mixin hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus { @content }
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin plain-hover-focus {
|
||||
@if $enable-hover-media-query {
|
||||
&,
|
||||
&:focus {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-focus-active {
|
||||
@if $enable-hover-media-query {
|
||||
&:focus,
|
||||
&:active {
|
||||
@content
|
||||
}
|
||||
@include hover { @content }
|
||||
}
|
||||
@else {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//reset box model mixin
|
||||
@mixin box-sizing($box-model) {
|
||||
//prefixes removed in latest b4
|
||||
//-webkit-box-sizing: $box-model; // Safari <= 5
|
||||
// -moz-box-sizing: $box-model; // Firefox <= 19
|
||||
box-sizing: $box-model;
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
// Advanced List Module
|
||||
.sek-module-inner {
|
||||
[data-sek-adv-list-type="none"] > ul {
|
||||
list-style-type: none;
|
||||
@if ( true == $is_rtl ) {
|
||||
margin-right: 0!important;//50px is the default size of the quote icon, this CSS rule is overriden in dyn CSS if user changes the font size of the icon
|
||||
}
|
||||
@else {
|
||||
margin-left: 0!important;//50px is the default size of the quote icon, this CSS rule is overriden in dyn CSS if user changes the font size of the icon
|
||||
}
|
||||
}
|
||||
[data-sek-adv-list-type="circle"] > ul { list-style-type: circle;}
|
||||
[data-sek-adv-list-type="disc"] > ul { list-style-type: disc;}
|
||||
[data-sek-adv-list-type="square"] > ul { list-style-type: square;}
|
||||
[data-sek-adv-list-type="decimal"] > ol { list-style-type: decimal;}
|
||||
[data-sek-adv-list-type="lower-alpha"] > ol { list-style-type: lower-alpha;}
|
||||
[data-sek-adv-list-type="lower-roman"] > ol { list-style-type: lower-roman;}
|
||||
[data-sek-adv-list-type="upper-roman"] > ol { list-style-type: upper-roman;}
|
||||
[data-sek-adv-list-type="upper-alpha"] > ol { list-style-type: upper-alpha;}
|
||||
.sek-adv-list-wrapper ul, .sek-adv-list-wrapper ol {
|
||||
padding: 0;
|
||||
line-height: 1.5;
|
||||
margin: 0;//reset all margins
|
||||
@if ( true == $is_rtl ) {
|
||||
margin-right: 25px;//50px is the default size of the quote icon, this CSS rule is overriden in dyn CSS if user changes the font size of the icon
|
||||
}
|
||||
@else {
|
||||
margin-left: 25px;//50px is the default size of the quote icon, this CSS rule is overriden in dyn CSS if user changes the font size of the icon
|
||||
}
|
||||
li {text-indent: 0px;}
|
||||
}
|
||||
[data-sek-adv-list-layout="vertical"] {
|
||||
ul, ol {
|
||||
li {display: list-item;}
|
||||
}
|
||||
}
|
||||
[data-sek-adv-list-layout="horizontal"] {
|
||||
ul, ol {
|
||||
li {display: inline-block;}
|
||||
}
|
||||
}
|
||||
.sek-adv-list-item {
|
||||
.sek-adv-list-item-inner {
|
||||
// padding: 2.5px 4px;//<= consistent with module registration value
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
// -ms-flex-align: center;
|
||||
// align-items: center;
|
||||
}
|
||||
.sek-adv-list-item-text {
|
||||
-webkit-transition: color 0.2s ease-in-out;
|
||||
-o-transition: color 0.2s ease-in-out;
|
||||
transition: color 0.2s ease-in-out;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
cursor:pointer;
|
||||
&:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sek-adv-list-item-icon {
|
||||
margin-right: 10px;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
}// consistent with module registration value
|
||||
[data-sek-icon-border="circle"], [data-sek-icon-border="square"] {
|
||||
border: 1px solid;
|
||||
width: 2.2em;
|
||||
height: 2.2em;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
[data-sek-icon-border="circle"] {
|
||||
border-radius: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// synchronized with default on registration
|
||||
/*************************************
|
||||
* BUTTON MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_button_module"] .#{$project-prefix}module-inner {
|
||||
text-align: center;
|
||||
}
|
||||
.nb-loc .sek-module .#{$project-prefix}module-inner {
|
||||
.sek-btn {
|
||||
background:#020202;
|
||||
color: #ffffff;
|
||||
padding: 0.5em 1em;
|
||||
margin: 0.5em;
|
||||
i {
|
||||
margin: 0 8px;
|
||||
}
|
||||
&:hover, &:focus, &:active {
|
||||
color: #ffffff;
|
||||
background-color: #282828;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// more specific rule ( than the default _buttons.scss style ) to make sure there's no underline when hovering/focusing
|
||||
// fixes https://github.com/presscustomizr/nimble-builder/issues/514
|
||||
[data-sek-module-type="czr_button_module"] .sek-module-inner .sek-btn:focus, [data-sek-module-type="czr_button_module"] .sek-module-inner .sek-btn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.#{$project-prefix}btn-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sek-btn-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.#{$project-prefix}btn.box-shadow {
|
||||
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
&.push-effect:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*************************************
|
||||
* DIVIDER MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_divider_module"] {
|
||||
text-align: center;
|
||||
.sek-module-inner {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
.sek-module-inner .sek-divider {
|
||||
border-top: 1px solid #5a5a5a;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1rem;//so we can use em for margin
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
// Responsive wrappers
|
||||
[class*=sek__r-w] {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
[class*=sek__r-w]::before {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Various responsive ratios
|
||||
.sek__r-wFP::before {
|
||||
padding-top: 92.592593%; // default fp aspect ratio
|
||||
}
|
||||
|
||||
|
||||
.sek-fp-widget {
|
||||
text-align: center;
|
||||
margin: auto!important;
|
||||
|
||||
.sek-fp-button-holder,.sek-fp-title,.sek-fp-text {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.sek-fp-title {
|
||||
color: #5a5a5a;
|
||||
line-height: 1.25em;
|
||||
margin-top: .625em;
|
||||
margin-bottom: 1.25em;
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-size: 1.44em;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1.25em;
|
||||
background: #5a5a5a;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: .3125em auto 0;
|
||||
transition: all .6s ease;
|
||||
}
|
||||
@at-root .sek-link-mask-p:hover .sek-fp-title::after {
|
||||
width: 2.5em
|
||||
}
|
||||
}
|
||||
|
||||
.sek-fp-text {
|
||||
color: #777;
|
||||
line-height: 1.55em;
|
||||
margin: 1.5em auto;
|
||||
word-wrap: break-word;
|
||||
> a {
|
||||
padding: 0!important;
|
||||
display: inline!important;
|
||||
line-height: 1em!important;
|
||||
}
|
||||
}
|
||||
|
||||
.sek-fp-btn-link {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1.25em;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
outline: 0;
|
||||
background-color: #3b3b3b;
|
||||
color: #fff;
|
||||
border-color: #3b3b3b;
|
||||
|
||||
font-size: .75em;
|
||||
line-height: 2.5em;
|
||||
padding: 0 2.5em;
|
||||
&:hover, &:focus, &:active {
|
||||
color: #3b3b3b;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sek-fp-thumb-wrapper {
|
||||
// this actually depends on the thumb size
|
||||
max-width: 270px;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
img {
|
||||
transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.js-center-images-disabled & img {
|
||||
// temporary CSS centering
|
||||
|
||||
// fallback for those browsers w/o translate3d transform property
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
// JS IMAGE CENTERING
|
||||
img.h-centered {
|
||||
width: auto!important;
|
||||
max-width: none!important;
|
||||
// position: relative;
|
||||
}
|
||||
img.v-centered {
|
||||
height: auto!important;
|
||||
max-height: none!important;
|
||||
max-width: none!important;
|
||||
vertical-align: top;
|
||||
// position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sek-link-mask {
|
||||
position: absolute;
|
||||
border-color: white;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&.no-effect {
|
||||
border: none
|
||||
}
|
||||
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
width: 63%;
|
||||
//
|
||||
// this refers to the parent width, allowing us to have a perfect square despite the parent
|
||||
// as it has the same element's width percentage value.
|
||||
//
|
||||
padding-bottom: 63%;
|
||||
content: '';
|
||||
z-index: 1;
|
||||
// Centering
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
// fallback for those browsers w/o translate3d transform property
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
/* end of centering */
|
||||
|
||||
border: 150px solid;
|
||||
border-color: inherit;
|
||||
box-sizing: content-box;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.round &::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sek-link-mask-p:hover &::before {
|
||||
transform: translate(-50%, -50%) scale(1.4);
|
||||
/* fallback for those browsers w/o translate3d transform property*/
|
||||
transform: translate3d(-50%, -50%, 0) scale(1.4);
|
||||
-ms-transform: translate(-50%, -50%) scale(1.4);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//needs modernizr
|
||||
.no-cssanimations {
|
||||
.sek-link-mask {
|
||||
border: transparent;
|
||||
}
|
||||
.sek-fp-thumb-wrapper {
|
||||
opacity: .7
|
||||
}
|
||||
.sek-fp-thumb-wrapper:hover {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
// 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;
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,17 @@
|
||||
// synchronized with default on registration
|
||||
/*************************************
|
||||
* HEADING MODULE
|
||||
*************************************/
|
||||
.sek-module-inner {
|
||||
.sek-heading {
|
||||
text-align: center;//This should match the default on registration
|
||||
// set a margin to fix https://github.com/presscustomizr/nimble-builder/issues/203
|
||||
margin: 0.6em 0;//This should match the default on registration
|
||||
display: block;//<=fixes https://github.com/presscustomizr/nimble-builder/issues/442
|
||||
> a {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
// introduced when implementing https://github.com/presscustomizr/nimble-builder/issues/322
|
||||
@@ -0,0 +1,48 @@
|
||||
/*************************************
|
||||
* ICON MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_icon_module"] {
|
||||
text-align: center;
|
||||
color: #5a5a5a;
|
||||
font-size: 15px;
|
||||
|
||||
a.sek-icon,
|
||||
a.sek-icon:hover,
|
||||
a.sek-icon:focus,
|
||||
a.sek-icon:active,
|
||||
a.sek-icon.active {
|
||||
color: inherit;
|
||||
}
|
||||
.box-shadow .sek-icon-wrapper{
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0;
|
||||
}
|
||||
.sek-icon {
|
||||
i {
|
||||
-webkit-transition: all 0.15s ease-in-out;
|
||||
-o-transition: all 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
// fix for themes (like Hueman) styling the width of the font awesome icons
|
||||
.fas, .far, .fab {
|
||||
// width and height in em implemented for https://github.com/presscustomizr/nimble-builder/issues/266
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
a.sek-icon {
|
||||
// fix : themes like Twenty Seventeen styling the link underline with a box-shadow instead of the regular "text-decoration:underline" rule
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
&:hover, &:focus, &:active {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
}
|
||||
.sek-icon-wrapper {
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/*************************************
|
||||
* IMAGE MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_image_module"] {
|
||||
text-align: center;
|
||||
}
|
||||
[data-sek-module-type="czr_image_module"] img {
|
||||
border: 0 solid #f2f2f2;
|
||||
}
|
||||
[data-sek-module-type="czr_image_module"] .box-shadow img {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0px;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 11px 0;
|
||||
}
|
||||
/* image module transitions for better animations when effects are used */
|
||||
[data-sek-module-type="czr_image_module"] figure {
|
||||
img {
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
&.has-custom-height {
|
||||
overflow: hidden;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Commented because now applied only when previewing, in sek-preview.css
|
||||
// [data-sek-module-type="czr_image_module"] figure img {
|
||||
// -webkit-transition: all 0.2s ease-out;
|
||||
// -o-transition: all 0.2s ease-out;
|
||||
// transition: all 0.2s ease-out;
|
||||
// }
|
||||
|
||||
.sek-hover-effect-opacity img:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
.sek-hover-effect-zoom-out img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.sek-hover-effect-zoom-in img:hover {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.sek-hover-effect-move-up img:hover {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
.sek-hover-effect-move-down img:hover {
|
||||
transform: translateY(6px);
|
||||
}
|
||||
.sek-hover-effect-blur img:hover {
|
||||
filter: blur(2px);
|
||||
}
|
||||
.sek-hover-effect-grayscale img:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.sek-hover-effect-grayscale img:hover {
|
||||
filter: grayscale(100%);
|
||||
filter: gray;
|
||||
}
|
||||
.sek-hover-effect-reverse-grayscale img {
|
||||
filter: grayscale(100%);
|
||||
filter: gray;
|
||||
}
|
||||
.sek-hover-effect-reverse-grayscale img:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
/*************************************
|
||||
* IMAGE SLIDER MODULE
|
||||
*************************************/
|
||||
.sek-column-inner [data-sek-module-type="czr_img_slider_module"] {
|
||||
// enlarge the module wrapper to "compensate" the parent column paddings
|
||||
// @fixes https://github.com/presscustomizr/nimble-builder/issues/566
|
||||
width: calc(100% + 20px);
|
||||
max-width: calc(100% + 20px);
|
||||
}
|
||||
|
||||
[data-sek-module-type="czr_img_slider_module"] {
|
||||
.sek-carousel-img [src*="data:image/gif;"] {
|
||||
display: none;
|
||||
}
|
||||
.sek-swiper-loading .sek-carousel-img img {
|
||||
display: none;//<= sek-swiper-loading is removed on swiper init event
|
||||
}
|
||||
// nov 2020 => hide swiper built-in preloader when customizing because won't be auto-hidden
|
||||
@at-root .customizer-preview .swiper-wrapper .swiper-lazy-preloader {
|
||||
display: none;
|
||||
}
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.swiper-wrapper {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 400px;//consistent with defaults on registration
|
||||
@include media-breakpoint-only(xs) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
&[data-sek-image-layout="nimble-wizard"] {
|
||||
.sek-carousel-img {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
max-width: none;
|
||||
opacity:0;
|
||||
-webkit-transition: opacity 0.15s ease-in-out;
|
||||
-moz-transition: opacity, 0.15s ease-in-out;
|
||||
-ms-transition: opacity, 0.15s ease-in-out;
|
||||
-o-transition: opacity, 0.15s ease-in-out;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-sek-image-layout="height-100"] {
|
||||
.sek-carousel-img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Sept 2020, for https://github.com/presscustomizr/nimble-builder/issues/743
|
||||
&[data-sek-image-layout="cover"] {
|
||||
.sek-carousel-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.swiper
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
// background: #fff;
|
||||
/* Center slide image vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
&[data-sek-slide-link] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sek-carousel-img {
|
||||
width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
// When Nimble Wizard is enabled
|
||||
&.sek-h-centrd {
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
}
|
||||
&.sek-v-centrd {
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
max-width: none !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&[data-sek-has-overlay="true"] .sek-carousel-img::after {
|
||||
content: '';
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
//background: rgba(49,49,49,.5);
|
||||
background-color: #000000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.sek-slider-text-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
-webkit-transform: translate3d(-50%,-50%,0);
|
||||
transform: translate3d(-50%,-50%,0);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
/* Center slide text vertically
|
||||
=> consistent with defaults in module registration */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sek-slider-text-content {
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
padding:5%;//consistent with defaults in module registration
|
||||
text-align: center;//consistent with defaults in module registration
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
//why this light grey text color ? => if set to white ( #fff ), the text is not visible when no image is picked, which might be difficult to understand for users
|
||||
color: #e2e2e2;//consistent with defaults in module registration
|
||||
font-size:16px;//consistent with defaults in module registration
|
||||
line-height:1.5em;//consistent with defaults in module registration
|
||||
* {
|
||||
font-size:16px;//consistent with defaults in module registration
|
||||
line-height:1.5em;//consistent with defaults in module registration
|
||||
}
|
||||
}
|
||||
}//.swiper-slide
|
||||
|
||||
/* SWIPER BULLETS */
|
||||
.swiper-pagination-bullet-active {
|
||||
background-color: #ffffff;//consistent with defaults registration param
|
||||
}
|
||||
|
||||
/* SWIPER ARROWS */
|
||||
.sek-swiper-nav {
|
||||
cursor: pointer;
|
||||
|
||||
// Chevron inspired by the pen shared by @wksy on Codepen
|
||||
// @see https://codepen.io/wsky/pen/BKoKxV
|
||||
.sek-chevron {
|
||||
display: inline-block;
|
||||
border-right: 2px solid #ffffff;//consistent with defaults registration param
|
||||
border-bottom: 2px solid #ffffff;//consistent with defaults registration param
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.sek-swiper-prev {
|
||||
left: 0;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 0px;
|
||||
.sek-chevron {
|
||||
-webkit-transform: rotate(-225deg);
|
||||
-ms-transform: rotate(-225deg);
|
||||
transform: rotate(-225deg);
|
||||
}
|
||||
}
|
||||
.sek-swiper-next {
|
||||
right: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 2px;
|
||||
.sek-chevron {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sek-swiper-prev, .sek-swiper-next{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: calc((100% - 60px)/2);
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-o-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
display: block;
|
||||
height: 60px;
|
||||
width: 50px;
|
||||
opacity: 0.6;
|
||||
background-color: rgba(32, 32, 32, 0.4);
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
line-height: 64px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.sek-swiper-prev:hover, .sek-swiper-next:hover {
|
||||
background-color: rgba(32, 32, 32, 0.7);
|
||||
opacity: 1;
|
||||
width: 100px;
|
||||
}
|
||||
}//.sek-swiper-nav
|
||||
|
||||
|
||||
@include media-breakpoint-only(xs) {
|
||||
[data-sek-hide-nav-on-mobile="true"] {
|
||||
.swiper-pagination {display: none;}
|
||||
.sek-swiper-nav{display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @media only screen and (max-width: 719px) {
|
||||
// .sek-swiper-nav { display: none;}
|
||||
// }
|
||||
}//[data-sek-module-type="czr_img_slider_module"]
|
||||
@@ -0,0 +1,713 @@
|
||||
/*************************************
|
||||
* MENU MODULE
|
||||
*************************************/
|
||||
@mixin dropdown-menu-base {
|
||||
position: static;
|
||||
float: none;
|
||||
list-style: none;
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
|
||||
//mobile up breakpoint -> min-width:768px
|
||||
@include media-breakpoint-up( 'md' ) {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 100%;
|
||||
@if ( true == $is_rtl ) {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
z-index: 1000;
|
||||
min-width: 10rem;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sek-nav-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: .5rem 0;
|
||||
|
||||
// https://github.com/presscustomizr/nimble-builder/issues/368
|
||||
.sek-mobile-menu-expanded-below & {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.sek-nav-collapse {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
// justify-content property should be consistent with the default value in sek_get_module_params_for_czr_menu_content_child()
|
||||
// justify-content: flex-start;
|
||||
// -webkit-box-pack: start;
|
||||
// -ms-flex-pack: start;
|
||||
}
|
||||
.sek-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
|
||||
.sek-module .sek-module-inner & {
|
||||
&,
|
||||
& ul {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
margin-right: -10px !important;
|
||||
margin-left: -10px !important;
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
& > ul li {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 16px;// consistent with defaults
|
||||
a {
|
||||
line-height: 1.5em;// consistent with default registration params
|
||||
padding: .6em .8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: inherit;
|
||||
overflow:hidden;
|
||||
.sek-nav-wrap & {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
.sek-nav__title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid;
|
||||
//customizable
|
||||
border-color: rgba(49,49,49,.09);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-has-children,
|
||||
.page_item_has_children {
|
||||
position: relative;
|
||||
& > a::after {
|
||||
// Feb 2020 => replaced font awesome by a unicode character well supported
|
||||
// see https://github.com/presscustomizr/nimble-builder/issues/602
|
||||
content: "\203A";//https://unicode-table.com/en/203A/
|
||||
font-family: "Arial Unicode MS", Arial;//<= https://www.fileformat.info/info/unicode/char/203A/fontsupport.htm
|
||||
moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: none;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
font-weight: 900;
|
||||
transition: all 0.3s ease;
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
padding: 0 .45em;
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
transform: translateZ(0) rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
}
|
||||
&.show > a::after {
|
||||
@if ( true == $is_rtl ) {
|
||||
transform: translateZ(0) rotate(90deg) !important;
|
||||
-ms-transform: rotate(90deg)!important;
|
||||
}
|
||||
@else {
|
||||
transform: translateZ(0) rotate(-90deg)!important;
|
||||
-ms-transform: rotate(-90deg)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .sub-menu,
|
||||
& .children {
|
||||
@include dropdown-menu-base();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// RULES FOR HORIZONTAL DESKTOP MENU
|
||||
//mobile up breakpoint -> min-width:768px
|
||||
@include media-breakpoint-up( 'md' ) {
|
||||
.sek-nav {
|
||||
flex-direction: row;
|
||||
.menu-item-has-children,
|
||||
.page_item_has_children {
|
||||
& > a::after {
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
& > li:not(:last-of-type) {
|
||||
border-bottom: none;
|
||||
}
|
||||
& > li > a {
|
||||
padding: 5px;
|
||||
}
|
||||
.sek-module .sek-module-inner & {
|
||||
li {
|
||||
margin: 0 5px;
|
||||
& > ul li {
|
||||
@if ( true == $is_rtl ) {
|
||||
padding: 0 .9rem 0 0;
|
||||
} @else {
|
||||
padding: 0 0 0 .9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sek-nav-collapse {
|
||||
display: flex!important;// <= !important because the php template sets this selector to display:none with inline style. This hack allows us to prevent a Content Layout Shift on page load
|
||||
flex-basis: auto;
|
||||
// justify-content property should be consistent with the default value in sek_get_module_params_for_czr_menu_content_child()
|
||||
justify-content: flex-end;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
}
|
||||
// https://github.com/presscustomizr/nimble-builder/issues/368
|
||||
.sek-mobile-menu-expanded-below {
|
||||
display: none!important;
|
||||
}
|
||||
.sek-nav-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sek-dropdown-menu {
|
||||
|
||||
.sek-nav & li {
|
||||
padding: 0 10px !important;
|
||||
margin: 0 !important;
|
||||
a {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// following two should be customizable...
|
||||
background: white;
|
||||
box-shadow: 1px 2px 2px 2px rgba(0,0,0,.15);
|
||||
|
||||
ul {
|
||||
@if ( true == $is_rtl ) {
|
||||
right: 100%;
|
||||
}
|
||||
@else {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sek-menu-link__row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
|
||||
|
||||
.sek-nav__title {
|
||||
word-break: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sek-dropdown-submenu & {
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .sek-submenu-fade .sek-dropdown-menu a {
|
||||
transition: all 0.25s ease;
|
||||
transform: translate(0, 0);
|
||||
&:hover {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// submenu revealing fade effect
|
||||
// lets use a trick to make this not impact on the snake
|
||||
// basically we know that assigning a perspective to an element
|
||||
// plus position:relative creates a new system
|
||||
// where fixed elements behave like absolute elements relative to the parent
|
||||
// this way the actual visual position of the dropdown will not be impacted
|
||||
// though, as fixed element, even if overflowing the tc-page-wrap, will not
|
||||
// make the orizontal scrollbar appear!
|
||||
@at-root .sek-submenu-fade {
|
||||
.page_item_has_children,
|
||||
.menu-item-has-children {
|
||||
perspective: 1000px;
|
||||
> ul {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
transition: all 0.25s ease-in-out;
|
||||
transform: translate( 0, -10px );
|
||||
}
|
||||
|
||||
&:not(.show) {
|
||||
//temporary fix for Firefox : https://github.com/presscustomizr/customizr/issues/1083
|
||||
//the perspective thing seems to not work with this browser
|
||||
//need further investigation
|
||||
overflow: hidden;
|
||||
|
||||
//because of the fact the submenu is displayed
|
||||
//it might still grab the the hover while fading out
|
||||
//let's avoid this resetting its pointer-events
|
||||
//when the li parent hasn't the show class
|
||||
ul {
|
||||
pointer-events: none;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.show {
|
||||
perspective: none;
|
||||
> ul {
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate( 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// end fade effect
|
||||
|
||||
.nb-collapsible-mobile-menu .nb-dd-mm-toggle-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}//@include media-breakpoint-up( 'md' )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ANIMATION : ROTATING ARROWS FOR SUBMENU PARENTS
|
||||
.sek-dropdown-submenu {
|
||||
& > a{
|
||||
&::after {
|
||||
@if ( true == $is_rtl ) {
|
||||
transform: translateZ(0) rotate(0deg)!important;
|
||||
-ms-transform: rotate(0deg)!important;
|
||||
}
|
||||
@else {
|
||||
transform: translateZ(0) rotate(0deg)!important;
|
||||
-ms-transform: rotate(0deg)!important;
|
||||
}
|
||||
}
|
||||
//TODO: row reverse
|
||||
&[class*=-reverse]::after {
|
||||
top: .1em;
|
||||
@if ( true == $is_rtl ) {
|
||||
transform: translateZ(0) rotate(180deg)!important;
|
||||
-ms-transform: rotate(180deg)!important;
|
||||
}
|
||||
@else {
|
||||
transform: translateZ(0) rotate(-180deg)!important;
|
||||
-ms-transform: rotate(-180deg)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sek-dropdown-menu {
|
||||
@include dropdown-menu-base();
|
||||
|
||||
.show > & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sek-nav .sek-nav__title {
|
||||
//the sidemenu and mobile menu should NOT break lines
|
||||
word-break: break-word;// was break-all; Fixed in dec-2017 @see https://github.com/presscustomizr/customizr/issues/1339
|
||||
white-space: normal;
|
||||
}
|
||||
//SNAKE
|
||||
&.open-right {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
@at-root &.open-right ul:not(.open-left),
|
||||
& ul.open-right {
|
||||
left: 100%;
|
||||
right: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.open-left {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@at-root &.open-left ul:not(.open-right),
|
||||
& ul.open-left {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
// progressive background filling on hover not activated when releasing the menu module initial version, in v1.4.0
|
||||
// li {
|
||||
// position: relative;
|
||||
// &::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: 0%;
|
||||
// height: 100%;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// transition-delay: 0s;
|
||||
// transition-duration: .6s;
|
||||
// transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
// transform-origin: 0 100%;
|
||||
// background-color: rgba(0, 0, 0, 0.045);
|
||||
// }
|
||||
// &:hover::before {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Janv 2021 NEW COLLAPSIBLE MOBILE MENU
|
||||
// June 2020 for https://github.com/presscustomizr/nimble-builder/issues/721
|
||||
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
|
||||
nav.nb-collapsible-mobile-menu {
|
||||
[data-sek-mm-state="expanded"] {
|
||||
overflow: auto;
|
||||
max-height: 80vh;
|
||||
padding-bottom: 10px;
|
||||
//background: #ffffff;
|
||||
}
|
||||
li .sub-menu {
|
||||
li a { font-size: 0.88em; }
|
||||
li > a { padding: .6em 32px; }
|
||||
li li > a { padding: .6em 60px; }
|
||||
li li li > a { padding: .6em 80px; }
|
||||
li li li li > a { padding: .6em 100px; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state] { display: none }
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] { display: block; }
|
||||
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"],
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] li,
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] ul { background: #ffffff; }
|
||||
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .sub-menu,
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-sek-is-mobile-vertical-menu="yes"] .sek-nav li a {
|
||||
min-height: 45px;//<= which is also the height if the toggle button when there are children items ( .nb-dd-mm-toggle )
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
// Janv 2021 : default alignment of vertical mobile menu items
|
||||
// consistent with registration params
|
||||
// see in sek_get_module_params_for_czr_menu_content_child()
|
||||
justify-content: flex-start;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
}
|
||||
// nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] > li > a {
|
||||
// min-height: 43px;
|
||||
// }
|
||||
// Hide sub-menus for mobile vertical menu
|
||||
// show sub-menus when .expanded class is added
|
||||
[data-sek-is-mobile-vertical-menu="yes"] .sub-menu { display: none; }
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .sub-menu { display: none; }
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .sub-menu.expanded { display: block; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// MOBILE MENU ARROW TOGGLE WHEN THERE IS A SUBMENU
|
||||
/*
|
||||
* Mobile dropdown on click
|
||||
*/
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .page_item_has_children > a,
|
||||
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .menu-item-has-children > a {
|
||||
// this padding gives the necessary space for the toggle arrow button
|
||||
padding-right: 60px;
|
||||
}
|
||||
.nb-dd-mm-toggle-wrapper {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
bottom: 1px;
|
||||
height: 45px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .nb-dd-mm-toggle-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nb-dd-mm-toggle {
|
||||
background: none!important;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 45px;
|
||||
width: 60px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nb-dd-mm-toggle i {
|
||||
display: block;
|
||||
-webkit-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
width: 100%;
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
li.expanded > .nb-dd-mm-toggle-wrapper .nb-arrow-for-mobile-menu {
|
||||
-webkit-transform: rotate(-180deg);
|
||||
-moz-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.nb-arrow-for-mobile-menu::after {
|
||||
content: "\25BE";//https://unicode-table.com/en/25BE/
|
||||
font-family: "Arial Unicode MS", Arial;//<= https://www.fileformat.info/info/unicode/char/203A/fontsupport.htm
|
||||
moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
// display: none;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
font-weight: 900;
|
||||
transition: all 0.3s ease;
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
padding: 0 .45em;
|
||||
font-size: 18px;
|
||||
line-height: 45px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// MOBILE : HAMBURGER BUTTON
|
||||
//Hueman inspired nav toggler
|
||||
.nb-loc .sek-module-inner nav .sek-nav-toggler {
|
||||
-webkit-appearance: none !important;
|
||||
cursor: pointer;
|
||||
&, &:hover, &:focus {
|
||||
//following 3 should be customizable
|
||||
background: 0 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: black;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
//align to the right (left when rtl)
|
||||
// @if ( true == $is_rtl ) {
|
||||
// margin-right: auto;
|
||||
// margin-left: -10px;
|
||||
// }
|
||||
// @else {
|
||||
// margin-left: auto;
|
||||
// margin-right: -10px;
|
||||
// }
|
||||
@at-root .sek-ham__span-wrapper {
|
||||
height: 12px;
|
||||
position: relative;
|
||||
display: block;
|
||||
.line {
|
||||
display: block;
|
||||
height: 1.5px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
border-radius: 5px;
|
||||
background-clip: padding-box;
|
||||
transition: all ease .35s;
|
||||
backface-visibility: hidden;
|
||||
border-top: 1.5px solid;
|
||||
}
|
||||
.line-1 {
|
||||
top: 0;
|
||||
}
|
||||
.line-2 {
|
||||
top: 50%;
|
||||
}
|
||||
.line-3 {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
@at-root .sek-nav-toggler {
|
||||
.line-1 {
|
||||
transform: translate(-3px, 6px) rotate(45deg);
|
||||
width: 28px;
|
||||
}
|
||||
.line-2 {
|
||||
opacity: 0;
|
||||
}
|
||||
.line-3 {
|
||||
transform: translate(-3px, -6px) rotate(-45deg);
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
@at-root .sek-nav-toggler.sek-collapsed .line {
|
||||
width: 20px;
|
||||
transform: translate(0,0) rotate(0);
|
||||
opacity: 1;
|
||||
}
|
||||
@at-root .sek-nav-toggler.sek-collapsed.hovering .line {
|
||||
transform: translateX(-3px);
|
||||
width: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// PRO SEARCH ICON IN DESKTOP + SEARCH FIELD DESKTOP AND MOBILE
|
||||
// June 2020 search icon + form in menu module for https://github.com/presscustomizr/nimble-builder-pro/issues/12
|
||||
.nb-module-menu-search {
|
||||
position: relative;
|
||||
}
|
||||
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
|
||||
[data-sek-is-mobile-vertical-menu="yes"] .nb-module-menu-search {
|
||||
display: none;
|
||||
}
|
||||
.nb-svg-search-icon {
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.nb-module-menu-search .nb-search-expand {
|
||||
display:none;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 49px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 340px;
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
.nb-search-expand .nb-search-expand-inner {
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.15);
|
||||
transition: -webkit-transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
|
||||
transition: transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
|
||||
padding: 15px;
|
||||
// make sure NB cleans any icon printed ::after the label ( like in hueman theme for example )
|
||||
[role=search].search-form label::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner [role=search].search-form {
|
||||
display: flex;
|
||||
float: none;
|
||||
}
|
||||
|
||||
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner label input[type=search] {
|
||||
max-width: 100%;
|
||||
}
|
||||
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search form input[type=submit] {
|
||||
margin: 0;
|
||||
background: #808080!important;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 10px 10px;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
|
||||
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=search], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input[type=search],
|
||||
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search form input[type=submit] {
|
||||
text-transform: none!important;
|
||||
}
|
||||
.nb-mobile-search {
|
||||
display: none;
|
||||
}
|
||||
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
|
||||
[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search {
|
||||
display: block;
|
||||
padding: 6px 14px 15px;
|
||||
}
|
||||
[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input {
|
||||
font-size: 16px;
|
||||
}
|
||||
.nb-search-expand-inner, .nb-mobile-search {
|
||||
input {
|
||||
&[type="search"] {
|
||||
color: #000000!important;
|
||||
}
|
||||
&[type="submit"] {
|
||||
color: #ffffff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,638 @@
|
||||
// @todo rtl
|
||||
/*************************************
|
||||
* POST GRID MODULE
|
||||
*************************************/
|
||||
// DESIGN SETTINGS FOR LIST AND GRID
|
||||
.sek-post-grid-wrapper {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
// Spacing
|
||||
.sek-grid-items {
|
||||
grid-row-gap: 25px;
|
||||
&.sek-list-layout article>*:not(:last-child):not(.sek-pg-thumbnail){
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&.sek-grid-layout article>*:not(:last-child){
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
article {
|
||||
>:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
>:last-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
>*:not(:last-child) {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
overflow: hidden;
|
||||
.sek-pg-content {
|
||||
>*:not(:last-child) {
|
||||
margin-top: 0!important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
>:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
>:last-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sek-shadow-on-hover article {
|
||||
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,.05);
|
||||
box-shadow: 0 0 40px 0 rgba(0,0,0,.05);
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
-o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
&:hover {
|
||||
-webkit-transform: translateY(-4px);
|
||||
-ms-transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.18), 0 10px 10px rgba(0,0,0,0.15);
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.18), 0 10px 10px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
}//.sek-grid-items
|
||||
|
||||
// POST THUMBNAIL
|
||||
.sek-pg-thumbnail {
|
||||
img {
|
||||
box-shadow: 0 5px 5px 0 rgba(18,63,82,.035), 0 0 0 1px rgba(176,181,193,.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
background: inherit;
|
||||
overflow: hidden;
|
||||
// padding: 60px 35px;
|
||||
// --box-padding-vert: 60px;
|
||||
// --box-padding-hori: 35px;
|
||||
// padding: 0!important;
|
||||
// margin-left: 0;
|
||||
// margin-right: 0;
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}//.sek-pg-thumbnail
|
||||
|
||||
// Item box shadow
|
||||
&.nb-thumb-box-shadow article .sek-pg-thumbnail img {
|
||||
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// POST THUMBNAIL WITH CUSTOM HEIGHT
|
||||
// we set the height of the image container ( <a> tag ), with the padding property
|
||||
// because padding and margin are relative to the width in CSS
|
||||
// @see https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties
|
||||
// This is set dynamically by users in PHP sek_add_css_rules_for_czr_post_grid_module()
|
||||
.sek-thumb-custom-height .sek-pg-thumbnail {
|
||||
a {
|
||||
height: 0;
|
||||
padding-top: 65%;
|
||||
// Fix for ie11. @see https://github.com/presscustomizr/nimble-builder/issues/450
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
height: auto!important;
|
||||
padding-top:inherit!important;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
// Fix for ie11. @see https://github.com/presscustomizr/nimble-builder/issues/450
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
height: auto!important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}//.sek-thumb-custom-height .sek-pg-thumbnail
|
||||
|
||||
// Metas
|
||||
.sek-pg-metas > span:not(:last-child)::after {
|
||||
content: "\B7";
|
||||
vertical-align: middle;
|
||||
margin: 0 5px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Content : title, excerpt, metas
|
||||
.sek-pg-content {
|
||||
@if ( true == $is_rtl ) { text-align: right; }
|
||||
@else { text-align: left; }
|
||||
}
|
||||
|
||||
// Excerpt
|
||||
// => remove margin bottom after the last element in excerpt, typically a <p> tag
|
||||
.sek-excerpt>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}//.sek-post-grid-wrapper DESIGN SETTINGS
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// FONTS
|
||||
.nb-loc .sek-module-inner .sek-post-grid-wrapper {
|
||||
// Category font
|
||||
.sek-pg-category {
|
||||
line-height: 1.2em;
|
||||
color: #767676;
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: #767676;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Title
|
||||
.sek-pg-title {
|
||||
// reset theme and plugins value for h2
|
||||
font-size: 28px;
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 22px;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 20px;
|
||||
}
|
||||
line-height: 1.1em;
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #121212;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 1.1em;
|
||||
-ms-word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
&:hover {
|
||||
color: #666
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: 22px;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Metas font
|
||||
.sek-pg-metas {
|
||||
line-height: 1.2em;
|
||||
span, a {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
color: #767676;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
// Excerpt
|
||||
.sek-pg-content p {
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.3em;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
}// .sek-post-grid-wrapper FONTS
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// LIST LAYOUT
|
||||
.sek-post-grid-wrapper {
|
||||
.sek-list-layout {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: minmax(0,1fr);
|
||||
grid-template-columns: minmax(0,1fr);
|
||||
// Fix for ie11. @see https://github.com/presscustomizr/nimble-builder/issues/450
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
.sek-list-layout article {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: minmax(0,1fr);
|
||||
grid-template-columns: minmax(0,1fr);
|
||||
-ms-grid-rows: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
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;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
// The following has been added automatically when autoprefixing with https://autoprefixer.github.io/
|
||||
// not sure why...
|
||||
.sek-list-layout article > *:nth-child(1) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
}
|
||||
// article has 2 columns when the thumbnail is displayed
|
||||
.sek-list-layout article.sek-has-thumb {
|
||||
-ms-grid-columns: 30% minmax(0,1fr);
|
||||
grid-template-columns: 30% minmax(0,1fr);
|
||||
}
|
||||
|
||||
// .sek-post-grid-wrapper .sek-list-layout article:not(:last-child) {
|
||||
// margin-bottom: 5%;
|
||||
// padding-bottom: 5%;
|
||||
// }
|
||||
.sek-list-layout article .sek-pg-thumbnail {
|
||||
margin-bottom: 0;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}//.sek-post-grid-wrapper LIST LAYOUT
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// COLUMN LAYOUT
|
||||
.sek-post-grid-wrapper {
|
||||
.sek-grid-layout {
|
||||
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-grid-layout > *:nth-child(1) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
}
|
||||
.sek-grid-layout > *:nth-child(2) {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 3;
|
||||
}
|
||||
}//.sek-post-grid-wrapper COLUMN LAYOUT
|
||||
|
||||
// Masonry
|
||||
.sek-module-inner .nb-masonry-post-grid {
|
||||
// &.nb-waiting-for-images-to-be-loaded {
|
||||
// article figure {
|
||||
// a {
|
||||
// height: auto!important;
|
||||
// padding-top: 0!important;
|
||||
// }
|
||||
// img {
|
||||
// position: relative;
|
||||
// height: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
.sek-grid-items {
|
||||
//display: grid;
|
||||
// grid-gap: 10px;
|
||||
//grid-template-columns: repeat(auto-fill, minmax(250px,1fr))!important;
|
||||
//grid-auto-rows: 5px;
|
||||
&.nb-masonry-grid-images-loaded {
|
||||
grid-auto-rows: 5px;
|
||||
}
|
||||
article { overflow: hidden;}
|
||||
&.sek-thumb-no-custom-height .sek-pg-thumbnail {
|
||||
a {
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Item box shadow
|
||||
.sek-module-inner .nb-item-box-shadow .sek-grid-items article {
|
||||
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// PAGINATION LINKS
|
||||
// added for https://github.com/presscustomizr/nimble-builder/issues/490
|
||||
.sek-post-navigation #sek-nav-below {
|
||||
background-color: #f7f8f9;
|
||||
margin-top: 20px;
|
||||
padding: 5px;
|
||||
.sek-pagination {
|
||||
text-align: center;
|
||||
ul {
|
||||
display: inline-block;
|
||||
vertical-align:
|
||||
middle;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
// &.sek-post-pagination {
|
||||
// @extend .small;
|
||||
// }
|
||||
.page-numbers {
|
||||
font-family: inherit;
|
||||
opacity:0.7;
|
||||
text-decoration: none!important;
|
||||
}
|
||||
.current {
|
||||
font-weight: 600;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.sek-pag-list > * {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.sek-pag-list {
|
||||
margin: 0 -5px;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
padding-top: 20px;;
|
||||
padding-bottom: 20px;;
|
||||
}
|
||||
ul.sek-czr-pager {
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
a, .sek-meta-nav-title {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #5A5A5A;
|
||||
&:hover{
|
||||
color: #3b3b3b;
|
||||
opacity: 1!important;
|
||||
}
|
||||
}
|
||||
.sek-czr-pager > li {
|
||||
display: block;
|
||||
}
|
||||
.sek-nav-dir {
|
||||
display: block;
|
||||
> a {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
a i.arrow {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.page-numbers, a {
|
||||
font-family: inherit;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
// @extend .demi-small;
|
||||
// @extend .caps;
|
||||
// @extend .letter-spacing-2;
|
||||
}
|
||||
//.post-prev a {
|
||||
// left: $base-line-height;
|
||||
//}
|
||||
//.post-next a {
|
||||
// right: $base-line-height;
|
||||
//}
|
||||
.sek-meta-nav {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
transition: all .2s,.6s ease;
|
||||
opacity: .7;
|
||||
}
|
||||
a:hover {
|
||||
.sek-meta-nav {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.sek-meta-nav-title {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// NOV 2020 : max column number grows from 4 to 12
|
||||
// Therefore the following rules are now generated server side which is much more flexible
|
||||
|
||||
// .sek-grid-layout.sek-all-col-1 {
|
||||
// -ms-grid-columns: minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr);
|
||||
// }
|
||||
// .sek-grid-layout.sek-all-col-2 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 20px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 20px;
|
||||
// grid-row-gap: 20px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-all-col-3 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-all-col-4 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-all-col-5 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 10px;
|
||||
// grid-row-gap: 10px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-all-col-6 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 10px;
|
||||
// grid-row-gap: 10px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
// @include media-breakpoint-up(md) {
|
||||
// .sek-post-grid-wrapper {
|
||||
// .sek-grid-layout.sek-desktop-col-1 {
|
||||
// -ms-grid-columns: minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr);
|
||||
// }
|
||||
// .sek-grid-layout.sek-desktop-col-2 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 20px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 20px;
|
||||
// grid-row-gap: 20px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-desktop-col-3 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-desktop-col-4 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr);
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @include media-breakpoint-between(sm, sm) {
|
||||
// .sek-post-grid-wrapper {
|
||||
// .sek-grid-layout.sek-tablet-col-1 {
|
||||
// -ms-grid-columns: minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr)!important;
|
||||
// }
|
||||
// .sek-grid-layout.sek-tablet-col-2 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 20px minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important;
|
||||
// grid-column-gap: 20px;
|
||||
// grid-row-gap: 20px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-tablet-col-3 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-tablet-col-4 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include media-breakpoint-only(xs) {
|
||||
// .sek-post-grid-wrapper {
|
||||
// .sek-grid-layout.sek-mobile-col-1 {
|
||||
// -ms-grid-columns: minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr)!important;
|
||||
// }
|
||||
// .sek-grid-layout.sek-mobile-col-2 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 20px minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important;
|
||||
// grid-column-gap: 20px;
|
||||
// grid-row-gap: 20px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-mobile-col-3 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// .sek-grid-layout.sek-mobile-col-4 {
|
||||
// -ms-grid-columns: minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
|
||||
// grid-column-gap: 15px;
|
||||
// grid-row-gap: 15px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// $grid-breakpoints: (
|
||||
// xs: 0,
|
||||
// sm: 576px,
|
||||
// md: 768px,
|
||||
// lg: 992px,
|
||||
// xl: 1200px
|
||||
// ) !default;
|
||||
|
||||
// @include media-breakpoint-between(sm, sm) {
|
||||
// .sek-post-grid-wrapper.sek-has-tablet-breakpoint {
|
||||
// .sek-list-layout article {
|
||||
// -ms-grid-columns: minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr)!important;//<= important because this property can be customized by users for desktop
|
||||
// grid-gap: 0;
|
||||
// .sek-pg-thumbnail {
|
||||
// margin-bottom: 15px;
|
||||
// }
|
||||
// }
|
||||
// // .sek-grid-layout {
|
||||
// // &[class*="sek-desktop-col-"] {
|
||||
// // grid-template-columns: minmax(0,1fr);
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @include media-breakpoint-only(xs) {
|
||||
// .sek-post-grid-wrapper.sek-has-mobile-breakpoint {
|
||||
// .sek-list-layout article {
|
||||
// -ms-grid-columns: minmax(0,1fr)!important;
|
||||
// grid-template-columns: minmax(0,1fr)!important;//<= important because this property can be customized by users for desktop
|
||||
// grid-gap: 0;
|
||||
// .sek-pg-thumbnail {
|
||||
// margin-bottom: 15px;
|
||||
// }
|
||||
// }
|
||||
// // .sek-grid-layout {
|
||||
// // &[class*="sek-desktop-col-"] {
|
||||
// // grid-template-columns: minmax(0,1fr);
|
||||
// // }
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
/*************************************
|
||||
* QUOTE MODULE
|
||||
*************************************/
|
||||
.sek-quote {
|
||||
p {
|
||||
margin: 0 0 .5em;
|
||||
padding: 0;
|
||||
}
|
||||
.sek-cite {
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
font-style: inherit;
|
||||
}
|
||||
&[data-sek-quote-design="none"] { border-left: none;}//<= make sure the blockquote doesn't inherit another border style from the theme or a plugin
|
||||
.sek-quote-content {
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;//as defined as default value on module registration
|
||||
line-height: 1.5em;
|
||||
color: inherit;
|
||||
}
|
||||
&.sek-quote-design {
|
||||
//reset
|
||||
background: none;
|
||||
font-style: inherit;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding: 15px 0;
|
||||
border: none;
|
||||
> * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
&::before, &::after {
|
||||
display: none;
|
||||
}
|
||||
.sek-cite {
|
||||
padding: 0;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
font-weight: normal;
|
||||
}
|
||||
.sek-quote-inner {
|
||||
color: inherit;
|
||||
}
|
||||
&.sek-quote-icon-before .sek-quote-inner{
|
||||
@if ( true == $is_rtl ) {
|
||||
padding-right: calc( 10px + 0.7 * 50px );//50px is the default size of the quote icon, this CSS rule is overriden in dyn CSS if user changes the font size of the icon
|
||||
}
|
||||
@else {
|
||||
padding-left: calc( 10px + 0.7 * 50px );//50px is the default size of the quote icon, this CSS rule is overriden in dyn CSS if user changes the font size of the icon
|
||||
}
|
||||
}
|
||||
//border before
|
||||
&.sek-border-before {
|
||||
@if ( true == $is_rtl ) {
|
||||
padding-right: 15px;
|
||||
border-right: 5px solid rgba(0,0,0,.1);;
|
||||
}
|
||||
@else {
|
||||
padding-left: 15px;
|
||||
border-left: 5px solid rgba(0,0,0,.1);;
|
||||
}
|
||||
.sek-cite {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin-top: 1.5em;
|
||||
position: relative;
|
||||
//font-style: italic;
|
||||
@if ( true == $is_rtl ) {
|
||||
padding-right: 2.2em;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
@else {
|
||||
padding-left: 2.2em;
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
top: 1em;
|
||||
position: absolute;
|
||||
background: none;
|
||||
width: 2em;
|
||||
height: auto;
|
||||
@if ( true == $is_rtl ) {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
//border color inherited from the text color
|
||||
border-top: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
//icon before
|
||||
&.sek-quote-icon-before {
|
||||
position: relative;
|
||||
display: flex;
|
||||
.sek-quote-content *:last-child {
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
&::before {
|
||||
// Feb 2020 => replaced font awesome by a unicode character well supported
|
||||
// see https://github.com/presscustomizr/nimble-builder/issues/603
|
||||
content: "\275D";//https://unicode-table.com/en/275D/
|
||||
font-family: "Arial Unicode MS", Code2000;//<= https://www.fileformat.info/info/unicode/char/275D/fontsupport.htm
|
||||
font-size: 50px;
|
||||
line-height: 1em;
|
||||
color: #ccc;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
display: flex;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
@if ( true == $is_rtl ) {
|
||||
right: 0;
|
||||
}
|
||||
@else {
|
||||
left: 0;
|
||||
}
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/*************************************
|
||||
* SHORTCODE MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_shortcode_module"] [data-sek-use-flexbox="true"] {
|
||||
// implemented to fix : https://github.com/presscustomizr/nimble-builder/issues/565
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/*************************************
|
||||
* SIMPLE FORM MODULE
|
||||
*************************************/
|
||||
.#{$project-prefix}simple-form-wrapper {
|
||||
input[type=text], textarea {
|
||||
font-size: 16px;
|
||||
width: 100% !important;
|
||||
padding: 0.4em 0.5em;
|
||||
border-radius: 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
font-weight: normal;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
color: #555555;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
textarea {
|
||||
height: auto;
|
||||
max-height: 150px;
|
||||
}
|
||||
.sek-form-field {
|
||||
margin-bottom: 15px;
|
||||
clear: both;
|
||||
}
|
||||
label {
|
||||
// font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
|
||||
color: #444444;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0 0 3px 0;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
&.use-outset-shadow .sek-form-field input[type="text"], &.use-outset-shadow .sek-form-field textarea {
|
||||
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
&.use-inset-shadow .sek-form-field input[type="text"], &.use-inset-shadow .sek-form-field textarea {
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
}
|
||||
#sek-form-respond {
|
||||
padding: 20px 0;
|
||||
}
|
||||
input[type="checkbox"] + label {
|
||||
display: inline;
|
||||
font-weight: bold;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Submission message
|
||||
.sek-form-message {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
&.sek-mail-failure {
|
||||
color: #ff0000;
|
||||
border: 1px solid #ff0000;
|
||||
background: none;
|
||||
background: rgba(255, 0, 0, 0.05);
|
||||
}
|
||||
&.sek-mail-success {
|
||||
color: #008000;
|
||||
border: 1px solid #008000;
|
||||
background: none;
|
||||
background: rgba(0, 128, 0, 0.05);
|
||||
}
|
||||
&.sek-mail-aborted {
|
||||
color: #ffa500;
|
||||
border: 1px solid #ffa500;
|
||||
background: none;
|
||||
background: rgba(255, 165, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Badge visibility
|
||||
.grecaptcha-badge {
|
||||
z-index: 1;//fixes badge not visible in the Customizr theme.
|
||||
}
|
||||
.sek-hide-rc-badge .grecaptcha-badge {
|
||||
display: none;
|
||||
}
|
||||
.sek-show-rc-badge .grecaptcha-badge {
|
||||
display: block;
|
||||
visibility: visible!important;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/*************************************
|
||||
* SOCIAL ICONS MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_social_icons_module"] .sek-module-inner .sek-social-icons-wrapper {
|
||||
margin: 10px 0; //consistent with the 'spacing' default value on module registration
|
||||
}
|
||||
.nb-loc .sek-module-inner .sek-social-icons-wrapper {
|
||||
text-align: center; //consistent with the 'h_alignment_css' default value on module registration
|
||||
> *:not(:last-child) { padding-right: 8px; }
|
||||
> li {
|
||||
display: inline-block;
|
||||
a { color: #707070; }// <= consistent with default
|
||||
.sek-social-icon {
|
||||
font-size: 28px;//<= same as in Hueman theme
|
||||
line-height: 1.5em; //consistent with the default registration param
|
||||
}
|
||||
.sek-social-icon {
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/*************************************
|
||||
* SPACER MODULE
|
||||
*************************************/
|
||||
.sek-module-inner .sek-spacer {
|
||||
height: 20px;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/*************************************
|
||||
* NIMBLE IMAGE MODULE
|
||||
*************************************/
|
||||
.sek-nimble-image-wrapper {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
@at-root .nb-loc [data-sek-level] .sek-module-inner .sek-nimble-image-wrapper a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.nb-icon-text-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//background-color: rgba(206,206,206,0.5);
|
||||
.nb-pro-img-icon {
|
||||
font-size: 80px;
|
||||
line-height: 1em;
|
||||
color: #000000;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.nb-pro-img-text, .nb-pro-img-text * {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
font-weight: 400;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.nb-pro-img-text p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
//hover color consistent with default value
|
||||
&.nb-icon-has-hover-color:hover .nb-pro-img-icon {
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
.sek-nimble-image-mask {
|
||||
position: absolute;
|
||||
border-color: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
z-index: 1;
|
||||
border: 150vw solid;
|
||||
border-color: inherit;
|
||||
box-sizing: content-box;
|
||||
transition: all .3s ease;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
// .sek-nimble-image-wrapper.nb-mask-expand &,
|
||||
// .sek-nimble-image-wrapper.nb-mask-always-shrinked & {
|
||||
// width: 63%;
|
||||
// padding-bottom: 63%;
|
||||
// }
|
||||
// .sek-nimble-image-wrapper.nb-mask-expand.hover &,
|
||||
// .sek-nimble-image-wrapper.nb-mask-expand:hover & {
|
||||
// width: 88%;
|
||||
// padding-bottom: 88%;
|
||||
// }
|
||||
.sek-module-inner .sek-nimble-image-wrapper.nb-mask-expand:hover &,
|
||||
.sek-module-inner .sek-nimble-image-wrapper.nb-mask-shrink &,
|
||||
.sek-module-inner .sek-nimble-image-wrapper.nb-mask-always-expanded & {
|
||||
width: 88%;
|
||||
padding-bottom: 88%;
|
||||
}
|
||||
.sek-module-inner .sek-nimble-image-wrapper.nb-mask-shrink:hover &,
|
||||
.sek-module-inner .sek-nimble-image-wrapper.nb-mask-expand &,
|
||||
.sek-module-inner .sek-nimble-image-wrapper.nb-mask-always-shrinked & {
|
||||
width: 63%;
|
||||
padding-bottom: 63%;
|
||||
}
|
||||
// .sek-nimble-image-wrapper.expanded &,
|
||||
// .sek-nimble-image-wrapper.nb-mask-expand.hover &,
|
||||
// .sek-nimble-image-wrapper.nb-mask-expand:hover & {
|
||||
// transform: scale(1.4);
|
||||
// }
|
||||
}
|
||||
|
||||
.sek-nimble-image-wrapper.nb-circle-mask &::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.sek-nimble-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
/*************************************
|
||||
* TINY MCE EDITOR MODULE
|
||||
*************************************/
|
||||
[data-sek-module-type="czr_tiny_mce_editor_module"] {
|
||||
// Could be improved in the future
|
||||
// see https://css-tricks.com/styling-underlines-web/ and http://benjam.info/blog/posts/2015-01-31-css-underline/
|
||||
a{text-decoration: underline;}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
$is_rtl : true;
|
||||
@import 'sek-base-light';
|
||||
@@ -0,0 +1,22 @@
|
||||
// sek_base and sek_base-light must import the same files !
|
||||
|
||||
// @import "0_0_global_reset.scss"; <= not concatenated for the moment. Well coded themes should have their own reset.
|
||||
// But could be used in the future if an option to dequeue the theme stylesheet is added
|
||||
// see https://github.com/presscustomizr/nimble-builder/issues/702
|
||||
@import "1_1_functions";
|
||||
@import "1_2_variables";
|
||||
@import "1_3_mixins";
|
||||
@import "1_4_reboot";
|
||||
@import "1_5_base";
|
||||
@import "1_6_typography";
|
||||
@import "1_7_grid";
|
||||
@import "1_8_transitions";
|
||||
@import "1_9_utilities";
|
||||
@import "2_1_formatting";
|
||||
@import "2_2_buttons";
|
||||
@import "2_3_wpspecifics";
|
||||
|
||||
//modules
|
||||
@import "3_2_modules_light";
|
||||
|
||||
@import "3_3_modules_commons";
|
||||
@@ -0,0 +1,2 @@
|
||||
$is_rtl : true;
|
||||
@import 'sek-base';
|
||||
@@ -0,0 +1,19 @@
|
||||
// @import "0_0_global_reset.scss"; <= not concatenated for the moment. Well coded themes should have their own reset.
|
||||
// But could be used in the future if an option to dequeue the theme stylesheet is added
|
||||
// see https://github.com/presscustomizr/nimble-builder/issues/702
|
||||
@import "1_1_functions";
|
||||
@import "1_2_variables";
|
||||
@import "1_3_mixins";
|
||||
@import "1_4_reboot";
|
||||
@import "1_5_base";
|
||||
@import "1_6_typography";
|
||||
@import "1_7_grid";
|
||||
@import "1_8_transitions";
|
||||
@import "1_9_utilities";
|
||||
@import "2_1_formatting";
|
||||
@import "2_2_buttons";
|
||||
@import "2_3_wpspecifics";
|
||||
|
||||
@import "3_1_modules";
|
||||
|
||||
@import "3_3_modules_commons";
|
||||
@@ -0,0 +1,84 @@
|
||||
/* ------------------------------------------------------------------------- *
|
||||
* Comments ( added April 2021 for site templates )
|
||||
/* ------------------------------------------------------------------------- */
|
||||
.sektion-wrapper .sek-module-inner {
|
||||
#sek-comments { margin-top: 20px; }
|
||||
|
||||
.sek-commentlist { margin: 0 0 20px 0;list-style: none;}
|
||||
.sek-commentlist li { padding-left: 60px; font-size: 0.93rem; line-height: 1.5714rem; font-weight: 400; }
|
||||
.sek-commentlist .comment-body{ clear: both; position: relative; padding-bottom: 15px;margin: 0; }
|
||||
.sek-commentlist .comment-content{margin: 0;}
|
||||
.sek-commentlist .comment-author,
|
||||
.sek-commentlist .comment-meta .comment-metadata,
|
||||
.sek-commentlist .comment-awaiting-moderation { font-size: 0.8125rem; display: block; float: left; line-height: 1.5384rem;padding: 0 0 0.5rem 0; }
|
||||
.sek-commentlist .comment-meta,
|
||||
.sek-commentlist .comment-author { margin-right: 6px; }
|
||||
.comment-meta .comment-metadata .edit-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.sek-commentlist .fn { color: #444; font-size: 0.8125rem; font-style: normal; font-weight: 600; }
|
||||
.sek-commentlist .says { display: none; }
|
||||
.sek-commentlist .avatar { position: absolute; left: -60px; top: 0; width: 48px; height: 48px; -webkit-border-radius: 3px; border-radius: 3px; }
|
||||
//.sek-commentlist .comment-meta:before { color: #ccc; content: "\f017"; font-family: 'Font Awesome 5 Free'; font-weight: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; font-size: 10px; margin-right: 3px; vertical-align: 4%; }
|
||||
.sek-commentlist .comment-meta a{ color: #757575; }
|
||||
.sek-commentlist .reply { font-size: 0.8125rem; line-height: 1.231rem; }
|
||||
.sek-commentlist .reply a { color: #757575; }
|
||||
.sek-commentlist .reply a:hover { color: #444; }
|
||||
.sek-commentlist .comment-awaiting-moderation { color: #16cfc1; font-style: normal; }
|
||||
|
||||
/* comment text */
|
||||
.sek-commentlist .comment-body p { margin-bottom: 8px; clear: both;font-size: 0.95em; }
|
||||
.sek-commentlist .comment-body strong { font-weight: bold; }
|
||||
.sek-commentlist .comment-body em { font-style: italic; }
|
||||
.sek-commentlist .comment-body ol li { list-style: decimal; margin-left: 2em; padding: 0; }
|
||||
.sek-commentlist .comment-body ul li { list-style: square; margin-left: 2em; padding: 0; }
|
||||
|
||||
/* post author & admin comment */
|
||||
.sek-commentlist li.bypostauthor > .comment-body:after,
|
||||
//.sek-commentlist li.comment-author-admin > .comment-body:after { background: #16cfc1; display: block; position: absolute; content: "\f303"; color: #fff; line-height: 12px; width: 12px; font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; text-align: center; }
|
||||
//.sek-commentlist li.comment-author-admin > .comment-body:after { content: "\f005"; /* star for admin */ }
|
||||
.sek-commentlist li.bypostauthor > .comment-body:after,
|
||||
.sek-commentlist li.comment-author-admin > .comment-body:after { top: 32px; left: -28px; font-size: 10px; padding: 2px; -webkit-border-radius: 3px; border-radius: 3px; }
|
||||
.sek-commentlist li li.bypostauthor > .comment-body:after,
|
||||
.sek-commentlist li li.comment-author-admin > .comment-body:after { top: 22px; left: -26px; font-size: 8px; padding: 1px; -webkit-border-radius: 2px; border-radius: 2px; }
|
||||
|
||||
/* child comment */
|
||||
// .sek-commentlist li ul { }
|
||||
.sek-commentlist li li { padding-left: 48px; margin: 0; }
|
||||
.sek-commentlist li li .avatar { width: 36px; height: 36px; left: -48px; top: 0; }
|
||||
.sek-commentlist li li .comment-meta { left: 70px; }
|
||||
|
||||
/* comments : nav
|
||||
/* ------------------------------------ */
|
||||
.sek-comments-nav { margin-bottom: 20px; }
|
||||
.sek-comments-nav a { font-weight: 600; }
|
||||
.sek-comments-nav .sek-nav-previous { float: left; }
|
||||
.sek-comments-nav .sek-nav-next { float: right; }
|
||||
|
||||
/* comments : form
|
||||
/* ------------------------------------ */
|
||||
.logged-in-as,
|
||||
.comment-notes,
|
||||
.form-allowed-tags { display: none; }
|
||||
#respond { position: relative; }
|
||||
#reply-title { margin-bottom: 20px; }
|
||||
li #reply-title { font-size: 0; margin: 0!important; padding: 0; height: 0; border-top: 0; }
|
||||
#cancel-comment-reply-link { color: #999; display: block; position: absolute; bottom: 26px; right: 20px; font-size: 0.75em; }
|
||||
#cancel-comment-reply-link:hover { color: #777; }
|
||||
#commentform { background: #f1f1f1; padding: 10px 20px 20px; margin-bottom: 15px; -webkit-border-radius: 2px; border-radius: 2px; }
|
||||
#commentform p.comment-form-author { width: 48%; float: left; }
|
||||
#commentform p.comment-form-email { width: 48%; float: right; }
|
||||
#commentform p.comment-form-url,
|
||||
#commentform p.comment-form-comment { clear: both; }
|
||||
#commentform label { padding: 6px 0; font-weight: 600; display: block; }
|
||||
#commentform .comment-form-cookies-consent { padding: 10px 0; clear:both }
|
||||
#commentform .comment-form-cookies-consent label { display: inline; }
|
||||
#commentform input[type="text"],
|
||||
#commentform input[type="email"],
|
||||
#commentform textarea { max-width: 100%; width: 100%; }
|
||||
#commentform textarea { height: 100px; }
|
||||
#commentform p.form-submit { margin-top: 10px; }
|
||||
.logged-in #reply-title { margin-bottom: 20px; }
|
||||
.logged-in #commentform p.comment-form-comment { margin-top: 10px; }
|
||||
.logged-in #commentform p.comment-form-comment label { display: none; }
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/accordion.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/advanced_list.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/button.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/gallery.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/heading.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/icon.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/image.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/img_slider.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/menu.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/post_grid.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/quote.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/simple_form.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/social_icons.scss";
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
@import "../1_1_functions";
|
||||
@import "../1_2_variables";
|
||||
@import "../1_3_mixins";
|
||||
|
||||
//module
|
||||
@import "../modules/special_image.scss";
|
||||
@@ -0,0 +1,3 @@
|
||||
.#{$project-prefix}clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.#{$project-prefix}d#{$infix}-none { display: none !important; }
|
||||
.#{$project-prefix}d#{$infix}-inline { display: inline !important; }
|
||||
.#{$project-prefix}d#{$infix}-inline-block { display: inline-block !important; }
|
||||
.#{$project-prefix}d#{$infix}-block { display: block !important; }
|
||||
.#{$project-prefix}d#{$infix}-table { display: table !important; }
|
||||
.#{$project-prefix}d#{$infix}-table-row { display: table-row !important; }
|
||||
.#{$project-prefix}d#{$infix}-table-cell { display: table-cell !important; }
|
||||
.#{$project-prefix}d#{$infix}-flex { display: flex !important; }
|
||||
.#{$project-prefix}d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// allows a better control over the embedded elements heights like iframes
|
||||
// by specifing a padding-top in percentage to the .#{$project-prefix}embed::before we can have
|
||||
// responsive iframes respecting the aspect ratio defined by the padding-top
|
||||
// the padding-top can be expressed in pixels or any other unit as well, in this case, hence when
|
||||
// we don't need the height to be related to the element's width, we can specify just the height property instead.
|
||||
.#{$project-prefix}embed {
|
||||
position: relative;
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
.#{$project-prefix}embed-inner,
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Flex variation
|
||||
//
|
||||
// Custom styles for additional flex alignment options.
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.#{$project-prefix}flex#{$infix}-row { flex-direction: row !important; }
|
||||
.#{$project-prefix}flex#{$infix}-column { flex-direction: column !important; }
|
||||
.#{$project-prefix}flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
|
||||
.#{$project-prefix}flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
|
||||
|
||||
.#{$project-prefix}flex#{$infix}-wrap { flex-wrap: wrap !important; }
|
||||
.#{$project-prefix}flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
|
||||
.#{$project-prefix}flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
.#{$project-prefix}flex#{$infix}-fill { flex: 1 1 auto !important; }
|
||||
.#{$project-prefix}flex#{$infix}-grow-0 { flex-grow: 0 !important; }
|
||||
.#{$project-prefix}flex#{$infix}-grow-1 { flex-grow: 1 !important; }
|
||||
.#{$project-prefix}flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
|
||||
.#{$project-prefix}flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
|
||||
|
||||
.#{$project-prefix}justify-content#{$infix}-start { justify-content: flex-start !important; }
|
||||
.#{$project-prefix}justify-content#{$infix}-end { justify-content: flex-end !important; }
|
||||
.#{$project-prefix}justify-content#{$infix}-center { justify-content: center !important; }
|
||||
.#{$project-prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
|
||||
.#{$project-prefix}justify-content#{$infix}-around { justify-content: space-around !important; }
|
||||
|
||||
.#{$project-prefix}align-items#{$infix}-start { align-items: flex-start !important; }
|
||||
.#{$project-prefix}align-items#{$infix}-end { align-items: flex-end !important; }
|
||||
.#{$project-prefix}align-items#{$infix}-center { align-items: center !important; }
|
||||
.#{$project-prefix}align-items#{$infix}-baseline { align-items: baseline !important; }
|
||||
.#{$project-prefix}align-items#{$infix}-stretch { align-items: stretch !important; }
|
||||
|
||||
.#{$project-prefix}align-content#{$infix}-start { align-content: flex-start !important; }
|
||||
.#{$project-prefix}align-content#{$infix}-end { align-content: flex-end !important; }
|
||||
.#{$project-prefix}align-content#{$infix}-center { align-content: center !important; }
|
||||
.#{$project-prefix}align-content#{$infix}-between { align-content: space-between !important; }
|
||||
.#{$project-prefix}align-content#{$infix}-around { align-content: space-around !important; }
|
||||
.#{$project-prefix}align-content#{$infix}-stretch { align-content: stretch !important; }
|
||||
|
||||
.#{$project-prefix}align-self#{$infix}-auto { align-self: auto !important; }
|
||||
.#{$project-prefix}align-self#{$infix}-start { align-self: flex-start !important; }
|
||||
.#{$project-prefix}align-self#{$infix}-end { align-self: flex-end !important; }
|
||||
.#{$project-prefix}align-self#{$infix}-center { align-self: center !important; }
|
||||
.#{$project-prefix}align-self#{$infix}-baseline { align-self: baseline !important; }
|
||||
.#{$project-prefix}align-self#{$infix}-stretch { align-self: stretch !important; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// Screenreaders
|
||||
//
|
||||
|
||||
.#{$project-prefix}sr-only {
|
||||
@include sr-only();
|
||||
}
|
||||
|
||||
.#{$project-prefix}sr-only-focusable {
|
||||
@include sr-only-focusable();
|
||||
}
|
||||
Reference in New Issue
Block a user