diff options
Diffstat (limited to 'themes/twentynineteen/sass/mixins/_mixins-master.scss')
-rw-r--r-- | themes/twentynineteen/sass/mixins/_mixins-master.scss | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/mixins/_mixins-master.scss b/themes/twentynineteen/sass/mixins/_mixins-master.scss new file mode 100644 index 00000000..71ca4f68 --- /dev/null +++ b/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"; |