@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
113 lines (103 loc) • 2.31 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);
}
}
:root {
--calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
--calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
--calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
--calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
--calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
}
.calcite-animate {
opacity: 0;
animation-fill-mode: both;
animation-duration: var(--calcite-animation-timing);
}
.calcite-animate__in {
animation-name: in;
}
.calcite-animate__in-down {
animation-name: in-down;
}
.calcite-animate__in-up {
animation-name: in-up;
}
.calcite-animate__in-scale {
animation-name: in-scale;
}
/**
* Currently only used in Checkbox.
*/
:root {
--calcite-popper-transition: var(--calcite-animation-timing);
}
:host([hidden]) {
display: none;
}
:host {
display: inline-block;
-webkit-user-select: none;
user-select: none;
}
:host([disabled]) {
pointer-events: none;
cursor: default;
-webkit-user-select: none;
user-select: none;
opacity: var(--calcite-ui-opacity-disabled);
}
:host([disabled]) ::slotted([calcite-hydrated][disabled]),
:host([disabled]) [calcite-hydrated][disabled] {
/* prevent opacity stacking */
opacity: 1;
}
::slotted(input[slot=hidden-form-input]) {
bottom: 0 ;
left: 0 ;
margin: 0 ;
opacity: 0 ;
outline: none ;
padding: 0 ;
position: absolute ;
right: 0 ;
top: 0 ;
transform: none ;
-webkit-appearance: none ;
z-index: -1 ;
}