@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.5

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

@@ -0,0 +1,260 @@
+sdds-slider {
+  box-sizing: border-box;
+  width: 100%;
+  --sdds-slider-inputfield-bg: var(--sdds-white);
+}
+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-bg);
+  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-grey-700);
+  border: 0;
+  background-color: transparent;
+  text-align: center;
+  padding: 12px;
+  box-shadow: inset 0 -1px 0 var(--sdds-grey-400);
+  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-grey-958);
+  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-blue-800);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  z-index: 10;
+}
+.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+  content: " ";
+  display: none;
+  width: 48px;
+  height: 48px;
+  background-color: var(--sdds-blue-800);
+  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-grey-400);
+  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-grey-400);
+  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-blue-800);
+  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-grey-400);
+}
+.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 path, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg path {
+  fill: var(--sdds-grey-400);
+}
+.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
+  color: var(--sdds-grey-400);
+}
+.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-grey-400);
+  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-grey-400);
+}
+.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
+  color: var(--sdds-grey-400);
+}
+.sdds-slider.disabled .sdds-slider__scrubber {
+  pointer-events: none;
+}
+.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+  background: var(--sdds-grey-400);
+  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;
+}