fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.21

package/src/definitions/modules/checkbox.less

@@ -12,7 +12,7 @@
             Theme
 *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'checkbox';
 
 @import (multiple) '../../theme.config';
@@ -21,700 +21,679 @@
            Checkbox
 *******************************/
 
-
-/*--------------
+/* --------------
     Content
----------------*/
+--------------- */
 
 .ui.checkbox {
-  position: relative;
-  display: inline-block;
-  backface-visibility: hidden;
-  outline: none;
-  vertical-align: baseline;
-  font-style: normal;
-
-  min-height: @checkboxSize;
-  font-size: @relativeMedium;
-  line-height: @checkboxLineHeight;
-  min-width: @checkboxSize;
+    position: relative;
+    display: inline-block;
+    backface-visibility: hidden;
+    outline: none;
+    vertical-align: baseline;
+    font-style: normal;
+    min-height: @checkboxSize;
+    font-size: @relativeMedium;
+    line-height: @checkboxLineHeight;
+    min-width: @checkboxSize;
 }
 
 /* HTML Checkbox */
 .ui.checkbox input[type="checkbox"],
 .ui.checkbox input[type="radio"] {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0 !important;
-  outline: none;
-  z-index: 3;
-  width: @checkboxSize;
-  height: @checkboxSize;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0 !important;
+    outline: none;
+    z-index: 3;
+    width: @checkboxSize;
+    height: @checkboxSize;
 }
 
-
 .ui.checkbox label {
-  cursor: auto;
-  position: relative;
-  display: block;
-  padding-left: @labelDistance;
-  outline: none;
-  font-size: @labelFontSize;
+    cursor: auto;
+    position: relative;
+    display: block;
+    padding-left: @labelDistance;
+    outline: none;
+    font-size: @labelFontSize;
 }
 
 .ui.checkbox label::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  width: @checkboxSize;
-  height: @checkboxSize;
-  content: '';
-
-  background: @checkboxBackground;
-  border-radius: @checkboxBorderRadius;
-
-  transition: @checkboxTransition;
-  border: @checkboxBorder;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: @checkboxSize;
+    height: @checkboxSize;
+    content: '';
+    background: @checkboxBackground;
+    border-radius: @checkboxBorderRadius;
+    transition: @checkboxTransition;
+    border: @checkboxBorder;
 }
 
-/*--------------
+/* --------------
     Checkmark
----------------*/
+--------------- */
 
 .ui.checkbox label::after {
-  position: absolute;
-  font-size: @checkboxCheckFontSize;
-  top: @checkboxCheckTop;
-  left: @checkboxCheckLeft;
-  width: @checkboxCheckSize;
-  height: @checkboxCheckSize;
-  text-align: center;
-
-  opacity: 0;
-  color: @checkboxColor;
-  transition: @checkboxTransition;
+    position: absolute;
+    font-size: @checkboxCheckFontSize;
+    top: @checkboxCheckTop;
+    left: @checkboxCheckLeft;
+    width: @checkboxCheckSize;
+    height: @checkboxCheckSize;
+    text-align: center;
+    opacity: 0;
+    color: @checkboxColor;
+    transition: @checkboxTransition;
 }
 & when (@variationCheckboxRightAligned) {
-  .ui.right.aligned.checkbox label {
-    padding-left: 0;
-    padding-right: @labelDistance;
-    &::after,
-    &::before {
-      right: 0;
-      left: auto;
-    }
-  }
+    .ui.right.aligned.checkbox label {
+        padding-left: 0;
+        padding-right: @labelDistance;
+        &::after,
+        &::before {
+            right: 0;
+            left: auto;
+        }
+    }
 }
