@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
104 lines (86 loc) • 1.55 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;
}
:root {
--calcite-popper-transition: 150ms ease-in-out;
}
:host([hidden]) {
display: none;
}
:host {
align-items: stretch;
background-color: transparent;
display: flex;
flex-direction: column;
position: relative;
flex-shrink: 0;
flex-grow: 0;
}
calcite-value-list-item:last-of-type {
box-shadow: none;
}
:host([filter-enabled]) header {
background-color: var(--calcite-ui-foreground-1);
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 0.25rem;
box-shadow: 0 1px 0 var(--calcite-ui-border-3);
}
:host([filter-enabled]) header.sticky {
position: sticky;
top: 0;
z-index: 10;
}
calcite-filter {
margin-bottom: 1px;
}