|
153 | 153 | }
|
154 | 154 | }
|
155 | 155 |
|
156 |
| - |
157 |
| -@mixin custom-horizontal-scrollbar() { |
158 |
| - $border-radius: 10px; |
159 |
| - $scrollbar-vertical-margin: 2px; |
160 |
| - $scrollbar-horizontal-margin: (10px - $scrollbar-vertical-margin); |
161 |
| - $scrollbar-height: 7px; |
162 |
| - $scrollbar-total-height: $scrollbar-height + ($scrollbar-vertical-margin * 2); |
163 |
| - $element-bottom-padding: 13px; |
164 |
| - |
165 |
| - overflow-y: hidden; |
166 |
| - |
167 |
| - -ms-overflow-style: none; /* IE 10+ */ |
168 |
| - scrollbar-color: var(--color-figure-gray-tertiary) transparent; /* Firefox colors */ |
169 |
| - scrollbar-width: thin; /* scrollbar height on Firefox (because it is horizontal) */ |
170 |
| - &::-webkit-scrollbar { /* Chrome & Safari */ |
171 |
| - height: 0; |
172 |
| - } |
173 |
| - |
174 |
| - &.scrolling { |
175 |
| - |
176 |
| - /** |
177 |
| - * `-webkit-touch-callout` to target Safari on iOS |
178 |
| - * https://stackoverflow.com/questions/30102792/ |
179 |
| - *`scrollbar-width` to target Firefox |
180 |
| - * https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width |
181 |
| - *`-ms-overflow-style` to target IE |
182 |
| - * https://developer.mozilla.org/es/docs/Web/CSS/-ms-overflow-style |
183 |
| - */ |
184 |
| - @supports not ((-webkit-touch-callout: none) or (scrollbar-width: none) or (-ms-overflow-style: none)) { |
185 |
| - padding-bottom: $element-bottom-padding - $scrollbar-total-height; |
186 |
| - } |
187 |
| - |
188 |
| - /** |
189 |
| - * Browser compatibility |
190 |
| - * https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar |
191 |
| - */ |
192 |
| - &::-webkit-scrollbar { |
193 |
| - height: $scrollbar-total-height; |
194 |
| - } |
195 |
| - |
196 |
| - &::-webkit-scrollbar-thumb { |
197 |
| - border-radius: $border-radius; |
198 |
| - background-color: var(--color-figure-gray-tertiary); |
199 |
| - border: $scrollbar-vertical-margin solid transparent; |
200 |
| - background-clip: padding-box; |
201 |
| - } |
202 |
| - |
203 |
| - &::-webkit-scrollbar-track-piece:end { |
204 |
| - margin-right: $scrollbar-horizontal-margin; |
205 |
| - } |
206 |
| - |
207 |
| - &::-webkit-scrollbar-track-piece:start { |
208 |
| - margin-left: $scrollbar-horizontal-margin; |
209 |
| - } |
210 |
| - } |
211 |
| -} |
212 |
| - |
213 | 156 | @mixin backdrop-filter-uiblur($percentage: 100%) {
|
214 | 157 | $percentage: $percentage / 100%;
|
215 | 158 |
|
|
0 commit comments