@heycar-uikit/core
Version:
The React UI library from HeyCar
684 lines (552 loc) • 16.1 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) {
.row.gutter-mobile-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-mobile-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-mobile-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-mobile-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-mobile-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-mobile-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-mobile-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-mobile-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-mobile-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-mobile-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 768px) {
.row.gutter-tablet-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-tablet-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-tablet-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-tablet-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-tablet-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-tablet-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-tablet-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-tablet-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-tablet-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-tablet-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 768px) {
.row.gutter-tablet-s-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-tablet-s-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-tablet-s-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-tablet-s-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-tablet-s-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-tablet-s-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-tablet-s-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-tablet-s-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-tablet-s-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-tablet-s-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1024px) {
.row.gutter-tablet-l-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-tablet-l-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-tablet-l-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-tablet-l-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-tablet-l-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-tablet-l-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-tablet-l-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-tablet-l-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-tablet-l-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-tablet-l-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1280px) {
.row.gutter-desktop-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-desktop-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-desktop-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-desktop-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-desktop-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-desktop-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-desktop-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-desktop-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-desktop-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-desktop-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1280px) {
.row.gutter-desktop-s-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-desktop-s-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-desktop-s-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-desktop-s-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-desktop-s-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-desktop-s-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-desktop-s-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-desktop-s-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-desktop-s-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-desktop-s-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1366px) {
.row.gutter-desktop-m-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-desktop-m-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-desktop-m-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-desktop-m-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-desktop-m-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-desktop-m-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-desktop-m-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-desktop-m-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-desktop-m-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-desktop-m-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}
@media (min-width: 1440px) {
.row.gutter-desktop-l-8 {
/* prettier-ignore */
margin-left: calc(-8px / 2);
/* prettier-ignore */
margin-right: calc(-8px / 2);
}
.row.gutter-desktop-l-8 > .col {
/* prettier-ignore */
padding-left: calc(8px / 2);
/* prettier-ignore */
padding-right: calc(8px / 2);
}
.row.gutter-desktop-l-12 {
/* prettier-ignore */
margin-left: calc(-12px / 2);
/* prettier-ignore */
margin-right: calc(-12px / 2);
}
.row.gutter-desktop-l-12 > .col {
/* prettier-ignore */
padding-left: calc(12px / 2);
/* prettier-ignore */
padding-right: calc(12px / 2);
}
.row.gutter-desktop-l-16 {
/* prettier-ignore */
margin-left: calc(-16px / 2);
/* prettier-ignore */
margin-right: calc(-16px / 2);
}
.row.gutter-desktop-l-16 > .col {
/* prettier-ignore */
padding-left: calc(16px / 2);
/* prettier-ignore */
padding-right: calc(16px / 2);
}
.row.gutter-desktop-l-20 {
/* prettier-ignore */
margin-left: calc(-20px / 2);
/* prettier-ignore */
margin-right: calc(-20px / 2);
}
.row.gutter-desktop-l-20 > .col {
/* prettier-ignore */
padding-left: calc(20px / 2);
/* prettier-ignore */
padding-right: calc(20px / 2);
}
.row.gutter-desktop-l-24 {
/* prettier-ignore */
margin-left: calc(-24px / 2);
/* prettier-ignore */
margin-right: calc(-24px / 2);
}
.row.gutter-desktop-l-24 > .col {
/* prettier-ignore */
padding-left: calc(24px / 2);
/* prettier-ignore */
padding-right: calc(24px / 2);
}
}