| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 | /**  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.  *  * @version v3.4 (MODDED)  * @homepage https://bttstrp.github.io/bootstrap-switch  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)  * @license MIT  */$bootstrap-switch-border-radius: $btn-border-radius;$bootstrap-switch-handle-border-radius: .1rem;.bootstrap-switch {  border: $input-border-width solid $input-border-color;  border-radius: $bootstrap-switch-border-radius;  cursor: pointer;  direction: ltr;  display: inline-block;  line-height: .5rem;  overflow: hidden;  position: relative;  text-align: left;  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;  user-select: none;  vertical-align: middle;  z-index: 0;  .bootstrap-switch-container {    border-radius: $bootstrap-switch-border-radius;    display: inline-block;    top: 0;    transform: translate3d(0, 0, 0);  }  &:focus-within {    box-shadow: $input-btn-focus-box-shadow;  }  .bootstrap-switch-handle-on,  .bootstrap-switch-handle-off,  .bootstrap-switch-label {    box-sizing: border-box;    cursor: pointer;    display: table-cell;    font-size: 1rem;    font-weight: 500;    line-height: 1.2rem;    padding: .25rem .5rem;    vertical-align: middle;  }  .bootstrap-switch-handle-on,  .bootstrap-switch-handle-off {    text-align: center;    z-index: 1;    &.bootstrap-switch-default {      background: $gray-200;      color: color-yiq($gray-200);    }    @each $name, $color in $theme-colors {      &.bootstrap-switch-#{$name} {        background: $color;        color: color-yiq($color);      }    }    @each $name, $color in $colors {      &.bootstrap-switch-#{$name} {        background: $color;        color: color-yiq($color);      }    }  }  .bootstrap-switch-handle-on {    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;    border-top-left-radius: $bootstrap-switch-handle-border-radius;  }  .bootstrap-switch-handle-off {    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;    border-top-right-radius: $bootstrap-switch-handle-border-radius;  }  input[type='radio'],  input[type='checkbox'] {    filter: alpha(opacity=0);    left: 0;    margin: 0;    opacity: 0;    position: absolute;    top: 0;    visibility: hidden;    z-index: -1;  }  &.bootstrap-switch-mini {    .bootstrap-switch-handle-on,    .bootstrap-switch-handle-off,    .bootstrap-switch-label {      font-size: .875rem;      line-height: 1.5;      padding: .1rem .3rem;    }  }  &.bootstrap-switch-small {    .bootstrap-switch-handle-on,    .bootstrap-switch-handle-off,    .bootstrap-switch-label {      font-size: .875rem;      line-height: 1.5;      padding: .2rem .4rem;    }  }  &.bootstrap-switch-large {    .bootstrap-switch-handle-on,    .bootstrap-switch-handle-off,    .bootstrap-switch-label {      font-size: 1.25rem;      line-height: 1.3333333rem;      padding: .3rem .5rem;    }  }  &.bootstrap-switch-disabled,  &.bootstrap-switch-readonly,  &.bootstrap-switch-indeterminate {    cursor: default;    .bootstrap-switch-handle-on,    .bootstrap-switch-handle-off,    .bootstrap-switch-label {      cursor: default;      filter: alpha(opacity=50);      opacity: .5;    }  }  &.bootstrap-switch-animate .bootstrap-switch-container {    transition: margin-left .5s;  }  &.bootstrap-switch-inverse {    .bootstrap-switch-handle-on {      border-radius: 0 $bootstrap-switch-handle-border-radius $bootstrap-switch-handle-border-radius 0;    }    .bootstrap-switch-handle-off {      border-radius: $bootstrap-switch-handle-border-radius 0 0 $bootstrap-switch-handle-border-radius;    }  }  // &.bootstrap-switch-focused {  //   border-color: $input-btn-focus-color;  //   box-shadow: $input-btn-focus-box-shadow;  //   outline: 0;  // }  &.bootstrap-switch-on .bootstrap-switch-label,  &.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;    border-top-right-radius: $bootstrap-switch-handle-border-radius;  }  &.bootstrap-switch-off .bootstrap-switch-label,  &.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;    border-top-left-radius: $bootstrap-switch-handle-border-radius;  }}@include dark-mode () {  .bootstrap-switch {    border-color: $gray-600;    .bootstrap-switch-handle-off.bootstrap-switch-default,    .bootstrap-switch-handle-on.bootstrap-switch-default {      background-color: lighten($dark, 2.5%);      color: $white;      border-color: lighten($dark, 7.5%);    }    .bootstrap-switch-handle-on,    .bootstrap-switch-handle-off {      @each $name, $color in $theme-colors-alt {        &.bootstrap-switch-#{$name} {          background: $color;          color: color-yiq($color);        }      }      @each $name, $color in $colors-alt {        &.bootstrap-switch-#{$name} {          background: $color;          color: color-yiq($color);        }      }    }  }}
 |