[Summary view] [Print] [Text view]

   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";