<commit_before>@import "../../variables/mixins";
@import "../../variables/colors";
@import "../../variables/sizes";

// Toggler styled checkboxes/radio buttons
//
// Example usage:
//   <div class="Toggler">
//     <input type="checkbox" id="foobar" />
//     <label for="foobar" />
//   </div>
//
// --------------------------------------------------------------------------------------------------------------------

$sWidth: 36px;
$sHeight: 20px;

.Toggler {
  display: inline-block;
  position: relative;
  width: $sWidth;
  height: $sHeight;
}
.Toggler.is-disabled {
  @include opacity(0.4);
  label {
    cursor: default;
  }
}
.Toggler input {
  visibility: hidden;
}
.Toggler label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: $sWidth;
  height: $sHeight;
  border-radius: 30px;
  box-shadow: inset 0px 1px 0px rgba(#000, 0.1);
  cursor: pointer;
  @include transition(all 150ms ease);
  background-color: #ddd;
}
.Toggler label:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: white;
  box-shadow: 0px 1px 0px 0px rgba(#000, 0.1);
  border-radius: 30px;
  @include transition(all 150ms ease);
  top: 4px;
  left: 4px;
}
.Toggler input:checked + label:before {
  left: 20px;
}
.Toggler input:checked + label {
  background-color: $cHighlight-positive;
}<commit_msg>Added new toggler type (grey)<commit_after>@import "../../variables/mixins";
@import "../../variables/colors";
@import "../../variables/sizes";

// Toggler styled checkboxes/radio buttons
//
// Example usage:
//   <div class="Toggler">
//     <input type="checkbox" id="foobar" />
//     <label for="foobar" />
//   </div>
//
// --------------------------------------------------------------------------------------------------------------------

$sWidth: 36px;
$sHeight: 20px;

.Toggler {
  display: inline-block;
  position: relative;
  width: $sWidth;
  height: $sHeight;
}
.Toggler.is-disabled {
  @include opacity(0.4);
  label {
    cursor: default;
  }
}
.Toggler input {
  visibility: hidden;
}
.Toggler label {
  @include transition(all 150ms ease);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: $sWidth;
  height: $sHeight;
  border-radius: 30px;
  background-color: #DDD;
  box-shadow: inset 0 1px 0 rgba(#000, 0.1);
  cursor: pointer;
}
.Toggler label:before {
  @include transition(all 150ms ease);
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 30px;
  background-color: #FFF;
  box-shadow: 0 1px 0 0 rgba(#000, 0.1);
  content: ' ';
}
.Toggler input:checked + label:before {
  left: 20px;
}
.Toggler input:checked + label {
  background-color: $cHighlight-positive;
}

// Toggler grey
$color: #BBB;
.Toggler--grey label {
  width: $sWidth - 2px;
  height: $sHeight - 2px;
  border: 1px solid $color;
  background: #FFF;
  box-shadow: none;
}
.Toggler--grey label:before {
  top: 3px;
  background: $color;
}
.Toggler--grey input:checked + label:before {
  left: 19px;
}
.Toggler--grey input:checked + label {
  background-color: #FFF;
}
{'fraction_non_alphanumeric': 0.23133848133848134, 'fraction_numerical': 0.029601029601029602, 'mean_word_length': 2.427783902976847, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6738222', 'n_tokens_mistral': 1194, 'n_tokens_neox': 1090, 'n_words': 268}