src/wolnelektury/static/2022/styles/utils/_mixins.scss

   1 /* ------------------------------
   2     Util: Mixins
   3 ------------------------------ */
   4
   5 /* Calculate px to rem */
   6 @function calculateRem($size) {
   7   $remSize: $size / $base-font-size;
   8   @return $remSize * 1rem;
   9 }
  10
  11 @mixin font-size($size) {
  12   font-size: $size;
  13   font-size: calculateRem($size);
  14 }
  15
  16 /* Photoshop letter spacing */
  17 @function tracking($target) {
  18   @return ($target / 1000) * 1rem;
  19 }
  20
  21 @mixin tracking($target) {
  22   letter-spacing: tracking($target);
  23 }
  24
  25 /* Float fix */
  26 @mixin clearfix {
  27   &:after {
  28     content: "";
  29     display: table;
  30     clear: both;
  31   }
  32 }
  33
  34 /* Input placeholder selector */
  35 @mixin placeholder {
  36   $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
  37   @each $placeholder in $placeholders {
  38     &:#{$placeholder}-placeholder {
  39       @content;
  40     }
  41   }
  42 }
  43
  44 @mixin keyframes($animation-name) {
  45   @keyframes #{$animation-name} {
  46     @content;
  47   }
  48 }
  49
  50 @keyframes slide-up {
  51   from {
  52     opacity: 0;
  53   }
  54   to {
  55     opacity: 1;
  56     transform: translate(0,0);
  57   }
  58 }
  59
  60 @mixin cascading {
  61   @for $i from 1 through 14 {
  62     &:nth-child(#{$i}) {
  63       animation: slide-up 250ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards  #{$i * 0.1}s;
  64     }
  65   }
  66 }
  67
  68 $scrimStops: 0% 0%, 26.2% 19%, 45.9% 34%, 61.8% 47%, 72.2% 56.5%, 80.6% 65%, 87.4% 73%, 92.5% 80.2%, 95.8% 86.1%, 97.9% 91%, 99.2% 95.2%, 99.8% 98.2%, 100% 100%;
  69
  70 @function getColorStop($colorTo, $colorFrom, $weight, $stop) {
  71   @return mix($colorFrom, $colorTo, $weight) $stop;
  72 }
  73
  74 @function getColorStops($colorTo, $colorFrom) {
  75   $stops: ();
  76   @each $scrimStop in $scrimStops {
  77     $stops: append($stops, getColorStop($colorTo, $colorFrom, nth($scrimStop, 1), nth($scrimStop, 2)), comma)
  78   }
  79   @return $stops;
  80 }
  81
  82 @function scrim-linear-gradient($args...) {
  83   @if (length($args) == 2) {
  84     @return linear-gradient(#{getColorStops(nth($args, 1), nth($args, 2))});
  85   }
  86   @return linear-gradient(#{nth($args, 1)}, #{getColorStops(nth($args, 2), nth($args, 3))});
  87 }
  88
  89 @function unicode($str) {
  90   @return unquote("\"") + $str + unquote("\"");
  91 }
  92
  93 /* Breakpoints */
  94 $phone:              450px;
  95 $smartphone:         767px;
  96 $tablet:             1024px;
  97 $only-desktop:       1025px;
  98 $screen-xs:          1280px;
  99 $screen-sm:          1368px;
 100 $screen-md:          1418px;
 101 $screen-xl:          1680px;
 102
 103
 104 @mixin mq($breakpoint) {
 105     @media only screen and (max-width: $breakpoint) {
 106       @content;
 107     }
 108
 109 }
 110 @mixin rwd($canvas) {
 111
 112   // Really Small devices
 113   @if $canvas == 'phone' {
 114     @media only screen and (max-width: $phone) {
 115       @content;
 116     }
 117   }
 118
 119   // Smartphones
 120   @else if $canvas == 'smartphone' {
 121     @media only screen and (max-width: $smartphone) {
 122       @content;
 123     }
 124   }
 125   @else if $canvas == 'smartphone-portrait' {
 126     @media only screen and (max-width: $smartphone) and (orientation: portrait) {
 127       @content;
 128     }
 129   }
 130   @else if $canvas == 'smartphone-landscape' {
 131     @media only screen and (max-width: $smartphone) and (orientation: landscape) {
 132       @content;
 133     }
 134   }
 135
 136   // Tablets
 137   @else if $canvas == 'tablet' {
 138     @media only screen and (max-width: $tablet) {
 139       @content;
 140     }
 141   }
 142   @else if $canvas == 'tablet-portrait' {
 143     @media only screen and (max-width: $tablet) and (orientation: portrait) {
 144       @content;
 145     }
 146   }
 147   @else if $canvas == 'tablet-landscape' {
 148     @media only screen and (max-width: $tablet) and (orientation: landscape) {
 149       @content;
 150     }
 151   }
 152
 153   // Screens
 154   @else if  $canvas == 'screen-xs' {
 155     @media only screen and (max-width: $screen-xs) {
 156       @content;
 157     }
 158   }
 159   @else if $canvas == 'screen-sm' {
 160     @media only screen and (max-width: $screen-sm) {
 161       @content;
 162     }
 163   }
 164   @else if $canvas == 'screen-md' {
 165     @media only screen and (max-width: $screen-md) {
 166       @content;
 167     }
 168   }
 169   @else if $canvas == 'screen-xl' {
 170     @media only screen and (max-width: $screen-xl) {
 171       @content;
 172     }
 173   }
 174
 175   // More than tablets
 176   @else if $canvas == 'only-desktop' {
 177     @media only screen and (min-width: 1025px) {
 178       @content;
 179     }
 180   }
 181
 182   // Print styles
 183   @else if $canvas == 'print' {
 184     @media print {
 185       @content;
 186     }
 187   }
 188
 189 }