react-choices/stories/styles/slider-like.css

Component to build simple, flexible, and accessible choice components

:root {
  --control-width: 60px;
  --control-height: 14px;
  --horizontal-bar-height: 2px;
  --item-size: 4px;
  --item-hovered-size: 8px;
  --item-selected-unsettable-size: 12px;
  --item-border-size: 1.25px;
  --item-selected-size: 14px;
  --item-label-size: 8px;
  --horizontal-bar-bg-color: lightgray;;
  --item-bg-color: lightgray;
  --item-hovered-border-color: red;
  --item-focused-border-color: lightgreen;
  --item-selected-unsettable-bg-color: orange;
  --item-selected-bg-color: blue;
  --item-label-color: white;
}

.SpeedChoices {
  position: relative;
  width: var(--control-width);
}

.SpeedChoices__background {
  position: absolute;
  display: flex;
  z-index: -1;
  height: var(--control-height);
  width: 100%;
}
.SpeedChoices__horizontal-bar {
  align-self: center;
  display: block;
  z-index: -1;
  height: var(--horizontal-bar-height);
  width: 100%;
}

.SpeedChoices__container {
  position: absolute;
  width: 100%;
}
.SpeedChoices__label {
  display: none;
}
.SpeedChoices__items {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.SpeedChoices__item {
  display: flex;
  flex-direction: column;
  align-self: center;
  height: 100%;
  flex: 1 0 10%;
  cursor: pointer;
}
.SpeedChoices__item--not-settable:not(.SpeedChoices__item--selected) {
  display: none;
  cursor: default;
}
.SpeedChoices__item--not-settable:not(.SpeedChoices__item--selected):first-child,
.SpeedChoices__item--not-settable:not(.SpeedChoices__item--selected):last-child {
  display: block;
  visibility: hidden;
}

.SpeedChoices__item__input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.SpeedChoices__item__input {
  align-self: center;
  border: none;
  border-radius: var(--item-size);
  outline: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  /* transition: border-radius .1s ease, width .1s ease, height .1s ease; */
  height: var(--item-size);
  width: var(--item-size);
}
.SpeedChoices__item__input:active {
  padding: 0;
}
.SpeedChoices__item:first-child {
  flex: 0 0 4px;
}
.SpeedChoices__item:first-child .SpeedChoices__item__input-container {
  margin-left: -8px;
}
.SpeedChoices__item:last-child {
  flex: 0 0 4px;
}
.SpeedChoices__item:last-child .SpeedChoices__item__input-container {
  margin-right: -8px;
}

.SpeedChoices__item__label {
  display: none;
}

.SpeedChoices__item--hovered .SpeedChoices__item__input {
  border-radius: var(--item-hovered-size);
  height: var(--item-hovered-size);
  width: var(--item-hovered-size);
}

.SpeedChoices__item--focused .SpeedChoices__item__input, .SpeedChoices__item__input:focus {
  display: inline-block;
}
.SpeedChoices__item__input::-moz-focus-inner {
  border: 0;
  outline: none;
}

.SpeedChoices__item--selected .SpeedChoices__item__input {
  border-radius: var(--item-selected-size);
  height: var(--item-selected-size);
  width: var(--item-selected-size);
}
.SpeedChoices__item--selected .SpeedChoices__item__label {
  display: block;
  font-size: var(--item-label-size);
}

.SpeedChoices__item--selected.SpeedChoices__item--not-settable .SpeedChoices__item__input {
  border-radius: var(--item-selected-unsettable-size);
  height: var(--item-selected-unsettable-size);
  width: var(--item-selected-unsettable-size);
}

/**
 * Default Theme
 */

.default-theme .SpeedChoices__horizontal-bar {
  background-color: var(--horizontal-bar-bg-color);
}
.default-theme .SpeedChoices__item__input {
  background-color: var(--item-bg-color);
}
.default-theme .SpeedChoices__item--hovered .SpeedChoices__item__input {
  border: var(--item-border-size) solid var(--item-hovered-border-color);
}
.default-theme .SpeedChoices__item--focused .SpeedChoices__item__input, .default-theme .SpeedChoices__item__input:focus {
  border: var(--item-border-size) solid var(--item-focused-border-color);
}
.default-theme .SpeedChoices__item--selected .SpeedChoices__item__input {
  background-color: var(--item-selected-bg-color);
}
.default-theme .SpeedChoices__item--selected .SpeedChoices__item__label {
  color: var(--item-label-color);
}
.default-theme .SpeedChoices__item--selected.SpeedChoices__item--not-settable .SpeedChoices__item__input {
  background-color: var(--item-selected-unsettable-bg-color);
}