Skip to content

Instantly share code, notes, and snippets.

@Ksengine

Ksengine/input.scss

Created March 20, 2021 15:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ksengine/d26f3afab06da381e94df42a42c89f76 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ksengine/d26f3afab06da381e94df42a42c89f76 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@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: (
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}-y#{$value} {
overscroll-behavior-y: #{$value};
}
}
}
}
@each $value in (static relative absolute fixed sticky) {
.#{$prefix}#{$value} {
position: #{$value};
}
}
@each $key, $value in $position-values {
@each $side in (top left right bottom) {
.#{$prefix}#{$sep}#{$side}#{$sep}#{$key} {
#{$side}: #{$value};
}
}
}
.#{$prefix}#inset#{$sep}#{$key} {
top: #{$value};
bottom: #{$value};
left: #{$value};
right: #{$value};
}
.#{$prefix}#inset-y#{$sep}#{$key} {
top: #{$value};
bottom: #{$value};
}
.#{$prefix}#inset-x#{$sep}#{$key} {
left: #{$value};
right: #{$value};
}
.#{$prefix}invisible {
visibility: invisible;
}
.#{$prefix}visible {
visibility: visible;
}
.#{$prefix}z {
@each $value in $z-index {
&#{$sep}#{$value} {
z-index: #{$value};
}
}
}
// Flex
.#{$prefix}flex {
@each $key,
$value
in (
row: row,
row-reverse: row-reverse,
col: column,
col-reverse: column-reverse
)
{
&#{$sep}#{$key} {
flex-direction: #{$value};
}
}
@each $value in (wrap wrap-reverse nowrap) {
&#{$sep}#{$value} {
flex-wrap: #{$value};
}
}
@each $key, $value in $flex {
&#{$sep}#{$key} {
flex: #{$value};
}
}
@each $key, $value in $flex-grow {
&#{$sep}#{$key} {
flex-grow: #{$value};
}
}
@each $key, $value in $flex-shrink {
&#{$sep}#{$key} {
flex-shrink: #{$value};
}
}
}
@include css();
Raw
output.css
.css {
color: blue;
}
Raw
settings.json
{
"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