Pretty usable.

[wolnelektury.git] / src / wolnelektury / static / 2021 / css / utils / _mixins.scss

diff --git a/src/wolnelektury/static/2021/css/utils/_mixins.scss b/src/wolnelektury/static/2021/css/utils/_mixins.scss
deleted file mode 100644 (file)
index 137b9bd..0000000
--- a/src/wolnelektury/static/2021/css/utils/_mixins.scss
+++ /dev/null
@@ -1,189 +0,0 @@
-/* ------------------------------
-    Util: Mixins
------------------------------- */
-
-/* Calculate px to rem */
-@function calculateRem($size) {
-  $remSize: $size / $base-font-size;
-  @return $remSize * 1rem;
-}
-
-@mixin font-size($size) {
-  font-size: $size;
-  font-size: calculateRem($size);
-}
-
-/* Photoshop letter spacing */
-@function tracking($target) {
-  @return ($target / 1000) * 1rem;
-}
-
-@mixin tracking($target) {
-  letter-spacing: tracking($target);
-}
-
-/* Float fix */
-@mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-/* Input placeholder selector */
-@mixin placeholder {
-  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
-  @each $placeholder in $placeholders {
-    &:#{$placeholder}-placeholder {
-      @content;
-    }
-  }
-}
-
-@mixin keyframes($animation-name) {
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
-@keyframes slide-up {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-    transform: translate(0,0);
-  }
-}
-
-@mixin cascading {
-  @for $i from 1 through 14 {
-    &:nth-child(#{$i}) {
-      animation: slide-up 250ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards  #{$i * 0.1}s;
-    }
-  }
-}
-
-$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%;
-
-@function getColorStop($colorTo, $colorFrom, $weight, $stop) {
-  @return mix($colorFrom, $colorTo, $weight) $stop;
-}
-
-@function getColorStops($colorTo, $colorFrom) {
-  $stops: ();
-  @each $scrimStop in $scrimStops {
-    $stops: append($stops, getColorStop($colorTo, $colorFrom, nth($scrimStop, 1), nth($scrimStop, 2)), comma)
-  }
-  @return $stops;
-}
-
-@function scrim-linear-gradient($args...) {
-  @if (length($args) == 2) {
-    @return linear-gradient(#{getColorStops(nth($args, 1), nth($args, 2))});
-  }
-  @return linear-gradient(#{nth($args, 1)}, #{getColorStops(nth($args, 2), nth($args, 3))});
-}
-
-@function unicode($str) {
-  @return unquote("\"") + $str + unquote("\"");
-}
-
-/* Breakpoints */
-$phone:              450px;
-$smartphone:         767px;
-$tablet:             1024px;
-$only-desktop:       1025px;
-$screen-xs:          1280px;
-$screen-sm:          1368px;
-$screen-md:          1418px;
-$screen-xl:          1680px;
-
-
-@mixin mq($breakpoint) {
-    @media only screen and (max-width: $breakpoint) {
-      @content;
-    }
-
-}
-@mixin rwd($canvas) {
-
-  // Really Small devices
-  @if $canvas == 'phone' {
-    @media only screen and (max-width: $phone) {
-      @content;
-    }
-  }
-
-  // Smartphones
-  @else if $canvas == 'smartphone' {
-    @media only screen and (max-width: $smartphone) {
-      @content;
-    }
-  }
-  @else if $canvas == 'smartphone-portrait' {
-    @media only screen and (max-width: $smartphone) and (orientation: portrait) {
-      @content;
-    }
-  }
-  @else if $canvas == 'smartphone-landscape' {
-    @media only screen and (max-width: $smartphone) and (orientation: landscape) {
-      @content;
-    }
-  }
-
-  // Tablets
-  @else if $canvas == 'tablet' {
-    @media only screen and (max-width: $tablet) {
-      @content;
-    }
-  }
-  @else if $canvas == 'tablet-portrait' {
-    @media only screen and (max-width: $tablet) and (orientation: portrait) {
-      @content;
-    }
-  }
-  @else if $canvas == 'tablet-landscape' {
-    @media only screen and (max-width: $tablet) and (orientation: landscape) {
-      @content;
-    }
-  }
-
-  // Screens
-  @else if  $canvas == 'screen-xs' {
-    @media only screen and (max-width: $screen-xs) {
-      @content;
-    }
-  }
-  @else if $canvas == 'screen-sm' {
-    @media only screen and (max-width: $screen-sm) {
-      @content;
-    }
-  }
-  @else if $canvas == 'screen-md' {
-    @media only screen and (max-width: $screen-md) {
-      @content;
-    }
-  }
-  @else if $canvas == 'screen-xl' {
-    @media only screen and (max-width: $screen-xl) {
-      @content;
-    }
-  }
-
-  // More than tablets
-  @else if $canvas == 'only-desktop' {
-    @media only screen and (min-width: 1025px) {
-      @content;
-    }
-  }
-
-  // Print styles
-  @else if $canvas == 'print' {
-    @media print {
-      @content;
-    }
-  }
-
-}