@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
110 lines (89 loc) • 1.64 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.
*/
:root {
--calcite-popper-transition: 150ms ease-in-out;
}
:host([hidden]) {
display: none;
}
:host([scale=s]) {
min-height: 1.5rem;
}
:host([scale=m]) {
min-height: 2rem;
}
:host([scale=l]) {
min-height: 2.5rem;
}
:host {
display: flex;
background-color: var(--calcite-ui-foreground-1);
width: -moz-fit-content;
width: fit-content;
outline: 1px solid var(--calcite-ui-border-input);
outline-offset: -1px;
}
:host([layout=vertical]) {
flex-direction: column;
align-items: flex-start;
align-self: flex-start;
}
:host([width=full]) {
width: 100%;
min-width: -moz-fit-content;
min-width: fit-content;
}
:host([width=full]) ::slotted(calcite-radio-group-item) {
flex: 1 1 auto;
}
:host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item) {
justify-content: flex-start;
}
::slotted(calcite-radio-group-item[checked]),
::slotted(calcite-radio-group-item:focus) {
z-index: 0;
}
:host([disabled]) {
opacity: var(--calcite-ui-opacity-disabled);
pointer-events: none;
}