fomantic-ui 2.9.1-beta.8 → 2.9.1

package/src/semantic.less

@@ -1,15 +1,17 @@
 /*
 
-███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
-██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
-███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
-╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
-███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
-╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
+███████╗ ██████╗ ███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
+█████╗  ██║   ██║██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
+██╔══╝  ██║   ██║██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
+██║     ╚██████╔╝██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
+╚═╝      ╚═════╝ ╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
 
   Import this file into your LESS project to use Fomantic-UI without build tools
 */
 
+// stylelint-disable no-invalid-position-at-import-rule
+
 /* Global */
 & { @import "definitions/globals/reset"; }
 & { @import "definitions/globals/site"; }

package/src/theme.config.example

@@ -18,76 +18,76 @@
 */
 
 /* Global */
-@site       : 'default';
-@reset      : 'default';
+@site: 'default';
+@reset: 'default';
 
 /* Elements */
-@button     : 'default';
-@container  : 'default';
-@divider    : 'default';
-@emoji      : 'default';
-@flag       : 'default';
-@header     : 'default';
-@icon       : 'default';
-@image      : 'default';
-@input      : 'default';
-@label      : 'default';
-@list       : 'default';
-@loader     : 'default';
+@button: 'default';
+@container: 'default';
+@divider: 'default';
+@emoji: 'default';
+@flag: 'default';
+@header: 'default';
+@icon: 'default';
+@image: 'default';
+@input: 'default';
+@label: 'default';
+@list: 'default';
+@loader: 'default';
 @placeholder: 'default';
-@rail       : 'default';
-@reveal     : 'default';
-@segment    : 'default';
-@step       : 'default';
-@text       : 'default';
+@rail: 'default';
+@reveal: 'default';
+@segment: 'default';
+@step: 'default';
+@text: 'default';
 
 /* Collections */
-@breadcrumb : 'default';
-@form       : 'default';
-@grid       : 'default';
-@menu       : 'default';
-@message    : 'default';
-@table      : 'default';
+@breadcrumb: 'default';
+@form: 'default';
+@grid: 'default';
+@menu: 'default';
+@message: 'default';
+@table: 'default';
 
 /* Modules */
-@accordion  : 'default';
-@calendar   : 'default';
-@checkbox   : 'default';
-@dimmer     : 'default';
-@dropdown   : 'default';
-@embed      : 'default';
-@flyout     : 'default';
-@modal      : 'default';
-@nag        : 'default';
-@popup      : 'default';
-@progress   : 'default';
-@slider     : 'default';
-@rating     : 'default';
-@search     : 'default';
-@shape      : 'default';
-@sidebar    : 'default';
-@sticky     : 'default';
-@tab        : 'default';
-@toast      : 'default';
-@transition : 'default';
+@accordion: 'default';
+@calendar: 'default';
+@checkbox: 'default';
+@dimmer: 'default';
+@dropdown: 'default';
+@embed: 'default';
+@flyout: 'default';
+@modal: 'default';
+@nag: 'default';
+@popup: 'default';
+@progress: 'default';
+@slider: 'default';
+@rating: 'default';
+@search: 'default';
+@shape: 'default';
+@sidebar: 'default';
+@sticky: 'default';
+@tab: 'default';
+@toast: 'default';
+@transition: 'default';
 
 /* Views */
-@ad         : 'default';
-@card       : 'default';
-@comment    : 'default';
-@feed       : 'default';
-@item       : 'default';
-@statistic  : 'default';
+@ad: 'default';
+@card: 'default';
+@comment: 'default';
+@feed: 'default';
+@item: 'default';
+@statistic: 'default';
 
 /*******************************
             Folders
 *******************************/
 
 /* Path to theme packages */
-@themesFolder : 'themes';
+@themesFolder: 'themes';
 
 /* Path to site override folder */
