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

package/src/definitions/elements/placeholder.less

@@ -7,53 +7,54 @@
  * https://opensource.org/licenses/MIT
  *
  */
+
 /*******************************
             Theme
 *******************************/
 
-@type    : 'element';
+@type : 'element';
 @element : 'placeholder';
 
 @import (multiple) '../../theme.config';
 
-/*-------------------
+/* -------------------
       Content
---------------------*/
+-------------------- */
 
 .ui.placeholder {
-  position: static;
-  overflow: hidden;
-  animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
-  animation-iteration-count: infinite;
-  background-color: @white;
-  background-image: @placeholderLoadingGradient;
-  background-size: @placeholderLoadingGradientWidth 100%;
-  max-width: @placeholderMaxWidth;
+    position: static;
+    overflow: hidden;
+    animation: placeholderShimmer @placeholderLoadingAnimationDuration linear;
+    animation-iteration-count: infinite;
+    background-color: @white;
+    background-image: @placeholderLoadingGradient;
+    background-size: @placeholderLoadingGradientWidth 100%;
+    max-width: @placeholderMaxWidth;
 }
 
-@keyframes placeholderShimmer{
-  0% {
-    background-position: -@placeholderLoadingGradientWidth 0
-  }
-  100% {
-    background-position: @placeholderLoadingGradientWidth 0
-  }
+@keyframes placeholderShimmer {
+    0% {
+        background-position: -@placeholderLoadingGradientWidth 0
+    }
+    100% {
+        background-position: @placeholderLoadingGradientWidth 0
+    }
 }
 
 .ui.placeholder + .ui.placeholder {
-  margin-top: @consecutivePlaceholderSpacing;
+    margin-top: @consecutivePlaceholderSpacing;
 }
 .ui.placeholder + .ui.placeholder {
-  animation-delay: @placeholderAnimationInterval;
+    animation-delay: @placeholderAnimationInterval;
 }
 .ui.placeholder + .ui.placeholder + .ui.placeholder {
-  animation-delay: (@placeholderAnimationInterval * 2);
+    animation-delay: (@placeholderAnimationInterval * 2);
 }
 .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
-  animation-delay: (@placeholderAnimationInterval * 3);
+    animation-delay: (@placeholderAnimationInterval * 3);
 }
 .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
-  animation-delay: (@placeholderAnimationInterval * 4);
+    animation-delay: (@placeholderAnimationInterval * 4);
 }
 
 .ui.placeholder,
