css/mixins.sass
Copying Source is Forbidden
690 lines of code
1
// available functions and mixins
2
//
3
// FUNCTIONS
4
// - getval($map, $key)
5
// - random_clr()
6
//
7
// MIXINS
8
// - modal();
9
// - var($property, $variable)
10
// - mq($maxsize: 480px)
11
// - mediaquery($args...)
12
// - attr-clear($attr: all)
13
// - fix-spacing($ls)
14
// - font-imagined($image_uri, $emphasis: 2.5rem, $color: transparent, $font: inherit)
15
// - uc()
16
// - transition($what: all, $time: 250ms, $type: ease-in-out)
17
// - background-opacity($color, $opacity: 0.3)
18
// - mo-lift($scale: 1.1, $start: 0, $dist: -1.5)
19
// - selected($dist: 3px)
20
// - box-shadow($clr: input-box-shadow-clr, $blur: 5px, $h: 3px, $v: 3px)
21
// - text-shadow($clr: bold-shadow-clr, $blur: 0, $h: 1px, $v: 1px)
22
// - borders($type: solid, $size: 1px, $clr: var(--borders-clr))
23
// - borders-button($clr: var(--borders-clr))
24
// - borders-select($clr: var(--borders-clr))
25
// - rounded($radius: 5px)
26
// - stick-topleft()
27
// - padding($top: 0, $right: 0, $bottom: 0, $left: 0)
28
// - uniform-padding($size: 5px)
29
// - side-padding($size: 5px)
30
// - horiz-margin($size: 0)
31
// - vert-margin($size: 0)
32
// - margin($t: 0, $r: 0, $b: 0, $l: 0)
33
// - uniform-margin($size: 0)
34
// - gradient($g1: var(--gradient-light), $g2: var(--gradient-dark), $g3: var(--gradient-light))
35
// - button-gradient($g1: var(--button-bg), $g2: var(--gradient-light), $g3: var(--button-bg))
36
// - circular-gradient($g1: var(--gradient-light), $g2: var(--gradient-dark), $g3: var(--gradient-light))
37
// - shift-y($dist: 1px)
38
// - buttonize($bg: button-bg, $clr: var(--button-clr))
39
// - font($ff: var(--normal-font) , $fs: var(--normal-font-size), $fw: normal)
40
// - centered($h: center, $v: center)
41
// - h-alignment($h: center)
42
// - v-alignment($v: center)
43
// - centered-right()
44
// - centered-left()
45
// - centered-top()
46
// - centered-bottom()
47
// - subnavbar($t: light, $tc: bold-clr)
48
// - panel($bg: gradient-light, $c: var(--bold-clr),
49
// $fs: var(--normal-font-size), $ff: var(--title-font),
50
// $w: bold,
51
// $bc: var(--borders-clr),
52
// $tsc: bold-shadow-clr,
53
// $bsc: input-box-shadow-clr,
54
// $paddings: 0,
55
// $tpadding: 0,
56
// $rpadding: 5px,
57
// $bpadding: 0,
58
// $lpadding: 5px)
59
// - scrolling($dir: vertical)
60
// - scrollbarred()
61
// - blend-with-bg($mode: luminosity difference)
62
// - blink($name: blink, $clr: #FFF, $count: 4, $speed: 250ms, $what: background-color)
63
// - grid($type: grid, $cols: 1fr, $rows: 1fr, $colgap: 7px, $rowgap: 7px)
64
// - mini-select($i)
65
// - flex($flow: row wrap, $jc: center, $ai: center, $as: center)
66
// - placeholder()
67
// - clearfix()
68
// - snakey-link()
69
// - static-height($h)
70
// - static-width($w)
71
// - static-size($w, $h)
72
// - embolden()
73
// - italicize()
74
// - normal-font()
75
// - sunken($circular: 0, $transparent: 0)
76
77
@function getval($map, $key) {
78
@if map-has-key($map, $key) {
79
@return map-get($map, $key);
80
}
81
82
@warn "Unknown `#{$key}` in $colors.";
83
@return null;
84
}
85
86
@function random_clr() {
87
$clr: rgb(random(256)-1, random(256)-1, random(256)-1);
88
@return $clr;
89
}
90
91
@mixin var($property, $variable) {
92
#{$property}: var(--#{$variable});
93
}
94
95
@mixin mq($maxsize: 480px) {
96
@media screen and (max-width: $maxsize) {
97
@content;
98
}
99
}
100
101
@mixin mediaquery($args...) {
102
@if length($args) == 1 {
103
@media screen and (max-width: nth($args, 1)) {
104
@content;
105
}
106
}
107
108
@if length($args) == 2 {
109
@media screen and (max-width: nth($args, 1)) and (min-width: nth($args, 2)) {
110
@content;
111
}
112
}
113
}
114
115
@mixin attr-clear($attr: all) {
116
$attr: unset;
117
}
118
119
@mixin fix-spacing($ls) {
120
letter-spacing: $ls;
121
margin-right: -$ls;
122
}
123
124
@mixin font-imagined($image_uri, $emphasis: 2.5rem, $color: transparent, $font: inherit) {
125
font-family: $font;
126
font-size: $emphasis;
127
background-image: url($image_uri);
128
background-size: cover;
129
background-clip: text;
130
-webkit-background-clip: text;
131
color: $color;
132
}
133
134
@mixin uc() {
135
font-weight: bold;
136
text-transform: uppercase;
137
letter-spacing: 1px;
138
padding: 0 2px 0 2px;
139
140
::first-letter {
141
font-size: +1;
142
}
143
}
144
145
@mixin transition($what: all, $time: 250ms, $type: ease-in-out) {
146
transition: $what $time $type;
147
backface-visibility: hidden;
148
&:disabled { transition: none; }
149
}
150
151
@mixin background-opacity($color, $opacity: 0.3) {
152
background: rgba($color, $opacity);
153
}
154
155
@mixin mo-lift($scale: 1.1, $start: 0, $dist: -1.5) {
156
transform: translateY($start);
157
158
&:disabled { transform: none; }
159
160
&:hover, &:focus {
161
backface-visibility: hidden;
162
filter: brightness(105%);
163
transform: translateY($start - ($dist * 2));
164
transform: scale($scale) translate3d(0,0,50px);
165
}
166
}
167
168
@mixin selected($dist: 3px) {
169
background-color: var(--gradient-dark);
170
cursor: pointer;
171
transform: translateY($dist);
172
transform: scale(0.8);
173
}
174
175
@mixin box-shadow($clr: input-box-shadow-clr, $blur: 5px, $h: 3px, $v: 3px) {
176
// i'm guessing somewhere along the line i deprecated
177
// or didn't need clr, but never removed it from this function
178
// not sure why or what or wtf. meh, i'll leave it since it
179
// ain't broke!
180
box-shadow: $v $h $blur rgba(0, 0, 0, 0.55);
181
}
182
183
@mixin text-shadow($clr: bold-shadow-clr, $blur: 0, $h: 1px, $v: 1px) {
184
// as mixin box-shadow:
185
// i'm guessing somewhere along the line i deprecated
186
// or didn't need clr, but never removed it from this function
187
// not sure why or what or wtf. meh, i'll leave it since it
188
// ain't broke!
189
text-shadow: $v $h $blur rgba(0, 0, 0, 0.35);
190
}
191
192
@mixin borders($type: solid, $size: 1px, $clr: var(--borders-clr)) {
193
border: $size $type $clr;
194
}
195
196
@mixin borders-button($clr: var(--borders-clr)) {
197
@include borders(outset, 1px, $clr);
198
}
199
200
@mixin borders-select($clr: var(--borders-clr)) {
201
@include borders(outset, 1px, $clr);
202
}
203
204
@mixin rounded($radius: 5px) {
205
border-radius: $radius;
206
}
207
208
@mixin stick-topleft() {
209
transform-origin: top left;
210
}
211
212
@mixin padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
213
padding-top: $top;
214
padding-right: $right;
215
padding-bottom: $bottom;
216
padding-left: $left;
217
}
218
219
@mixin uniform-padding($size: 0) {
220
@include padding($size, $size, $size, $size);
221
}
222
223
@mixin side-padding($size: 5px) {
224
@include padding(0, $size, 0, $size);
225
}
226
227
@mixin margin($t: 0, $r: 0, $b: 0, $l: 0) {
228
margin-top: $t;
229
margin-right: $r;
230
margin-bottom: $b;
231
margin-left: $l;
232
}
233
234
@mixin horiz-margin($size: 0) {
235
@include margin(0, $size, 0, $size);
236
}
237
238
@mixin vert-margin($size: 0) {
239
@include margin($size, 0, $size, 0);
240
}
241
242
@mixin uniform-margin($size: 0) {
243
@include margin($size, $size, $size, $size);
244
}
245
246
@mixin gradient($g1: var(--gradient-light), $g2: var(--gradient-dark), $g3: var(--gradient-light)) {
247
background-color: var(--bg-clr);
248
background-image: linear-gradient(left, $g1, $g2, $g3);
249
background-image: -o-linear-gradient(left, $g1, $g2, $g3);
250
background-image: -ms-linear-gradient(left, $g1, $g2, $g3);
251
background-image: -moz-linear-gradient(left, $g1, $g2, $g3);
252
background-image: -webkit-linear-gradient(left, $g1, $g2, $g3);
253
}
254
255
@mixin button-gradient($g1: rgba(black, 0.25), $g2: rgba(black, 0.5), $g3: rgba(black, 0.25)) {
256
background-image: radial-gradient(top left, $g1, $g1, $g2, $g3, $g3, $g3, $g3, $g3);
257
background-image: -o-radial-gradient(top left, $g1, $g1, $g2, $g3, $g3, $g3, $g3, $g3);
258
background-image: -ms-radial-gradient(top left, $g1, $g1, $g2, $g3, $g3, $g3, $g3, $g3);
259
background-image: -moz-radial-gradient(top left, $g1, $g1, $g2, $g3, $g3, $g3, $g3, $g3);
260
background-image: -webkit-radial-gradient(top left, $g1, $g1, $g2, $g3, $g3, $g3, $g3, $g3);
261
}
262
263
@mixin circular-gradient($g1: rgba(black, 0.25), $g2: rgba(black, 0.38), $g3: rgba(black, 0.45), $reverse: 0) {
264
background-color: var(--gradient-dark);
265
266
@if $reverse == 1 {
267
background-image: radial-gradient(center, $g3, $g2, $g1);
268
background-image: -o-radial-gradient(center, $g3, $g2, $g1);
269
background-image: -ms-radial-gradient(center, $g3, $g2, $g1);
270
background-image: -moz-radial-gradient(center, $g3, $g2, $g1);
271
background-image: -webkit-radial-gradient(center, $g3, $g2, $g1);
272
} @else {
273
background-image: radial-gradient(center, $g1, $g2, $g3);
274
background-image: -o-radial-gradient(center, $g1, $g2, $g3);
275
background-image: -ms-radial-gradient(center, $g1, $g2, $g3);
276
background-image: -moz-radial-gradient(center, $g1, $g2, $g3);
277
background-image: -webkit-radial-gradient(center, $g1, $g2, $g3);
278
}
279
}
280
281
@mixin shift-y($dist: 1px) {
282
transform: transformY($dist);
283
}
284
285
@mixin buttonize($bg: button-bg, $clr: var(--button-clr), $padding: 5px) {
286
background-color: getval($vars, $bg);
287
color: $clr;
288
font-weight: bold;
289
290
&:hover { cursor: url('/images/site/pointer.png'), auto; }
291
292
&:focus {
293
outline: none;
294
border: 1px solid darken(getval($vars, borders-clr), 55%);
295
}
296
297
298
@include button-gradient;
299
@include rounded;
300
@include borders-button;
301
@include side-padding($padding);
302
@include transition;
303
@include box-shadow;
304
@include mo-lift;
305
@include text-shadow;
306
}
307
308
@mixin font($ff: var(--normal-font) , $fs: var(--normal-font-size), $fw: normal) {
309
font-family: $ff;
310
font-size: $fs;
311
font-weight: $fw;
312
}
313
314
@mixin centered($h: auto, $v: auto) {
315
margin: $v $h !important;
316
}
317
318
@mixin h-alignment($h: center) {
319
display: grid;
320
justify-content: $h;
321
min-width: 100%;
322
min-height: 100%;
323
}
324
325
@mixin v-alignment($v: center) {
326
display: grid;
327
align-items: $v;
328
min-width: 100%;
329
min-height: 100%;
330
}
331
332
@mixin centered-right() {
333
@include centered(right, center);
334
}
335
336
@mixin centered-left() {
337
@include centered(left, center);
338
}
339
340
@mixin centered-top() {
341
@include centered(center, top);
342
}
343
344
@mixin centered-bottom() {
345
@include centered(center, bottom);
346
}
347
348
@mixin subnavbar($t: light, $tc: var(--body-clr-dark)) {
349
$c: var(--gradient-#{$t});
350
background-color: $c;
351
color: $tc;
352
353
display: inline-block;
354
padding-top: 2px;
355
padding-right: 5px;
356
padding-bottom: 1px;
357
padding-left: 5px;
358
text-align: center;
359
360
@include rounded;
361
@include borders;
362
@include box-shadow;
363
//@include font(var(--title-font), var(--normal-font-size), bold);
364
365
.title, .subtitle {
366
@include text-shadow;
367
}
368
}
369
370
@mixin panel($bg: gradient-light, $c: var(--body-clr-dark),
371
$fs: inherit, $ff: var(--normal-font),
372
$w: normal,
373
$bc: var(--borders-clr),
374
$bsc: input-box-shadow-clr,
375
$paddings: 0,
376
$tpadding: 0,
377
$rpadding: 5px,
378
$bpadding: 0,
379
$lpadding: 5px,
380
$borderwidth: 1px,
381
$borderstyle: outset) {
382
background-color: getval($vars, $bg) !important;
383
color: $c;
384
display: block;
385
386
@include rounded;
387
@include borders($borderstyle, $borderwidth, $bc);
388
@include box-shadow;
389
@include font($ff, $fs, $w);
390
391
@if $paddings == 1 {
392
@include padding($tpadding, $rpadding, $bpadding, $lpadding);
393
}
394
}
395
396
@mixin scrolling($dir: vertical, $type: scroll) {
397
@if $dir == vertical {
398
overflow-x: hidden;
399
overflow-y: $type;
400
} @else if $dir == horizontal {
401
overflow-x: $type;
402
overflow-y: hidden;
403
} @else if $dir == both {
404
overflow: $type;
405
}
406
407
@include scrollbarred;
408
}
409
410
@mixin scrollbarred() {
411
padding-right: 3px;
412
413
&::-webkit-scrollbar {
414
border: 1px inset var(--borders-clr);
415
background-color: var(--gradient-dark);
416
height: 12px;
417
width: 12px;
418
419
@include rounded;
420
}
421
422
&::-webkit-scrollbar-thumb {
423
border: 1px outset var(--borders-clr);
424
background-color: var(--gradient-light);
425
width: 10px;
426
427
@include rounded;
428
}
429
430
&::-webkit-scrollbar-track {
431
background-color: transparent;
432
}
433
}
434
435
@mixin blend-with-bg($mode: luminosity difference) {
436
mix-blend-mode: $mode;
437
}
438
439
@mixin blink($name: blink, $clr: #FFF, $count: 8, $speed: 250ms, $what: background-color) {
440
animation: #{$name} $speed;
441
animation-iteration-count: $count;
442
443
@keyframes #{$name} { 50% { #{$what}: $clr; } }
444
}
445
446
@mixin grid($type: grid, $cols: 1fr, $rows: 1fr, $colgap: 7px, $rowgap: 7px) {
447
//border: 1px solid random_clr();
448
display: $type;
449
grid-template-columns: $cols;
450
grid-template-rows: $rows;
451
column-gap: $colgap;
452
row-gap: $rowgap;
453
}
454
455
@mixin mini-select($i) {
456
-webkit-appearance: none;
457
color: transparent;
458
background: url($i) no-repeat center;
459
background-color: var(--input-bg) !important;
460
background-size: contain !important;
461
max-width: 16px;
462
min-width: 16px;
463
margin-right: 2px;
464
465
@include mo-lift;
466
}
467
468
@mixin flex($flow: row wrap, $jc: center, $ai: center, $as: center) {
469
//border: 1px solid random_clr();
470
display: flex;
471
flex-flow: $flow;
472
justify-content: $jc;
473
align-items: $ai;
474
475
.item {
476
//border: 1px solid random_clr();
477
align-self: $as;
478
padding: 5px;
479
}
480
}
481
482
@mixin placeholder() {
483
$clr: lighten(getval($vars, input-clr), 50%);
484
$bg: transparent;
485
486
&::placeholder {
487
background-color: $bg; color: $clr;
488
text-align: center;
489
font-size: var(--tiny-font-size);
490
}
491
492
&::-moz-placeholder {
493
background-color: $bg; color: $clr;
494
text-align: center;
495
font-size: var(--tiny-font-size);
496
}
497
498
&::-ms-placeholder {
499
background-color: $bg; color: $clr;
500
text-align: center;
501
font-size: var(--tiny-font-size);
502
}
503
504
&::-webkit-input-placeholder {
505
background-color: $bg; color: $clr;
506
text-align: center;
507
font-size: var(--tiny-font-size);
508
}
509
}
510
511
@mixin clearfix() {
512
&:after {
513
content: "";
514
display: block;
515
clear: both;
516
}
517
}
518
519
@mixin snakey-link() {
520
color: var(--link-clr);
521
position: relative;
522
523
&:hover {
524
cursor: pointer;
525
}
526
527
&::after {
528
content: "";
529
position: absolute;
530
left: 0;
531
bottom: 0;
532
width: 100%;
533
height: 1px;
534
background: var(--link-clr);
535
transform: scaleX(0);
536
transform-origin: right;
537
transition: transform 250ms ease-in-out;
538
}
539
540
&:hover::after {
541
transform: scaleX(1);
542
transform-origin: left;
543
}
544
}
545
546
@mixin modal() {
547
@include rounded();
548
@include borders($size: 3px, $type: ridge, $clr: #888888);
549
@include transition();
550
551
position: fixed;
552
z-index: 1000;
553
top: 15px;
554
bottom: 15px;
555
left: 15px;
556
right: 15px;
557
box-shadow: 0 0 0 15px rgba(black, 0.5);
558
559
display: none;
560
561
@include circular-gradient($g2: var(--charcoal), $g3: var(--charcoal));
562
563
&.is-open {
564
display: block;
565
}
566
567
.modal-close {
568
background: var(--medium-red);
569
position: fixed;
570
left: 7px;
571
top: 7px;
572
border: 0;
573
width: 30px;
574
height: 25px;
575
border-radius: 50%;
576
cursor: pointer;
577
box-shadow: 0 0 5px rgba(black, 0.5);
578
@include mo-lift();
579
}
580
581
.modal-container {
582
@include grid(grid, 1fr, min-content 1fr min-content);
583
584
//border: 1px solid red;
585
height: 100%;
586
587
.modal-header {
588
//border: 1px solid red;
589
text-align: center;
590
padding: 10px;
591
}
592
593
.modal-content {
594
@include centered;
595
//border: 1px solid red;
596
padding: 5px;
597
text-align: center;
598
@include scrollbarred;
599
@include scrolling(both);
600
}
601
602
.modal-footer {
603
//border: 1px solid red;
604
text-align: center;
605
padding: 10px;
606
}
607
}
608
609
a {
610
color: yellow;
611
}
612
613
@keyframes modalFadeIn {
614
0% { opacity: 0; }
615
100% { opacity: 1; }
616
}
617
618
@keyframes modalFadeOut {
619
0% { opacity: 1; }
620
100% { opacity: 0; }
621
}
622
}
623
624
@mixin sunken($circular: 0, $transparent: 0) {
625
border: 2px inset var(--borders-clr);
626
627
@include rounded();
628
629
@if $transparent == 0 {
630
background-color: var(--gradient-dark);
631
632
@if $circular == 1 {
633
@include circular-gradient();
634
} @else {
635
@include gradient();
636
}
637
}
638
}
639
640
@mixin static-height($h) {
641
height: $h;
642
max-height: $h;
643
min-height: $h;
644
}
645
646
@mixin static-width($w) {
647
width: $w;
648
max-width: $w;
649
min-width: $w;
650
}
651
652
@mixin static-size($w, $h) {
653
@include static-height($h);
654
@include static-width($w);
655
}
656
657
@mixin embolden() {
658
font-weight: bold;
659
}
660
661
@mixin italicize() {
662
font-style: italic;
663
}
664
665
@mixin normal-font() {
666
font-size: var(--normal-font-size);
667
font-style: none;
668
font-weight: normal;
669
}
670
671
@mixin triangle($s: 5px, $top: transparent, $right: transparent, $bottom: transparent, $left: transparent) {
672
position: relative;
673
674
$trans: 0;
675
@if $top != transparent { $trans: 1; }
676
@if $right != transparent { $trans: 1; }
677
@if $bottom != transparent { $trans: 1; }
678
@if $left != transparent { $trans: 1; }
679
@if $trans == 1 { $right: var(--black); }
680
681
&::after {
682
content: '';
683
position: absolute;
684
left: calc(-$s * 2);
685
top: 2px;
686
687
border: $s solid transparent;
688
border-color: $top $right $bottom $left;
689
}
690
}