[Summary view] [Print] [Text view]

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