1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
@use 'sass:math';
// --------------------------------
// Typography
// --------------------------------
// edit font rendering -> tip: use for light text on dark backgrounds
@mixin fontSmooth {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// crop top space on text elements - caused by line height
@mixin lhCrop($line-height, $capital-letter: 1) {
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
}
// edit text unit on a component level
@mixin textUnit($text-unit) {
--text-unit: #{$text-unit};
font-size: var(--text-unit);
}
// --------------------------------
// Spacing
// --------------------------------
// edit space unit on a component level
@mixin spaceUnit($space-unit) {
--space-unit: #{$space-unit};
}
// --------------------------------
// Reset
// --------------------------------
// reset user agent style
@mixin reset {
background-color: transparent;
padding: 0;
border: 0;
border-radius: 0;
color: inherit;
line-height: inherit;
appearance: none;
}
// --------------------------------
// Colors
// --------------------------------
// define HSL color variable
@mixin defineColorHSL($color, $hue, $saturation, $lightness) {
#{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
}
// return color with different opacity value
@function alpha($color, $opacity) {
$color: str-replace($color, 'var(');
$color: str-replace($color, ')');
$color-h: var(#{$color+'-h'});
$color-s: var(#{$color+'-s'});
$color-l: var(#{$color+'-l'});
@return hsla($color-h, $color-s, $color-l, $opacity);
}
// return color with different lightness value
@function lightness($color, $lightnessMultiplier) {
$color: str-replace($color, 'var(');
$color: str-replace($color, ')');
$color-h: var(#{$color+'-h'});
$color-s: var(#{$color+'-s'});
$color-l: var(#{$color+'-l'});
@return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier}));
}
// modify color HSLA values
@function adjustHSLA($color, $hueMultiplier: 1, $saturationMultiplier: 1, $lightnessMultiplier: 1, $opacity: 1) {
$color: str-replace($color, 'var(');
$color: str-replace($color, ')');
$color-h: var(#{$color+'-h'});
$color-s: var(#{$color+'-s'});
$color-l: var(#{$color+'-l'});
@return hsla(calc(#{$color-h} * #{$hueMultiplier}), calc(#{$color-s} * #{$saturationMultiplier}), calc(#{$color-l} * #{$lightnessMultiplier}), $opacity);
}
// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// --------------------------------
// Accessibility
// --------------------------------
// hide - content made available only to screen readers
@mixin srHide {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}
// show
@mixin srShow {
position: static;
clip: auto;
clip-path: none;
}
// --------------------------------
// CSS Triangle
// --------------------------------
@mixin triangle ($direction: up, $width: 12px, $color: red) {
width: 0;
height: 0;
border: $width solid transparent;
@if( $direction == left ) {
border-right-color: $color;
} @else if( $direction == right ) {
border-left-color: $color;
} @else if( $direction == down ) {
border-top-color: $color;
} @else {
border-bottom-color: $color;
}
}
|
