@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

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

@@ -1,55 +1,49 @@
 @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-animation-timing: 300ms;
+  --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 {
@@ -77,333 +71,256 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  display: block;
+.scale--s {
+  --calcite-slider-handle-size: 10px;
+  --calcite-slider-handle-extension-height: 6.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--3);
+}
+.scale--s .handle__label, .scale--s .tick__label{
+  line-height: .75rem;
 }
 
-.container {
+.scale--m {
+  --calcite-slider-handle-size: 14px;
+  --calcite-slider-handle-extension-height: 8px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--2);
+}
+.scale--m .handle__label, .scale--m .tick__label{
+  line-height: 1rem;
+}
+
+.scale--l {
+  --calcite-slider-handle-size: 16px;
+  --calcite-slider-handle-extension-height: 10.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--1);
+}
+.scale--l .handle__label, .scale--l .tick__label{
+  line-height: 1rem;
+}
+
+.handle__label, .tick__label{
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-slider-container-font-size);
+}
+
+:host{
   display: block;
+}
+
+.container{
   position: relative;
-  padding: 7px 0;
-  margin: 7px 0.5rem;
+  display: block;
+  padding: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  --calcite-slider-full-handle-height: calc(
+    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
+  );
 }
 
-:host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
+:host([disabled]){
   pointer-events: none;
+  opacity: var(--calcite-ui-opacity-disabled);
 }
-
 :host([disabled]) .track__range,
 :host([disabled]) .tick--active {
   background-color: var(--calcite-ui-text-3);
 }
 
-:host([disabled]) .graph .graph-path--highlight {
-  fill: var(--calcite-ui-text-3);
+.scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -6px;
 }
 
-/*
- * Ensure we have enough space on variants
- * with text elements to prevent overlap
- */
-
-:host([label-handles]) .container,
-:host([precise]:not([precise=false])) .container {
-  margin-top: 21px;
+.scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -8px;
 }
 
