Skip to content

Instantly share code, notes, and snippets.

@joeczar

joeczar/input.scss

Created November 16, 2022 07:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joeczar/2065d9efd2eacd37175c4cda6707e278 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joeczar/2065d9efd2eacd37175c4cda6707e278 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
// Do not edit directly
// Generated on Tue, 15 Nov 2022 10:24:01 GMT
$pbm-red: rgb(191, 34, 71);
$base-dark: rgb(28, 28, 40);
$base-light: rgb(242, 242, 245);
$primary-10: rgb(59, 157, 164);
$primary-20: rgb(98, 177, 182);
$primary-30: rgb(137, 196, 200);
$primary-40: rgb(177, 216, 219);
$primary-50: rgb(216, 235, 237);
$accent-10: rgb(197, 155, 98);
$accent-20: rgb(209, 175, 129);
$accent-30: rgb(220, 195, 161);
$accent-40: rgb(232, 215, 192);
$accent-50: rgb(243, 235, 224);
$red-10: rgb(255, 59, 59);
$red-20: rgb(255, 92, 92);
$red-30: rgb(255, 128, 128);
$red-40: rgb(255, 230, 230);
$grey-10: rgb(93, 94, 117);
$grey-20: rgb(127, 128, 151);
$grey-30: rgb(154, 155, 167);
$grey-40: rgb(169, 169, 181);
$grey-50: rgb(189, 189, 194);
$grey-60: rgb(202, 202, 203);
$grey-70: rgb(233, 233, 233);
$green-10: rgb(6, 194, 112);
$green-20: rgb(57, 217, 138);
$green-30: rgb(87, 235, 161);
$green-40: rgb(227, 255, 241);
$blue-10: rgb(0, 99, 247);
$blue-20: rgb(91, 141, 239);
$blue-30: rgb(157, 191, 249);
$blue-40: rgb(229, 240, 255);
$orange-10: rgb(255, 136, 0);
$orange-20: rgb(253, 172, 66);
$orange-30: rgb(252, 204, 117);
$orange-40: rgb(255, 248, 230);
$purple-10: rgb(102, 0, 204);
$purple-20: rgb(172, 93, 217);
$purple-30: rgb(221, 165, 233);
$purple-40: rgb(255, 230, 255);
$teal-10: rgb(0, 207, 222);
$teal-20: rgb(115, 223, 231);
$teal-30: rgb(169, 239, 242);
$teal-40: rgb(230, 255, 255);
$yellow-10: rgb(255, 204, 0);
$yellow-20: rgb(253, 221, 72);
$yellow-30: rgb(253, 237, 114);
$yellow-40: rgb(255, 254, 230);
$light-10: rgb(191, 191, 191);
$light-20: rgb(212, 212, 212);
$light-30: rgb(216, 216, 216);
$light-40: rgb(221, 221, 221);
$light-50: rgb(225, 225, 225);
$light-60: rgb(229, 229, 229);
$light-70: rgb(234, 234, 234);
$light-80: rgb(238, 238, 238);
$light-90: rgb(242, 242, 242);
$light-100: rgb(255, 255, 255);
$dark-10: rgb(28, 28, 40);
$dark-20: rgb(46, 46, 66);
$dark-30: rgb(85, 87, 112);
$dark-40: rgb(132, 134, 155);
$dark-50: rgb(175, 176, 184);
$dark-60: rgb(203, 203, 203);
$shadow-10: rgba(40, 41, 61, 0.4);
$shadow-20: rgba(206, 207, 217, 0.4);
$shadow-30: rgba(40, 41, 61, 0.04);
$spacing-4: 4;
$spacing-8: 8;
$spacing-12: 12;
$spacing-16: 16;
$spacing-24: 24;
$spacing-32: 32;
$spacing-40: 40;
$spacing-48: 48;
$spacing-56: 56;
$spacing-64: 64;
$colors: (
'pbm-red': $pbm-red,
'base-dark': $base-dark,
'base-light': $base-light,
'primary-10': $primary-10,
'primary-20': $primary-20,
'primary-30': $primary-30,
'primary-40': $primary-40,
'primary-50': $primary-50,
'accent-10': $accent-10,
'accent-20': $accent-20,
'accent-30': $accent-30,
'accent-40': $accent-40,
'accent-50': $accent-50,
'red-10': $red-10,
'red-20': $red-20,
'red-30': $red-30,
'red-40': $red-40,
'grey-10': $grey-10,
'grey-20': $grey-20,
'grey-30': $grey-30,
'grey-40': $grey-40,
'grey-50': $grey-50,
'grey-60': $grey-60,
'grey-70': $grey-70,
'green-10': $green-10,
'green-20': $green-20,
'green-30': $green-30,
'green-40': $green-40,
'blue-10': $blue-10,
'blue-20': $blue-20,
'blue-30': $blue-30,
'blue-40': $blue-40,
'orange-10': $orange-10,
'orange-20': $orange-20,
'orange-30': $orange-30,
'orange-40': $orange-40,
'purple-10': $purple-10,
'purple-20': $purple-20,
'purple-30': $purple-30,
'purple-40': $purple-40,
'teal-10': $teal-10,
'teal-20': $teal-20,
'teal-30': $teal-30,
'teal-40': $teal-40,
'yellow-10': $yellow-10,
'yellow-20': $yellow-20,
'yellow-30': $yellow-30,
'yellow-40': $yellow-40,
'light-10': $light-10,
'light-20': $light-20,
'light-30': $light-30,
'light-40': $light-40,
'light-50': $light-50,
'light-60': $light-60,
'light-70': $light-70,
'light-80': $light-80,
'light-90': $light-90,
'light-100': $light-100,
'dark-10': $dark-10,
'dark-20': $dark-20,
'dark-30': $dark-30,
'dark-40': $dark-40,
'dark-50': $dark-50,
'dark-60': $dark-60,
'shadow-10': $shadow-10,
'shadow-20': $shadow-20,
'shadow-30': $shadow-30
);
@each $key, $value in $colors {
.bg-#{'' + $key} {
background-color: $value;
}
.text-#{'' + $key} {
color: $value;
}
}
$html-font-size: 16;
// *1.2
@function stripUnit($value) {
@return calc($value / ($value * 0 + 1));
}
@function rem($pxValue) {
@return calc(stripUnit($pxValue) / stripUnit($html-font-size));
}
$spaces: (
'4': rem($spacing-4),
'8': rem($spacing-8),
'12': rem($spacing-12),
'16': rem($spacing-16),
'24': rem($spacing-24),
'32': rem($spacing-32),
'40': rem($spacing-40),
'48': rem($spacing-48),
'56': rem($spacing-56),
'64': rem($spacing-64)
);
@each $key, $value in $spaces {
.pad-#{'' + $key} {
padding: #{'' + $value + 'rem'};
}
.pad-l-#{'' + $key} {
padding-left: #{'' + $value + 'rem'};
}
.pad-r-#{'' + $key} {
padding-right: #{'' + $value + 'rem'};
}
.pad-x-#{'' + $key} {
padding-right: #{'' + $value + 'rem'};
padding-left: #{'' + $value + 'rem'};
}
.pad-t-#{'' + $key} {
padding-top: #{'' + $value + 'rem'};
}
.pad-b-#{'' + $key} {
padding-bottom: #{'' + $value + 'rem'};
}
.pad-y-#{'' + $key} {
padding-bottom: #{'' + $value + 'rem'};
padding-top: #{'' + $value + 'rem'};
}
.mar-#{'' + $key} {
margin: #{'' + $value + 'rem'};
}
.mar-l-#{'' + $key} {
margin-left: #{'' + $value + 'rem'};
}
.mar-r-#{'' + $key} {
margin-right: #{'' + $value + 'rem'};
}
.mar-x-#{'' + $key} {
margin-right: #{'' + $value + 'rem'};
margin-left: #{'' + $value + 'rem'};
}
.mar-t-#{'' + $key} {
margin-top: #{'' + $value + 'rem'};
}
.mar-b-#{'' + $key} {
margin-bottom: #{'' + $value + 'rem'};
}
.mar-y-#{'' + $key} {
margin-bottom: #{'' + $value + 'rem'};
margin-top: #{'' + $value + 'rem'};
}
.font-size-#{'' + $key} {
font-size: #{'' + $value + 'rem'};
}
}
Raw
output.css
.bg-pbm-red {
background-color: #bf2247;
}
.text-pbm-red {
color: #bf2247;
}
.bg-base-dark {
background-color: #1c1c28;
}
.text-base-dark {
color: #1c1c28;
}
.bg-base-light {
background-color: #f2f2f5;
}
.text-base-light {
color: #f2f2f5;
}
.bg-primary-10 {
background-color: #3b9da4;
}
.text-primary-10 {
color: #3b9da4;
}
.bg-primary-20 {
background-color: #62b1b6;
}
.text-primary-20 {
color: #62b1b6;
}
.bg-primary-30 {
background-color: #89c4c8;
}
.text-primary-30 {
color: #89c4c8;
}
.bg-primary-40 {
background-color: #b1d8db;
}
.text-primary-40 {
color: #b1d8db;
}
.bg-primary-50 {
background-color: #d8ebed;
}
.text-primary-50 {
color: #d8ebed;
}
.bg-accent-10 {
background-color: #c59b62;
}
.text-accent-10 {
color: #c59b62;
}
.bg-accent-20 {
background-color: #d1af81;
}
.text-accent-20 {
color: #d1af81;
}
.bg-accent-30 {
background-color: #dcc3a1;
}
.text-accent-30 {
color: #dcc3a1;
}
.bg-accent-40 {
background-color: #e8d7c0;
}
.text-accent-40 {
color: #e8d7c0;
}
.bg-accent-50 {
background-color: #f3ebe0;
}
.text-accent-50 {
color: #f3ebe0;
}
.bg-red-10 {
background-color: #ff3b3b;
}
.text-red-10 {
color: #ff3b3b;
}
.bg-red-20 {
background-color: #ff5c5c;
}
.text-red-20 {
color: #ff5c5c;
}
.bg-red-30 {
background-color: #ff8080;
}
.text-red-30 {
color: #ff8080;
}
.bg-red-40 {
background-color: #ffe6e6;
}
.text-red-40 {
color: #ffe6e6;
}
.bg-grey-10 {
background-color: #5d5e75;
}
.text-grey-10 {
color: #5d5e75;
}
.bg-grey-20 {
background-color: #7f8097;
}
.text-grey-20 {
color: #7f8097;
}
.bg-grey-30 {
background-color: #9a9ba7;
}
.text-grey-30 {
color: #9a9ba7;
}
.bg-grey-40 {
background-color: #a9a9b5;
}
.text-grey-40 {
color: #a9a9b5;
}
.bg-grey-50 {
background-color: #bdbdc2;
}
.text-grey-50 {
color: #bdbdc2;
}
.bg-grey-60 {
background-color: #cacacb;
}
.text-grey-60 {
color: #cacacb;
}
.bg-grey-70 {
background-color: #e9e9e9;
}
.text-grey-70 {
color: #e9e9e9;
}
.bg-green-10 {
background-color: #06c270;
}
.text-green-10 {
color: #06c270;
}
.bg-green-20 {
background-color: #39d98a;
}
.text-green-20 {
color: #39d98a;
}
.bg-green-30 {
background-color: #57eba1;
}
.text-green-30 {
color: #57eba1;
}
.bg-green-40 {
background-color: #e3fff1;
}
.text-green-40 {
color: #e3fff1;
}
.bg-blue-10 {
background-color: #0063f7;
}
.text-blue-10 {
color: #0063f7;
}
.bg-blue-20 {
background-color: #5b8def;
}
.text-blue-20 {
color: #5b8def;
}
.bg-blue-30 {
background-color: #9dbff9;
}
.text-blue-30 {
color: #9dbff9;
}
.bg-blue-40 {
background-color: #e5f0ff;
}
.text-blue-40 {
color: #e5f0ff;
}
.bg-orange-10 {
background-color: #ff8800;
}
.text-orange-10 {
color: #ff8800;
}
.bg-orange-20 {
background-color: #fdac42;
}
.text-orange-20 {
color: #fdac42;
}
.bg-orange-30 {
background-color: #fccc75;
}
.text-orange-30 {
color: #fccc75;
}
.bg-orange-40 {
background-color: #fff8e6;
}
.text-orange-40 {
color: #fff8e6;
}
.bg-purple-10 {
background-color: #6600cc;
}
.text-purple-10 {
color: #6600cc;
}
.bg-purple-20 {
background-color: #ac5dd9;
}
.text-purple-20 {
color: #ac5dd9;
}
.bg-purple-30 {
background-color: #dda5e9;
}
.text-purple-30 {
color: #dda5e9;
}
.bg-purple-40 {
background-color: #ffe6ff;
}
.text-purple-40 {
color: #ffe6ff;
}
.bg-teal-10 {
background-color: #00cfde;
}
.text-teal-10 {
color: #00cfde;
}
.bg-teal-20 {
background-color: #73dfe7;
}
.text-teal-20 {
color: #73dfe7;
}
.bg-teal-30 {
background-color: #a9eff2;
}
.text-teal-30 {
color: #a9eff2;
}
.bg-teal-40 {
background-color: #e6ffff;
}
.text-teal-40 {
color: #e6ffff;
}
.bg-yellow-10 {
background-color: #ffcc00;
}
.text-yellow-10 {
color: #ffcc00;
}
.bg-yellow-20 {
background-color: #fddd48;
}
.text-yellow-20 {
color: #fddd48;
}
.bg-yellow-30 {
background-color: #fded72;
}
.text-yellow-30 {
color: #fded72;
}
.bg-yellow-40 {
background-color: #fffee6;
}
.text-yellow-40 {
color: #fffee6;
}
.bg-light-10 {
background-color: #bfbfbf;
}
.text-light-10 {
color: #bfbfbf;
}
.bg-light-20 {
background-color: #d4d4d4;
}
.text-light-20 {
color: #d4d4d4;
}
.bg-light-30 {
background-color: #d8d8d8;
}
.text-light-30 {
color: #d8d8d8;
}
.bg-light-40 {
background-color: #dddddd;
}
.text-light-40 {
color: #dddddd;
}
.bg-light-50 {
background-color: #e1e1e1;
}
.text-light-50 {
color: #e1e1e1;
}
.bg-light-60 {
background-color: #e5e5e5;
}
.text-light-60 {
color: #e5e5e5;
}
.bg-light-70 {
background-color: #eaeaea;
}
.text-light-70 {
color: #eaeaea;
}
.bg-light-80 {
background-color: #eeeeee;
}
.text-light-80 {
color: #eeeeee;
}
.bg-light-90 {
background-color: #f2f2f2;
}
.text-light-90 {
color: #f2f2f2;
}
.bg-light-100 {
background-color: white;
}
.text-light-100 {
color: white;
}
.bg-dark-10 {
background-color: #1c1c28;
}
.text-dark-10 {
color: #1c1c28;
}
.bg-dark-20 {
background-color: #2e2e42;
}
.text-dark-20 {
color: #2e2e42;
}
.bg-dark-30 {
background-color: #555770;
}
.text-dark-30 {
color: #555770;
}
.bg-dark-40 {
background-color: #84869b;
}
.text-dark-40 {
color: #84869b;
}
.bg-dark-50 {
background-color: #afb0b8;
}
.text-dark-50 {
color: #afb0b8;
}
.bg-dark-60 {
background-color: #cbcbcb;
}
.text-dark-60 {
color: #cbcbcb;
}
.bg-shadow-10 {
background-color: rgba(40, 41, 61, 0.4);
}
.text-shadow-10 {
color: rgba(40, 41, 61, 0.4);
}
.bg-shadow-20 {
background-color: rgba(206, 207, 217, 0.4);
}
.text-shadow-20 {
color: rgba(206, 207, 217, 0.4);
}
.bg-shadow-30 {
background-color: rgba(40, 41, 61, 0.04);
}
.text-shadow-30 {
color: rgba(40, 41, 61, 0.04);
}
.pad-4 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-4 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-4 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-4 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-4 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-4 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-4 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-4 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-4 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-4 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-4 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-4 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-4 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-4 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-4 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-8 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-8 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-8 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-8 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-8 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-8 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-8 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-8 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-8 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-8 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-8 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-8 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-8 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-8 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-8 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-12 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-12 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-12 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-12 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-12 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-12 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-12 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-12 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-12 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-12 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-12 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-12 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-12 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-12 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-12 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-16 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-16 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-16 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-16 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-16 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-16 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-16 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-16 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-16 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-16 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-16 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-16 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-16 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-16 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-16 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-24 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-24 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-24 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-24 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-24 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-24 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-24 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-24 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-24 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-24 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-24 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-24 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-24 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-24 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-24 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-32 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-32 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-32 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-32 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-32 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-32 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-32 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-32 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-32 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-32 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-32 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-32 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-32 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-32 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-32 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-40 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-40 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-40 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-40 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-40 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-40 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-40 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-40 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-40 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-40 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-40 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-40 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-40 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-40 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-40 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-48 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-48 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-48 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-48 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-48 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-48 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-48 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-48 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-48 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-48 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-48 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-48 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-48 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-48 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-48 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-56 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-56 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-56 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-56 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-56 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-56 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-56 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-56 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-56 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-56 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-56 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-56 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-56 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-56 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-56 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-64 {
padding: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-l-64 {
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-r-64 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-x-64 {
padding-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-t-64 {
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-b-64 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.pad-y-64 {
padding-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
padding-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-64 {
margin: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-l-64 {
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-r-64 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-x-64 {
margin-right: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-left: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-t-64 {
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-b-64 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.mar-y-64 {
margin-bottom: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
margin-top: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
.font-size-64 {
font-size: calc(stripUnit($pxValue) / stripUnit($html-font-size))rem;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"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