1@use "src/corners" as c;
2@use "src/corners" as *;
3
4/* private vars */
5$-radius: 3px;
6$_radius: 3px;
7
8$black: #000 !default;
9
10@use 'library' with (
11 $black: #222,
12 $config: (
13 important: true,
14 utility: (
15 leading-trim: trim,
16 properties: (leading-trim),
17 variants: (
18 both: both
19 )
20 )
21 )
22);
23
24@use 'library' as * with (
25 $black: #222;
26);
27
28.content {
29 $variable: value !global;
30 value: $variable;
31}
32
33$roboto-font-path: "../fonts/roboto";
34
35@font-face {
36 // This is parsed as a normal function call that takes a quoted string.
37 src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");
38
39 font-family: "Roboto";
40 font-weight: 100;
41}
42
43@use 'base';
44$primary-color: red;
45.inverse {
46 background-color: base.$primary-color;
47 color: white;
48}
49
50ul > {
51 li {
52 list-style-type: none;
53 }
54}
55
56h2 {
57 + p {
58 border-top: 1px solid gray;
59 }
60}
61
62p {
63 ~ {
64 span {
65 opacity: 0.8;
66 }
67 }
68}
69
70.button {
71 border: 1px solid black;
72 border-radius: if($rounded-corners, 5px, null);
73}
74
75$base-color: #036;
76
77@for $i from 1 through 3 {
78 ul:nth-child(3n + #{$i}) {
79 background-color: lighten($base-color, $i * 5%);
80 }
81}
82
83@function scale-below($value, $base, $ratio: 1.618) {
84 @while $value > $base {
85 $value: $value / $ratio;
86 }
87 @return $value;
88}
89
90$normal-font-size: 16px;
91sup {
92 font-size: scale-below(20px, 16px);
93}
94
95$sizes: 40px, 50px, 80px;
96
97@each $size in $sizes {
98 .icon-#{$size} {
99 font-size: $size;
100 height: $size;
101 width: $size;
102 }
103}
104
105@each $name, $glyph in $icons {
106 .icon-#{$name}:before {
107 display: inline-block;
108 font-family: "Icon Font";
109 content: $glyph;
110 }
111}
112
113$icons:
114 "eye" "\f112" 12px,
115 "start" "\f12e" 16px,
116 "stop" "\f12f" 10px;
117
118@each $name, $glyph, $size in $icons {
119 .icon-#{$name}:before {
120 display: inline-block;
121 font-family: "Icon Font";
122 content: $glyph;
123 font-size: $size;
124 }
125}
126
127@mixin triangle($size, $color, $direction) {
128 height: 0;
129 width: 0;
130
131 border-color: transparent;
132 border-style: solid;
133 border-width: $size / 2;
134
135 @if $direction == up {
136 border-bottom-color: $color;
137 } @else if $direction == right {
138 border-left-color: $color;
139 } @else if $direction == down {
140 border-top-color: $color;
141 } @else if $direction == left {
142 border-right-color: $color;
143 } @else {
144 @error "Unknown direction #{$direction}.";
145 }
146}
147
148.next {
149 @include triangle(5px, black, right);
150}
151
152$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
153
154@each $name, $glyph in $icons {
155 .icon-#{$name}:before {
156 display: inline-block;
157 font-family: "Icon Font";
158 content: $glyph;
159 }
160}
161
162/* This CSS will print because %message-shared is extended. */
163%message-shared {
164 border: 1px solid #ccc;
165 padding: 10px;
166 color: #333;
167}
168
169// This CSS won't print because %equal-heights is never extended.
170%equal-heights {
171 display: flex;
172 flex-wrap: wrap;
173}
174
175.message {
176 @extend %message-shared;
177}
178
179.success {
180 @extend %message-shared;
181 border-color: green;
182}
183
184.error {
185 @extend %message-shared;
186 border-color: red;
187}
188
189.warning {
190 @extend %message-shared;
191 border-color: yellow;
192}
193
194$grid-gutter-width : 1rem;
195
196// lightbox
197$lightbox_small_maxHeight: calc(100vh - 1rem);
198$lightbox_small_maxWidth: calc(100vw - 1rem);
199
200$lightbox_medium_mediaMinWidth: 400px;
201$lightbox_medium_maxHeight: 90vh;
202$lightbox_medium_maxWidth: 90vw;
203
204$lightbox_large_mediaMinWidth: 1200px;
205$lightbox_large_maxHeight: 90vh;
206$lightbox_large_maxWidth: 70vw;
207
208$lightbox_xxl_mediaMinWidth: 1600px;
209$lightbox_xxl_maxHeight: 90vh;
210$lightbox_xxl_maxWidth: 1100px;
211
212$lightbox_padding: $grid-gutter-width / 2;
213$lightbox_header-height: 1rem;
214$lightbox_border_radius: 3px;
215
216// lightbox colors
217$eee: #eee;
218$lightbox_close-color: #333;
219$lightbox_background_content: white;
220$lightbox_background_header: #f5f5f5;
221$lightbox_border: 1px solid $eee;
222$lightbox_overlay_color: transparentize(black, .4);
223$lightbox_shadow: 0 2px 5px rgba(0, 0, 0, .2);
224
225.hffLightbox {
226 @mixin lb_styles_background {
227 background: $lightbox_overlay_color;
228 }
229 @mixin lb_styles {
230 border-radius: $lightbox_border_radius;
231 border: $lightbox_border;
232 background: $lightbox_background_content;
233 box-shadow: 0 2px 5px $lightbox_shadow;
234 }
235 @mixin lb_styles-header {
236 background: $lightbox_background_header;
237 border-bottom: $lightbox_border;
238 }
239 @mixin lb_styles-headline {
240 font-weight: bold;
241 }
242 @mixin lb_styles-content {
243 }
244
245 &, & * {
246 box-sizing: border-box;
247 }
248 position: fixed;
249 height: 200vh;
250 width: 200vw;
251 left: -50vw;
252 top: -50vh;
253 @include lb_styles_background();
254 z-index: 1000;
255
256 &-wrapper {
257 transition: all ease-in-out .5s;
258 animation-name: fadeInLightbox;
259 animation-duration: .5s;
260 overflow: hidden;
261 left: 50%;
262 top: 50%;
263 max-width: 2000px;
264 max-height: $lightbox_small_maxHeight;
265 width: $lightbox_small_maxWidth;
266 position: absolute;
267 transform: translate(-50%, -50%);
268 @include lb_styles();
269 }
270 &-content {
271 overflow: auto;
272 @include lb_styles-content();
273 max-height: calc(#{$lightbox_small_maxHeight} - 4rem);
274 }
275 &-header {
276 overflow: hidden;
277 @include lb_styles-header();
278 &-headline {
279 line-height: 1rem;
280 padding-right: calc(#{$lightbox_header-height} * 2);
281 overflow: hidden;
282 text-overflow: ellipsis;
283 max-height: $lightbox_header-height;
284 text-transform: uppercase;
285 @include lb_styles-headline();
286 }
287 }
288 &-footer > .class {
289
290 }
291 &-footer .class {
292
293 }
294 &-footer, .class > #id {
295
296 }
297 &-content, &-header, &-footer {
298 padding: $lightbox_padding;
299 }
300 &-close {
301 cursor: pointer;
302 position: absolute;
303 right: $lightbox_padding;
304 top: $lightbox_padding;
305 width: $lightbox_header-height;
306 height: $lightbox_header-height;
307 opacity: 0.7;
308 text-indent: -1000;
309 font-size: 0;
310 &:hover {
311 opacity: 1;
312 }
313 &:before, &:after {
314 position: absolute;
315 left: 50%;
316 top: 0;
317 transform: translate(-50%, -50%);
318 content: ' ';
319 height: $lightbox_header-height;
320 width: 2px;
321 background-color: $lightbox_close-color;
322 }
323 &:before {
324 transform: rotate(45deg);
325 }
326 &:after {
327 transform: rotate(-45deg);
328 }
329 }
330}
331
332@media (min-width: #{$lightbox_medium_mediaMinWidth}) {
333 .hffLightbox-wrapper {
334 max-height: $lightbox_medium_maxHeight;
335 width: $lightbox_medium_maxWidth;
336 }
337 .hffLightbox-content {
338 max-height: calc(#{$lightbox_medium_maxHeight} - 4rem);
339 }
340}
341
342@media (min-width: #{$lightbox_large_mediaMinWidth}) {
343 .hffLightbox-wrapper {
344 max-height: $lightbox_large_maxHeight;
345 width: $lightbox_large_maxWidth;
346 }
347 .hffLightbox-content {
348 max-height: calc(#{$lightbox_large_maxHeight} - 4rem);
349 }
350}
351$wrapper: 'wrapper';
352$max: 'max';
353$hffLightBox: '.hfflightbox';
354$hffLightBox2: '.hfflightbox';
355@media (min-width: #{$lightbox_xxl_mediaMinWidth}) {
356 .hffLightbox-#{$wrapper} {
357 max-height: $lightbox_xxl_maxHeight;
358 #{$max}-height: $lightbox_xxl_maxHeight;
359 width: $lightbox_xxl_maxWidth;
360 }
361 .hffLightbox-content {
362 max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
363 }
364 #{$hffLightBox}-content {
365 max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
366 }
367 .#{$hffLightBox2}-content {
368 max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
369 }
370}View as plain text