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

package/src/definitions/elements/loader.less

@@ -7,11 +7,12 @@
  * https://opensource.org/licenses/MIT
  *
  */
+
 /*******************************
             Theme
 *******************************/
 
-@type    : 'element';
+@type : 'element';
 @element : 'loader';
 
 @import (multiple) '../../theme.config';
@@ -20,96 +21,92 @@
             Loader
 *******************************/
 
-
 /* Standard Size */
 .ui.loader {
-  display: none;
-  position: absolute;
-  top: @loaderTopOffset;
-  left: @loaderLeftOffset;
-  margin: 0;
-  text-align: center;
-  z-index: 1000;
-  transform: translateX(-50%) translateY(-50%);
+    display: none;
+    position: absolute;
+    top: @loaderTopOffset;
+    left: @loaderLeftOffset;
+    margin: 0;
+    text-align: center;
+    z-index: 1000;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 /* Static Shape */
 .ui.loader::before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-
-  border-radius: @circularRadius;
-  border: @loaderLineWidth solid @loaderFillColor;
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border-radius: @circularRadius;
+    border: @loaderLineWidth solid @loaderFillColor;
 }
 
 /* Active Shape */
 .ui.loader::after {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-
-  animation: loader @loaderSpeed infinite linear;
-  border: @loaderLineWidth solid @shapeBorderColor;
-  border-radius: @circularRadius;
-
-  box-shadow: 0 0 0 1px transparent;
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    animation: loader @loaderSpeed infinite linear;
+    border: @loaderLineWidth solid @shapeBorderColor;
+    border-radius: @circularRadius;
+    box-shadow: 0 0 0 1px transparent;
 }
 
 & when (@variationLoaderSpeeds) {
-  /* Speeds */
-
-  .ui.fast.loading.loading::after,
-  .ui.fast.loading.loading .input > i.icon::after,
-  .ui.fast.loading.loading > i.icon::after,
-  .ui.fast.loader::after {
-    animation-duration: @loaderSpeedFast;
-  }
-
-  .ui.slow.loading.loading::after,
-  .ui.slow.loading.loading .input > i.icon::after,
-  .ui.slow.loading.loading > i.icon::after,
-  .ui.slow.loader::after {
-    animation-duration: @loaderSpeedSlow;
-  }
+    /* Speeds */
+
+    .ui.fast.loading.loading::after,
+    .ui.fast.loading.loading .input > i.icon::after,
+    .ui.fast.loading.loading > i.icon::after,
+    .ui.fast.loader::after {
+        animation-duration: @loaderSpeedFast;
+    }
+
+    .ui.slow.loading.loading::after,
+    .ui.slow.loading.loading .input > i.icon::after,
+    .ui.slow.loading.loading > i.icon::after,
+    .ui.slow.loader::after {
+        animation-duration: @loaderSpeedSlow;
+    }
 }
 
 /* Active Animation */
 @keyframes loader {
-  100% {
-    transform: rotate(360deg);
-  }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
-/*-------------------
+/* -------------------
       Coupling
---------------------*/
+-------------------- */
 
 /* Show inside active dimmer */
 .ui.dimmer > .loader {
-  display: block;
+    display: block;
 }
 
 /* Black Dimmer */
 .ui.dimmer > .ui.loader {
-  color: @invertedLoaderTextColor;
+    color: @invertedLoaderTextColor;
 }
 .ui.dimmer > .ui.loader:not(.elastic)::before {
-  border-color: @invertedLoaderFillColor;
+    border-color: @invertedLoaderFillColor;
 }
 
 /* White Dimmer (Inverted) */
 .ui.inverted.dimmer > .ui.loader {
-  color: @loaderTextColor;
+    color: @loaderTextColor;
 }
 .ui.inverted.dimmer > .ui.loader:not(.elastic)::before {
-  border-color: @loaderFillColor;
+    border-color: @loaderFillColor;
 }
 
 /*******************************
@@ -117,121 +114,119 @@
 *******************************/
 
 & when (@variationLoaderText) {
-  /*-------------------
-          Text
-  --------------------*/
-
-  .ui.ui.ui.ui.text.loader {
-    width: auto;
-    height: auto;
-    text-align: center;
-    font-style: normal;
-  }
+    /* -------------------
+            Text
+    -------------------- */
+
+    .ui.ui.ui.ui.text.loader {
+        width: auto;
+        height: auto;
+        text-align: center;
+        font-style: normal;
+    }
 }
 
-
 /*******************************
             States
 *******************************/
 & when (@variationLoaderIndeterminate) {
-  .ui.indeterminate.loader::after {
-    animation-direction: @indeterminateDirection;
-    animation-duration: @indeterminateSpeed;
-  }
+    .ui.indeterminate.loader::after {
+        animation-direction: @indeterminateDirection;
+        animation-duration: @indeterminateSpeed;
+    }
 }
 
 .ui.loader.active,
 .ui.loader.visible {
-  display: block;
+    display: block;
 }
 .ui.loader.disabled,
 .ui.loader.hidden {
-  display: none;
+    display: none;
 }
 
 /*******************************
             Variations
 *******************************/
 
-
-/*-------------------
+/* -------------------
         Sizes
---------------------*/
+-------------------- */
 
 .ui.loader {
-  width: @medium;
-  height: @medium;
-  font-size: @mediumFontSize;
+    width: @medium;
+    height: @medium;
+    font-size: @mediumFontSize;
 }
 .ui.loader::before,
 .ui.loader::after {
-  width: @medium;
-  height: @medium;
-  margin: @mediumOffset;
+    width: @medium;
+    height: @medium;
+    margin: @mediumOffset;
 }
 & when (@variationLoaderText) {
-  .ui.text.loader {
-    min-width: @medium;
-    padding-top: (@medium + @textDistance);
-  }
+    .ui.text.loader {
+        min-width: @medium;
+        padding-top: (@medium + @textDistance);
+    }
 }
 & when not (@variationLoaderSizes = false) {
-  each(@variationLoaderSizes, {
-    @o: @{value}Offset;
-    @f: @{value}FontSize;
-    @s: @@value;
-    .ui.@{value}.loader {
-      width: @s;
-      height: @s;
-      font-size: @@f;
-    }
-    .ui.@{value}.loader::before,
-    .ui.@{value}.loader::after {
-      width: @s;
-      height: @s;
-      margin: @@o;
-    }
-    & when (@variationLoaderText) {
-      .ui.@{value}.text.loader {
-        min-width: @s;
-        padding-top: (@s + @textDistance);
-      }
-    }
-  })
+    each(@variationLoaderSizes, {
+        @o: @{value}Offset;
+        @f: @{value}FontSize;
+        @s: @@value;
+        .ui.@{value}.loader {
+            width: @s;
+            height: @s;
+            font-size: @@f;
+        }
+        .ui.@{value}.loader::before,
+        .ui.@{value}.loader::after {
+            width: @s;
+            height: @s;
+            margin: @@o;
+        }
+        & when (@variationLoaderText) {
+            .ui.@{value}.text.loader {
+                min-width: @s;
+                padding-top: (@s + @textDistance);
+            }
+        }
+    })
 }
 
-/*-------------------
+/* -------------------
        Colors
---------------------*/
+-------------------- */
 & when not (@variationLoaderColors = false) {
-  each(@variationLoaderColors, {
-    @color: @value;
-    @c: @colors[@@color][color];
-    @l: @colors[@@color][light];
-
-    .ui.@{color}.elastic.loader.loader::before,
-    .ui.@{color}.basic.elastic.loading.button::before,
-    .ui.@{color}.basic.elastic.loading.button::after,
-    .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
-    .ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
-    .ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
-    .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
-    .ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
-    .ui.@{color}.loading.loading.loading.loading > i.icon::after,
-    .ui.@{color}.loader.loader.loader::after {
-      color: @c;
-    }
-    .ui.inverted.@{color}.elastic.loader::before,
-    .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
-    .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
-    .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
-    .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
-    .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
-    .ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
-    .ui.inverted.@{color}.loader.loader.loader::after {
-      color: @l;
-    }
-  })
+    each(@variationLoaderColors, {
+        @color: @value;
+        @c: @colors[@@color][color];
+        @l: @colors[@@color][light];
+
+        .ui.@{color}.elastic.loader.loader::before,
+        .ui.@{color}.basic.elastic.loading.button::before,
+        .ui.@{color}.basic.elastic.loading.button::after,
+        .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
+        .ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
+        .ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
+        .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
+        .ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
+        .ui.@{color}.loading.loading.loading.loading > i.icon::after,
+        .ui.@{color}.loader.loader.loader::after {
+            color: @c;
+        }
+        .ui.inverted.@{color}.elastic.loader::before,
+        .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
+        .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
+        .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
+        .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
+        .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
+        .ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
+        .ui.inverted.@{color}.loader.loader.loader::after {
+            color: @l;
+        }
+    })
 }
 
 .ui.elastic.loader.loader::before,
@@ -242,180 +237,188 @@
 .ui.loading.loading.loading.loading .input > i.icon::after,
 .ui.loading.loading.loading.loading > i.icon::after,
 .ui.loader.loader.loader::after {
-  border-color: currentColor;
+    border-color: currentColor;
 }
 .ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before {
-  color: @invertedLoaderLineColor;
+    color: @invertedLoaderLineColor;
 }
 .ui.elastic.basic.loading.button::before,
 .ui.elastic.basic.loading.button::after {
-  color: @loaderLineColor;
+    color: @loaderLineColor;
 }
 .ui.double.loading.loading.loading.loading.button::after {
-  border-bottom-color: currentColor;
+    border-bottom-color: currentColor;
 }
 
 & when (@variationLoaderInline) {
-  /*-------------------
-         Inline
-  --------------------*/
-
-  .ui.inline.loader {
-    position: relative;
-    vertical-align: @inlineVerticalAlign;
-    margin: @inlineMargin;
-    left: 0;
-    top: 0;
-    transform: none;
-  }
+    /* -------------------
+           Inline
+    -------------------- */
+
+    .ui.inline.loader {
+        position: relative;
+        vertical-align: @inlineVerticalAlign;
+        margin: @inlineMargin;
+        left: 0;
+        top: 0;
+        transform: none;
+    }
 
-  .ui.inline.loader.active,
-  .ui.inline.loader.visible {
-    display: inline-block;
-  }
+    .ui.inline.loader.active,
+    .ui.inline.loader.visible {
+        display: inline-block;
+    }
 
-  /* Centered Inline */
-  .ui.centered.inline.loader.active,
-  .ui.centered.inline.loader.visible {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
+    /* Centered Inline */
+    .ui.centered.inline.loader.active,
+    .ui.centered.inline.loader.visible {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
 .ui.loading.loading.loading.loading.loading.loading::after,
 .ui.loading.loading.loading.loading.loading.loading .input > i.icon::after,
 .ui.loading.loading.loading.loading.loading.loading > i.icon::after,
 .ui.loader.loader.loader.loader.loader::after {
-  border-left-color:transparent;
-  border-right-color:transparent;
+    border-left-color: transparent;
+    border-right-color: transparent;
 }
 .ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after,
 .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after,
 .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after,
 .ui.loader.loader.loader.loader.loader.loader:not(.double)::after {
-  border-bottom-color: transparent;
+    border-bottom-color: transparent;
 }
 .ui.loading.loading.loading.loading.loading.loading.card::after,
 .ui.loading.loading.loading.loading.loading.loading.segments::after,
 .ui.loading.loading.loading.loading.loading.loading.segment::after,
 .ui.loading.loading.loading.loading.loading.loading.form::after {
-  border-left-color:@loaderFillColor;
-  border-right-color:@loaderFillColor;
+    border-left-color: @loaderFillColor;
+    border-right-color: @loaderFillColor;
 }
 .ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after,
 .ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after,
 .ui.loading.loading.loading.loading.loading.loading.segment:not(.double)::after,
 .ui.loading.loading.loading.loading.loading.loading.form:not(.double)::after {
-  border-bottom-color: @loaderFillColor;
+    border-bottom-color: @loaderFillColor;
 }
 
 & when (@variationLoaderElastic) {
-  /*-------------------
-         Elastic
-  --------------------*/
+    /* -------------------
+           Elastic
+    -------------------- */
 
-  .ui.dimmer > .ui.elastic.loader {
-    color: @invertedLoaderLineColor;
-  }
-  .ui.inverted.dimmer > .ui.elastic.loader {
-    color: @loaderLineColor;
-  }
-  .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-  .ui.elastic.loading.loading .input > i.icon::after,
-  .ui.elastic.loading.loading > i.icon::after,
-  .ui.elastic.loader.loader::after {
-    animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
-    animation-delay: 0.3s;
-  }
-  .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-  .ui.elastic.loading.loading.loading .input > i.icon::before,
-  .ui.elastic.loading.loading.loading > i.icon::before,
-  .ui.elastic.loader.loader::before {
-    animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
-    -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
-    border-right-color: transparent;
-  }
-  & when (@variationLoaderInline) {
-    .ui.elastic.inline.loader:empty {
-      animation: loader 8s infinite linear;
+    .ui.dimmer > .ui.elastic.loader {
+        color: @invertedLoaderLineColor;
     }
-  }
-  & when (@variationLoaderSpeeds) {
-    .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-    .ui.slow.elastic.loading.loading .input > i.icon::after,
-    .ui.slow.elastic.loading.loading > i.icon::after,
-    .ui.slow.elastic.loader.loader::after {
-      animation-duration: 1.5s;
-      animation-delay: 0.45s;
+    .ui.inverted.dimmer > .ui.elastic.loader {
+        color: @loaderLineColor;
     }
-    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-    .ui.slow.elastic.loading.loading.loading .input > i.icon::before,
-    .ui.slow.elastic.loading.loading.loading > i.icon::before,
-    .ui.slow.elastic.loader.loader::before {
-      animation-duration: 1.5s;
+    .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+    .ui.elastic.loading.loading .input > i.icon::after,
+    .ui.elastic.loading.loading > i.icon::after,
+    .ui.elastic.loader.loader::after {
+        animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
+        animation-delay: 0.3s;
     }
-    .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-    .ui.fast.elastic.loading.loading .input > i.icon::after,
-    .ui.fast.elastic.loading.loading > i.icon::after,
-    .ui.fast.elastic.loader.loader::after {
-      animation-duration: 0.66s;
-      animation-delay: 0.20s;
+    .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+    .ui.elastic.loading.loading.loading .input > i.icon::before,
+    .ui.elastic.loading.loading.loading > i.icon::before,
+    .ui.elastic.loader.loader::before {
+        animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
+        -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
+        border-right-color: transparent;
     }
-    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-    .ui.fast.elastic.loading.loading.loading .input > i.icon::before,
-    .ui.fast.elastic.loading.loading.loading > i.icon::before,
-    .ui.fast.elastic.loader.loader::before {
-      animation-duration: 0.66s;
+    & when (@variationLoaderInline) {
+        .ui.elastic.inline.loader:empty {
+            animation: loader 8s infinite linear;
+        }
     }
-  }
-  @keyframes elastic-loader {
-    0%, 1% {
-      border-left-color: transparent;
-      border-bottom-color: transparent
+    & when (@variationLoaderSpeeds) {
+        .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+        .ui.slow.elastic.loading.loading .input > i.icon::after,
+        .ui.slow.elastic.loading.loading > i.icon::after,
+        .ui.slow.elastic.loader.loader::after {
+            animation-duration: 1.5s;
+            animation-delay: 0.45s;
+        }
+        .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+        .ui.slow.elastic.loading.loading.loading .input > i.icon::before,
+        .ui.slow.elastic.loading.loading.loading > i.icon::before,
+        .ui.slow.elastic.loader.loader::before {
+            animation-duration: 1.5s;
+        }
+        .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+        .ui.fast.elastic.loading.loading .input > i.icon::after,
+        .ui.fast.elastic.loading.loading > i.icon::after,
+        .ui.fast.elastic.loader.loader::after {
+            animation-duration: 0.66s;
+            animation-delay: 0.20s;
+        }
+        .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+        .ui.fast.elastic.loading.loading.loading .input > i.icon::before,
+        .ui.fast.elastic.loading.loading.loading > i.icon::before,
+        .ui.fast.elastic.loader.loader::before {
+            animation-duration: 0.66s;
+        }
     }
-    1.1%, 50% {
-      border-left-color: inherit;
+    @keyframes elastic-loader {
+        0%,
+        1% {
+            border-left-color: transparent;
+            border-bottom-color: transparent
+        }
+        1.1%,
+        50% {
+            border-left-color: inherit;
+        }
+        10%,
+        35.1% {
+            border-bottom-color: transparent;
+        }
+        10.1%,
+        35% {
+            border-bottom-color: inherit;
+        }
+        50.1% {
+            border-left-color: transparent;
+        }
+        100% {
+            border-left-color: transparent;
+            border-bottom-color: transparent;
+            transform: rotate(360deg);
+        }
     }
-    10%, 35.1%{
-      border-bottom-color: transparent;
-    }
-    10.1%, 35%{
-      border-bottom-color: inherit;
-    }
-    50.1%{
-      border-left-color: transparent;
-    }
-    100% {
-      border-left-color: transparent;
-      border-bottom-color: transparent;
-      transform: rotate(360deg);
-    }
-  }
 
-  @keyframes currentcolor-elastic-loader {
-    0%, 1% {
-      border-left-color: transparent;
-      border-bottom-color: transparent
-    }
-    1.1%, 50% {
-      border-left-color: currentColor;
-    }
-    10%, 35.1%{
-      border-bottom-color: transparent;
-    }
-    10.1%, 35%{
-      border-bottom-color: currentColor;
-    }
-    50.1%{
-      border-left-color: transparent;
-    }
-    100% {
-      border-left-color: transparent;
-      border-bottom-color: transparent;
-      transform: rotate(360deg);
+    @keyframes currentcolor-elastic-loader {
+        0%,
+        1% {
+            border-left-color: transparent;
+            border-bottom-color: transparent
+        }
+        1.1%,
+        50% {
+            border-left-color: currentColor;
+        }
+        10%,
+        35.1% {
+            border-bottom-color: transparent;
+        }
+        10.1%,
+        35% {
+            border-bottom-color: currentColor;
+        }
+        50.1% {
+            border-left-color: transparent;
+        }
+        100% {
+            border-left-color: transparent;
+            border-bottom-color: transparent;
+            transform: rotate(360deg);
+        }
     }
-  }
 }
 
 .loadUIOverrides();