|
1 | | -// @use "sass:math"; |
2 | | - |
3 | | -/// Helper function to replace characters in a string |
4 | | -@function str-replace($string, $search, $replace: "") { |
5 | | - $index: str-index($string, $search); |
6 | | - |
7 | | - @return if($index, |
8 | | - str-slice($string, 1, $index - 1) + $replace + |
9 | | - str-replace(str-slice($string, $index + str-length($search)), $search, $replace), |
10 | | - $string); |
11 | | -} |
12 | | -// quotes: "“" "”"; |
13 | | -/// Create an optimized svg url |
14 | | -@function svg-url($svg) { |
15 | | - // Add missing namespace |
16 | | - @if not str-index($svg,xmlns) { |
17 | | - $svg: str-replace($svg, "<svg", "<svg xmlns=\"http://www.w3.org/2000/svg\""); |
18 | | - } |
19 | | - |
20 | | - // Chunk up string in order to avoid "stack level too deep" error |
21 | | - $encoded: ""; |
22 | | - $index: 0; |
23 | | - $slice: 2000; |
24 | | - $loops: ceil(calc(str-length($svg) / $slice)); |
25 | | - // $loops: ceil(str-length($svg) / $slice); |
26 | | - // $loops: math.div(str-length($svg), $slice); |
27 | | - // $loops: calc(str-length($svg) / $slice); |
28 | | - |
29 | | - @for $i from 1 through $loops { |
30 | | - $chunk: str-slice($svg, $index, $index + $slice - 1); |
31 | | - // Encode |
32 | | - $chunk: str-replace($chunk, "\"", "'"); |
33 | | - $chunk: str-replace($chunk, "%", "%25"); |
34 | | - $chunk: str-replace($chunk, "#", "%23"); |
35 | | - $chunk: str-replace($chunk, "{", "%7B"); |
36 | | - $chunk: str-replace($chunk, "}", "%7D"); |
37 | | - $chunk: str-replace($chunk, "<", "%3C"); |
38 | | - $chunk: str-replace($chunk, ">", "%3E"); |
39 | | - // The maybe list |
40 | | - // Keep size and compile time down...only add on documented fail |
41 | | - // |
42 | | - // $chunk: str-replace($chunk, "&", "%26"); |
43 | | - // $chunk: str-replace($chunk, "|", "%7C"); |
44 | | - // $chunk: str-replace($chunk, "[", "%5B"); |
45 | | - // $chunk: str-replace($chunk, "]", "%5D"); |
46 | | - // $chunk: str-replace($chunk, "^", "%5E"); |
47 | | - // $chunk: str-replace($chunk, "`", "%60"); |
48 | | - // $chunk: str-replace($chunk, ";", "%3B"); |
49 | | - // $chunk: str-replace($chunk, "?", "%3F"); |
50 | | - // $chunk: str-replace($chunk, ":", "%3A"); |
51 | | - // $chunk: str-replace($chunk, "@", "%40"); |
52 | | - // $chunk: str-replace($chunk, "=", "%3D"); |
53 | | - $encoded: #{$encoded}#{$chunk}; |
54 | | - $index: $index + $slice; |
55 | | - } |
56 | | - |
57 | | - @return url("data:image/svg+xml,#{$encoded}"); |
58 | | -} |
59 | | - |
60 | | -@mixin background-svg($svg) { |
61 | | - background-image: svg-url($svg); |
62 | | - /// via https://codepen.io/jakob-e/full/doMoML |
63 | | -} |
64 | | - |
65 | 1 | @mixin center { |
66 | 2 | align-items: center; |
67 | 3 | display: inline-flex; |
|
133 | 69 | text-shadow: none; |
134 | 70 | } |
135 | 71 |
|
136 | | -/// Cross-browser line-clamp support |
137 | | -@mixin line-clamp( |
138 | | - $element-height: 2rem, |
139 | | - $row-count: 2, |
140 | | - $fade-color: var(--inc-white), |
141 | | - $computed-position: relative |
142 | | -) { |
143 | | - height: $element-height; |
144 | | - overflow: hidden; |
145 | | - position: $computed-position; |
146 | | - |
147 | | - &::after { |
148 | | - width: 50%; height: calc(#{$element-height} / #{$row-count}); |
149 | | - right: 0; bottom: 0; |
150 | | - |
151 | | - background-image: linear-gradient(to right, rgba(var(--inc-white-rgb), 0), #{$fade-color} 80%); |
152 | | - content: ""; |
153 | | - position: absolute; |
154 | | - } |
155 | | -} |
156 | | - |
157 | | -@mixin no-user-select { |
158 | | - user-select: none; |
159 | | - -moz-user-select: none; |
160 | | - -webkit-user-select: none; |
161 | | -} |
162 | | - |
163 | | -/// Use CSS variables without upsetting Sass-Lint |
164 | | -/// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190 |
165 | | -@mixin root-prop($prop: null, $value: null) { |
166 | | - @if ($prop and $value) { |
167 | | - #{$prop}: $value; |
168 | | - } |
169 | | -} |
170 | | - |
171 | | -@mixin selection($background-color: var(--inc-white), $text-color: var(--inc-gray-9)) { |
| 72 | +@mixin selection($background-color: var(--uchu-yang), $text-color: var(--uchu-gray-9)) { |
172 | 73 | &::selection { |
173 | 74 | background-color: $background-color; |
174 | 75 | color: $text-color; |
|
181 | 82 | text-shadow: none; |
182 | 83 | } |
183 | 84 | } |
184 | | - |
185 | | -@mixin underline($text-color: var(--inc-gray-9), $inc-whitespace-color: var(--inc-white)) { |
186 | | - @include selection($text-color, $inc-whitespace-color); |
187 | | - |
188 | | - background-image: linear-gradient($inc-whitespace-color, $inc-whitespace-color), linear-gradient($inc-whitespace-color, $inc-whitespace-color), linear-gradient($text-color, $text-color); |
189 | | - background-position: 0 88%, 100% 88%, 0 88%; |
190 | | - background-repeat: no-repeat, no-repeat, repeat-x; |
191 | | - background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px; |
192 | | - box-decoration-break: clone; |
193 | | - display: inline; |
194 | | - text-decoration: none; |
195 | | - text-shadow: 0.03rem 0 $inc-whitespace-color, -0.03rem 0 $inc-whitespace-color, 0 0.03rem $inc-whitespace-color, 0 -0.03rem $inc-whitespace-color, 0.06rem 0 $inc-whitespace-color, -0.06rem 0 $inc-whitespace-color, 0.09rem 0 $inc-whitespace-color, -0.09rem 0 $inc-whitespace-color, 0.12rem 0 $inc-whitespace-color, -0.12rem 0 $inc-whitespace-color, 0.15rem 0 $inc-whitespace-color, -0.15rem 0 $inc-whitespace-color; |
196 | | - |
197 | | - @-moz-document url-prefix() { // sass-lint:disable-line empty-args |
198 | | - background-position: 0 90%, 100% 90%, 0 90%; |
199 | | - } |
200 | | -} |
0 commit comments