diff options
| author | Charles <sircharlesaze@gmail.com> | 2020-01-07 13:06:14 +0100 |
|---|---|---|
| committer | Charles <sircharlesaze@gmail.com> | 2020-01-07 13:06:14 +0100 |
| commit | 7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8 (patch) | |
| tree | f7453d7dd5cbaaab246e23810b02d3edf1e451be /srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins | |
| parent | c59bdcf77c50cbe89b4a93782cdd6d9e7532080e (diff) | |
| download | ft_server-7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8.tar.gz ft_server-7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8.tar.bz2 ft_server-7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8.zip | |
Added wordpress
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins')
| -rw-r--r-- | srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss | 132 | ||||
| -rw-r--r-- | srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss | 51 |
2 files changed, 183 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss new file mode 100644 index 0000000..16065f9 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss @@ -0,0 +1,132 @@ +// Rem output with px fallback +@mixin font-size($sizeValue: 1) { + font-size: ($sizeValue * 16) * 1px; + font-size: $sizeValue * 1rem; +} + +// Center block +@mixin center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Clearfix +@mixin clearfix() { + content: ""; + display: table; + table-layout: fixed; +} + +// Clear after (not all clearfix need this also) +@mixin clearfix-after() { + clear: both; +} + +// Column width with margin +@mixin column-width($numberColumns: 3) { + width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns); +} + +@mixin filter-duotone { + + &:before { + background: $color__link; + mix-blend-mode: screen; + opacity: 0.1; + z-index: 2; + } + + &:after { + background: $color__link; + mix-blend-mode: multiply; + opacity: .8; + z-index: 3; + + /* Browsers supporting mix-blend-mode don't need opacity < 1 */ + @supports (mix-blend-mode: multiply) { + opacity: 1; + } + } +} + +@mixin filter-grayscale { + + position: relative; + filter: grayscale(100%); + z-index: 1; + + &:after { + display: block; + width: 100%; + height: 100%; + z-index: 10; + } +} + +@mixin post-section-dash { + + &:before { + background: $color__text-light; + content: "\020"; + display: block; + height: 2px; + margin: $size__spacing-unit 0; + width: 1em; + } +} + +/* If we add the border using a regular CSS border, it won't look good on non-retina devices, + * since its edges can look jagged due to lack of antialiasing. In this case, we are several + * layers of box-shadow to add the border visually, which will render the border smoother. */ + +@mixin box-shadow( $size ) { + box-shadow: + 0 0 0 $size $color__text-light inset, // Original border. + 0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge. + 0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge. +} + +/* Calculates maximum width for post content */ +@mixin postContentMaxWidth() { + + @include media(tablet) { + max-width: $size__site-tablet-content; + } + + @include media(desktop) { + max-width: $size__site-desktop-content; + } +} + +/* Nested sub-menu padding: 10 levels deep */ +@mixin nestedSubMenuPadding() { + + ul { + counter-reset: submenu; + } + + ul > li > a::before { + font-family: $font__body; + font-weight: normal; + content: "\2013\00a0" counters(submenu, "\2013\00a0", none); + counter-increment: submenu + } +} + +/* Ensure all font family declarations come with non-latin fallbacks */ +@mixin font-family( $font_family: $font__body ) { + font-family: $font_family; + @extend %non-latin-fonts; +} + +/* Build our non-latin font styles */ +%non-latin-fonts { + @each $lang, $font__fallback in $font__fallbacks { + &:lang(#{$lang}) { + font-family: unquote( $font__fallback ); + } + } +} + +@import "utilities"; diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss new file mode 100644 index 0000000..c753fe2 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss @@ -0,0 +1,51 @@ + +@mixin media( $res ) { + @if mobile == $res { + @media only screen and (min-width: $mobile_width) { + @content; + } + } + + @if tablet == $res { + @media only screen and (min-width: $tablet_width) { + @content; + } + } + + @if desktop == $res { + @media only screen and (min-width: $desktop_width) { + @content; + } + } + + @if wide == $res { + @media only screen and (min-width: $wide_width) { + @content; + } + } +} + +@mixin link-transition( $attr: color ) { + transition: $attr $link_transition ease-in-out; +} + +@mixin button-transition() { + transition: background $button_transition ease-in-out; +} + +@mixin button-all-transition() { + transition: all $button_transition ease-in-out; +} + +@mixin background-transition() { + transition: background $background_transition ease-in-out; +} + +@mixin selection { + ::-moz-selection { + @content; + } + ::selection { + @content; + } +} |
