@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
96 lines (80 loc) • 1.57 kB
CSS
/* mixins & extensions */
@keyframes in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes in-down {
0% {
opacity: 0;
transform: translate3D(0, -5px, 0);
}
100% {
opacity: 1;
transform: translate3D(0, 0, 0);
}
}
@keyframes in-up {
0% {
opacity: 0;
transform: translate3D(0, 5px, 0);
}
100% {
opacity: 1;
transform: translate3D(0, 0, 0);
}
}
@keyframes in-scale {
0% {
opacity: 0;
transform: scale3D(0.95, 0.95, 1);
}
100% {
opacity: 1;
transform: scale3D(1, 1, 1);
}
}
/**
* Currently only used in Checkbox.
*/
:host {
/* Base ":host" styles for the component */
box-sizing: border-box;
background-color: var(--calcite-ui-foreground-1);
color: var(--calcite-ui-text-2);
font-size: var(--calcite-font-size--1);
}
:host * {
box-sizing: border-box;
}
:host {
/* Component spacing variables */
--calcite-icon-size: 1rem;
--calcite-spacing-eighth: ;
--calcite-spacing-quarter: 0.25rem;
--calcite-spacing-half: 0.5rem;
--calcite-spacing-three-quarters: 0.75rem;
--calcite-spacing: 1rem;
--calcite-spacing-plus-quarter: 1.25rem;
--calcite-spacing-plus-half: 1.5rem;
--calcite-spacing-double: 2rem;
--calcite-menu-min-width: 10rem;
--calcite-header-min-height: 3rem;
--calcite-footer-min-height: 3rem;
}
:root {
--calcite-popper-transition: 150ms ease-in-out;
}
:host([hidden]) {
display: none;
}
:host {
--calcite-tip-max-width: 540px;
}
::slotted(calcite-tip) {
border: none;
max-width: var(--calcite-tip-max-width);
}