-/*--------------
+
+/* --------------
       Label
----------------*/
+--------------- */
 
 /* Inside */
 .ui.checkbox label,
 .ui.checkbox + label {
-  color: @labelColor;
-  transition: @labelTransition;
+    color: @labelColor;
+    transition: @labelTransition;
 }
 
 /* Outside */
 .ui.checkbox + label {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
-
 /*******************************
            States
 *******************************/
 
-
-/*--------------
+/* --------------
       Hover
----------------*/
+--------------- */
 
 .ui.checkbox label:hover::before {
-  background: @checkboxHoverBackground;
-  border-color: @checkboxHoverBorderColor;
+    background: @checkboxHoverBackground;
+    border-color: @checkboxHoverBorderColor;
 }
 .ui.checkbox label:hover,
 .ui.checkbox + label:hover {
-  color: @labelHoverColor;
+    color: @labelHoverColor;
 }
 
-/*--------------
+/* --------------
       Down
----------------*/
+--------------- */
 
 .ui.checkbox label:active::before {
-  background: @checkboxPressedBackground;
-  border-color: @checkboxPressedBorderColor;
+    background: @checkboxPressedBackground;
+    border-color: @checkboxPressedBorderColor;
 }
 .ui.checkbox label:active::after {
-  color: @checkboxPressedColor;
+    color: @checkboxPressedColor;
 }
 .ui.checkbox input:active ~ label {
-  color: @labelPressedColor;
+    color: @labelPressedColor;
 }
 
-/*--------------
+/* --------------
      Focus
----------------*/
+--------------- */
 
 .ui.checkbox input:focus ~ label::before {
-  background: @checkboxFocusBackground;
-  border-color: @checkboxFocusBorderColor;
+    background: @checkboxFocusBackground;
+    border-color: @checkboxFocusBorderColor;
 }
 .ui.checkbox input:focus ~ label::after {
-  color: @checkboxFocusCheckColor;
+    color: @checkboxFocusCheckColor;
 }
 .ui.checkbox input:focus ~ label {
-  color: @labelFocusColor;
+    color: @labelFocusColor;
 }
 
-/*--------------
+/* --------------
      Active
----------------*/
+--------------- */
 
 .ui.checkbox input:checked ~ label::before {
-  background: @checkboxActiveBackground;
-  border-color: @checkboxActiveBorderColor;
+    background: @checkboxActiveBackground;
+    border-color: @checkboxActiveBorderColor;
 }
 .ui.checkbox input:checked ~ label::after {
-  opacity: @checkboxActiveCheckOpacity;
-  color: @checkboxActiveCheckColor;
+    opacity: @checkboxActiveCheckOpacity;
+    color: @checkboxActiveCheckColor;
 }
 
-& when (@variationCheckboxIndeterminate){
-  /*--------------
-    Indeterminate
-  ---------------*/
-
-  .ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
-    background: @checkboxIndeterminateBackground;
-    border-color: @checkboxIndeterminateBorderColor;
-  }
-  .ui.checkbox input:not([type=radio]):indeterminate ~ label::after {
-    opacity: @checkboxIndeterminateCheckOpacity;
-    color: @checkboxIndeterminateCheckColor;
-  }
-  .ui.indeterminate.toggle.checkbox {
-    & input:not([type=radio]):indeterminate ~ label::before {
-      background: @toggleCenterLaneBackground;
-    }
-    & input:not([type=radio]) ~ label::after {
-      left: @toggleCenterOffset;
-    }
-  }
-  & when (@variationCheckboxRightAligned) {
-    .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label::after {
-      left: auto;
-      right: @toggleCenterOffset;
-    }
-  }
+& when (@variationCheckboxIndeterminate) {
+    /* --------------
+      Indeterminate
+    --------------- */
+
+    .ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
+        background: @checkboxIndeterminateBackground;
+        border-color: @checkboxIndeterminateBorderColor;
+    }
+    .ui.checkbox input:not([type=radio]):indeterminate ~ label::after {
+        opacity: @checkboxIndeterminateCheckOpacity;
+        color: @checkboxIndeterminateCheckColor;
+    }
+    .ui.indeterminate.toggle.checkbox {
+        & input:not([type=radio]):indeterminate ~ label::before {
+            background: @toggleCenterLaneBackground;
+        }
+        & input:not([type=radio]) ~ label::after {
+            left: @toggleCenterOffset;
+        }
+    }
+    & when (@variationCheckboxRightAligned) {
+        .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label::after {
+            left: auto;
+            right: @toggleCenterOffset;
+        }
+    }
 }
 
-/*--------------
+/* --------------
   Active Focus
----------------*/
+--------------- */
 
 .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::before,