-@siteFolder  : 'site';
+@siteFolder: 'site';
 
 
 /*******************************

package/src/theme.less

@@ -2,34 +2,35 @@
         Import Directives
 *******************************/
 
-/*------------------
+/* ------------------
        Theme
--------------------*/
+------------------- */
 
 @theme: @@element;
 
-/*--------------------
+/* --------------------
    Site Variables
----------------------*/
+--------------------- */
 
 /* Default site.variables */
 @import "@{themesFolder}/default/globals/site.variables";
 
 /* Packaged site.variables */
-@import (optional) "@{themesFolder}/@{site}/globals/site.variables";
+& when not (@site = "default") {
+    @import (optional) "@{themesFolder}/@{site}/globals/site.variables";
+}
 
 /* Component's site.variables */
-& when not (@theme = 'default') {
-  @import (optional) "@{themesFolder}/@{theme}/globals/site.variables";
+& when not (@theme = "default") {
+    @import (optional) "@{themesFolder}/@{theme}/globals/site.variables";
 }
 
 /* Site theme site.variables */
 @import (optional) "@{siteFolder}/globals/site.variables";
 
-
-/*-------------------
+/* -------------------
  Component Variables
----------------------*/
+--------------------- */
 
 /* Default */
 @import "@{themesFolder}/default/@{type}s/@{element}.variables";
@@ -40,49 +41,57 @@
 /* Site Theme */
 @import (optional) "@{siteFolder}/@{type}s/@{element}.variables";
 
-
-/*-------------------------
+/* -------------------------
     Central Color Map
--------------------------*/
+------------------------- */
 
 /* Default */
 @import "@{themesFolder}/default/globals/colors.less";
 
-/* Site Theme */
-@import (optional) "@{themesFolder}/@{site}/globals/colors.less";
+/* Packaged colors.less */
+& when not (@site = "default") {
+    @import (optional) "@{themesFolder}/@{site}/globals/colors.less";
+}
 
+/* Packaged Theme */
+& when not (@theme = "default") {
+    @import (optional) "@{themesFolder}/@{theme}/globals/colors.less";
+}
+
+/* Site Theme */
+@import (optional) "@{siteFolder}/globals/colors.less";
 
 /*******************************
              Mix-ins
 *******************************/
 
-/*------------------
+/* ------------------
        Fonts
--------------------*/
+------------------- */
 
 .loadFonts() {
-  & when (@importGoogleFonts) {
-    @import (css) url('@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}');
-  }
-  & when (@importFonts) and not (@fontName = ''){
-    each(@fonts, {
-      @font-face {
-        each(@value,{
-            @{key}: @value;
+    & when (@importGoogleFonts) {
+        @import (css) url("@{googleProtocol}fonts.googleapis.com/css2?family=@{googleFontRequest}");
+    }
+    & when (@importFonts) and not (@fontName = "") {
+        each(@fonts, {
+            @font-face {
+                each(@value, {
+                    @{key}: @value;
+                });
+            }
         });
-      }
-    })
-  }
+    }
 }
 
-/*------------------
+/* ------------------
      Overrides
--------------------*/
+------------------- */
 
 .loadUIOverrides() {
-  & when not (@theme = 'default') {
-    @import (optional) "@{themesFolder}/default/@{type}s/@{element}.overrides";
-  }
-  @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
-  @import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";
+    & when not (@theme = "default") {
+        @import (optional) "@{themesFolder}/default/@{type}s/@{element}.overrides";
+    }
+    @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
+    @import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";
 }

package/src/themes/amazon/elements/button.overrides

@@ -1,46 +1,45 @@
 .ui.button {
-  background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0);
+    background: linear-gradient(to bottom, #f7f8fa, #e7e9ec) repeat scroll 0 0 rgba(0, 0, 0, 0);
 }
 
 .ui.primary.button {
-  color: #111111;
-  border: 1px solid;
-  border-color: #C59F43 #AA8326 #957321;
+    color: #111;
+    border: 1px solid;
+    border-color: #c59f43 #aa8326 #957321;
 }
 .ui.primary.button:hover {
-  border-color: #C59F43 #AA8326 #957321;
-  color: #111111;
+    border-color: #c59f43 #aa8326 #957321;
+    color: #111;
 }
 
 .ui.secondary.button {
-  border: 1px solid;
-  border-color: #3D444C #2F353B #2C3137;
+    border: 1px solid;
+    border-color: #3d444c #2f353b #2c3137;
 }
 .ui.secondary.button:hover {
-  border-color: #32373E #24282D #212429;
+    border-color: #32373e #24282d #212429;
 }
 
-
 .ui.labeled.icon.buttons .button > .icon,
 .ui.labeled.icon.button > .icon {
-  padding-bottom: 0.48em;
-  padding-top: 0.48em;
-  position: absolute;
-  text-align: center;
-  width: 2em;
-  height: 2em;
-  top: 0.35em;
-  left: 0.4em;
-  border-radius: 3px;
+    padding-bottom: 0.48em;
+    padding-top: 0.48em;
+    position: absolute;
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    top: 0.35em;
+    left: 0.4em;
+    border-radius: 3px;
 }
 .ui.right.labeled.icon.buttons .button > .icon,
 .ui.right.labeled.icon.button > .icon {
-  left: auto;
-  right: 0.4em;
-  border-radius: 3px;
+    left: auto;
+    right: 0.4em;
+    border-radius: 3px;
 }
 
 .ui.basic.labeled.icon.buttons .button > .icon,
 .ui.basic.labeled.icon.button > .icon {
-  padding-top: 0.4em !important;
-}
+    padding-top: 0.4em !important;
+}

package/src/themes/amazon/elements/button.variables

@@ -1,48 +1,43 @@
-/*-------------------
+/* -------------------
    Button Variables
---------------------*/
+-------------------- */
 
 /* Button Variables */
 @pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
 @textTransform: none;
-@textColor: #111111;
+@textColor: #111;
 @fontWeight: normal;
 @transition:
-  opacity @defaultDuration @defaultEasing,
-  background-color @defaultDuration @defaultEasing,
-  color @defaultDuration @defaultEasing,
-  background @defaultDuration @defaultEasing
-;
+    opacity @defaultDuration @defaultEasing,
+    background-color @defaultDuration @defaultEasing,
+    color @defaultDuration @defaultEasing,
+    background @defaultDuration @defaultEasing;
 
-@hoverBackgroundColor: #E0E0E0;
+@hoverBackgroundColor: #e0e0e0;
 
 @borderRadius: 3px;
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.75em;
 
-@backgroundColor: #F7F8FA;
+@backgroundColor: #f7f8fa;
 @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
 @boxShadow:
-  0 1px 0 1px rgba(255, 255, 255, 0.3) inset,
-  0 0 0 1px #ADB2BB inset
-;
+    0 1px 0 1px rgba(255, 255, 255, 0.3) inset,
+    0 0 0 1px #adb2bb inset;
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
-@coloredBoxShadow:
-  0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset
-;
+@coloredBoxShadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
 
 @downBoxShadow:
-  0 0 0 1px #ADB2BB inset,
-  0 1px 3px rgba(0, 0, 0, 0.2) inset
-;
+    0 0 0 1px #adb2bb inset,
+    0 1px 3px rgba(0, 0, 0, 0.2) inset;
 
-@labeledIconBackgroundColor: #313A43;
-@labeledIconColor: #FFFFFF;
+@labeledIconBackgroundColor: #313a43;
+@labeledIconColor: #fff;
 @labeledIconBorder: transparent;
 
-@black: #444C55;
-@orange: #F4CC67;
+@black: #444c55;
+@orange: #f4cc67;
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
 @primaryColor: @orange;

package/src/themes/amazon/globals/site.variables

@@ -2,13 +2,13 @@
      User Global Variables
 *******************************/
 
-@pageMinWidth  : 1049px;
-@pageOverflowX : visible;
+@pageMinWidth: 1049px;
+@pageOverflowX: visible;
 
 @emSize: 13px;
-@fontSize : 13px;
-@fontName : 'Arial';
-@importGoogleFonts : false;
+@fontSize: 13px;
+@fontName: "Arial";
+@importGoogleFonts: false;
 @importFonts: false;
 
 @h1: 2.25em;
@@ -17,17 +17,17 @@
 
 @disabledOpacity: 0.3;
 
-@black: #444C55;
-@orange: #FDE07B;
+@black: #444c55;
+@orange: #fde07b;
 
-@linkColor: #0066C0;
-@linkHoverColor: #C45500;
+@linkColor: #0066c0;
+@linkHoverColor: #c45500;
 @linkHoverUnderline: underline;
 
 @borderColor: rgba(0, 0, 0, 0.13);
-@solidBorderColor: #DDDDDD;
+@solidBorderColor: #ddd;
 @internalBorderColor: rgba(0, 0, 0, 0.06);
-@selectedBorderColor: #51A7E8;
+@selectedBorderColor: #51a7e8;
 
 /* Breakpoints */
 @largeMonitorBreakpoint: 1049px;
@@ -35,10 +35,9 @@
 @tabletBreakpoint: @largeMonitorBreakpoint;
 
 /* Colors */
-@blue: #80A6CD;
-@green: #60B044;
-@orange: #D26911;
+@blue: #80a6cd;
+@green: #60b044;
+@orange: #d26911;
 
-
-@infoBackgroundColor: #E6F1F6;
-@infoTextColor: #4E575B;
+@infoBackgroundColor: #e6f1f6;
+@infoTextColor: #4e575b;

package/src/themes/basic/collections/table.overrides

@@ -1,4 +1,3 @@
 /*******************************
            Overrides
 *******************************/
-

package/src/themes/basic/collections/table.variables

@@ -1,6 +1,6 @@
-/*-------------------
+/* -------------------
    Table Variables
---------------------*/
+-------------------- */
 
 @headerBackground: @white;
 @footerBackground: @white;
@@ -8,4 +8,4 @@
 @cellVerticalPadding: 1em;
 @cellHorizontalPadding: 1em;
 
-@stateMarkerWidth: 1px;
+@stateMarkerWidth: 1px;

package/src/themes/basic/elements/button.overrides

@@ -1,4 +1,3 @@
 /*******************************
            Overrides
 *******************************/
-

package/src/themes/basic/elements/button.variables

@@ -1,35 +1,35 @@
-/*-------------------
+/* -------------------
    Button Variables
---------------------*/
+-------------------- */
 
 /* Button Variables */
 @textTransform: none;
 @fontWeight: @normal;
-@textColor: #333333;
+@textColor: #333;
 
-@primaryColor: #333333;
+@primaryColor: #333;
 
 @borderRadius: 0.25em;
 
-@backgroundColor: #EEEEEE;
+@backgroundColor: #eee;
 @backgroundImage: none;
 @boxShadow: none;
 
-@hoverBackgroundColor: #DDDDDD;
+@hoverBackgroundColor: #ddd;
 @hoverBackgroundImage: none;
 @hoverBoxShadow: none;
 
-@downBackgroundColor: #D0D0D0;
+@downBackgroundColor: #d0d0d0;
 @downBackgroundImage: none;
 @downBoxShadow: none;
 
-@activeBackgroundColor: #CCCCCC;
+@activeBackgroundColor: #ccc;
 @activeBackgroundImage: none;
 @activeBoxShadow: none;
 
 @verticalBoxShadow: none;
 
-@loadingBackgroundColor: #F0F0F0;
+@loadingBackgroundColor: #f0f0f0;
 
 @labeledIconLeftShadow: none;
 @labeledIconRightShadow: none;