custom css about react-awesome-slider

[rcaferati]

Hey @lostspirit1, thanks for raising it. In this scenario, the CSS variables should go inside the root element selector. Something like:

@import './styles.scss';

.#{$root-element} {
  --slider-height-percentage: 25%;
  --slider-transition-duration: 200ms;
  --organic-arrow-thickness: 2px;
  --organic-arrow-border-radius: 0px;
  --organic-arrow-height: 22px;
  --organic-arrow-color: #00ff24;
  --control-button-width: 40%;
  --control-button-height: 25%;
  --control-button-background: transparent;
  --control-bullet-color: #a3b9d0;
  --control-bullet-active-color: #8b9db1;
  --loader-bar-color: #851515;
  --loader-bar-height: 6px;
  --scale-out-scale: 0.85;

  &--exit {
    &.#{$root-element}--moveRight,
    &.#{$root-element}--moveLeft {
      animation: scaleOut var(--slider-transition-duration) both
        var(--transition-bezier);
    }
  }
}

@keyframes scaleOut {
  to {
    transform: scale(var(--scale-out-scale));
  }
}