-.ui.checkbox input:checked:focus ~ label::before  {
-  background: @checkboxActiveFocusBackground;
-  border-color: @checkboxActiveFocusBorderColor;
+.ui.checkbox input:checked:focus ~ label::before {
+    background: @checkboxActiveFocusBackground;
+    border-color: @checkboxActiveFocusBorderColor;
 }
 .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
 .ui.checkbox input:checked:focus ~ label::after {
-  color: @checkboxActiveFocusCheckColor;
+    color: @checkboxActiveFocusCheckColor;
 }
 
 & when (@variationCheckboxReadonly) {
-  /*--------------
-      Read-Only
-  ---------------*/
-
-  .ui.read-only.checkbox,
-  .ui.read-only.checkbox label {
-    cursor: default;
-    pointer-events: none;
-  }
+    /* --------------
+        Read-Only
+    --------------- */
+
+    .ui.read-only.checkbox,
+    .ui.read-only.checkbox label {
+        cursor: default;
+        pointer-events: none;
+    }
 }
 
 & when (@variationCheckboxDisabled) {
-  /*--------------
-       Disabled
-  ---------------*/
-
-  .ui.disabled.checkbox label,
-  .ui.checkbox input[disabled] ~ label {
-    cursor: default;
-    opacity: @disabledCheckboxOpacity;
-    color: @disabledCheckboxLabelColor;
-    pointer-events: none;
-  }
+    /* --------------
+         Disabled
+    --------------- */
+
+    .ui.disabled.checkbox label,
+    .ui.checkbox input[disabled] ~ label {
+        cursor: default;
+        opacity: @disabledCheckboxOpacity;
+        color: @disabledCheckboxLabelColor;
+        pointer-events: none;
+    }
 }
 
-/*--------------
+/* --------------
      Hidden
----------------*/
+--------------- */
 
 /* Initialized checkbox moves input below element
  to prevent manually triggering */
 .ui.checkbox input.hidden {
-  z-index: -1;
+    z-index: -1;
 }
 
 /* Selectable Label */
 .ui.checkbox input + label[for],
 .ui.checkbox input.hidden + label {
-  cursor: pointer;
-  user-select: none;
+    cursor: pointer;
+    user-select: none;
 }
 
-
 /*******************************
              Types
 *******************************/
 
 & when (@variationCheckboxRadio) {
-  /*--------------
-       Radio
-  ---------------*/
+    /* --------------
+         Radio
+    --------------- */
 
-  .ui.radio.checkbox {
-    min-height: @radioSize;
-  }
+    .ui.radio.checkbox {
+        min-height: @radioSize;
+    }
 
-  .ui.radio.checkbox label {
-    padding-left: @radioLabelDistance;
-  }
+    .ui.radio.checkbox label {
+        padding-left: @radioLabelDistance;
+    }
 
-  /* Box */
-  .ui.radio.checkbox label::before {
-    content: '';
-    transform: none;
-
-    width: @radioSize;
-    height: @radioSize;
-    border-radius: @circularRadius;
-    top: @radioTop;
-    left: @radioLeft;
-  }
-
-  /* Bullet */
-  .ui.radio.checkbox label::after {
-    border: none;
-    content: '' !important;
-    line-height: @radioSize;
-    top: @bulletTop;
-    left: @bulletLeft;
-    width: @radioSize;
-    height: @radioSize;
-    border-radius: @bulletRadius;
-    transform: scale(@bulletScale);
-    background-color: @bulletColor;
-  }
-
-  /* Focus */
-  .ui.radio.checkbox input:focus ~ label::before {
-    background-color: @radioFocusBackground;
-  }
-  .ui.radio.checkbox input:focus ~ label::after {
-    background-color: @radioFocusBulletColor;
-  }
-
-  /* Indeterminate */
-  .ui.radio.checkbox input:indeterminate ~ label::after {
-    opacity: 0;
-  }
-
-  /* Active */
-  .ui.radio.checkbox input:checked ~ label::before {
-    background-color: @radioActiveBackground;
-  }
-  .ui.radio.checkbox input:checked ~ label::after {
-    background-color: @radioActiveBulletColor;
-  }
-
-  /* Active Focus */
-  .ui.radio.checkbox input:focus:checked ~ label::before {
-    background-color: @radioActiveFocusBackground;
-  }
-  .ui.radio.checkbox input:focus:checked ~ label::after {
-    background-color: @radioActiveFocusBulletColor;
-  }
+    /* Box */
+    .ui.radio.checkbox label::before {
+        content: '';
+        transform: none;
+        width: @radioSize;
+        height: @radioSize;
+        border-radius: @circularRadius;
+        top: @radioTop;
+        left: @radioLeft;
+    }
+
+    /* Bullet */
+    .ui.radio.checkbox label::after {
+        border: none;
+        content: '' !important;
+        line-height: @radioSize;
+        top: @bulletTop;
+        left: @bulletLeft;
+        width: @radioSize;
+        height: @radioSize;
+        border-radius: @bulletRadius;
+        transform: scale(@bulletScale);
+        background-color: @bulletColor;
+    }
+
+    /* Focus */
+    .ui.radio.checkbox input:focus ~ label::before {
+        background-color: @radioFocusBackground;
+    }
+    .ui.radio.checkbox input:focus ~ label::after {
+        background-color: @radioFocusBulletColor;
+    }
+
+    /* Indeterminate */
+    .ui.radio.checkbox input:indeterminate ~ label::after {
+        opacity: 0;
+    }
+
+    /* Active */
+    .ui.radio.checkbox input:checked ~ label::before {
+        background-color: @radioActiveBackground;
+    }
+    .ui.radio.checkbox input:checked ~ label::after {
+        background-color: @radioActiveBulletColor;
+    }
+
+    /* Active Focus */
+    .ui.radio.checkbox input:focus:checked ~ label::before {
+        background-color: @radioActiveFocusBackground;
+    }
+    .ui.radio.checkbox input:focus:checked ~ label::after {
+        background-color: @radioActiveFocusBulletColor;
+    }
 }
 
 & when (@variationCheckboxSlider) {
-  /*--------------
-       Slider
-  ---------------*/
-
-  .ui.slider.checkbox {
-    min-height: @sliderHeight;
-  }
-
-  /* Input */
-  .ui.slider.checkbox input {
-    width: @sliderWidth;
-    height: @sliderHeight;
-  }
-
-  /* Label */
-  .ui.slider.checkbox label {
-    padding-left: @sliderLabelDistance;
-    line-height: @sliderLabelLineHeight;
-    color: @sliderOffLabelColor;
-  }
-
-  /* Line */
-  .ui.slider.checkbox label::before {
-    display: block;
-    position: absolute;
-    content: '';
-    transform: none;
-    border: none !important;
-    left: 0;
-    z-index: 1;
+    /* --------------
+         Slider
+    --------------- */
 
-    top: @sliderLineVerticalOffset;
+    .ui.slider.checkbox {
+        min-height: @sliderHeight;
+    }
 
-    background-color: @sliderLineColor;
-    width: @sliderLineWidth;
-    height: @sliderLineHeight;
+    /* Input */
+    .ui.slider.checkbox input {
+        width: @sliderWidth;
+        height: @sliderHeight;
+    }
 
-    border-radius: @sliderLineRadius;
-    transition: @sliderLineTransition;
+    /* Label */
+    .ui.slider.checkbox label {
+        padding-left: @sliderLabelDistance;
+        line-height: @sliderLabelLineHeight;
+        color: @sliderOffLabelColor;
+    }
 
-  }
+    /* Line */
+    .ui.slider.checkbox label::before {
+        display: block;
+        position: absolute;
+        content: '';
+        transform: none;
+        border: none !important;
+        left: 0;
+        z-index: 1;
+        top: @sliderLineVerticalOffset;
+        background-color: @sliderLineColor;
+        width: @sliderLineWidth;
+        height: @sliderLineHeight;
+        border-radius: @sliderLineRadius;
+        transition: @sliderLineTransition;
+    }
 
-  /* Handle */
-  .ui.slider.checkbox label::after {
-    background: @handleBackground;
-    position: absolute;
-    content: '' !important;
-    opacity: 1;
-    z-index: 2;
-
-    border: none;
-    box-shadow: @handleBoxShadow;
-    width: @sliderHandleSize;
-    height: @sliderHandleSize;
-    top: @sliderHandleOffset;
-    left: 0;
-    transform: none;
-
-    border-radius: @circularRadius;
-    transition: @sliderHandleTransition;
-  }
-
-  /* Focus */
-  .ui.slider.checkbox input:focus ~ label::before {
-    background-color: @toggleFocusColor;
-    border: none;
-  }
-
-  /* Hover */
-  .ui.slider.checkbox label:hover {
-    color: @sliderHoverLabelColor;
-  }
-  .ui.slider.checkbox label:hover::before {
-    background: @sliderHoverLaneBackground;
-  }
-
-  /* Active */
-  .ui.slider.checkbox input:checked ~ label {
-    color: @sliderOnLabelColor !important;
-  }
-  .ui.slider.checkbox input:checked ~ label::before {
-    background-color: @sliderOnLineColor !important;
-  }
-  .ui.slider.checkbox input:checked ~ label::after {
-    left: @sliderTravelDistance;
-  }
-
-  /* Active Focus */
-  .ui.slider.checkbox input:focus:checked ~ label {
-    color: @sliderOnFocusLabelColor !important;
-  }
-  .ui.slider.checkbox input:focus:checked ~ label::before {
-    background-color: @sliderOnFocusLineColor !important;
-  }
-
-  & when (@variationCheckboxRightAligned) {
-    .ui.right.aligned.slider.checkbox label {
-      padding-left: 0;
-      padding-right: @sliderLabelDistance;
-    }
-    .ui.right.aligned.slider.checkbox label::after {
-      left: auto;
-      right: @sliderTravelDistance;
-      transition: @sliderHandleTransitionRightAligned;
-    }
-    .ui.right.aligned.slider.checkbox input:checked ~ label::after {
-      left: auto;
-      right: 0;
-    }
-  }
-}
+    /* Handle */
+    .ui.slider.checkbox label::after {
+        background: @handleBackground;
+        position: absolute;
+        content: '' !important;
+        opacity: 1;
+        z-index: 2;
+        border: none;
+        box-shadow: @handleBoxShadow;
+        width: @sliderHandleSize;
+        height: @sliderHandleSize;
+        top: @sliderHandleOffset;
+        left: 0;
+        transform: none;
+        border-radius: @circularRadius;
+        transition: @sliderHandleTransition;
+    }
 
-& when (@variationCheckboxToggle) {
-  /*--------------
-       Toggle
-  ---------------*/
-
-  .ui.toggle.checkbox {
-    min-height: @toggleHeight;
-  }
-
-  /* Input */
-  .ui.toggle.checkbox input {
-    width: @toggleWidth;
-    height: @toggleHeight;
-  }
-
-  /* Label */
-  .ui.toggle.checkbox label {
-    min-height: @toggleHandleSize;
-    padding-left: @toggleLabelDistance;
-    color: @toggleOffLabelColor;
-  }
-  .ui.toggle.checkbox label {
-    padding-top: @toggleLabelOffset;
-  }
-
-  /* Switch */
-  .ui.toggle.checkbox label::before {
-    display: block;
-    position: absolute;
-    content: '';
-    z-index: 1;
-    transform: none;
-    border: none;
-
-    top: @toggleLaneVerticalOffset;
-
-    background: @toggleLaneBackground;
-    box-shadow: @toggleLaneBoxShadow;
-    width: @toggleLaneWidth;
-    height: @toggleLaneHeight;
-    border-radius: @toggleHandleRadius;
-  }
-
-  /* Handle */
-  .ui.toggle.checkbox label::after {
-    background: @handleBackground;
-    position: absolute;
-    content: '' !important;
-    opacity: 1;
-    z-index: 2;
-
-    border: none;
-    box-shadow: @handleBoxShadow;
-    width: @toggleHandleSize;
-    height: @toggleHandleSize;
-    top: @toggleHandleOffset;
-    left: 0;
+    /* Focus */
+    .ui.slider.checkbox input:focus ~ label::before {
+        background-color: @toggleFocusColor;
+        border: none;
+    }
 
-    border-radius: @circularRadius;
-    transition: @toggleHandleTransition;
-  }
-
-  .ui.toggle.checkbox input ~ label::after {
-    left: @toggleOffOffset;
-    box-shadow: @toggleOffHandleBoxShadow;
-  }
-
-  /* Focus */
-  .ui.toggle.checkbox input:focus ~ label::before {
-    background-color: @toggleFocusColor;
-    border: none;
-  }
-
-  /* Hover */
-  .ui.toggle.checkbox label:hover::before {
-    background-color: @toggleHoverColor;
-    border: none;
-  }
-
-  /* Active */
-  .ui.toggle.checkbox input:checked ~ label {
-    color: @toggleOnLabelColor !important;
-  }
-  .ui.toggle.checkbox input:checked ~ label::before {
-    background-color: @toggleOnLaneColor !important;
-  }
-  .ui.toggle.checkbox input:checked ~ label::after {
-    left: @toggleOnOffset;
-    box-shadow: @toggleOnHandleBoxShadow;
-  }
-
-
-  /* Active Focus */
-  .ui.toggle.checkbox input:focus:checked ~ label {
-    color: @toggleOnFocusLabelColor !important;
-  }
-  .ui.toggle.checkbox input:focus:checked ~ label::before {
-    background-color: @toggleOnFocusLaneColor !important;
-  }
-
-  & when (@variationCheckboxRightAligned) {
-    .ui.right.aligned.toggle.checkbox label {
-      padding-left: 0;
-      padding-right: @toggleLabelDistance;
-    }
-    .ui.right.aligned.toggle.checkbox input ~ label::after {
-      left: auto;
-      right: @toggleOnOffset;
-      transition: @toggleHandleTransitionRightAligned;
-    }
-    .ui.right.aligned.toggle.checkbox input:checked ~ label::after {
-      left: auto;
-      right: @toggleOffOffset;
-    }
-  }
+    /* Hover */
+    .ui.slider.checkbox label:hover {
+        color: @sliderHoverLabelColor;
+    }
+    .ui.slider.checkbox label:hover::before {
+        background: @sliderHoverLaneBackground;
+    }
+
+    /* Active */
+    .ui.slider.checkbox input:checked ~ label {
+        color: @sliderOnLabelColor !important;
+    }
+    .ui.slider.checkbox input:checked ~ label::before {
+        background-color: @sliderOnLineColor !important;
+    }
+    .ui.slider.checkbox input:checked ~ label::after {
+        left: @sliderTravelDistance;
+    }
+
+    /* Active Focus */
+    .ui.slider.checkbox input:focus:checked ~ label {
+        color: @sliderOnFocusLabelColor !important;
+    }
+    .ui.slider.checkbox input:focus:checked ~ label::before {
+        background-color: @sliderOnFocusLineColor !important;
+    }
+
+    & when (@variationCheckboxRightAligned) {
+        .ui.right.aligned.slider.checkbox label {
+            padding-left: 0;
+            padding-right: @sliderLabelDistance;
+        }
+        .ui.right.aligned.slider.checkbox label::after {
+            left: auto;
+            right: @sliderTravelDistance;
+            transition: @sliderHandleTransitionRightAligned;
+        }
+        .ui.right.aligned.slider.checkbox input:checked ~ label::after {
+            left: auto;
+            right: 0;
+        }
+    }
 }
 
-/*******************************
-            Variations
-*******************************/
-& when (@variationCheckboxFitted) {
-  /*--------------
-       Fitted
-  ---------------*/
+& when (@variationCheckboxToggle) {
+    /* --------------
+         Toggle
+    --------------- */
 
-  .ui.fitted.checkbox label {
-    padding-left: 0 !important;
-  }
+    .ui.toggle.checkbox {
+        min-height: @toggleHeight;
+    }
 
-  .ui.fitted.toggle.checkbox {
-    width: @toggleWidth;
-  }
+    /* Input */
+    .ui.toggle.checkbox input {
+        width: @toggleWidth;
+        height: @toggleHeight;
+    }
 
-  .ui.fitted.slider.checkbox {
-    width: @sliderWidth;
-  }
-}
+    /* Label */
+    .ui.toggle.checkbox label {
+        min-height: @toggleHandleSize;
+        padding-left: @toggleLabelDistance;
+        color: @toggleOffLabelColor;
+    }
+    .ui.toggle.checkbox label {
+        padding-top: @toggleLabelOffset;
+    }
 
-& when (@variationCheckboxInverted) {
-  /*--------------
-       Inverted
-  ---------------*/
-  .ui.inverted.checkbox label,
-  .ui.inverted.checkbox + label {
-    color: @invertedTextColor !important;
-  }
+    /* Switch */
+    .ui.toggle.checkbox label::before {
+        display: block;
+        position: absolute;
+        content: '';
+        z-index: 1;
+        transform: none;
+        border: none;
+        top: @toggleLaneVerticalOffset;
+        background: @toggleLaneBackground;
+        box-shadow: @toggleLaneBoxShadow;
+        width: @toggleLaneWidth;
+        height: @toggleLaneHeight;
+        border-radius: @toggleHandleRadius;
+    }
 
-  /* Hover */
-  .ui.inverted.checkbox label:hover {
-    color: @invertedHoveredTextColor !important;
-  }
-  .ui.inverted.checkbox label:hover::before {
-    border-color: @strongSelectedBorderColor;
-  }
-  & when (@variationCheckboxSlider) {
-    /*Slider Label */
-    .ui.inverted.slider.checkbox label {
-      color: @invertedUnselectedTextColor;
+    /* Handle */
+    .ui.toggle.checkbox label::after {
+        background: @handleBackground;
+        position: absolute;
+        content: '' !important;
+        opacity: 1;
+        z-index: 2;
+        border: none;
+        box-shadow: @handleBoxShadow;
+        width: @toggleHandleSize;
+        height: @toggleHandleSize;
+        top: @toggleHandleOffset;
+        left: 0;
+        border-radius: @circularRadius;
+        transition: @toggleHandleTransition;
     }
 
-    /* Slider Line */
-    .ui.inverted.slider.checkbox label::before {
-      background-color: @invertedUnselectedTextColor !important;
+    .ui.toggle.checkbox input ~ label::after {
+        left: @toggleOffOffset;
+        box-shadow: @toggleOffHandleBoxShadow;
     }
 
-    /* Slider Hover */
-    .ui.inverted.slider.checkbox label:hover::before {
-      background: @invertedLightTextColor !important;
+    /* Focus */
+    .ui.toggle.checkbox input:focus ~ label::before {
+        background-color: @toggleFocusColor;
+        border: none;
     }
 
-    /* Slider Active */
-    .ui.inverted.slider.checkbox input:checked ~ label {
-      color: @invertedSelectedTextColor !important;
+    /* Hover */
+    .ui.toggle.checkbox label:hover::before {
+        background-color: @toggleHoverColor;
+        border: none;
     }
-    .ui.inverted.slider.checkbox input:checked ~ label::before {
-      background-color: @selectedWhiteBorderColor !important;
+
+    /* Active */
+    .ui.toggle.checkbox input:checked ~ label {
+        color: @toggleOnLabelColor !important;
+    }
+    .ui.toggle.checkbox input:checked ~ label::before {
+        background-color: @toggleOnLaneColor !important;
+    }
+    .ui.toggle.checkbox input:checked ~ label::after {
+        left: @toggleOnOffset;
+        box-shadow: @toggleOnHandleBoxShadow;
     }
 
-    /* Slider Active Focus */
-    .ui.inverted.slider.checkbox input:focus:checked ~ label {
-      color: @invertedSelectedTextColor !important;
+    /* Active Focus */
+    .ui.toggle.checkbox input:focus:checked ~ label {
+        color: @toggleOnFocusLabelColor !important;
+    }
+    .ui.toggle.checkbox input:focus:checked ~ label::before {
+        background-color: @toggleOnFocusLaneColor !important;
     }
-    .ui.inverted.slider.checkbox input:focus:checked ~ label::before {
-      background-color: @selectedWhiteBorderColor !important;
+
+    & when (@variationCheckboxRightAligned) {
+        .ui.right.aligned.toggle.checkbox label {
+            padding-left: 0;
+            padding-right: @toggleLabelDistance;
+        }
+        .ui.right.aligned.toggle.checkbox input ~ label::after {
+            left: auto;
+            right: @toggleOnOffset;
+            transition: @toggleHandleTransitionRightAligned;
+        }
+        .ui.right.aligned.toggle.checkbox input:checked ~ label::after {
+            left: auto;
+            right: @toggleOffOffset;
+        }
     }
-  }
-  & when (@variationCheckboxToggle) {
-    /* Toggle Switch */
-    .ui.inverted.toggle.checkbox label::before {
-      background-color: @invertedTextColor !important;
+}
+
+/*******************************
+            Variations
+*******************************/
+& when (@variationCheckboxFitted) {
+    /* --------------
+         Fitted
+    --------------- */
+
+    .ui.fitted.checkbox label {
+        padding-left: 0 !important;
     }
 
-    /* Toggle Hover */
-    .ui.inverted.toggle.checkbox label:hover::before {
-      background: @invertedHoveredTextColor !important;
+    .ui.fitted.toggle.checkbox {
+        width: @toggleWidth;
     }
 
-    /* Toggle Active */
-    .ui.inverted.toggle.checkbox input:checked ~ label {
-      color: @invertedSelectedTextColor !important;
+    .ui.fitted.slider.checkbox {
+        width: @sliderWidth;
     }
-    .ui.inverted.toggle.checkbox input:checked ~ label::before {
-      background-color: @toggleOnLaneColor !important;
+}
+
+& when (@variationCheckboxInverted) {
+    /* --------------
+         Inverted
+    --------------- */
+    .ui.inverted.checkbox label,
+    .ui.inverted.checkbox + label {
+        color: @invertedTextColor !important;
     }
 
-    /* Toggle Active Focus */
-    .ui.inverted.toggle.checkbox input:focus:checked ~ label {
-      color: @invertedSelectedTextColor !important;
+    /* Hover */
+    .ui.inverted.checkbox label:hover {
+        color: @invertedHoveredTextColor !important;
     }
-    .ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
-      background-color: @toggleOnFocusLaneColor !important;
+    .ui.inverted.checkbox label:hover::before {
+        border-color: @strongSelectedBorderColor;
     }
+    & when (@variationCheckboxSlider) {
+        /* Slider Label */
+        .ui.inverted.slider.checkbox label {
+            color: @invertedUnselectedTextColor;
+        }
+
+        /* Slider Line */
+        .ui.inverted.slider.checkbox label::before {
+            background-color: @invertedUnselectedTextColor !important;
+        }
+
+        /* Slider Hover */
+        .ui.inverted.slider.checkbox label:hover::before {
+            background: @invertedLightTextColor !important;
+        }
+
+        /* Slider Active */
+        .ui.inverted.slider.checkbox input:checked ~ label {
+            color: @invertedSelectedTextColor !important;
+        }
+        .ui.inverted.slider.checkbox input:checked ~ label::before {
+            background-color: @selectedWhiteBorderColor !important;
+        }
+
+        /* Slider Active Focus */
+        .ui.inverted.slider.checkbox input:focus:checked ~ label {
+            color: @invertedSelectedTextColor !important;
+        }
+        .ui.inverted.slider.checkbox input:focus:checked ~ label::before {
+            background-color: @selectedWhiteBorderColor !important;
+        }
+    }
+    & when (@variationCheckboxToggle) {
+        /* Toggle Switch */
+        .ui.inverted.toggle.checkbox label::before {
+            background-color: @invertedTextColor !important;
+        }
+
+        /* Toggle Hover */
+        .ui.inverted.toggle.checkbox label:hover::before {
+            background: @invertedHoveredTextColor !important;
+        }
+
+        /* Toggle Active */
+        .ui.inverted.toggle.checkbox input:checked ~ label {
+            color: @invertedSelectedTextColor !important;
+        }
+        .ui.inverted.toggle.checkbox input:checked ~ label::before {
+            background-color: @toggleOnLaneColor !important;
+        }
+
+        /* Toggle Active Focus */
+        .ui.inverted.toggle.checkbox input:focus:checked ~ label {
+            color: @invertedSelectedTextColor !important;
+        }
+        .ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
+            background-color: @toggleOnFocusLaneColor !important;
+        }
     }
 }
 
-/*--------------------
+/* --------------------
         Size
----------------------*/
+--------------------- */
 & when not (@variationCheckboxSizes = false) {
-  each(@variationCheckboxSizes, {
-    @raw: @{value}Raw;
-    @size: @{value}CheckboxSize;
-    @circleScale: @{value}CheckboxCircleScale;
-    @circleLeft: @{value}CheckboxCircleLeft;
-
-    .ui.@{value}.checkbox {
-      font-size: @@size;
-    }
-
-    & when (@@raw > 1) {
-      .ui.@{value}.form .checkbox,
-      .ui.@{value}.checkbox {
-        &:not(.slider):not(.toggle):not(.radio) {
-          &
-          label::after,
-          label::before {
-            transform: scale(@@raw);
-            transform-origin: left;
-          }
+    each(@variationCheckboxSizes, {
+        @raw: @{value}Raw;
+        @size: @{value}CheckboxSize;
+        @circleScale: @{value}CheckboxCircleScale;
+        @circleLeft: @{value}CheckboxCircleLeft;
+
+        .ui.@{value}.checkbox {
+            font-size: @@size;
         }
-        &.radio when (@variationCheckboxRadio) {
-          &
-          label::before {
-            transform: scale(@@raw);
-            transform-origin: left;
-          }
-          &
-          label::after {
-            transform: scale(@@circleScale);
-            transform-origin: left;
-            left: @@circleLeft;
-          }
+
+        & when (@@raw > 1) {
+            .ui.@{value}.form .checkbox,
+            .ui.@{value}.checkbox {
+                &:not(.slider):not(.toggle):not(.radio) {
+                    &
+                    label::after,
+                    label::before {
+                        transform: scale(@@raw);
+                        transform-origin: left;
+                    }
+                }
+                &.radio when (@variationCheckboxRadio) {
+                    &
+                    label::before {
+                        transform: scale(@@raw);
+                        transform-origin: left;
+                    }
+                    &
+                    label::after {
+                        transform: scale(@@circleScale);
+                        transform-origin: left;
+                        left: @@circleLeft;
+                    }
+                }
+            }
         }
-      }
-    }
-  })
+    })
 }
 
 .loadUIOverrides();