X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/8a078a30db08afb680c48ce94d6e576236febeed..16c39b15d9a1516d9cbfa99288747260493cbb15:/src/wolnelektury/static/2021/css/utils/_mixins.scss?ds=inline diff --git a/src/wolnelektury/static/2021/css/utils/_mixins.scss b/src/wolnelektury/static/2021/css/utils/_mixins.scss deleted file mode 100644 index 137b9bddb..000000000 --- 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; - } - } - -}