epn-ui/umd/dist/index.css

Дизайн система кабинета ВМ

.epn-slider {
  font-family: theme("fontFamily.sans");
}
.epn-slider__head {
  display: flex;
  align-items: center;
  margin-bottom: theme("margin.4");
}
.epn-slider__body {
  display: flex;
  padding: theme("padding.2");
  overflow-x: auto;
  flex-wrap: nowrap;
  margin: 0 theme("margin.[-2]");
}
.epn-slider__title {
  font-weight: 500;
  color: theme("colors.blueGray.800");
  font-size: theme("fontSize.h2");
  line-height: theme("lineHeight.h2");
  margin-right: auto;
}
@media (min-width: theme("screens.sm")) {
  .epn-slider__title {
    font-size: theme("fontSize.h1");
    line-height: theme("lineHeight.h1");
  }
}
.epn-slider__item {
  flex-shrink: 0;
  margin-right: theme("margin.6");
}
.epn-slider-button {
  background-color: theme("colors.blueGray.100");
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  border-radius: 50%;
  color: theme("colors.blueGray.500");
  width: theme("width.8");
  height: theme("height.8");
  line-height: 100%;
}
.epn-slider-button:last-child {
  margin-left: theme("margin.3");
}
.epn-slider-button:disabled {
  color: theme("colors.blueGray.300");
}
.epn-slider-button:hover:not(:disabled) {
  background-color: theme("colors.blueGray.500");
  color: theme("colors.blueGray.100");
}
.epn-slider-button:active:not(:disabled) {
  background-color: theme("colors.blueGray.800");
}
.epn-toggle-button {
  background-color: theme("colors.blueGray.100");
  color: theme("colors.blueGray.500");
  border-color: transparent;
}
.epn-toggle-button:hover:not(:disabled), .epn-toggle-button:focus:not(:disabled):not(.epn-toggle-button--checked) {
  background-color: theme("colors.blueGray.200") !important;
  color: theme("colors.blueGray.800") !important;
  border-color: transparent !important;
}
.epn-toggle-button--checked:not(:disabled) {
  background-color: theme("colors.blueGray.600");
  color: theme("colors.white");
}
.epn-toggle-button--checked:not(:disabled):focus {
  background-color: theme("colors.blueGray.500") !important;
  color: theme("colors.white") !important;
  border-color: transparent !important;
}
.epn-toggle-button__icon {
  margin-right: theme("margin.2");
}