[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

title

Body

[close]

/wp-content/themes/twentynineteen/sass/mixins/ -> _mixins-master.scss (source)

   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  
  79  /* If we add the border using a regular CSS border, it won't look good on non-retina devices,
  80   * since its edges can look jagged due to lack of antialiasing. In this case, we are several
  81   * layers of box-shadow to add the border visually, which will render the border smoother. */
  82  
  83  @mixin box-shadow( $size ) {
  84      box-shadow:
  85          0 0 0 $size $color__text-light inset,           // Original border.
  86          0 0 0 ($size + 1px) $color__text-light inset,   // Antialiasing, inner edge.
  87          0 0 1px 0 rgba( $color__text-light, 0.7 );      // Antialiasing, outer edge.
  88  }
  89  
  90  /* Calculates maximum width for post content */
  91  @mixin postContentMaxWidth() {
  92  
  93      @include media(tablet) {
  94          max-width: $size__site-tablet-content;
  95      }
  96  
  97      @include media(desktop) {
  98          max-width: $size__site-desktop-content;
  99      }
 100  }
 101  
 102  /* Nested sub-menu padding: 10 levels deep */
 103  @mixin nestedSubMenuPadding() {
 104  
 105      ul {
 106          counter-reset: submenu;
 107      }
 108  
 109      ul > li > a::before {
 110          font-family: $font__body;
 111          font-weight: normal;
 112          content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
 113          counter-increment: submenu
 114      }
 115  }
 116  
 117  /* Ensure all font family declarations come with non-latin fallbacks */
 118  @mixin font-family( $font_family: $font__body ) {
 119      font-family: $font_family;
 120      @extend %non-latin-fonts;
 121  }
 122  
 123  /* Build our non-latin font styles */
 124  %non-latin-fonts {
 125      @each $lang, $font__fallback in $font__fallbacks {
 126          &:lang(#{$lang}) {
 127              font-family: unquote( $font__fallback );
 128          }
 129      }
 130  }
 131  
 132  @import "utilities";


Generated: Tue Oct 22 08:20:01 2019 Cross-referenced by PHPXref 0.7