@heycar-uikit/core
Version:
The React UI library from HeyCar
684 lines (552 loc) • 18.5 kB
CSS
:root {
/* heycar mint color */
/* mica blue color */
/* sunbeam blue color */
/* mustang yellow color */
/* old ferrari red color */
/* -- fantasy name of "green" color to be defined -- */
/* -- fantasy name of "whatsapp" color to be defined -- */
/* -- fantasy name of "red" color to be defined -- */
/* tarmac grey color */
--color-tarmac-grey-700: #303030;
/* brand colors */
}
/* Depricated. Do Not Use */
:root {
/* Font families */
/* Font weights */
}
/*
Heading
*/
/*
Sub-Heading
*/
/*
Body
*/
/*
Caption
*/
/*
Overline
*/
/*
Button
*/
/*
Button Old - DO NOT USE
*/
/* If this is ever changed please update breakpoints.json as well */
/* Mobile */
/* Tablet */
/* Desktop */
/* Default theme (light) */
:root {
/*
Colors
*/
--color-neutral-700: var(--color-tarmac-grey-700);
/*
Sizes
*/
}
body {
color: var(--color-neutral-700);
}
@media (max-width: 767px) {
.grid__row_1snhu.grid__gutter-mobile-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-mobile-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 768px) {
.grid__row_1snhu.grid__gutter-tablet-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 768px) {
.grid__row_1snhu.grid__gutter-tablet-s-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-s-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1024px) {
.grid__row_1snhu.grid__gutter-tablet-l-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-tablet-l-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1280px) {
.grid__row_1snhu.grid__gutter-desktop-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1280px) {
.grid__row_1snhu.grid__gutter-desktop-s-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-s-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1366px) {
.grid__row_1snhu.grid__gutter-desktop-m-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-m-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1440px) {
.grid__row_1snhu.grid__gutter-desktop-l-8_1snhu {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-8_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-12_1snhu {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-12_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-16_1snhu {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-16_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-20_1snhu {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-20_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-24_1snhu {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.grid__row_1snhu.grid__gutter-desktop-l-24_1snhu > .grid__col_1snhu {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}