public.components.flat-ui.less.modules.switch.less Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of aeromock-server_2.11 Show documentation
Aeromock server daemon.
There is a newer version: 0.2.5
/* ============================================================
 * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */

.has-switch {
  border-radius: @switch-border-radius;
  display: inline-block;
  cursor: pointer;
  line-height: @line-height-base;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: @switch-width;
  .mask(~"url('../images/switch/mask.png') 0 0 no-repeat");
  .user-select(none);

  &.deactivate {
    .opacity(.5);
    cursor: default !important;
    
    label,
    span {
      cursor: default !important;
    }
  }

  > div {
    width: 130px;
    position: relative;
    top: 0;

    &.switch-animate {
      .transition(left .25s ease-out);
    }

    &.switch-off {
      left: -50px;

      label {
        background-color: mix(@brand-primary, white, 63%);
        border-color: @gray-light;
        .box-shadow(-1px 0 0 fade(@inverse, 50%));
      }
    }

    &.switch-on {
      left: 0;

      label {
        background-color: @brand-secondary;
      }
    }
  }

  input[type=checkbox] {
    display: none;
  }

  span {
    cursor: pointer;
    font-size: @component-font-size-base; // 15px
    font-weight: 700;
    float: left;
    height: 29px;
    line-height: 19px;
    margin: 0;
    padding-bottom: 6px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    width: 50%;
    z-index: 1;
    .transition(.25s ease-out);

    &.switch-left {
      border-radius: @switch-border-radius 0 0 @switch-border-radius;
      background-color: @brand-primary;
      color: @brand-secondary;
      border-left: 1px solid transparent;
    }

    &.switch-right {
      border-radius: 0 @switch-border-radius @switch-border-radius 0;
      background-color: @gray-light;
      color: @inverse;
      text-indent: 7px;

      [class*="fui-"] {
        text-indent: 0;
      }
    }
  }

  label {
    border: 4px solid @brand-primary;
    border-radius: 50%;
    float: left;
    height: 29px;
    margin: 0 -15px;
    padding: 0;
    position: relative;
    vertical-align: middle;
    width: 29px;
    z-index: 100;
    .transition(.25s ease-out);
  }
}

// Square Switch
// -------------------------------
.switch-square {
  border-radius: @border-radius-large;
  .mask(~"url('../images/switch/mask.png') 0 0 no-repeat");

  > div {
    &.switch-off {
      label {
        border-color: mix(@brand-primary, white, 63%);
        border-radius: @border-radius-large 0 0 @border-radius-large;
      }
    }
  }

  span {
    &.switch-left {
      border-radius: @border-radius-large 0 0 @border-radius-large;
      
      [class*="fui-"] {
        text-indent: -10px;
      }
    }

    &.switch-right {
      border-radius: 0 @border-radius-large @border-radius-large 0;
      
      [class*="fui-"] {
        text-indent: 5px;
      }
    }
  }

  label {
    border-radius: 0 @border-radius-large @border-radius-large 0;
    border-color: @brand-secondary;
  }
}