Created
March 20, 2021 15:53
-
-
Save Ksengine/3a5dd9444d94d21b7f77cb87e061529b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@function negative-map($map) { | |
$result: (); | |
@each $key, $value in $map { | |
@if $value != 0 { | |
$result: map-merge($result, ("-" + $key: (-$value))); | |
} | |
} | |
@return $result; | |
} | |
$hover-overlay: 5%; | |
$focus-overlay: 10%; | |
$selected-overlay: 10%; | |
$activated-overlay: 10%; | |
$pressed-overlay: 15%; | |
$dragged-overlay: 15%; | |
$screens: ( | |
"": 0, | |
sm: "640px", | |
md: "768px", | |
lg: "1024px", | |
xl: "1280px", | |
xxl: "1536px", | |
); | |
$containers: ( | |
"": 0, | |
sm: 576px, | |
md: 768px, | |
lg: 992px, | |
xl: 1200px, | |
xxl: 1400px, | |
); | |
$columns: 12; | |
$row-columns: 6; | |
$gutters: ( | |
0: 0, | |
1: 0.25rem, | |
2: 0.5rem, | |
3: 1rem, | |
4: 1.5rem, | |
5: 3rem, | |
); | |
//Colors | |
$colors: ( | |
red-50: #ffebee, | |
red-100: #ffcdd2, | |
red-200: #ef9a9a, | |
red-300: #e57373, | |
red-400: #ef5350, | |
red-500: #f44336, | |
red-600: #e53935, | |
red-700: #d32f2f, | |
red-800: #c62828, | |
red-900: #b71c1c, | |
red-A100: #ff8a80, | |
red-A200: #ff5252, | |
red-A400: #ff1744, | |
red-A700: #d50000, | |
pink-50: #fce4ec, | |
pink-100: #f8bbd0, | |
pink-200: #f48fb1, | |
pink-300: #f06292, | |
pink-400: #ec407a, | |
pink-500: #e91e63, | |
pink-600: #d81b60, | |
pink-700: #c2185b, | |
pink-800: #ad1457, | |
pink-900: #880e4f, | |
pink-A100: #ff80ab, | |
pink-A200: #ff4081, | |
pink-A400: #f50057, | |
pink-A700: #c51162, | |
purple-50: #f3e5f5, | |
purple-100: #e1bee7, | |
purple-200: #ce93d8, | |
purple-300: #ba68c8, | |
purple-400: #ab47bc, | |
purple-500: #9c27b0, | |
purple-600: #8e24aa, | |
purple-700: #7b1fa2, | |
purple-800: #6a1b9a, | |
purple-900: #4a148c, | |
purple-A100: #ea80fc, | |
purple-A200: #e040fb, | |
purple-A400: #d500f9, | |
purple-A700: #aa00ff, | |
deeppurple-50: #ede7f6, | |
deeppurple-100: #d1c4e9, | |
deeppurple-200: #b39ddb, | |
deeppurple-300: #9575cd, | |
deeppurple-400: #7e57c2, | |
deeppurple-500: #673ab7, | |
deeppurple-600: #5e35b1, | |
deeppurple-700: #512da8, | |
deeppurple-800: #4527a0, | |
deeppurple-900: #311b92, | |
deeppurple-A100: #b388ff, | |
deeppurple-A200: #7c4dff, | |
deeppurple-A400: #651fff, | |
deeppurple-A700: #6200ea, | |
indigo-50: #e8eaf6, | |
indigo-100: #c5cae9, | |
indigo-200: #9fa8da, | |
indigo-300: #7986cb, | |
indigo-400: #5c6bc0, | |
indigo-500: #3f51b5, | |
indigo-600: #3949ab, | |
indigo-700: #303f9f, | |
indigo-800: #283593, | |
indigo-900: #1a237e, | |
indigo-A100: #8c9eff, | |
indigo-A200: #536dfe, | |
indigo-A400: #3d5afe, | |
indigo-A700: #304ffe, | |
blue-50: #e3f2fd, | |
blue-100: #bbdefb, | |
blue-200: #90caf9, | |
blue-300: #64b5f6, | |
blue-400: #42a5f5, | |
blue-500: #2196f3, | |
blue-600: #1e88e5, | |
blue-700: #1976d2, | |
blue-800: #1565c0, | |
blue-900: #0d47a1, | |
blue-A100: #82b1ff, | |
blue-A200: #448aff, | |
blue-A400: #2979ff, | |
blue-A700: #2962ff, | |
lightblue-50: #e1f5fe, | |
lightblue-100: #b3e5fc, | |
lightblue-200: #81d4fa, | |
lightblue-300: #4fc3f7, | |
lightblue-400: #29b6f6, | |
lightblue-500: #03a9f4, | |
lightblue-600: #039be5, | |
lightblue-700: #0288d1, | |
lightblue-800: #0277bd, | |
lightblue-900: #01579b, | |
lightblue-A100: #80d8ff, | |
lightblue-A200: #40c4ff, | |
lightblue-A400: #00b0ff, | |
lightblue-A700: #0091ea, | |
cyan-50: #e0f7fa, | |
cyan-100: #b2ebf2, | |
cyan-200: #80deea, | |
cyan-300: #4dd0e1, | |
cyan-400: #26c6da, | |
cyan-500: #00bcd4, | |
cyan-600: #00acc1, | |
cyan-700: #0097a7, | |
cyan-800: #00838f, | |
cyan-900: #006064, | |
cyan-A100: #84ffff, | |
cyan-A200: #18ffff, | |
cyan-A400: #00e5ff, | |
cyan-A700: #00b8d4, | |
teal-50: #e0f2f1, | |
teal-100: #b2dfdb, | |
teal-200: #80cbc4, | |
teal-300: #4db6ac, | |
teal-400: #26a69a, | |
teal-500: #009688, | |
teal-600: #00897b, | |
teal-700: #00796b, | |
teal-800: #00695c, | |
teal-900: #004d40, | |
teal-A100: #a7ffeb, | |
teal-A200: #64ffda, | |
teal-A400: #1de9b6, | |
teal-A700: #00bfa5, | |
green-50: #e8f5e9, | |
green-100: #c8e6c9, | |
green-200: #a5d6a7, | |
green-300: #81c784, | |
green-400: #66bb6a, | |
green-500: #4caf50, | |
green-600: #43a047, | |
green-700: #388e3c, | |
green-800: #2e7d32, | |
green-900: #1b5e20, | |
green-A100: #b9f6ca, | |
green-A200: #69f0ae, | |
green-A400: #00e676, | |
green-A700: #00c853, | |
lightgreen-50: #f1f8e9, | |
lightgreen-100: #dcedc8, | |
lightgreen-200: #c5e1a5, | |
lightgreen-300: #aed581, | |
lightgreen-400: #9ccc65, | |
lightgreen-500: #8bc34a, | |
lightgreen-600: #7cb342, | |
lightgreen-700: #689f38, | |
lightgreen-800: #558b2f, | |
lightgreen-900: #33691e, | |
lightgreen-A100: #ccff90, | |
lightgreen-A200: #b2ff59, | |
lightgreen-A400: #76ff03, | |
lightgreen-A700: #64dd17, | |
lime-50: #f9fbe7, | |
lime-100: #f0f4c3, | |
lime-200: #e6ee9c, | |
lime-300: #dce775, | |
lime-400: #d4e157, | |
lime-500: #cddc39, | |
lime-600: #c0ca33, | |
lime-700: #afb42b, | |
lime-800: #9e9d24, | |
lime-900: #827717, | |
lime-A100: #f4ff81, | |
lime-A200: #eeff41, | |
lime-A400: #c6ff00, | |
lime-A700: #aeea00, | |
yellow-50: #fffde7, | |
yellow-100: #fff9c4, | |
yellow-200: #fff59d, | |
yellow-300: #fff176, | |
yellow-400: #ffee58, | |
yellow-500: #ffeb3b, | |
yellow-600: #fdd835, | |
yellow-700: #fbc02d, | |
yellow-800: #f9a825, | |
yellow-900: #f57f17, | |
yellow-A100: #ffff8d, | |
yellow-A200: #ffff00, | |
yellow-A400: #ffea00, | |
yellow-A700: #ffd600, | |
amber-50: #fff8e1, | |
amber-100: #ffecb3, | |
amber-200: #ffe082, | |
amber-300: #ffd54f, | |
amber-400: #ffca28, | |
amber-500: #ffc107, | |
amber-600: #ffb300, | |
amber-700: #ffa000, | |
amber-800: #ff8f00, | |
amber-900: #ff6f00, | |
amber-A100: #ffe57f, | |
amber-A200: #ffd740, | |
amber-A400: #ffc400, | |
amber-A700: #ffab00, | |
orange-50: #fff3e0, | |
orange-100: #ffe0b2, | |
orange-200: #ffcc80, | |
orange-300: #ffb74d, | |
orange-400: #ffa726, | |
orange-500: #ff9800, | |
orange-600: #fb8c00, | |
orange-700: #f57c00, | |
orange-800: #ef6c00, | |
orange-900: #e65100, | |
orange-A100: #ffd180, | |
orange-A200: #ffab40, | |
orange-A400: #ff9100, | |
orange-A700: #ff6d00, | |
deeporange-50: #fbe9e7, | |
deeporange-100: #ffccbc, | |
deeporange-200: #ffab91, | |
deeporange-300: #ff8a65, | |
deeporange-400: #ff7043, | |
deeporange-500: #ff5722, | |
deeporange-600: #f4511e, | |
deeporange-700: #e64a19, | |
deeporange-800: #d84315, | |
deeporange-900: #bf360c, | |
deeporange-A100: #ff9e80, | |
deeporange-A200: #ff6e40, | |
deeporange-A400: #ff3d00, | |
deeporange-A700: #dd2c00, | |
brown-50: #efebe9, | |
brown-100: #d7ccc8, | |
brown-200: #bcaaa4, | |
brown-300: #a1887f, | |
brown-400: #8d6e63, | |
brown-500: #795548, | |
brown-600: #6d4c41, | |
brown-700: #5d4037, | |
brown-800: #4e342e, | |
brown-900: #3e2723, | |
gray-50: #fafafa, | |
gray-100: #f5f5f5, | |
gray-200: #eeeeee, | |
gray-300: #e0e0e0, | |
gray-400: #bdbdbd, | |
gray-500: #9e9e9e, | |
gray-600: #757575, | |
gray-700: #616161, | |
gray-800: #424242, | |
gray-900: #212121, | |
bluegray-50: #eceff1, | |
bluegray-100: #cfd8dc, | |
bluegray-200: #b0bec5, | |
bluegray-300: #90a4ae, | |
bluegray-400: #78909c, | |
bluegray-500: #607d8b, | |
bluegray-600: #546e7a, | |
bluegray-700: #455a64, | |
bluegray-800: #37474f, | |
bluegray-900: #263238, | |
black: #000000, | |
white: #ffffff, | |
transparent: transparent, | |
) !default; | |
$spacing: ( | |
px: 1px, | |
0: 0px, | |
0.5: 0.125rem, | |
1: 0.25rem, | |
1.5: 0.375rem, | |
2: 0.5rem, | |
2.5: 0.625rem, | |
3: 0.75rem, | |
3.5: 0.875rem, | |
4: 1rem, | |
5: 1.25rem, | |
6: 1.5rem, | |
7: 1.75rem, | |
8: 2rem, | |
9: 2.25rem, | |
10: 2.5rem, | |
11: 2.75rem, | |
12: 3rem, | |
14: 3.5rem, | |
16: 4rem, | |
20: 5rem, | |
24: 6rem, | |
28: 7rem, | |
32: 8rem, | |
36: 9rem, | |
40: 10rem, | |
44: 11rem, | |
48: 12rem, | |
52: 13rem, | |
56: 14rem, | |
60: 15rem, | |
64: 16rem, | |
72: 18rem, | |
80: 20rem, | |
96: 24rem, | |
) !default; | |
$negative-spacing: negative-map($spacing) !default; | |
$object-position: ( | |
bottom: bottom, | |
center: center, | |
left: left, | |
left-bottom: left bottom, | |
left-top: left top, | |
right: right, | |
right-bottom: right bottom, | |
right-top: right top, | |
top: top, | |
) !default; | |
$position-base: ( | |
auto: auto, | |
"1\\/2": 50%, | |
"1\\/3": 33.333333%, | |
"2\\/3": 66.666667%, | |
"1\\/4": 25%, | |
"2\\/4": 50%, | |
"3\\/4": 75%, | |
full: 100%, | |
"-1\\/2": -50%, | |
"-1\\/3": -33.333333%, | |
"-2\\/3": -66.666667%, | |
"-1\\/4": -25%, | |
"-2\\/4": -50%, | |
"-3\\/4": -75%, | |
"-full": -100%, | |
) !default; | |
$position-values: map-merge( | |
map-merge($position-base, $spacing), | |
$negative-spacing | |
) !default; | |
$z-index: ( | |
auto: "auto", | |
0: 0, | |
1: 1, | |
2: 2, | |
3: 3, | |
4: 4, | |
5: 5, | |
6: 6, | |
7: 7, | |
8: 8, | |
9: 9, | |
10: 10, | |
20: 20, | |
30: 30, | |
40: 40, | |
50: 50, | |
) !default; | |
$flex: ( | |
1: "1 1 0%", | |
auto: "1 1 auto", | |
initial: "0 1 auto", | |
none: none, | |
) !default; | |
$flex-grow: ( | |
none: 0, | |
"": 1, | |
) !default; | |
$flex-shrink: ( | |
no: 0, | |
"": 1, | |
) !default; | |
$order: ( | |
first: "-9999", | |
last: "9999", | |
none: "0", | |
1: "1", | |
2: "2", | |
3: "3", | |
4: "4", | |
5: "5", | |
6: "6", | |
7: "7", | |
8: "8", | |
9: "9", | |
10: "10", | |
11: "11", | |
12: "12", | |
) !default; | |
$grid-auto-columns: ( | |
auto: "auto", | |
min: "min-content", | |
max: "max-content", | |
fr: "minmax(0, 1fr)", | |
) !default; | |
$grid-auto-rows: ( | |
auto: "auto", | |
min: "min-content", | |
max: "max-content", | |
fr: "minmax(0, 1fr)", | |
) !default; | |
$grid-column: ( | |
auto: "auto", | |
"span-1": "span 1 / span 1", | |
"span-2": "span 2 / span 2", | |
"span-3": "span 3 / span 3", | |
"span-4": "span 4 / span 4", | |
"span-5": "span 5 / span 5", | |
"span-6": "span 6 / span 6", | |
"span-7": "span 7 / span 7", | |
"span-8": "span 8 / span 8", | |
"span-9": "span 9 / span 9", | |
"span-10": "span 10 / span 10", | |
"span-11": "span 11 / span 11", | |
"span-12": "span 12 / span 12", | |
"span-full": "1 / -1", | |
) !default; | |
$grid-column-end: ( | |
auto: "auto", | |
1: "1", | |
2: "2", | |
3: "3", | |
4: "4", | |
5: "5", | |
6: "6", | |
7: "7", | |
8: "8", | |
9: "9", | |
10: "10", | |
11: "11", | |
12: "12", | |
13: "13", | |
) !default; | |
$grid-column-start: ( | |
auto: "auto", | |
1: "1", | |
2: "2", | |
3: "3", | |
4: "4", | |
5: "5", | |
6: "6", | |
7: "7", | |
8: "8", | |
9: "9", | |
10: "10", | |
11: "11", | |
12: "12", | |
13: "13", | |
) !default; | |
$grid-row: ( | |
auto: "auto", | |
"span-1": "span 1 / span 1", | |
"span-2": "span 2 / span 2", | |
"span-3": "span 3 / span 3", | |
"span-4": "span 4 / span 4", | |
"span-5": "span 5 / span 5", | |
"span-6": "span 6 / span 6", | |
"span-full": "1 / -1", | |
) !default; | |
$grid-row-start: ( | |
auto: "auto", | |
1: "1", | |
2: "2", | |
3: "3", | |
4: "4", | |
5: "5", | |
6: "6", | |
7: "7", | |
) !default; | |
$grid-row-end: ( | |
auto: "auto", | |
1: "1", | |
2: "2", | |
3: "3", | |
4: "4", | |
5: "5", | |
6: "6", | |
7: "7", | |
) !default; | |
$grid-template-columns: ( | |
none: "none", | |
1: "repeat(1, minmax(0, 1fr))", | |
2: "repeat(2, minmax(0, 1fr))", | |
3: "repeat(3, minmax(0, 1fr))", | |
4: "repeat(4, minmax(0, 1fr))", | |
5: "repeat(5, minmax(0, 1fr))", | |
6: "repeat(6, minmax(0, 1fr))", | |
7: "repeat(7, minmax(0, 1fr))", | |
8: "repeat(8, minmax(0, 1fr))", | |
9: "repeat(9, minmax(0, 1fr))", | |
10: "repeat(10, minmax(0, 1fr))", | |
11: "repeat(11, minmax(0, 1fr))", | |
12: "repeat(12, minmax(0, 1fr))", | |
) !default; | |
$grid-template-rows: ( | |
none: "none", | |
1: "repeat(1, minmax(0, 1fr))", | |
2: "repeat(2, minmax(0, 1fr))", | |
3: "repeat(3, minmax(0, 1fr))", | |
4: "repeat(4, minmax(0, 1fr))", | |
5: "repeat(5, minmax(0, 1fr))", | |
6: "repeat(6, minmax(0, 1fr))", | |
) !default; | |
$gap: $spacing !default; | |
$padding: $spacing !default; | |
$margin: map-merge( | |
map-merge( | |
( | |
auto: auto, | |
), | |
$spacing | |
), | |
$negative-spacing | |
) !default; | |
$width: map-merge( | |
( | |
auto: "auto", | |
"1\\/2": "50%", | |
"1\\/3": "33.333333%", | |
"2\\/3": "66.666667%", | |
"1\\/4": "25%", | |
"2\\/4": "50%", | |
"3\\/4": "75%", | |
"1\\/5": "20%", | |
"2\\/5": "40%", | |
"3\\/5": "60%", | |
"4\\/5": "80%", | |
"1\\/6": "16.666667%", | |
"2\\/6": "33.333333%", | |
"3\\/6": "50%", | |
"4\\/6": "66.666667%", | |
"5\\/6": "83.333333%", | |
"1\\/12": "8.333333%", | |
"2\\/12": "16.666667%", | |
"3\\/12": "25%", | |
"4\\/12": "33.333333%", | |
"5\\/12": "41.666667%", | |
"6\\/12": "50%", | |
"7\\/12": "58.333333%", | |
"8\\/12": "66.666667%", | |
"9\\/12": "75%", | |
"10\\/12": "83.333333%", | |
"11\\/12": "91.666667%", | |
full: "100%", | |
screen: "100vw", | |
min: "min-content", | |
max: "max-content", | |
), | |
$spacing | |
) !default; | |
$height: $width !default; | |
$min-width: ( | |
0: 0, | |
full: 100%, | |
min: min-content, | |
max: max-content, | |
) !default; | |
$max-width: ( | |
none: none, | |
0: 0rem, | |
xs: 20rem, | |
sm: 24rem, | |
md: 28rem, | |
lg: 32rem, | |
xl: 36rem, | |
2xl: 42rem, | |
3xl: 48rem, | |
4xl: 56rem, | |
5xl: 64rem, | |
6xl: 72rem, | |
7xl: 80rem, | |
full: 100%, | |
min: min-content, | |
max: max-content, | |
prose: 65ch, | |
) !default; | |
$min-height: $min-width !default; | |
$max-height: $max-width !default; | |
$font-family: ( | |
sans: | |
unquote( | |
'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"' | |
), | |
serif: unquote('ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'), | |
mono: | |
unquote( | |
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' | |
), | |
) !default; | |
$font-size: ( | |
xs: "0.75rem", | |
sm: "0.875rem", | |
base: "1rem", | |
lg: "1.125rem", | |
xl: "1.25rem", | |
"2xl": "1.5rem", | |
"3xl": "1.875rem", | |
"4xl": "2.25rem", | |
"5xl": "3rem", | |
"6xl": "3.75rem", | |
"7xl": "4.5rem", | |
"8xl": "6rem", | |
"9xl": "8rem", | |
) !default; | |
$font-line-height: ( | |
"1rem", | |
"1.25rem", | |
"1.5rem", | |
"1.75rem", | |
"1.75rem", | |
"2rem", | |
"2.25rem", | |
"2.5rem", | |
"1", | |
"1", | |
"1", | |
"1", | |
"1" | |
) !default; | |
$font-weight: ( | |
thin: "100", | |
extralight: "200", | |
light: "300", | |
normal: "400", | |
medium: "500", | |
semibold: "600", | |
bold: "700", | |
extrabold: "800", | |
black: "900", | |
) !default; | |
$letter-spacing: ( | |
tighter: "-0.05em", | |
tight: "-0.025em", | |
normal: "0em", | |
wide: "0.025em", | |
wider: "0.05em", | |
widest: "0.1em", | |
) !default; | |
$placeholder-color: $colors !default; | |
$opacity: ( | |
0: "0", | |
5: "0.05", | |
10: "0.1", | |
20: "0.2", | |
25: "0.25", | |
30: "0.3", | |
40: "0.4", | |
50: "0.5", | |
60: "0.6", | |
70: "0.7", | |
75: "0.75", | |
80: "0.8", | |
90: "0.9", | |
95: "0.95", | |
100: "1", | |
) !default; | |
$placeholder-opacity: $opacity !default; | |
$line-height: ( | |
none: "1", | |
tight: "1.25", | |
snug: "1.375", | |
normal: "1.5", | |
relaxed: "1.625", | |
loose: "2", | |
3: ".75rem", | |
4: "1rem", | |
5: "1.25rem", | |
6: "1.5rem", | |
7: "1.75rem", | |
8: "2rem", | |
9: "2.25rem", | |
10: "2.5rem", | |
) !default; | |
$background-color: $colors !default; | |
$background-image: ( | |
none: "none", | |
"gradient-to-t": "linear-gradient(to top, var(--mh-gradient-stops))", | |
"gradient-to-tr": "linear-gradient(to top right, var(--mh-gradient-stops))", | |
"gradient-to-r": "linear-gradient(to right, var(--mh-gradient-stops))", | |
"gradient-to-br": "linear-gradient(to bottom right, var(--mh-gradient-stops))", | |
"gradient-to-b": "linear-gradient(to bottom, var(--mh-gradient-stops))", | |
"gradient-to-bl": "linear-gradient(to bottom left, var(--mh-gradient-stops))", | |
"gradient-to-l": "linear-gradient(to left, var(--mh-gradient-stops))", | |
"gradient-to-tl": "linear-gradient(to top left, var(--mh-gradient-stops))", | |
) !default; | |
$background-opacity: $opacity !default; | |
$background-position: ( | |
bottom: "bottom", | |
center: "center", | |
left: "left", | |
"left-bottom": "left bottom", | |
"left-top": "left top", | |
right: "right", | |
"right-bottom": "right bottom", | |
"right-top": "right top", | |
top: "top", | |
) !default; | |
$background-size: ( | |
auto: "auto", | |
cover: "cover", | |
contain: "contain", | |
) !default; | |
@mixin css($prefix: "") { | |
$prefix: ""; | |
$sep: ":"; | |
// Layout | |
.#{$prefix}border-box { | |
box-sizing: border-box; | |
} | |
.#{$prefix}content-box { | |
box-sizing: content-box; | |
} | |
@each $type | |
in ( | |
inline | |
inline-block | |
block | |
grid | |
table | |
table-row | |
table-caption | |
table-cell | |
table-raw | |
table-column | |
table-column-group | |
table-footer-group | |
table-raw-group | |
flex | |
inline-flex | |
flow-root | |
grid | |
inline-grid | |
contents | |
none | |
) | |
{ | |
.#{$prefix}#{$type} { | |
display: #{$type}; | |
} | |
} | |
.#{$prefix}float { | |
@each $value in (left right none) { | |
&#{$sep}#{$value} { | |
float: #{$value}; | |
} | |
} | |
} | |
.#{$prefix}clear { | |
@each $value in (left right both none) { | |
&#{$sep}#{$value} { | |
clear: #{$value}; | |
} | |
} | |
} | |
.#{$prefix}object-fit { | |
@each $value in (contain cover fill none scale-down) { | |
&#{$sep}#{$value} { | |
object-fit: #{$value}; | |
} | |
} | |
} | |
.#{$prefix}object-position { | |
@each $key, $value in $object-position { | |
&#{$sep}#{$key} { | |
object-position: #{$value}; | |
} | |
} | |
} | |
.#{$prefix}overflow { | |
@each $value in (auto hidden visible scroll) { | |
&#{$sep}#{$value} { | |
overflow: #{$value}; | |
} | |
&-x#{$sep}#{$value} { | |
overflow-x: #{$value}; | |
} | |
&-y#{$sep}-y#{$value} { | |
overflow-y: #{$value}; | |
} | |
} | |
} | |
.#{$prefix}overscroll { | |
@each $value in (auto contain none) { | |
&#{$sep}#{$value} { | |
overscroll-behavior: #{$value}; | |
} | |
&-x#{$sep}#{$value} { | |
overscroll-behavior-x: #{$value}; | |
} | |
&-y#{$sep}#{$value} { | |
overscroll-behavior-y: #{$value}; | |
} | |
} | |
} | |
} | |
@each $screen, $size in $screens { | |
@if $screen == "" { | |
@include css(); | |
} | |
@else { | |
@media (min-width: #{$size}) { | |
@include css(); | |
} | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.border-box { | |
box-sizing: border-box; | |
} | |
.content-box { | |
box-sizing: content-box; | |
} | |
.inline { | |
display: inline; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.block { | |
display: block; | |
} | |
.grid { | |
display: grid; | |
} | |
.table { | |
display: table; | |
} | |
.table-row { | |
display: table-row; | |
} | |
.table-caption { | |
display: table-caption; | |
} | |
.table-cell { | |
display: table-cell; | |
} | |
.table-raw { | |
display: table-raw; | |
} | |
.table-column { | |
display: table-column; | |
} | |
.table-column-group { | |
display: table-column-group; | |
} | |
.table-footer-group { | |
display: table-footer-group; | |
} | |
.table-raw-group { | |
display: table-raw-group; | |
} | |
.flex { | |
display: flex; | |
} | |
.inline-flex { | |
display: inline-flex; | |
} | |
.flow-root { | |
display: flow-root; | |
} | |
.grid { | |
display: grid; | |
} | |
.inline-grid { | |
display: inline-grid; | |
} | |
.contents { | |
display: contents; | |
} | |
.none { | |
display: none; | |
} | |
.float:left { | |
float: left; | |
} | |
.float:right { | |
float: right; | |
} | |
.float:none { | |
float: none; | |
} | |
.clear:left { | |
clear: left; | |
} | |
.clear:right { | |
clear: right; | |
} | |
.clear:both { | |
clear: both; | |
} | |
.clear:none { | |
clear: none; | |
} | |
.object-fit:contain { | |
object-fit: contain; | |
} | |
.object-fit:cover { | |
object-fit: cover; | |
} | |
.object-fit:fill { | |
object-fit: fill; | |
} | |
.object-fit:none { | |
object-fit: none; | |
} | |
.object-fit:scale-down { | |
object-fit: scale-down; | |
} | |
.object-position:bottom { | |
object-position: bottom; | |
} | |
.object-position:center { | |
object-position: center; | |
} | |
.object-position:left { | |
object-position: left; | |
} | |
.object-position:left-bottom { | |
object-position: left bottom; | |
} | |
.object-position:left-top { | |
object-position: left top; | |
} | |
.object-position:right { | |
object-position: right; | |
} | |
.object-position:right-bottom { | |
object-position: right bottom; | |
} | |
.object-position:right-top { | |
object-position: right top; | |
} | |
.object-position:top { | |
object-position: top; | |
} | |
.overflow:auto { | |
overflow: auto; | |
} | |
.overflow-x:auto { | |
overflow-x: auto; | |
} | |
.overflow-y:-yauto { | |
overflow-y: auto; | |
} | |
.overflow:hidden { | |
overflow: hidden; | |
} | |
.overflow-x:hidden { | |
overflow-x: hidden; | |
} | |
.overflow-y:-yhidden { | |
overflow-y: hidden; | |
} | |
.overflow:visible { | |
overflow: visible; | |
} | |
.overflow-x:visible { | |
overflow-x: visible; | |
} | |
.overflow-y:-yvisible { | |
overflow-y: visible; | |
} | |
.overflow:scroll { | |
overflow: scroll; | |
} | |
.overflow-x:scroll { | |
overflow-x: scroll; | |
} | |
.overflow-y:-yscroll { | |
overflow-y: scroll; | |
} | |
.overscroll:auto { | |
overscroll-behavior: auto; | |
} | |
.overscroll-x:auto { | |
overscroll-behavior-x: auto; | |
} | |
.overscroll-y:auto { | |
overscroll-behavior-y: auto; | |
} | |
.overscroll:contain { | |
overscroll-behavior: contain; | |
} | |
.overscroll-x:contain { | |
overscroll-behavior-x: contain; | |
} | |
.overscroll-y:contain { | |
overscroll-behavior-y: contain; | |
} | |
.overscroll:none { | |
overscroll-behavior: none; | |
} | |
.overscroll-x:none { | |
overscroll-behavior-x: none; | |
} | |
.overscroll-y:none { | |
overscroll-behavior-y: none; | |
} | |
@media (min-width: 640px) { | |
.border-box { | |
box-sizing: border-box; | |
} | |
.content-box { | |
box-sizing: content-box; | |
} | |
.inline { | |
display: inline; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.block { | |
display: block; | |
} | |
.grid { | |
display: grid; | |
} | |
.table { | |
display: table; | |
} | |
.table-row { | |
display: table-row; | |
} | |
.table-caption { | |
display: table-caption; | |
} | |
.table-cell { | |
display: table-cell; | |
} | |
.table-raw { | |
display: table-raw; | |
} | |
.table-column { | |
display: table-column; | |
} | |
.table-column-group { | |
display: table-column-group; | |
} | |
.table-footer-group { | |
display: table-footer-group; | |
} | |
.table-raw-group { | |
display: table-raw-group; | |
} | |
.flex { | |
display: flex; | |
} | |
.inline-flex { | |
display: inline-flex; | |
} | |
.flow-root { | |
display: flow-root; | |
} | |
.grid { | |
display: grid; | |
} | |
.inline-grid { | |
display: inline-grid; | |
} | |
.contents { | |
display: contents; | |
} | |
.none { | |
display: none; | |
} | |
.float:left { | |
float: left; | |
} | |
.float:right { | |
float: right; | |
} | |
.float:none { | |
float: none; | |
} | |
.clear:left { | |
clear: left; | |
} | |
.clear:right { | |
clear: right; | |
} | |
.clear:both { | |
clear: both; | |
} | |
.clear:none { | |
clear: none; | |
} | |
.object-fit:contain { | |
object-fit: contain; | |
} | |
.object-fit:cover { | |
object-fit: cover; | |
} | |
.object-fit:fill { | |
object-fit: fill; | |
} | |
.object-fit:none { | |
object-fit: none; | |
} | |
.object-fit:scale-down { | |
object-fit: scale-down; | |
} | |
.object-position:bottom { | |
object-position: bottom; | |
} | |
.object-position:center { | |
object-position: center; | |
} | |
.object-position:left { | |
object-position: left; | |
} | |
.object-position:left-bottom { | |
object-position: left bottom; | |
} | |
.object-position:left-top { | |
object-position: left top; | |
} | |
.object-position:right { | |
object-position: right; | |
} | |
.object-position:right-bottom { | |
object-position: right bottom; | |
} | |
.object-position:right-top { | |
object-position: right top; | |
} | |
.object-position:top { | |
object-position: top; | |
} | |
.overflow:auto { | |
overflow: auto; | |
} | |
.overflow-x:auto { | |
overflow-x: auto; | |
} | |
.overflow-y:-yauto { | |
overflow-y: auto; | |
} | |
.overflow:hidden { | |
overflow: hidden; | |
} | |
.overflow-x:hidden { | |
overflow-x: hidden; | |
} | |
.overflow-y:-yhidden { | |
overflow-y: hidden; | |
} | |
.overflow:visible { | |
overflow: visible; | |
} | |
.overflow-x:visible { | |
overflow-x: visible; | |
} | |
.overflow-y:-yvisible { | |
overflow-y: visible; | |
} | |
.overflow:scroll { | |
overflow: scroll; | |
} | |
.overflow-x:scroll { | |
overflow-x: scroll; | |
} | |
.overflow-y:-yscroll { | |
overflow-y: scroll; | |
} | |
.overscroll:auto { | |
overscroll-behavior: auto; | |
} | |
.overscroll-x:auto { | |
overscroll-behavior-x: auto; | |
} | |
.overscroll-y:auto { | |
overscroll-behavior-y: auto; | |
} | |
.overscroll:contain { | |
overscroll-behavior: contain; | |
} | |
.overscroll-x:contain { | |
overscroll-behavior-x: contain; | |
} | |
.overscroll-y:contain { | |
overscroll-behavior-y: contain; | |
} | |
.overscroll:none { | |
overscroll-behavior: none; | |
} | |
.overscroll-x:none { | |
overscroll-behavior-x: none; | |
} | |
.overscroll-y:none { | |
overscroll-behavior-y: none; | |
} | |
} | |
@media (min-width: 768px) { | |
.border-box { | |
box-sizing: border-box; | |
} | |
.content-box { | |
box-sizing: content-box; | |
} | |
.inline { | |
display: inline; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.block { | |
display: block; | |
} | |
.grid { | |
display: grid; | |
} | |
.table { | |
display: table; | |
} | |
.table-row { | |
display: table-row; | |
} | |
.table-caption { | |
display: table-caption; | |
} | |
.table-cell { | |
display: table-cell; | |
} | |
.table-raw { | |
display: table-raw; | |
} | |
.table-column { | |
display: table-column; | |
} | |
.table-column-group { | |
display: table-column-group; | |
} | |
.table-footer-group { | |
display: table-footer-group; | |
} | |
.table-raw-group { | |
display: table-raw-group; | |
} | |
.flex { | |
display: flex; | |
} | |
.inline-flex { | |
display: inline-flex; | |
} | |
.flow-root { | |
display: flow-root; | |
} | |
.grid { | |
display: grid; | |
} | |
.inline-grid { | |
display: inline-grid; | |
} | |
.contents { | |
display: contents; | |
} | |
.none { | |
display: none; | |
} | |
.float:left { | |
float: left; | |
} | |
.float:right { | |
float: right; | |
} | |
.float:none { | |
float: none; | |
} | |
.clear:left { | |
clear: left; | |
} | |
.clear:right { | |
clear: right; | |
} | |
.clear:both { | |
clear: both; | |
} | |
.clear:none { | |
clear: none; | |
} | |
.object-fit:contain { | |
object-fit: contain; | |
} | |
.object-fit:cover { | |
object-fit: cover; | |
} | |
.object-fit:fill { | |
object-fit: fill; | |
} | |
.object-fit:none { | |
object-fit: none; | |
} | |
.object-fit:scale-down { | |
object-fit: scale-down; | |
} | |
.object-position:bottom { | |
object-position: bottom; | |
} | |
.object-position:center { | |
object-position: center; | |
} | |
.object-position:left { | |
object-position: left; | |
} | |
.object-position:left-bottom { | |
object-position: left bottom; | |
} | |
.object-position:left-top { | |
object-position: left top; | |
} | |
.object-position:right { | |
object-position: right; | |
} | |
.object-position:right-bottom { | |
object-position: right bottom; | |
} | |
.object-position:right-top { | |
object-position: right top; | |
} | |
.object-position:top { | |
object-position: top; | |
} | |
.overflow:auto { | |
overflow: auto; | |
} | |
.overflow-x:auto { | |
overflow-x: auto; | |
} | |
.overflow-y:-yauto { | |
overflow-y: auto; | |
} | |
.overflow:hidden { | |
overflow: hidden; | |
} | |
.overflow-x:hidden { | |
overflow-x: hidden; | |
} | |
.overflow-y:-yhidden { | |
overflow-y: hidden; | |
} | |
.overflow:visible { | |
overflow: visible; | |
} | |
.overflow-x:visible { | |
overflow-x: visible; | |
} | |
.overflow-y:-yvisible { | |
overflow-y: visible; | |
} | |
.overflow:scroll { | |
overflow: scroll; | |
} | |
.overflow-x:scroll { | |
overflow-x: scroll; | |
} | |
.overflow-y:-yscroll { | |
overflow-y: scroll; | |
} | |
.overscroll:auto { | |
overscroll-behavior: auto; | |
} | |
.overscroll-x:auto { | |
overscroll-behavior-x: auto; | |
} | |
.overscroll-y:auto { | |
overscroll-behavior-y: auto; | |
} | |
.overscroll:contain { | |
overscroll-behavior: contain; | |
} | |
.overscroll-x:contain { | |
overscroll-behavior-x: contain; | |
} | |
.overscroll-y:contain { | |
overscroll-behavior-y: contain; | |
} | |
.overscroll:none { | |
overscroll-behavior: none; | |
} | |
.overscroll-x:none { | |
overscroll-behavior-x: none; | |
} | |
.overscroll-y:none { | |
overscroll-behavior-y: none; | |
} | |
} | |
@media (min-width: 1024px) { | |
.border-box { | |
box-sizing: border-box; | |
} | |
.content-box { | |
box-sizing: content-box; | |
} | |
.inline { | |
display: inline; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.block { | |
display: block; | |
} | |
.grid { | |
display: grid; | |
} | |
.table { | |
display: table; | |
} | |
.table-row { | |
display: table-row; | |
} | |
.table-caption { | |
display: table-caption; | |
} | |
.table-cell { | |
display: table-cell; | |
} | |
.table-raw { | |
display: table-raw; | |
} | |
.table-column { | |
display: table-column; | |
} | |
.table-column-group { | |
display: table-column-group; | |
} | |
.table-footer-group { | |
display: table-footer-group; | |
} | |
.table-raw-group { | |
display: table-raw-group; | |
} | |
.flex { | |
display: flex; | |
} | |
.inline-flex { | |
display: inline-flex; | |
} | |
.flow-root { | |
display: flow-root; | |
} | |
.grid { | |
display: grid; | |
} | |
.inline-grid { | |
display: inline-grid; | |
} | |
.contents { | |
display: contents; | |
} | |
.none { | |
display: none; | |
} | |
.float:left { | |
float: left; | |
} | |
.float:right { | |
float: right; | |
} | |
.float:none { | |
float: none; | |
} | |
.clear:left { | |
clear: left; | |
} | |
.clear:right { | |
clear: right; | |
} | |
.clear:both { | |
clear: both; | |
} | |
.clear:none { | |
clear: none; | |
} | |
.object-fit:contain { | |
object-fit: contain; | |
} | |
.object-fit:cover { | |
object-fit: cover; | |
} | |
.object-fit:fill { | |
object-fit: fill; | |
} | |
.object-fit:none { | |
object-fit: none; | |
} | |
.object-fit:scale-down { | |
object-fit: scale-down; | |
} | |
.object-position:bottom { | |
object-position: bottom; | |
} | |
.object-position:center { | |
object-position: center; | |
} | |
.object-position:left { | |
object-position: left; | |
} | |
.object-position:left-bottom { | |
object-position: left bottom; | |
} | |
.object-position:left-top { | |
object-position: left top; | |
} | |
.object-position:right { | |
object-position: right; | |
} | |
.object-position:right-bottom { | |
object-position: right bottom; | |
} | |
.object-position:right-top { | |
object-position: right top; | |
} | |
.object-position:top { | |
object-position: top; | |
} | |
.overflow:auto { | |
overflow: auto; | |
} | |
.overflow-x:auto { | |
overflow-x: auto; | |
} | |
.overflow-y:-yauto { | |
overflow-y: auto; | |
} | |
.overflow:hidden { | |
overflow: hidden; | |
} | |
.overflow-x:hidden { | |
overflow-x: hidden; | |
} | |
.overflow-y:-yhidden { | |
overflow-y: hidden; | |
} | |
.overflow:visible { | |
overflow: visible; | |
} | |
.overflow-x:visible { | |
overflow-x: visible; | |
} | |
.overflow-y:-yvisible { | |
overflow-y: visible; | |
} | |
.overflow:scroll { | |
overflow: scroll; | |
} | |
.overflow-x:scroll { | |
overflow-x: scroll; | |
} | |
.overflow-y:-yscroll { | |
overflow-y: scroll; | |
} | |
.overscroll:auto { | |
overscroll-behavior: auto; | |
} | |
.overscroll-x:auto { | |
overscroll-behavior-x: auto; | |
} | |
.overscroll-y:auto { | |
overscroll-behavior-y: auto; | |
} | |
.overscroll:contain { | |
overscroll-behavior: contain; | |
} | |
.overscroll-x:contain { | |
overscroll-behavior-x: contain; | |
} | |
.overscroll-y:contain { | |
overscroll-behavior-y: contain; | |
} | |
.overscroll:none { | |
overscroll-behavior: none; | |
} | |
.overscroll-x:none { | |
overscroll-behavior-x: none; | |
} | |
.overscroll-y:none { | |
overscroll-behavior-y: none; | |
} | |
} | |
@media (min-width: 1280px) { | |
.border-box { | |
box-sizing: border-box; | |
} | |
.content-box { | |
box-sizing: content-box; | |
} | |
.inline { | |
display: inline; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.block { | |
display: block; | |
} | |
.grid { | |
display: grid; | |
} | |
.table { | |
display: table; | |
} | |
.table-row { | |
display: table-row; | |
} | |
.table-caption { | |
display: table-caption; | |
} | |
.table-cell { | |
display: table-cell; | |
} | |
.table-raw { | |
display: table-raw; | |
} | |
.table-column { | |
display: table-column; | |
} | |
.table-column-group { | |
display: table-column-group; | |
} | |
.table-footer-group { | |
display: table-footer-group; | |
} | |
.table-raw-group { | |
display: table-raw-group; | |
} | |
.flex { | |
display: flex; | |
} | |
.inline-flex { | |
display: inline-flex; | |
} | |
.flow-root { | |
display: flow-root; | |
} | |
.grid { | |
display: grid; | |
} | |
.inline-grid { | |
display: inline-grid; | |
} | |
.contents { | |
display: contents; | |
} | |
.none { | |
display: none; | |
} | |
.float:left { | |
float: left; | |
} | |
.float:right { | |
float: right; | |
} | |
.float:none { | |
float: none; | |
} | |
.clear:left { | |
clear: left; | |
} | |
.clear:right { | |
clear: right; | |
} | |
.clear:both { | |
clear: both; | |
} | |
.clear:none { | |
clear: none; | |
} | |
.object-fit:contain { | |
object-fit: contain; | |
} | |
.object-fit:cover { | |
object-fit: cover; | |
} | |
.object-fit:fill { | |
object-fit: fill; | |
} | |
.object-fit:none { | |
object-fit: none; | |
} | |
.object-fit:scale-down { | |
object-fit: scale-down; | |
} | |
.object-position:bottom { | |
object-position: bottom; | |
} | |
.object-position:center { | |
object-position: center; | |
} | |
.object-position:left { | |
object-position: left; | |
} | |
.object-position:left-bottom { | |
object-position: left bottom; | |
} | |
.object-position:left-top { | |
object-position: left top; | |
} | |
.object-position:right { | |
object-position: right; | |
} | |
.object-position:right-bottom { | |
object-position: right bottom; | |
} | |
.object-position:right-top { | |
object-position: right top; | |
} | |
.object-position:top { | |
object-position: top; | |
} | |
.overflow:auto { | |
overflow: auto; | |
} | |
.overflow-x:auto { | |
overflow-x: auto; | |
} | |
.overflow-y:-yauto { | |
overflow-y: auto; | |
} | |
.overflow:hidden { | |
overflow: hidden; | |
} | |
.overflow-x:hidden { | |
overflow-x: hidden; | |
} | |
.overflow-y:-yhidden { | |
overflow-y: hidden; | |
} | |
.overflow:visible { | |
overflow: visible; | |
} | |
.overflow-x:visible { | |
overflow-x: visible; | |
} | |
.overflow-y:-yvisible { | |
overflow-y: visible; | |
} | |
.overflow:scroll { | |
overflow: scroll; | |
} | |
.overflow-x:scroll { | |
overflow-x: scroll; | |
} | |
.overflow-y:-yscroll { | |
overflow-y: scroll; | |
} | |
.overscroll:auto { | |
overscroll-behavior: auto; | |
} | |
.overscroll-x:auto { | |
overscroll-behavior-x: auto; | |
} | |
.overscroll-y:auto { | |
overscroll-behavior-y: auto; | |
} | |
.overscroll:contain { | |
overscroll-behavior: contain; | |
} | |
.overscroll-x:contain { | |
overscroll-behavior-x: contain; | |
} | |
.overscroll-y:contain { | |
overscroll-behavior-y: contain; | |
} | |
.overscroll:none { | |
overscroll-behavior: none; | |
} | |
.overscroll-x:none { | |
overscroll-behavior-x: none; | |
} | |
.overscroll-y:none { | |
overscroll-behavior-y: none; | |
} | |
} | |
@media (min-width: 1536px) { | |
.border-box { | |
box-sizing: border-box; | |
} | |
.content-box { | |
box-sizing: content-box; | |
} | |
.inline { | |
display: inline; | |
} | |
.inline-block { | |
display: inline-block; | |
} | |
.block { | |
display: block; | |
} | |
.grid { | |
display: grid; | |
} | |
.table { | |
display: table; | |
} | |
.table-row { | |
display: table-row; | |
} | |
.table-caption { | |
display: table-caption; | |
} | |
.table-cell { | |
display: table-cell; | |
} | |
.table-raw { | |
display: table-raw; | |
} | |
.table-column { | |
display: table-column; | |
} | |
.table-column-group { | |
display: table-column-group; | |
} | |
.table-footer-group { | |
display: table-footer-group; | |
} | |
.table-raw-group { | |
display: table-raw-group; | |
} | |
.flex { | |
display: flex; | |
} | |
.inline-flex { | |
display: inline-flex; | |
} | |
.flow-root { | |
display: flow-root; | |
} | |
.grid { | |
display: grid; | |
} | |
.inline-grid { | |
display: inline-grid; | |
} | |
.contents { | |
display: contents; | |
} | |
.none { | |
display: none; | |
} | |
.float:left { | |
float: left; | |
} | |
.float:right { | |
float: right; | |
} | |
.float:none { | |
float: none; | |
} | |
.clear:left { | |
clear: left; | |
} | |
.clear:right { | |
clear: right; | |
} | |
.clear:both { | |
clear: both; | |
} | |
.clear:none { | |
clear: none; | |
} | |
.object-fit:contain { | |
object-fit: contain; | |
} | |
.object-fit:cover { | |
object-fit: cover; | |
} | |
.object-fit:fill { | |
object-fit: fill; | |
} | |
.object-fit:none { | |
object-fit: none; | |
} | |
.object-fit:scale-down { | |
object-fit: scale-down; | |
} | |
.object-position:bottom { | |
object-position: bottom; | |
} | |
.object-position:center { | |
object-position: center; | |
} | |
.object-position:left { | |
object-position: left; | |
} | |
.object-position:left-bottom { | |
object-position: left bottom; | |
} | |
.object-position:left-top { | |
object-position: left top; | |
} | |
.object-position:right { | |
object-position: right; | |
} | |
.object-position:right-bottom { | |
object-position: right bottom; | |
} | |
.object-position:right-top { | |
object-position: right top; | |
} | |
.object-position:top { | |
object-position: top; | |
} | |
.overflow:auto { | |
overflow: auto; | |
} | |
.overflow-x:auto { | |
overflow-x: auto; | |
} | |
.overflow-y:-yauto { | |
overflow-y: auto; | |
} | |
.overflow:hidden { | |
overflow: hidden; | |
} | |
.overflow-x:hidden { | |
overflow-x: hidden; | |
} | |
.overflow-y:-yhidden { | |
overflow-y: hidden; | |
} | |
.overflow:visible { | |
overflow: visible; | |
} | |
.overflow-x:visible { | |
overflow-x: visible; | |
} | |
.overflow-y:-yvisible { | |
overflow-y: visible; | |
} | |
.overflow:scroll { | |
overflow: scroll; | |
} | |
.overflow-x:scroll { | |
overflow-x: scroll; | |
} | |
.overflow-y:-yscroll { | |
overflow-y: scroll; | |
} | |
.overscroll:auto { | |
overscroll-behavior: auto; | |
} | |
.overscroll-x:auto { | |
overscroll-behavior-x: auto; | |
} | |
.overscroll-y:auto { | |
overscroll-behavior-y: auto; | |
} | |
.overscroll:contain { | |
overscroll-behavior: contain; | |
} | |
.overscroll-x:contain { | |
overscroll-behavior-x: contain; | |
} | |
.overscroll-y:contain { | |
overscroll-behavior-y: contain; | |
} | |
.overscroll:none { | |
overscroll-behavior: none; | |
} | |
.overscroll-x:none { | |
overscroll-behavior-x: none; | |
} | |
.overscroll-y:none { | |
overscroll-behavior-y: none; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"sass": { | |
"compiler": "dart-sass/1.26.11", | |
"extensions": {}, | |
"syntax": "SCSS", | |
"outputStyle": "expanded" | |
}, | |
"autoprefixer": false | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment