_mixins-master.scss (2887B)
1 // Rem output with px fallback 2 @mixin font-size($sizeValue: 1) { 3 font-size: ($sizeValue * 16) * 1px; 4 font-size: $sizeValue * 1rem; 5 } 6 7 // Center block 8 @mixin center-block { 9 display: block; 10 margin-left: auto; 11 margin-right: auto; 12 } 13 14 // Clearfix 15 @mixin clearfix() { 16 content: ""; 17 display: table; 18 table-layout: fixed; 19 } 20 21 // Clear after (not all clearfix need this also) 22 @mixin clearfix-after() { 23 clear: both; 24 } 25 26 // Column width with margin 27 @mixin column-width($numberColumns: 3) { 28 width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns); 29 } 30 31 @mixin filter-duotone { 32 33 &:before { 34 background: $color__link; 35 mix-blend-mode: screen; 36 opacity: 0.1; 37 z-index: 2; 38 } 39 40 &:after { 41 background: $color__link; 42 mix-blend-mode: multiply; 43 opacity: .8; 44 z-index: 3; 45 46 /* Browsers supporting mix-blend-mode don't need opacity < 1 */ 47 @supports (mix-blend-mode: multiply) { 48 opacity: 1; 49 } 50 } 51 } 52 53 @mixin filter-grayscale { 54 55 position: relative; 56 filter: grayscale(100%); 57 z-index: 1; 58 59 &:after { 60 display: block; 61 width: 100%; 62 height: 100%; 63 z-index: 10; 64 } 65 } 66 67 @mixin post-section-dash { 68 69 &:before { 70 background: $color__text-light; 71 content: "\020"; 72 display: block; 73 height: 2px; 74 margin: $size__spacing-unit 0; 75 width: 1em; 76 } 77 78 &.has-text-align-center:before { 79 margin-left: auto; 80 margin-right: auto; 81 } 82 83 &.has-text-align-right:before { 84 margin-left: auto; 85 } 86 } 87 88 /* If we add the border using a regular CSS border, it won't look good on non-retina devices, 89 * since its edges can look jagged due to lack of antialiasing. In this case, we are several 90 * layers of box-shadow to add the border visually, which will render the border smoother. */ 91 92 @mixin box-shadow( $size ) { 93 box-shadow: 94 0 0 0 $size $color__text-light inset, // Original border. 95 0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge. 96 0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge. 97 } 98 99 /* Calculates maximum width for post content */ 100 @mixin postContentMaxWidth() { 101 102 @include media(tablet) { 103 max-width: $size__site-tablet-content; 104 } 105 106 @include media(desktop) { 107 max-width: $size__site-desktop-content; 108 } 109 } 110 111 /* Nested sub-menu padding: 10 levels deep */ 112 @mixin nestedSubMenuPadding() { 113 114 ul { 115 counter-reset: submenu; 116 } 117 118 ul > li > a::before { 119 font-family: $font__body; 120 font-weight: normal; 121 content: "\2013\00a0" counters(submenu, "\2013\00a0", none); 122 counter-increment: submenu 123 } 124 } 125 126 /* Ensure all font family declarations come with non-latin fallbacks */ 127 @mixin font-family( $font_family: $font__body ) { 128 font-family: $font_family; 129 @extend %non-latin-fonts; 130 } 131 132 /* Build our non-latin font styles */ 133 %non-latin-fonts { 134 @each $lang, $font__fallback in $font__fallbacks { 135 &:lang(#{$lang}) { 136 font-family: unquote( $font__fallback ); 137 } 138 } 139 } 140 141 @import "utilities";