@@ -61,188 +62,190 @@
 .ui.placeholder .image.header::after,
 .ui.placeholder .line,
 .ui.placeholder .line::after {
-  background-color: @white;
+    background-color: @white;
 }
 
 .ui.placeholder.hidden {
-  display:none;
+    display: none;
 }
 
 & when (@variationPlaceholderImage) {
-  /* Image */
-  .ui.placeholder .image:not(.header):not(.ui):not(.icon) {
-    height: @placeholderImageHeight;
-  }
-  .ui.placeholder .square.image:not(.header) {
-    height: 0;
-    overflow: hidden;
-    /* 1/1 aspect ratio */
-    padding-top: 100%;
-  }
-  .ui.placeholder .rectangular.image:not(.header) {
-    height: 0;
-    overflow: hidden;
-    /* 4/3 aspect ratio */
-    padding-top: 75%;
-  }
+    /* Image */
+    .ui.placeholder .image:not(.header):not(.ui):not(.icon) {
+        height: @placeholderImageHeight;
+    }
+    .ui.placeholder .square.image:not(.header) {
+        height: 0;
+        overflow: hidden;
+
+        /* 1/1 aspect ratio */
+        padding-top: 100%;
+    }
+    .ui.placeholder .rectangular.image:not(.header) {
+        height: 0;
+        overflow: hidden;
+
+        /* 4/3 aspect ratio */
+        padding-top: 75%;
+    }
 }
 
 & when (@variationPlaceholderLine) or (@variationPlaceholderHeader) {
-  /* Lines */
-  .ui.placeholder .line {
-    position: relative;
-    height: @placeholderLineMargin;
-  }
-  .ui.placeholder .line::before,
-  .ui.placeholder .line::after {
-    top: 100%;
-    position: absolute;
-    content: '';
-    background-color: inherit;
-  }
-  .ui.placeholder .line::before {
-    left: 0;
-  }
-  .ui.placeholder .line::after {
-    right: 0;
-  }
-
-  /* Any Lines */
-  .ui.placeholder .line {
-    margin-bottom: @placeholderLineHeight;
-  }
-  .ui.placeholder .line::before,
-  .ui.placeholder .line::after {
-    height: @placeholderLineHeight;
-  }
-  .ui.placeholder .line:not(:first-child) {
-    margin-top: @placeholderLineHeight;
-  }
-
-  /* Line Outdent */
-  .ui.placeholder .line:nth-child(1)::after {
-    width: @placeholderLineOneOutdent;
-  }
-  .ui.placeholder .line:nth-child(2)::after {
-    width: @placeholderLineTwoOutdent;
-  }
-  .ui.placeholder .line:nth-child(3)::after {
-    width: @placeholderLineThreeOutdent;
-  }
-  .ui.placeholder .line:nth-child(4)::after {
-    width: @placeholderLineFourOutdent;
-  }
-  .ui.placeholder .line:nth-child(5)::after {
-    width: @placeholderLineFiveOutdent;
-  }
+    /* Lines */
+    .ui.placeholder .line {
+        position: relative;
+        height: @placeholderLineMargin;
+    }
+    .ui.placeholder .line::before,
+    .ui.placeholder .line::after {
+        top: 100%;
+        position: absolute;
+        content: '';
+        background-color: inherit;
+    }
+    .ui.placeholder .line::before {
+        left: 0;
+    }
+    .ui.placeholder .line::after {
+        right: 0;
+    }
+
+    /* Any Lines */
+    .ui.placeholder .line {
+        margin-bottom: @placeholderLineHeight;
+    }
+    .ui.placeholder .line::before,
+    .ui.placeholder .line::after {
+        height: @placeholderLineHeight;
+    }
+    .ui.placeholder .line:not(:first-child) {
+        margin-top: @placeholderLineHeight;
+    }
+
+    /* Line Outdent */
+    .ui.placeholder .line:nth-child(1)::after {
+        width: @placeholderLineOneOutdent;
+    }
+    .ui.placeholder .line:nth-child(2)::after {
+        width: @placeholderLineTwoOutdent;
+    }
+    .ui.placeholder .line:nth-child(3)::after {
+        width: @placeholderLineThreeOutdent;
+    }
+    .ui.placeholder .line:nth-child(4)::after {
+        width: @placeholderLineFourOutdent;
+    }
+    .ui.placeholder .line:nth-child(5)::after {
+        width: @placeholderLineFiveOutdent;
+    }
 }
 
 & when (@variationPlaceholderHeader) {
-  /* Header Image + 2 Lines */
-  .ui.placeholder .header {
-    position: relative;
-    overflow: hidden;
-  }
-  /* Header Line 1 & 2*/
-  .ui.placeholder .header .line {
-    margin-bottom: @placeholderHeaderLineHeight;
-  }
-  .ui.placeholder .header .line::before,
-  .ui.placeholder .header .line::after {
-    height: @placeholderHeaderLineHeight;
-  }
-  .ui.placeholder .header .line:not(:first-child) {
-    margin-top: @placeholderHeaderLineHeight;
-  }
-  .ui.placeholder .header .line::after {
-    width: @placeholderHeaderLineOneOutdent;
-  }
-  .ui.placeholder .header .line:nth-child(2)::after {
-    width: @placeholderHeaderLineTwoOutdent;
-  }
-
-  & when (@variationPlaceholderImage) {
-    /* Image Header */
-    .ui.placeholder .image.header .line {
-      margin-left: @placeholderImageWidth;
-    }
-    .ui.placeholder .image.header .line::before {
-      width: @placeholderImageTextIndent;
-    }
-    .ui.placeholder .image.header::after {
-      display: block;
-      height: @placeholderLineMargin;
-      content: '';
-      margin-left: @placeholderImageWidth;
-    }
-  }
+    /* Header Image + 2 Lines */
+    .ui.placeholder .header {
+        position: relative;
+        overflow: hidden;
+    }
+
+    /* Header Line 1 & 2 */
+    .ui.placeholder .header .line {
+        margin-bottom: @placeholderHeaderLineHeight;
+    }
+    .ui.placeholder .header .line::before,
+    .ui.placeholder .header .line::after {
+        height: @placeholderHeaderLineHeight;
+    }
+    .ui.placeholder .header .line:not(:first-child) {
+        margin-top: @placeholderHeaderLineHeight;
+    }
+    .ui.placeholder .header .line::after {
+        width: @placeholderHeaderLineOneOutdent;
+    }
+    .ui.placeholder .header .line:nth-child(2)::after {
+        width: @placeholderHeaderLineTwoOutdent;
+    }
+
+    & when (@variationPlaceholderImage) {
+        /* Image Header */
+        .ui.placeholder .image.header .line {
+            margin-left: @placeholderImageWidth;
+        }
+        .ui.placeholder .image.header .line::before {
+            width: @placeholderImageTextIndent;
+        }
+        .ui.placeholder .image.header::after {
+            display: block;
+            height: @placeholderLineMargin;
+            content: '';
+            margin-left: @placeholderImageWidth;
+        }
+    }
 }
 
 /* Spacing */
 .ui.placeholder .image .line:first-child,
 .ui.placeholder .paragraph .line:first-child,
 .ui.placeholder .header .line:first-child {
-  height: 0.01px;
+    height: 0.01px;
 }
 .ui.placeholder .image:not(:first-child)::before,
 .ui.placeholder .paragraph:not(:first-child)::before,
 .ui.placeholder .header:not(:first-child)::before {
-  height: @placeholderSpacing;
-  content: '';
-  display: block;
+    height: @placeholderSpacing;
+    content: '';
+    display: block;
 }
 
 & when (@variationPlaceholderInverted) {
-  /* Inverted Content Loader */
-  .ui.inverted.placeholder {
-    background-image: @placeholderInvertedLoadingGradient;
-  }
-  .ui.inverted.placeholder,
-  .ui.inverted.placeholder > ::before,
-  .ui.inverted.placeholder .image.header::after,
-  .ui.inverted.placeholder .line,
-  .ui.inverted.placeholder .line::after {
-    background-color: @black;
-  }
+    /* Inverted Content Loader */
+    .ui.inverted.placeholder {
+        background-image: @placeholderInvertedLoadingGradient;
+    }
+    .ui.inverted.placeholder,
+    .ui.inverted.placeholder > ::before,
+    .ui.inverted.placeholder .image.header::after,
+    .ui.inverted.placeholder .line,
+    .ui.inverted.placeholder .line::after {
+        background-color: @black;
+    }
 }
 
 /*******************************
             Variations
 *******************************/
 