-:host([label-ticks]),
-:host([precise]:not([precise=false])) .container--range {
-  margin-bottom: 21px;
+.scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -9px;
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container {
-  margin-top: 35px;
+:host([precise]:not([has-histogram])) .container .thumb--value {
+  --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container--range {
-  margin-bottom: 35px;
+.thumb-container{
+  position: relative;
+  max-width: 100%;
 }
 
 .thumb {
+  --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
   position: absolute;
-  border-style: none;
-  background-color: transparent;
-  cursor: pointer;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  padding: 0;
-  margin: 0;
+  margin: 0px;
   display: flex;
+  cursor: pointer;
   flex-direction: column;
   align-items: center;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
   font-family: inherit;
-  z-index: 2;
-  transform: translate(7px, -8px);
-}
-
-.thumb .handle__label {
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  line-height: 1;
-  color: var(--calcite-ui-text-2);
-  margin-bottom: 5px;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
-
-.thumb .handle__label.static, .thumb .handle__label.transformed {
-  opacity: 0;
+.thumb .handle__label.static, .thumb .handle__label.transformed{
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0px;
+  bottom: 0px;
+  opacity: 0;
 }
-
 .thumb .handle__label.hyphen::after {
   content: "—";
   display: inline-block;
   width: 1em;
 }
-
-.thumb .handle {
-  outline-offset: 0;
-  outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  height: 14px;
-  width: 14px;
+.thumb .handle{
   box-sizing: border-box;
-  border-radius: 100%;
+  border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
+  outline-offset: 0;
+  outline-color: transparent;
+  height: var(--calcite-slider-handle-size);
+  width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
-  transition: border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
+  transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
-
-.thumb .handle-extension {
-  width: 2px;
-  height: 7px;
+.thumb .handle-extension{
+  width: 0.125rem;
+  height: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
-
 .thumb:hover .handle {
   box-shadow: 0 0 0 3px var(--calcite-ui-brand) inset;
 }
-
-.thumb:hover .handle-extension {
+.thumb:hover .handle-extension{
   background-color: var(--calcite-ui-brand);
 }
-
-.thumb:focus .handle {
+.thumb:focus .handle{
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
-  outline-offset: 2px;
 }
-
-.thumb:focus .handle-extension {
+.thumb:focus .handle-extension{
   background-color: var(--calcite-ui-brand);
 }
-
-.thumb--minValue {
-  transform: translate(-7px, -8px);
-}
-
-/* uncomment for helpful debugging UI */
-
-:host([label-handles]) .thumb {
-  transform: translate(50%, -25px);
-}
-
-:host([label-handles]) .thumb--minValue {
-  transform: translate(-50%, -25px);
+.thumb.thumb--minValue {
+  transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
 }
-
-:host([has-histogram][label-handles]) .thumb {
-  transform: translate(50%, -8px);
-}
-
-:host([has-histogram][label-handles]) .thumb .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
-}
-
-:host([has-histogram][label-handles]) .thumb--minValue {
-  transform: translate(-50%, -8px);
-}
-
-:host([precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -21px);
-}
-
-:host([precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -2px);
-}
-
-:host([precise]:not([precise=false])) .thumb--minValue .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
-}
-
-:host([has-histogram][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -2px);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -20px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -3px);
+.thumb.thumb--precise {
+  --calcite-slider-thumb-y-offset: -2px;
 }
 
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host([label-handles]) .thumb {
+  --calcite-slider-thumb-x-offset: 50%;
 }
-
-:host([label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -38px);
+:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -23px;
 }
-
-:host([label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -30px;
 }
-
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -32px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([has-histogram][label-handles]) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
+  margin-top: 0.5em;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -37px);
+:host(:not([has-histogram]):not([precise])) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
+  margin-bottom: 0.5em;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
+  --calcite-slider-thumb-y-offset: -33px;
 }
-
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -3px);
-}
-
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value {
+  --calcite-slider-thumb-y-offset: -44px;
 }
-
-.thumb:focus,
-.thumb--active {
-  z-index: 3;
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value {
+  --calcite-slider-thumb-y-offset: -49px;
 }
 
-.thumb:focus .handle,
-.thumb--active .handle {
+.thumb:focus .handle, .thumb--active .handle{
   background-color: var(--calcite-ui-brand);
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
 }
 
-.thumb:hover.thumb--precise:after,
-.thumb:focus.thumb--precise:after,
-.thumb--active.thumb--precise:after {
+.thumb:hover.thumb--precise:after, .thumb:focus.thumb--precise:after, .thumb--active.thumb--precise:after{
   background-color: var(--calcite-ui-brand);
 }
 
-.track {
-  height: 2px;
-  border-radius: 0;
-  z-index: 1;
-  background-color: var(--calcite-ui-border-2);
-  transition: all 250ms ease-in;
+.track{
   position: relative;
+  height: 0.125rem;
+  border-radius: 0px;
+  background-color: var(--calcite-ui-border-2);
+  transition: all var(--calcite-internal-animation-timing-medium) ease-in;
 }
 
-.track__range {
+.track__range{
   position: absolute;
-  top: 0;
-  height: 2px;
+  top: 0px;
+  height: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
 .container--range .track__range:hover {
   cursor: ew-resize;
 }
-
-.container--range .track__range:after {
-  content: "";
+.container--range .track__range:after{
   position: absolute;
-  top: -5px;
   width: 100%;
-  height: 14px;
+  content: "";
+  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
-.tick {
+.tick{
   position: absolute;
+  height: 0.25rem;
+  width: 0.125rem;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--calcite-ui-border-input);
+  border-color: var(--calcite-ui-foreground-1);
   top: -2px;
-  width: 2px;
-  height: 4px;
-  left: var(--calcite-ui-border-1-offset);
-  margin-left: -2px;
-  border: 1px solid var(--calcite-ui-foreground-1);
-  background-color: var(--calcite-ui-border-1);
   pointer-events: none;
+  margin-inline-start: calc(-1 * 0.125rem);
 }
 
-.tick--active {
+.tick--active{
   background-color: var(--calcite-ui-brand);
 }
 
-.tick__label {
-  position: absolute;
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  color: var(--calcite-ui-text-2);
-  width: 4em;
-  margin: 14px -2em;
-  text-align: center;
-  display: block;
+.tick__label{
   pointer-events: none;
+  margin-top: 0.875rem;
+  display: flex;
+  justify-content: center;
 }
 
 .tick__label--min {
-  left: 0;
-  margin: 14px -3px;
-  text-align: left;
-  transition: opacity 150ms;
+  transition: opacity var(--calcite-animation-timing);
 }
 
 .tick__label--max {
-  left: unset;
-  right: 0;
-  margin: 14px -3px;
-  text-align: right;
-  transition: opacity 50ms;
+  transition: opacity var(--calcite-internal-animation-timing-fast);
 }
 
-:host([has-histogram][label-handles]) .tick__label--min,
-:host([has-histogram][label-handles]) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
-  color: var(--calcite-ui-text-3);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .tick__label--min,
-:host([has-histogram][precise]:not([precise=false])) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
+:host([has-histogram][label-handles]) .tick__label--min, :host([has-histogram][label-handles]) .tick__label--max, :host([has-histogram][precise]) .tick__label--min, :host([has-histogram][precise]) .tick__label--max{
+  font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
 
@@ -411,16 +328,34 @@
   color: var(--calcite-ui-foreground-3);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--min {
-  right: 0;
-  left: unset;
-  text-align: right;
+:host([label-ticks][ticks]) .container {
+  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+}
+
+:host([has-histogram]):host([precise][label-handles]) .container {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+}
+:host([has-histogram]):host([label-handles]:not([precise])) .container {
+  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+}
+:host([has-histogram]):host([precise]:not([label-handles])) .container {
+  padding-bottom: var(--calcite-slider-full-handle-height);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--max {
-  right: unset;
-  left: 0;
-  text-align: left;
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
+  padding-top: var(--calcite-slider-full-handle-height);
+}
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+:host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+}
+:host(:not([has-histogram])):host([label-handles][precise]) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
+}
+:host(:not([has-histogram])):host([label-handles][precise]) .container--range {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::slotted(input[slot=hidden-form-input]) {