@esri/calcite-components 1.0.0-next.337 → 1.0.0-next.340

package/dist/collection/components/calcite-loader/calcite-loader.css

@@ -1,65 +1,55 @@
 @charset "UTF-8";
-
 /* 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-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1);
-  --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor));
+  --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-internal-animation-timing);
+  animation-duration: var(--calcite-animation-timing);
 }
 
 .calcite-animate__in {
@@ -81,7 +71,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -99,17 +88,16 @@
 * @prop --calcite-loader-size: the width and height of a non-inline loader
 * @prop --calcite-loader-size-inline: the width and height of an inline loader
 */
-
-:host {
-  align-items: center;
+:host{
   position: relative;
-  justify-content: center;
-  display: none;
   margin-left: auto;
   margin-right: auto;
-  opacity: 1;
+  display: none;
+  align-items: center;
+  justify-content: center;
   padding-top: 4rem;
   padding-bottom: 4rem;
+  opacity: 1;
   min-height: var(--calcite-loader-size);
   font-size: var(--calcite-loader-font-size);
   stroke: var(--calcite-ui-brand);
@@ -137,29 +125,29 @@
   --calcite-loader-size-inline: 1.25rem;
 }
 
-:host([no-padding]) {
-  padding-top: 0;
-  padding-bottom: 0;
+:host([no-padding]){
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
-:host([active]) {
+:host([active]){
   display: flex;
 }
 
-.loader__text {
+.loader__text{
   display: block;
+  text-align: center;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  text-align: center;
   color: var(--calcite-ui-text-1);
   margin-top: calc(var(--calcite-loader-size) + 1.5rem);
 }
 
-.loader__percentage {
-  display: block;
+.loader__percentage{
   position: absolute;
-  color: var(--calcite-ui-text-1);
+  display: block;
   text-align: center;
+  color: var(--calcite-ui-text-1);
   font-size: var(--calcite-loader-font-size);
   width: var(--calcite-loader-size);
   left: 50%;
@@ -168,7 +156,7 @@
   transform: scale(1, 1);
 }
 
-.loader__svgs {
+.loader__svgs{
   position: absolute;
   overflow: visible;
   opacity: 1;
@@ -179,12 +167,12 @@
   transform: scale(1, 1);
 }
 
-.loader__svg {
+.loader__svg{
   position: absolute;
-  overflow: visible;
-  top: 0;
-  left: 0;
+  top: 0px;
+  left: 0px;
   transform-origin: center;
+  overflow: visible;
   width: var(--calcite-loader-size);
   height: var(--calcite-loader-size);
   animation-iteration-count: infinite;
@@ -205,28 +193,26 @@
     animation-name: loader-offset-3;
   }
 }
-
-:host([type=determinate]) {
+:host([type=determinate]){
   animation: none;
   stroke: var(--calcite-ui-border-3);
 }
-
-:host([type=determinate]) .loader__svg--3 {
+:host([type=determinate]) .loader__svg--3{
   animation: none;
   stroke: var(--calcite-ui-brand);
   stroke-dasharray: 150.79632;
   transform: rotate(-90deg);
-  transition: all var(--calcite-internal-animation-timing-quick) linear;
+  transition: all var(--calcite-internal-animation-timing-fast) linear;
 }
 
-:host([inline]) {
+:host([inline]){
   position: relative;
-  margin: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin: 0px;
   animation: none;
   stroke: currentColor;
   stroke-width: 2;
+  padding-top: 0px;
+  padding-bottom: 0px;
   height: var(--calcite-loader-size-inline);
   min-height: var(--calcite-loader-size-inline);
   width: var(--calcite-loader-size-inline);
@@ -234,14 +220,14 @@
   vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
 }
 
-:host([active][inline]) {
+:host([active][inline]){
   display: inline-block;
 }
 
-:host([inline]) .loader__svgs {
-  top: 0;
-  left: 0;
-  margin: 0;
+:host([inline]) .loader__svgs{
+  top: 0px;
+  left: 0px;
+  margin: 0px;
   width: var(--calcite-loader-size-inline);
   height: var(--calcite-loader-size-inline);
 }
@@ -251,18 +237,18 @@
   height: var(--calcite-loader-size-inline);
 }
 
-:host([complete]) {
+:host([complete]){
   opacity: 0;
   transform: scale(0.75, 0.75);
   transform-origin: center;
   transition: opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms;
 }
 
-:host([complete]) .loader__svgs {
+:host([complete]) .loader__svgs{
   opacity: 0;
   transform: scale(0.75, 0.75);
   transform-origin: center;
-  transition: opacity calc(180ms * var(--calcite-animation-timing-factor)) linear 800ms, transform calc(180ms * var(--calcite-animation-timing-factor)) linear 800ms;
+  transition: opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;
 }
 
 :host([complete]) .loader__percentage {
@@ -280,7 +266,6 @@
               (size + growth should not exceed 100)
   - duration  how long the segment takes to rotate 360° (seconds)
 */
-
 .loader__svg--1 {
   stroke-dasharray: 27.9252444444% 139.6262222222%;
   animation-duration: 0.72s;
@@ -291,18 +276,15 @@
     stroke-dasharray: 27.9252444444% 251.3272%;
     stroke-dashoffset: 0;
   }
-
   50% {
     stroke-dasharray: 139.6262222222% 139.6262222222%;
     stroke-dashoffset: -83.7757333333%;
   }
-
   100% {
     stroke-dasharray: 27.9252444444% 251.3272%;
     stroke-dashoffset: -279.2524444444%;
   }
 }
-
 .loader__svg--2 {
   stroke-dasharray: 55.8504888889% 139.6262222222%;
   animation-duration: 0.96s;
@@ -313,18 +295,15 @@
     stroke-dasharray: 55.8504888889% 223.4019555556%;
     stroke-dashoffset: 0;
   }
-
   50% {
     stroke-dasharray: 139.6262222222% 139.6262222222%;
     stroke-dashoffset: -97.7383555556%;
   }
-
   100% {
     stroke-dasharray: 55.8504888889% 223.4019555556%;
     stroke-dashoffset: -279.2524444444%;
   }
 }
-
 .loader__svg--3 {
   stroke-dasharray: 13.9626222222% 139.6262222222%;
   animation-duration: 1.16s;
@@ -335,41 +314,33 @@
     stroke-dasharray: 13.9626222222% 265.2898222222%;
     stroke-dashoffset: 0;
   }
-
   50% {
     stroke-dasharray: 139.6262222222% 139.6262222222%;
     stroke-dashoffset: -76.7944222222%;
   }
-
   100% {
     stroke-dasharray: 13.9626222222% 265.2898222222%;
     stroke-dashoffset: -279.2524444444%;
   }
 }
-
 @keyframes loader-color-shift {
   0% {
     stroke: var(--calcite-ui-brand);
   }
-
   33% {
     stroke: var(--calcite-ui-brand-press);
   }
-
   66% {
     stroke: var(--calcite-ui-brand-hover);
   }
-
   100% {
     stroke: var(--calcite-ui-brand);
   }
 }
-
 @keyframes loader-clockwise {
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(360deg);
   }