-
-/*-------------------
+/* -------------------
         Sizes
---------------------*/
+-------------------- */
 & when (@variationPlaceholderLengths) {
-  .ui.placeholder .full.line.line.line::after {
-    width: @placeholderFullLineOutdent;
-  }
-  .ui.placeholder .very.long.line.line.line::after {
-    width: @placeholderVeryLongLineOutdent;
-  }
-  .ui.placeholder .long.line.line.line::after {
-    width: @placeholderLongLineOutdent;
-  }
-  .ui.placeholder .medium.line.line.line::after {
-    width: @placeholderMediumLineOutdent;
-  }
-  .ui.placeholder .short.line.line.line::after {
-    width: @placeholderShortLineOutdent;
-  }
-  .ui.placeholder .very.short.line.line.line::after {
-    width: @placeholderVeryShortLineOutdent;
-  }
+    .ui.placeholder .full.line.line.line::after {
+        width: @placeholderFullLineOutdent;
+    }
+    .ui.placeholder .very.long.line.line.line::after {
+        width: @placeholderVeryLongLineOutdent;
+    }
+    .ui.placeholder .long.line.line.line::after {
+        width: @placeholderLongLineOutdent;
+    }
+    .ui.placeholder .medium.line.line.line::after {
+        width: @placeholderMediumLineOutdent;
+    }
+    .ui.placeholder .short.line.line.line::after {
+        width: @placeholderShortLineOutdent;
+    }
+    .ui.placeholder .very.short.line.line.line::after {
+        width: @placeholderVeryShortLineOutdent;
+    }
 }
 
 & when (@variationPlaceholderFluid) {
-  /*-------------------
-          Fluid
-  --------------------*/
+    /* -------------------
+            Fluid
+    -------------------- */
 
-  .ui.fluid.placeholder {
-    max-width: none;
-  }
+    .ui.fluid.placeholder {
+        max-width: none;
+    }
 }
 
 .loadUIOverrides();

package/src/definitions/elements/rail.less

@@ -12,7 +12,7 @@
             Theme
 *******************************/
 
-@type    : 'element';
+@type : 'element';
 @element : 'rail';
 
 @import (multiple) '../../theme.config';
