@scania/tegel 0.0.1-beta.9 → 0.0.31

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

@@ -0,0 +1,297 @@
+:root,
+.sdds-mode-light {
+  --sdds-slider-label-color: var(--sdds-grey-958);
+  --sdds-slider-label-color-disabled: var(--sdds-grey-400);
+  --sdds-slider-thumb-color: var(--sdds-blue-800);
+  --sdds-slider-divider-color: var(--sdds-grey-400);
+  --sdds-slider-track-color: var(--sdds-grey-400);
+  --sdds-slider-track-fill-color: var(--sdds-blue-800);
+  --sdds-slider-input-inputfield-color: var(--sdds-grey-700);
+  --sdds-slider-inputfield-color: var(--sdds-grey-400);
+  --sdds-slider-controls-color: var(--sdds-grey-958);
+  --sdds-slider-inputfield-background: var(--sdds-white);
+  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-400);
+  --sdds-slider-divider-values-color: var(--sdds-grey-958) ;
+}
+
+.sdds-mode-dark {
+  --sdds-slider-label-color: var(--sdds-grey-100);
+  --sdds-slider-label-color-disabled: var(--sdds-grey-700);
+  --sdds-slider-thumb-color: var(--sdds-grey-100);
+  --sdds-slider-divider-color: var(--sdds-grey-700);
+  --sdds-slider-track-color: var(--sdds-grey-700);
+  --sdds-slider-track-fill-color: var(--sdds-grey-100);
+  --sdds-slider-inputfield-color: var(--sdds-grey-700);
+  --sdds-slider-input-inputfield-color: var(--sdds-grey-400);
+  --sdds-slider-controls-color: var(--sdds-grey-100);
+  --sdds-slider-inputfield-background: var(--sdds-grey-900);
+  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-800);
+  --sdds-slider-divider-values-color: var(--sdds-grey-100) ;
+}
+
+sdds-slider {
+  box-sizing: border-box;
+  width: 100%;
+}
+sdds-slider * {
+  box-sizing: border-box;
+}
+sdds-slider input[type=range].sdds-slider-native-element {
+  display: none;
+}
+
+.sdds-slider-wrapper {
+  width: 100%;
+}
+.sdds-slider-wrapper.read-only {
+  pointer-events: none;
+}
+
+.sdds-slider {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  padding-top: 65px;
+}
+.sdds-slider .sdds-slider-inner {
+  width: 100%;
+  height: 20px;
+  position: relative;
+}
+.sdds-slider .sdds-slider__controls {
+  position: relative;
+  top: -25px;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control {
+  cursor: pointer;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus {
+  padding: 18px 18px 18px 0;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus {
+  padding: 18px 0 18px 18px;
+}
+.sdds-slider .sdds-slider__input-values {
+  position: relative;
+  top: -25px;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-value {
+  user-select: none;
+  padding: 18px;
+  color: var(--sdds-grey-700);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
+  background-color: var(--sdds-slider-inputfield-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--sdds-slider-input-inputfield-color);
+  border: 0;
+  background-color: transparent;
+  text-align: center;
+  padding: 12px;
+  box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);
+  border-radius: 4px 4px 0 0;
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover {
+  box-shadow: inset 0 -1px 0 var(--sdds-grey-600);
+}
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus {
+  box-shadow: inset 0 -2px 0 var(--sdds-blue-400);
+  outline: 0;
+}
+.sdds-slider label {
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  user-select: none;
+  position: absolute;
+  color: var(--sdds-slider-label-color);
+  top: -16px;
+  transform: translateY(-100%);
+}
+.sdds-slider label.offset {
+  top: -35px;
+}
+.sdds-slider .sdds-slider__value {
+  font: var(--sdds-detail-01);
+  letter-spacing: var(--sdds-detail-01-ls);
+  user-select: none;
+  border-radius: 4px;
+  padding: 8px;
+  position: absolute;
+  transform: translate(-50%, -100%);
+  top: -24px;
+  background-color: var(--sdds-grey-800);
+  color: var(--sdds-white);
+}
+.sdds-slider .sdds-slider__value svg {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 34px;
+}
+.sdds-slider .sdds-slider__scrubber {
+  position: absolute;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background-color: var(--sdds-slider-thumb-color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  content: " ";
+  display: none;
+  width: 48px;
+  height: 48px;
+  background-color: var(--sdds-slider-thumb-color);
+  position: absolute;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before {
+  display: block;
+  opacity: 0.08;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
+  width: 24px;
+  height: 24px;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before {
+  display: block;
+  opacity: 0.16 !important;
+}
+.sdds-slider .sdds-slider__value-dividers-wrapper {
+  position: relative;
+  width: 100%;
+  pointer-events: none;
+}
+.sdds-slider .sdds-slider__value-dividers {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider {
+  transform: translateY(-50%);
+  height: 16px;
+  background-color: var(--sdds-slider-divider-color);
+  color: var(--sdds-slider-divider-values-color);
+  width: 1px;
+}
+.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span {
+  display: block;
+  user-select: none;
+  color: var(-sdds-grey-700);
+  font: var(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  position: relative;
+  top: -7px;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  width: 50px;
+  text-align: center;
+}
+.sdds-slider .sdds-slider__track {
+  width: 100%;
+  height: 2px;
+  border-radius: 1px;
+  background-color: var(--sdds-slider-track-color);
+  position: relative;
+}
+.sdds-slider .sdds-slider__track:focus {
+  outline: 0;
+}
+.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  width: 24px;
+  height: 24px;
+}
+.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  display: block;
+  opacity: 0.08;
+}
+.sdds-slider .sdds-slider__track .sdds-slider__track-fill {
+  background-color: var(--sdds-slider-track-fill-color);
+  border-radius: 2px;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: -1px;
+}
+.sdds-slider.disabled {
+  cursor: not-allowed;
+}
+.sdds-slider.disabled > * {
+  pointer-events: none;
+}
+.sdds-slider.disabled label {
+  color: var(--sdds-slider-label-color-disabled);
+}
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
+  fill: var(--sdds-slider-controls-color);
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
+  color: var(--sdds-slider-controls-color);
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
+  color: var(--sdds-slider-controls-color);
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__value {
+  display: none;
+}
+.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
+  background-color: var(--sdds-slider-track-fill-color);
+}
+.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
+  color: var(--sdds-slider-track-fill-color);
+}
+.sdds-slider.disabled .sdds-slider__scrubber {
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  background: var(--sdds-slider-track-color);
+  cursor: default;
+}
+.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  width: 16px;
+  height: 16px;
+}
+.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  width: 40px;
+  height: 40px;
+}
+.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
+  width: 20px;
+  height: 20px;
+}
+
+.sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
+  fill: var(--sdds-slider-controls-color);
+}