fomantic-ui 2.9.1-beta.19 → 2.9.1-beta.20

package/src/definitions/modules/slider.less

@@ -1,131 +1,130 @@
- /*******************************
+/*******************************
              Theme
  *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'slider';
 
 @import (multiple) '../../theme.config';
 
 .ui.slider:not(.vertical):not(.checkbox) {
-  width: 100%;
-  padding: @padding;
+    width: 100%;
+    padding: @padding;
 }
 
 .ui.slider:not(.checkbox) {
-  position: relative;
+    position: relative;
 }
 
 .ui.slider:not(.checkbox):focus {
-  outline: 0;
+    outline: 0;
 }
 
 .ui.slider .inner {
-  position: relative;
-  z-index: 2;
+    position: relative;
+    z-index: 2;
 }
 
 .ui.slider:not(.vertical) .inner {
-  height: @height;
+    height: @height;
 }
 
 .ui.slider .inner:hover {
-  cursor: @hoverPointer;
+    cursor: @hoverPointer;
 }
 
 .ui.slider .inner .track {
-  position: absolute;
-  border-radius: @trackBorderRadius;
-  background-color: @trackColor;
+    position: absolute;
+    border-radius: @trackBorderRadius;
+    background-color: @trackColor;
 }
 
 .ui.slider:not(.vertical) .inner .track {
-  width: 100%;
-  height: @trackHeight;
-  top: @trackPositionTop;
-  left: 0;
+    width: 100%;
+    height: @trackHeight;
+    top: @trackPositionTop;
+    left: 0;
 }
 
 .ui.slider .inner .track-fill {
-  position: absolute;
-  border-radius: @trackFillBorderRadius;
-  background-color: @trackFillColor;
+    position: absolute;
+    border-radius: @trackFillBorderRadius;
+    background-color: @trackFillColor;
 }
 
 .ui.slider:not(.vertical) .inner .track-fill {
-  height: @trackFillHeight;
-  top: @trackPositionTop;
-  left: 0;
+    height: @trackFillHeight;
+    top: @trackPositionTop;
+    left: 0;
 }
 
 .ui.slider .inner .thumb {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: @thumbHeight;
-  width: @thumbHeight;
-  background: @thumbBackground;
-  border-radius: @thumbBorderRadius;
-  box-shadow: @thumbShadow;
-  transition: @thumbTransition;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: @thumbHeight;
+    width: @thumbHeight;
+    background: @thumbBackground;
+    border-radius: @thumbBorderRadius;
+    box-shadow: @thumbShadow;
+    transition: @thumbTransition;
 }
 
 .ui.slider:not(.disabled) .inner .thumb:hover {
-  cursor: @thumbHoverPointer;
-  background: @thumbHoverBackground;
+    cursor: @thumbHoverPointer;
+    background: @thumbHoverBackground;
 }
 
 .ui.slider:not(.disabled):focus .inner .thumb {
-  background: @thumbHoverBackground;
+    background: @thumbHoverBackground;
 }
 
-
 /*******************************
             States
 *******************************/
 
 & when (@variationSliderDisabled) {
-  /*--------------
-       Disabled
-  ---------------*/
+    /* --------------
+         Disabled
+    --------------- */
 
-  .ui.disabled.slider:not(.checkbox) {
-    opacity: @disabledOpactiy;
-  }
+    .ui.disabled.slider:not(.checkbox) {
+        opacity: @disabledOpactiy;
+    }
 
-  .ui.disabled.slider .inner:hover {
-    cursor: auto;
-  }
+    .ui.disabled.slider .inner:hover {
+        cursor: auto;
+    }
 
-  .ui.disabled.slider .inner .track-fill {
-    background: @disabledTrackFillColor;
-  }
+    .ui.disabled.slider .inner .track-fill {
+        background: @disabledTrackFillColor;
+    }
 }
 
 & when (@variationSliderReversed) {
-  /*--------------
-      Reversed
-  ---------------*/
-
-  .ui.reversed.slider .inner .track-fill {
-    left: auto;
-    right: 0;
-  }
-
-  .ui.reversed.slider:not(.vertical) .inner .thumb {
-    left: auto;
-    right: 0;
-  }
-
-  .ui.reversed.vertical.slider .inner .thumb {
-    left: @thumbVerticalSliderOffset;
-  }
-
-  & when (@variationSliderLabeled) {
-    .ui.labeled.reversed.slider > .labels .label {
-      transform: translate(-100%, -100%);
+    /* --------------
+        Reversed
+    --------------- */
+
+    .ui.reversed.slider .inner .track-fill {
+        left: auto;
+        right: 0;
+    }
+
+    .ui.reversed.slider:not(.vertical) .inner .thumb {
+        left: auto;
+        right: 0;
+    }
+
+    .ui.reversed.vertical.slider .inner .thumb {
+        left: @thumbVerticalSliderOffset;
+    }
+
+    & when (@variationSliderLabeled) {
+        .ui.labeled.reversed.slider > .labels .label {
+            transform: translate(-100%, -100%);
+        }
     }
-  }
 }
 
 /*******************************
@@ -133,288 +132,288 @@
 *******************************/
 
 & when (@variationSliderVertical) {
-  /*--------------
-      Vertical
-  ---------------*/
-
-  .ui.vertical.slider {
-    height: 100%;
-    width: @height;
-    padding: @verticalPadding;
-  }
-
-  .ui.vertical.slider .inner {
-    height: 100%;
-  }
-
-  .ui.vertical.slider .inner .track {
-    height: 100%;
-    width: @trackHeight;
-    left: @trackPositionTop;
-    top: 0;
-  }
-
-  .ui.vertical.slider .inner .track-fill {
-    width: @trackFillHeight;
-    left: @trackPositionTop;
-    top: 0;
-  }
-  & when (@variationSliderReversed) {
-    /* Vertical Reversed */
-    .ui.vertical.reversed.slider .inner .thumb {
-      top: auto;
-      bottom: 0;
+    /* --------------
+        Vertical
+    --------------- */
+
+    .ui.vertical.slider {
+        height: 100%;
+        width: @height;
+        padding: @verticalPadding;
     }
 
-    .ui.vertical.reversed.slider .inner .track-fill {
-      top: auto;
-      bottom: 0;
+    .ui.vertical.slider .inner {
+        height: 100%;
     }
-  }
-}
-
-& when (@variationSliderLabeled) {
-  /*--------------
-      Labeled
-  ---------------*/
-
-  .ui.labeled.slider > .labels {
-    height: @labelHeight;
-    width: auto;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-  }
 
-  .ui.labeled.slider:not(.vertical) > .labels {
-    transform: translateY(-50%);
-  }
+    .ui.vertical.slider .inner .track {
+        height: 100%;
+        width: @trackHeight;
+        left: @trackPositionTop;
+        top: 0;
+    }
 
-  .ui.labeled.slider > .labels .label {
-    display: inline-flex;
-    padding: @labelPadding;
-    position: absolute;
-    transform: translate(-50%, -100%);
-    white-space: nowrap;
-  }
-
-  .ui.bottom.aligned.labeled.slider > .labels .label {
-    bottom: 0;
-    transform: translate(-50%, 100%);
-  }
-  & when (@variationSliderTicked) {
-    .ui.labeled.ticked.slider > .labels .label::after {
-      content: ' ';
-      height: @labelHeight;
-      width: @labelWidth;
-      background: @labelColor;
-      position: absolute;
-      top: 100%;
-      left: 50%;
+    .ui.vertical.slider .inner .track-fill {
+        width: @trackFillHeight;
+        left: @trackPositionTop;
+        top: 0;
     }
-    .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
-      top: auto;
-      bottom: 100%;
+    & when (@variationSliderReversed) {
+        /* Vertical Reversed */
+        .ui.vertical.reversed.slider .inner .thumb {
+            top: auto;
+            bottom: 0;
+        }
+
+        .ui.vertical.reversed.slider .inner .track-fill {
+            top: auto;
+            bottom: 0;
+        }
     }
-    .ui.labeled.ticked.slider > .labels .halftick.label::after {
-      height: (@labelHeight / 2);
+}
+
+& when (@variationSliderLabeled) {
+    /* --------------
+        Labeled
+    --------------- */
+
+    .ui.labeled.slider > .labels {
+        height: @labelHeight;
+        width: auto;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
     }
-  }
-
-  & when (@variationSliderVertical) {
-    /* Vertical Labels */
-
-    .ui.labeled.vertical.slider > .labels {
-      width: @labelHeight;
-      height: auto;
-      left: 50%;
-      top: 0;
-      bottom: 0;
-      transform: translateX(-50%);
+
+    .ui.labeled.slider:not(.vertical) > .labels {
+        transform: translateY(-50%);
     }
 
-    .ui.labeled.vertical.slider > .labels .label {
-      transform: translate(-100%, -50%);
+    .ui.labeled.slider > .labels .label {
+        display: inline-flex;
+        padding: @labelPadding;
+        position: absolute;
+        transform: translate(-50%, -100%);
+        white-space: nowrap;
     }
 
-    .ui.labeled.vertical.slider > .labels .label::after {
-      width: @labelHeight;
-      height: @labelWidth;
-      left: 100%;
-      top: 50%;
+    .ui.bottom.aligned.labeled.slider > .labels .label {
+        bottom: 0;
+        transform: translate(-50%, 100%);
     }
-    .ui.labeled.vertical.slider > .labels .halftick.label::after {
-      width: (@labelHeight / 2);
-      height: @labelWidth;
+    & when (@variationSliderTicked) {
+        .ui.labeled.ticked.slider > .labels .label::after {
+            content: ' ';
+            height: @labelHeight;
+            width: @labelWidth;
+            background: @labelColor;
+            position: absolute;
+            top: 100%;
+            left: 50%;
+        }
+        .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
+            top: auto;
+            bottom: 100%;
+        }
+        .ui.labeled.ticked.slider > .labels .halftick.label::after {
+            height: (@labelHeight / 2);
+        }
     }
 
-    & when (@variationSliderReversed) {
-      /* Vertical Reversed Labels */
-      .ui.labeled.vertical.reversed.slider > .labels .label {
-        transform: translate(-100%, 50%);
-      }
+    & when (@variationSliderVertical) {
+        /* Vertical Labels */
+
+        .ui.labeled.vertical.slider > .labels {
+            width: @labelHeight;
+            height: auto;
+            left: 50%;
+            top: 0;
+            bottom: 0;
+            transform: translateX(-50%);
+        }
+
+        .ui.labeled.vertical.slider > .labels .label {
+            transform: translate(-100%, -50%);
+        }
+
+        .ui.labeled.vertical.slider > .labels .label::after {
+            width: @labelHeight;
+            height: @labelWidth;
+            left: 100%;
+            top: 50%;
+        }
+        .ui.labeled.vertical.slider > .labels .halftick.label::after {
+            width: (@labelHeight / 2);
+            height: @labelWidth;
+        }
+
+        & when (@variationSliderReversed) {
+            /* Vertical Reversed Labels */
+            .ui.labeled.vertical.reversed.slider > .labels .label {
+                transform: translate(-100%, 50%);
+            }
+        }
     }
-  }
 }
 
-/*--------------
+/* --------------
     Hover
----------------*/
+--------------- */
 
 .ui.hover.slider .inner .thumb {
-  opacity: @hoverVarOpacity;
-  transition: @hoverOpacityTransition;
+    opacity: @hoverVarOpacity;
+    transition: @hoverOpacityTransition;
 }
 
-.ui.hover.slider:not(.disabled):hover .inner .thumb, .ui.hover.slider:not(.disabled):focus .inner .thumb {
-  opacity: @hoverVarHoverOpacity;
+.ui.hover.slider:not(.disabled):hover .inner .thumb,
+.ui.hover.slider:not(.disabled):focus .inner .thumb {
+    opacity: @hoverVarHoverOpacity;
 }
 
-
 & when (@variationSliderInverted) {
-  /*--------------
-      Inverted
-  ---------------*/
+    /* --------------
+        Inverted
+    --------------- */
 
-  .ui.inverted.slider .inner .track-fill {
-    background-color: @invertedTrackFillColor;
-  }
+    .ui.inverted.slider .inner .track-fill {
+        background-color: @invertedTrackFillColor;
+    }
 
-  .ui.inverted.slider .inner .track {
-    background-color: @transparentWhite;
-  }
+    .ui.inverted.slider .inner .track {
+        background-color: @transparentWhite;
+    }
 }
 
-/*--------------
+/* --------------
      Colors
----------------*/
+--------------- */
 & when not (@variationSliderColors = false) {
-   each(@variationSliderColors, {
-     @color: @value;
-     @c: @colors[@@color][color];
-     @l: @colors[@@color][light];
-     @h: @colors[@@color][hover];
-     @lh: @colors[@@color][lightHover];
-
-     /* Standard */
-     .ui.@{color}.slider .inner .track-fill {
-       background-color: @c;
-     }
-     & when (@variationSliderInverted) {
-       .ui.@{color}.inverted.slider .inner .track-fill {
-         background-color: @l;
-       }
-     }
-
-     & when (@variationSliderBasic) {
-       /* Basic */
-       .ui.@{color}.slider.basic .inner .thumb {
-         background-color: @c;
-       }
-       .ui.@{color}.slider.basic .inner .thumb:hover,
-       .ui.@{color}.slider.basic:focus .inner .thumb {
-         background-color: @h;
-       }
-       & when (@variationSliderInverted) {
-         /* Basic Inverted */
-         .ui.@{color}.inverted.slider.basic .inner .thumb {
-           background-color: @l;
-         }
-         .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
-         .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
-           background-color: @lh;
-         }
-       }
-     }
-
-   })
+    each(@variationSliderColors, {
+        @color: @value;
+        @c: @colors[@@color][color];
+        @l: @colors[@@color][light];
+        @h: @colors[@@color][hover];
+        @lh: @colors[@@color][lightHover];
+
+        /* Standard */
+        .ui.@{color}.slider .inner .track-fill {
+            background-color: @c;
+        }
+        & when (@variationSliderInverted) {
+            .ui.@{color}.inverted.slider .inner .track-fill {
+                background-color: @l;
+            }
+        }
+
+        & when (@variationSliderBasic) {
+            /* Basic */
+            .ui.@{color}.slider.basic .inner .thumb {
+                background-color: @c;
+            }
+            .ui.@{color}.slider.basic .inner .thumb:hover,
+            .ui.@{color}.slider.basic:focus .inner .thumb {
+                background-color: @h;
+            }
+            & when (@variationSliderInverted) {
+                /* Basic Inverted */
+                .ui.@{color}.inverted.slider.basic .inner .thumb {
+                    background-color: @l;
+                }
+                .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
+                .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
+                    background-color: @lh;
+                }
+            }
+        }
+
+    })
 }
 
 & when (@variationSliderBasic) {
-  /*--------------
-       Basic
-  ---------------*/
-
-  /* Standard */
-  .ui.slider.basic .inner .thumb {
-    background-color: @trackFillColor;
-  }
-  .ui.slider.basic .inner .thumb:hover, .ui.slider.basic:focus .inner .thumb {
-    background-color: @trackFillColorFocus;
-  }
-
-  & when (@variationSliderInverted) {
-    /*--------------
-      Basic Inverted
-    ---------------*/
+    /* --------------
+         Basic
+    --------------- */
 
     /* Standard */
-    .ui.inverted.slider.basic .inner .thumb {
-      background-color: @invertedTrackFillColor;
+    .ui.slider.basic .inner .thumb {
+        background-color: @trackFillColor;
     }
-    .ui.inverted.slider.basic .inner .thumb:hover, .ui.inverted.slider.basic:focus .inner .thumb {
-      background-color: @invertedTrackFillColorFocus;
+    .ui.slider.basic .inner .thumb:hover,
+    .ui.slider.basic:focus .inner .thumb {
+        background-color: @trackFillColorFocus;
     }
-  }
-}
 
+    & when (@variationSliderInverted) {
+        /* --------------
+          Basic Inverted
+        --------------- */
+
+        /* Standard */
+        .ui.inverted.slider.basic .inner .thumb {
+            background-color: @invertedTrackFillColor;
+        }
+        .ui.inverted.slider.basic .inner .thumb:hover,
+        .ui.inverted.slider.basic:focus .inner .thumb {
+            background-color: @invertedTrackFillColorFocus;
+        }
+    }
+}
 
-/*--------------
+/* --------------
      Sizing
----------------*/
+--------------- */
 
 & when not (@variationSliderSizes = false) {
-   each(@variationSliderSizes, {
-     @h: @{value}Height;
-     @th: @{value}TrackHeight;
-     @tp: @{value}TrackPositionTop;
-     @lh: @{value}LabelHeight;
-     .ui.slider.@{value} .inner .thumb {
-       height: @@h;
-       width: @@h;
-     }
-     .ui.slider.@{value}:not(.vertical) .inner {
-       height: @@h;
-     }
-     .ui.slider.@{value}:not(.vertical) .inner .track,
-     .ui.slider.@{value}:not(.vertical) .inner .track-fill {
-       height: @@th;
-       top: @@tp;
-     }
-     & when (@variationSliderLabeled) {
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
-         height: @@lh;
-       }
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
-         height: (@@lh / 2);
-       }
-     }
-     & when (@variationSliderVertical) {
-       /* Small Vertical */
-       .ui.slider.@{value}.vertical .inner {
-         width: @@h;
-       }
-       .ui.slider.@{value}.vertical .inner .track,
-       .ui.slider.@{value}.vertical .inner .track-fill {
-         width: @@th;
-         left: @@tp;
-       }
-       & when (@variationSliderLabeled) {
-         .ui.@{value}.labeled.vertical.slider> .labels,
-         .ui.@{value}.labeled.vertical.slider> .labels .label::after {
-           width: @@lh;
-         }
-         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label::after {
-           width: (@@lh / 2);
-         }
-       }
-     }
-   })
+    each(@variationSliderSizes, {
+        @h: @{value}Height;
+        @th: @{value}TrackHeight;
+        @tp: @{value}TrackPositionTop;
+        @lh: @{value}LabelHeight;
+        .ui.slider.@{value} .inner .thumb {
+            height: @@h;
+            width: @@h;
+        }
+        .ui.slider.@{value}:not(.vertical) .inner {
+            height: @@h;
+        }
+        .ui.slider.@{value}:not(.vertical) .inner .track,
+        .ui.slider.@{value}:not(.vertical) .inner .track-fill {
+            height: @@th;
+            top: @@tp;
+        }
+        & when (@variationSliderLabeled) {
+            .ui.@{value}.labeled.slider:not(.vertical) > .labels,
+            .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
+                height: @@lh;
+            }
+            .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
+                height: (@@lh / 2);
+            }
+        }
+        & when (@variationSliderVertical) {
+            /* Small Vertical */
+            .ui.slider.@{value}.vertical .inner {
+                width: @@h;
+            }
+            .ui.slider.@{value}.vertical .inner .track,
+            .ui.slider.@{value}.vertical .inner .track-fill {
+                width: @@th;
+                left: @@tp;
+            }
+            & when (@variationSliderLabeled) {
+                .ui.@{value}.labeled.vertical.slider> .labels,
+                .ui.@{value}.labeled.vertical.slider> .labels .label::after {
+                    width: @@lh;
+                }
+                .ui.@{value}.labeled.vertical.slider> .labels .halftick.label::after {
+                    width: (@@lh / 2);
+                }
+            }
+        }
+    })
 }
 
-
 .loadUIOverrides();