UNPKG

@heycar-uikit/core

Version:
137 lines (125 loc) 2.31 kB
: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%); }