@heycar-uikit/core
Version:
The React UI library from HeyCar
137 lines (125 loc) • 2.31 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 {
--gap-2xs: 4px;
--gap-xl: 24px;
}
:root {
--spacing-2: 8px;
}
:root {
/* Font families */
--font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;
/* 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);
}
/*
* Base
*/
.button__button_1yxfz {
font-family: var(--font-family-system);
padding: var(--gap-2xs) var(--gap-xl);
position: relative;
display: inline-flex;
vertical-align: middle;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
margin: 0;
border: 0;
outline: none;
box-shadow: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
box-sizing: border-box;
text-decoration: none;
line-height: 1.2;
border-style: solid;
white-space: nowrap;
gap: var(--spacing-2);
}
.button__button_1yxfz:disabled,
.button__button_1yxfz[disabled] {
cursor: default;
pointer-events: none;
}
.button__iconLeft_1yxfz {
margin-left: -4px;
}
.button__iconRight_1yxfz {
margin-right: -4px;
}
/* Full width */
.button__fullWidth_1yxfz {
display: flex;
width: 100%;
}
/* Loading */
.button__loading_1yxfz .button__text_1yxfz,
.button__loading_1yxfz .button__icon_1yxfz {
opacity: 0;
}
.button__loading_1yxfz {
pointer-events: none;
}
.button__loading_1yxfz:hover {
background: currentColor;
}
.button__loader_1yxfz {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}