Simplify transitional files a bit.
[wolnelektury.git] / 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 }