fleet/frontend/components/buttons/Rocker/_styles.scss

.kolide-rocker {
  box-shadow: 0 0 9px 0 rgba(72, 81, 109, 0.1);

  &__button {
    @include transform(translateY(-19px));
    position: relative;
    cursor: pointer;
    width: 180px;
    height: 36px;
    border-radius: 2px;
    background-color: #9fa5ab;
    display: block;
    padding: 0 2px;
    background: transparent;
    border: 0;

    &--checked > .kolide-rocker__switch--left {
      span {
        @include transform(skewX(0) rotateZ(0));
        top: 3px;
      }

      &::after {
        @include transform(skewX(0) rotateZ(0) translate(0, 0));
        left: 0;
        width: 90px;
        height: 35px;
        bottom: 3px;
      }
    }

    &--checked > .kolide-rocker__switch--right {
      span {
        @include transform(skewX(-6deg) rotateZ(-6deg));
        top: -6px;
      }

      &::after {
        @include transform(skewX(-6deg) rotateZ(-6deg) translate(-1px, -3px));
        right: -1px;
        width: 90px;
        height: 35px;
        bottom: 5px;
      }
    }
  }

  &__switch {
    @include user-select(none);
    @include position(absolute, auto auto auto auto);
    font-family: 'Oxygen', $helvetica;
    font-weight: 600;
    font-style: normal;
    box-sizing: border-box;
    text-transform: uppercase;
    display: block;
    width: 90px;
    height: 35px;

    &::after {
      @include transition(transform 50ms ease-in-out, bottom 50ms ease-in-out);
      bottom: 3px;
      border-radius: 2px;
      content: attr(data-content);
      width: 90px;
      height: 33px;
      position: absolute;
      box-sizing: border-box;
    }

    &:hover {
      cursor: pointer;
    }

    span {
      @include transition(transform 50ms ease-in-out, top 50ms ease-in-out);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 15px;
      color: #fff;
      letter-spacing: 0.6px;
      display: block;
      text-align: center;
      width: 100%;

      .kolidecon {
        margin-right: 5px;
      }
    }

    &--left {
      @include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
      left: 2px;

      span {
        @include transform(skewX(6deg) rotateZ(6deg));
        color: #b8c2e3;
        transform-origin: left top;
        top: -6px;
      }

      &::after {
        @include transform(skewX(6deg) rotateZ(6deg) translate(-1px, -3px));
        background-color: #fff;
        border: solid 1px #d4d8df;
        border-radius: 2px 1px 1px 2px;
        left: 1px;
        bottom: 5px;
      }
    }

    &--right {
      @include linear-gradient(-180deg, #9651ca 81%, #6e3c93 100%);
      right: 2px;

      span {
        transform-origin: right top;
        top: 4px;
      }

      &::after {
        background-color: #ae6ddf;
        border: solid 1px #9651ca;
        border-radius: 1px 2px 2px 1px;
        right: 0;
        bottom: 3px;
      }
    }
  }
}