gsy-component-library/build/components/Slider/Slider.css

reusable components from grid singularity

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700");
/* VERBUND THEME */
.rc-slider {
  position: relative;
  height: 40px;
  padding: 5px 0;
  width: 100%;
  touch-action: none; }
  .rc-slider-rail {
    position: absolute;
    width: 100%;
    height: 4px; }
    .theme-d3a .rc-slider-rail {
      background-color: #7d7d7d; }
    .theme-verbund .rc-slider-rail {
      background-color: #7d7d7d; }
    .rc-slider-rail::before, .rc-slider-rail::after {
      display: block;
      content: '';
      height: 14px;
      width: 2px;
      position: absolute;
      top: -5px; }
      .theme-d3a .rc-slider-rail::before, .theme-d3a .rc-slider-rail::after {
        background-color: #fff; }
      .theme-verbund .rc-slider-rail::before, .theme-verbund .rc-slider-rail::after {
        background-color: #fff; }
    .rc-slider-rail::before {
      left: 0; }
    .rc-slider-rail::after {
      right: 0; }
  .rc-slider-track {
    position: absolute;
    left: 0;
    height: 4px; }
    .theme-d3a .rc-slider-track {
      background-color: #35d7c6; }
    .theme-verbund .rc-slider-track {
      background-color: #35d7c6; }
  .rc-slider-handle {
    position: absolute;
    margin-top: -5px;
    width: 2px;
    height: 14px;
    cursor: pointer; }
    .theme-d3a .rc-slider-handle {
      background-color: #35d7c6; }
    .theme-verbund .rc-slider-handle {
      background-color: #35d7c6; }
    .theme-d3a .rc-slider-handle:hover, .theme-d3a .rc-slider-handle:active, .theme-d3a .rc-slider-handle:focus {
      background-color: #a666ff; }
    .theme-verbund .rc-slider-handle:hover, .theme-verbund .rc-slider-handle:active, .theme-verbund .rc-slider-handle:focus {
      background-color: #a666ff; }
    .rc-slider-handle:active {
      cursor: grabbing; }
    .rc-slider-handle:focus {
      outline: none; }
  .rc-slider-mark {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    font-size: 12px; }
    .rc-slider-mark-text {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      cursor: pointer; }
      .theme-d3a .rc-slider-mark-text {
        color: #7d7d7d; }
      .theme-verbund .rc-slider-mark-text {
        color: #7d7d7d; }
    .rc-slider-mark .marker {
      font-style: normal; }

.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent; }

.rc-slider-dot {
  bottom: -14px;
  position: absolute;
  margin-left: -1px;
  width: 1px;
  height: 5px;
  cursor: pointer;
  vertical-align: top; }
  .theme-d3a .rc-slider-dot {
    background-color: #7d7d7d; }
  .theme-verbund .rc-slider-dot {
    background-color: #7d7d7d; }
  .rc-slider-dot:first-child, .rc-slider-dot:last-child {
    bottom: -18px;
    height: 10px; }

.theme-d3a .rc-slider-dot-active {
  background-color: #7d7d7d; }

.theme-verbund .rc-slider-dot-active {
  background-color: #7d7d7d; }

.theme-d3a .rc-slider-disabled {
  background-color: #7d7d7d; }

.theme-verbund .rc-slider-disabled {
  background-color: #7d7d7d; }

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  box-shadow: none;
  cursor: not-allowed; }
  .theme-d3a .rc-slider-disabled .rc-slider-handle, .theme-d3a
  .rc-slider-disabled .rc-slider-dot {
    border-color: #7d7d7d; }
  .theme-verbund .rc-slider-disabled .rc-slider-handle, .theme-verbund
  .rc-slider-disabled .rc-slider-dot {
    border-color: #7d7d7d; }

.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px; }
  .rc-slider-vertical .rc-slider-rail {
    height: 100%;
    width: 4px; }
  .rc-slider-vertical .rc-slider-track {
    left: 5px;
    bottom: 0;
    width: 4px; }
  .rc-slider-vertical .rc-slider-handle {
    margin-left: -5px;
    margin-bottom: -7px;
    -ms-touch-action: pan-y;
    touch-action: pan-y; }
  .rc-slider-vertical .rc-slider-mark {
    top: 0;
    left: 18px;
    height: 100%; }
  .rc-slider-vertical .rc-slider-step {
    height: 100%;
    width: 4px; }
  .rc-slider-vertical .rc-slider-dot {
    left: 2px;
    margin-bottom: -4px; }

.rc-slider-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible; }

.rc-slider-tooltip-hidden {
  display: none; }

.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px; }
  .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
    border-top-color: #3a657f;
    bottom: 4px;
    left: 50%;
    margin-left: -4px;
    border-width: 4px 4px 0; }

.rc-slider-tooltip-inner {
  background-color: #3a657f;
  color: #fff;
  padding: 6px 2px;
  min-width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 6px; }

.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: block;
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

.rc-slider-tooltip-zoom-down-leave {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: block !important;
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  -webkit-animation-name: rcSliderTooltipZoomDownIn;
  animation-name: rcSliderTooltipZoomDownIn;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  -webkit-animation-name: rcSliderTooltipZoomDownOut;
  animation-name: rcSliderTooltipZoomDownOut;
  -webkit-animation-play-state: running;
  animation-play-state: running; }

.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

.rc-slider-tooltip-zoom-down-leave {
  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }

@-webkit-keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  100% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); }
  100% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); } }

@-webkit-keyframes rcSliderTooltipZoomDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0); } }