@@ -22,24 +22,24 @@
 *******************************/
 
 .ui.rail {
-  position: absolute;
-  top: 0;
-  width: @width;
-  height: @height;
+    position: absolute;
+    top: 0;
+    width: @width;
+    height: @height;
 }
 
 .ui.left.rail {
-  left: auto;
-  right: 100%;
-  padding: 0 @splitDistance 0 0;
-  margin: 0 @splitDistance 0 0;
+    left: auto;
+    right: 100%;
+    padding: 0 @splitDistance 0 0;
+    margin: 0 @splitDistance 0 0;
 }
 
 .ui.right.rail {
-  left: 100%;
-  right: auto;
-  padding: 0 0 0 @splitDistance;
-  margin: 0 0 0 @splitDistance;
+    left: 100%;
+    right: auto;
+    padding: 0 0 0 @splitDistance;
+    margin: 0 0 0 @splitDistance;
 }
 
 /*******************************
@@ -47,101 +47,101 @@
 *******************************/
 
 & when (@variationRailInternal) {
-  /*--------------
-       Internal
-  ---------------*/
-
-  .ui.left.internal.rail {
-    left: 0;
-    right: auto;
-    padding: 0 0 0 @splitDistance;
-    margin: 0 0 0 @splitDistance;
-  }
+    /* --------------
+         Internal
+    --------------- */
+
+    .ui.left.internal.rail {
+        left: 0;
+        right: auto;
+        padding: 0 0 0 @splitDistance;
+        margin: 0 0 0 @splitDistance;
+    }
 
-  .ui.right.internal.rail {
-    left: auto;
-    right: 0;
-    padding: 0 @splitDistance 0 0;
-    margin: 0 @splitDistance 0 0;
-  }
+    .ui.right.internal.rail {
+        left: auto;
+        right: 0;
+        padding: 0 @splitDistance 0 0;
+        margin: 0 @splitDistance 0 0;
+    }
 }
 
 & when (@variationRailDividing) {
-  /*--------------
-      Dividing
-  ---------------*/
-
-  .ui.dividing.rail {
-    width: @dividingWidth;
-  }
-  .ui.left.dividing.rail {
-    padding: 0 @splitDividingDistance 0 0;
-    margin: 0 @splitDividingDistance 0 0;
-    border-right: @dividingBorder;
-  }
-  .ui.right.dividing.rail {
-    border-left: @dividingBorder;
-    padding: 0 0 0 @splitDividingDistance;
-    margin: 0 0 0 @splitDividingDistance;
-  }
+    /* --------------
+        Dividing
+    --------------- */
+
+    .ui.dividing.rail {
+        width: @dividingWidth;
+    }
+    .ui.left.dividing.rail {
+        padding: 0 @splitDividingDistance 0 0;
+        margin: 0 @splitDividingDistance 0 0;
+        border-right: @dividingBorder;
+    }
+    .ui.right.dividing.rail {
+        border-left: @dividingBorder;
+        padding: 0 0 0 @splitDividingDistance;
+        margin: 0 0 0 @splitDividingDistance;
+    }
 }
 
 & when (@variationRailDistance) {
-  /*--------------
-      Distance
-  ---------------*/
-
-  .ui.close.rail {
-    width: @closeWidth;
-  }
-  .ui.close.left.rail {
-    padding: 0 @splitCloseDistance 0 0;
-    margin: 0 @splitCloseDistance 0 0;
-  }
-  .ui.close.right.rail {
-    padding: 0 0 0 @splitCloseDistance;
-    margin: 0 0 0 @splitCloseDistance;
-  }
-
-  .ui.very.close.rail {
-    width: @veryCloseWidth;
-  }
-  .ui.very.close.left.rail {
-    padding: 0 @splitVeryCloseDistance 0 0;
-    margin: 0 @splitVeryCloseDistance 0 0;
-  }
-  .ui.very.close.right.rail {
-    padding: 0 0 0 @splitVeryCloseDistance;
-    margin: 0 0 0 @splitVeryCloseDistance;
-  }
+    /* --------------
+        Distance
+    --------------- */
+
+    .ui.close.rail {
+        width: @closeWidth;
+    }
+    .ui.close.left.rail {
+        padding: 0 @splitCloseDistance 0 0;
+        margin: 0 @splitCloseDistance 0 0;
+    }
+    .ui.close.right.rail {
+        padding: 0 0 0 @splitCloseDistance;
+        margin: 0 0 0 @splitCloseDistance;
+    }
+
+    .ui.very.close.rail {
+        width: @veryCloseWidth;
+    }
+    .ui.very.close.left.rail {
+        padding: 0 @splitVeryCloseDistance 0 0;
+        margin: 0 @splitVeryCloseDistance 0 0;
+    }
+    .ui.very.close.right.rail {
+        padding: 0 0 0 @splitVeryCloseDistance;
+        margin: 0 0 0 @splitVeryCloseDistance;
+    }
 }
 
 & when (@variationRailAttached) {
-  /*--------------
-      Attached
-  ---------------*/
-
-  .ui.attached.left.rail,
-  .ui.attached.right.rail {
-    padding: 0;
-    margin: 0;
-  }
+    /* --------------
+        Attached
+    --------------- */
+
+    .ui.attached.left.rail,
+    .ui.attached.right.rail {
+        padding: 0;
+        margin: 0;
+    }
 }
 
-/*--------------
+/* --------------
      Sizing
----------------*/
+--------------- */
 
 .ui.rail {
-  font-size: @medium;
+    font-size: @medium;
 }
 & when not (@variationRailSizes = false) {
-  each(@variationRailSizes, {
-    @s: @@value;
-    .ui.@{value}.rail {
-      font-size: @s;
-    }
-  })
+    each(@variationRailSizes, {
+        @s: @@value;
+        .ui.@{value}.rail {
+            font-size: @s;
+        }
+    })
 }
 
 .loadUIOverrides();