Nicer search, minor fixes.
[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
17
18 /* Breakpoints */
19 $tablet:             1024px;
20
21
22 // under...
23
24 $break2: 360px;
25 $break3: 520px;
26 $break4: 680px;
27 $break5: 840px;
28 // somewhere here -- widen?
29 $break-wide: 1172px;
30
31 $screen-md:          1418px;
32
33 $B2: $break2;
34 $B3: $break3;
35 $B4: $break4;
36 $B5: $break5;
37
38 $break-menu: $break5;
39 $break-footer: $break5;
40 $break-flow: $break5;
41
42
43 @mixin rwd($canvas) {
44     //@if $canvas == 'phone' {
45     //} @else if $...
46     @media only screen and (min-width: $canvas) {
47         @content;
48     }
49 }
50
51 /*
52   // Print styles
53   @else if $canvas == 'print' {
54     @media print {
55       @content;
56     }
57   }
58
59 }
60 */
61
62
63 .only-l {
64     display: none;
65     @include rwd($break5) {
66         display: block;
67     }
68 }
69 .only-s {
70     display: block;
71     @include rwd($break5) {
72         display: none;
73     }
74 }
75
76 .lay-row {
77     display: flex;
78     flex-direction: row;
79     column-gap: 16px;
80 }
81 .lay-col {
82     display: flex;
83     flex-direction: column;
84 }
85 .lay-spread {
86     justify-content: space-between;
87 }
88 .lay-l-row {
89     @include rwd($break5) {
90         display: flex;
91         flex-direction: row;
92     }
93 }
94 .lay-l-block {
95     @include rwd($break5) {
96         display: block;
97     }
98 }
99 .lay-s-col-rev {
100     flex-direction: column-reverse;
101     @include rwd($break5) {
102         flex-direction: row;
103     }
104 }
105 .lay-grow {
106     flex-grow: 1;
107 }
108
109
110
111 $max-logical-viewport-width: 1140px + 32px;
112
113 @mixin lvw($property, $size) {
114     #{$property}: $size * $max-logical-viewport-width / 100;
115     
116     @include rwd($break-wide) {
117         #{$property}: $size * 1vw;
118     }
119 }