fomantic-ui 2.9.1-beta.6 → 2.9.1-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.1-beta.6+51e0c45",
+  "version": "2.9.1-beta.7+d459c42",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/collections/form.less

@@ -591,7 +591,7 @@
       border-radius: @formStates[@@state][borderRadius];
       box-shadow: @formStates[@@state][boxShadow];
     }
-    & when (@state=error) {
+    & when (@state=error) and (@variationFormInvalid) {
       .ui.form .field input:not(:placeholder-shown):invalid {
         color: @c;
         background: @bg;
@@ -760,7 +760,7 @@
   .ui.form .disabled.fields .field,
   .ui.form .disabled.field,
   .ui.form .field :disabled {
-    pointer-events: none;
+    pointer-events: @disabledPointerEvents;
     opacity: @disabledOpacity;
   }
   .ui.form .field.disabled > label,

package/src/definitions/elements/button.less

@@ -1756,101 +1756,93 @@
   })
 }
 
-.addConsequence(@consequence) {
-
-  @_backgroundColor: "@{consequence}Color";
-  @_backgroundColorHover: "@{consequence}ColorHover";
-  @_backgroundColorFocus: "@{consequence}ColorFocus";
-  @_backgroundColorDown: "@{consequence}ColorDown";
-  @_backgroundColorActive: "@{consequence}ColorActive";
-  @_textColor: "@{consequence}TextColor";
-  @_textShadow: "@{consequence}TextShadow";
-
-  /* Standard */
-  .ui.@{consequence}.buttons .button,
-  .ui.@{consequence}.button {
-    background-color: @@_backgroundColor;
-    color: @@_textColor;
-    text-shadow: @@_textShadow;
-    background-image: @coloredBackgroundImage;
-  }
-  .ui.@{consequence}.button {
-    box-shadow: @coloredBoxShadow;
-  }
-  .ui.@{consequence}.buttons .button:hover,
-  .ui.@{consequence}.button:hover {
-    background-color: @@_backgroundColorHover;
-    color: @@_textColor;
-    text-shadow: @@_textShadow;
-  }
-  .ui.@{consequence}.buttons .button:focus,
-  .ui.@{consequence}.button:focus {
-    background-color: @@_backgroundColorFocus;
-    color: @@_textColor;
-    text-shadow: @@_textShadow;
-  }
-  .ui.@{consequence}.buttons .button:active,
-  .ui.@{consequence}.button:active {
-    background-color: @@_backgroundColorDown;
-    color: @@_textColor;
-    text-shadow: @@_textShadow;
-  }
-  .ui.@{consequence}.buttons .active.button,
-  .ui.@{consequence}.buttons .active.button:active,
-  .ui.@{consequence}.active.button,
-  .ui.@{consequence}.button .active.button:active {
-    background-color: @@_backgroundColorActive;
-    color: @@_textColor;
-    text-shadow: @@_textShadow;
-  }
-  & when (@variationButtonBasic) {
-    /* Basic */
-    .ui.basic.@{consequence}.buttons .button,
-    .ui.basic.@{consequence}.button {
-      background: transparent;
-      box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset;
-      color: @@_backgroundColor;
-    }
-    .ui.basic.@{consequence}.buttons .button:hover,
-    .ui.basic.@{consequence}.button:hover {
-      background: transparent;
-      box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset;
-      color: @@_backgroundColorHover;
-    }
-    .ui.basic.@{consequence}.buttons .button:focus,
-    .ui.basic.@{consequence}.button:focus {
-      background: transparent;
-      box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset;
-      color: @@_backgroundColorHover;
-    }
-    .ui.basic.@{consequence}.buttons .active.button,
-    .ui.basic.@{consequence}.active.button {
-      background: transparent;
-      box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset;
-      color: @@_backgroundColorDown;
-    }
-    .ui.basic.@{consequence}.buttons .button:active,
-    .ui.basic.@{consequence}.button:active {
-      box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
-      color: @@_backgroundColorDown;
-    }
-    .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
-      margin-left: -@basicColoredBorderSize;
+& when not (@variationButtonConsequences = false) {
+  each(@variationButtonConsequences, {
+    @consequence: @value;
+
+    @_backgroundColor: "@{consequence}Color";
+    @_backgroundColorHover: "@{consequence}ColorHover";
+    @_backgroundColorFocus: "@{consequence}ColorFocus";
+    @_backgroundColorDown: "@{consequence}ColorDown";
+    @_backgroundColorActive: "@{consequence}ColorActive";
+    @_textColor: "@{consequence}TextColor";
+    @_textShadow: "@{consequence}TextShadow";
+
+    /* Standard */
+    .ui.@{consequence}.buttons .button,
+    .ui.@{consequence}.button {
+      background-color: @@_backgroundColor;
+      color: @@_textColor;
+      text-shadow: @@_textShadow;
+      background-image: @coloredBackgroundImage;
     }
-  }
+    .ui.@{consequence}.button {
+      box-shadow: @coloredBoxShadow;
+    }
+    .ui.@{consequence}.buttons .button:hover,
+    .ui.@{consequence}.button:hover {
+      background-color: @@_backgroundColorHover;
+      color: @@_textColor;
+      text-shadow: @@_textShadow;
+    }
+    .ui.@{consequence}.buttons .button:focus,
+    .ui.@{consequence}.button:focus {
+      background-color: @@_backgroundColorFocus;
+      color: @@_textColor;
+      text-shadow: @@_textShadow;
+    }
+    .ui.@{consequence}.buttons .button:active,
+    .ui.@{consequence}.button:active {
+      background-color: @@_backgroundColorDown;
+      color: @@_textColor;
+      text-shadow: @@_textShadow;
+    }
+    .ui.@{consequence}.buttons .active.button,
+    .ui.@{consequence}.buttons .active.button:active,
+    .ui.@{consequence}.active.button,
+    .ui.@{consequence}.button .active.button:active {
+      background-color: @@_backgroundColorActive;
+      color: @@_textColor;
+      text-shadow: @@_textShadow;
+    }
+    & when (@variationButtonBasic) {
+      /* Basic */
+      .ui.basic.@{consequence}.buttons .button,
+      .ui.basic.@{consequence}.button {
+        background: transparent;
+        box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset;
+        color: @@_backgroundColor;
+      }
+      .ui.basic.@{consequence}.buttons .button:hover,
+      .ui.basic.@{consequence}.button:hover {
+        background: transparent;
+        box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset;
+        color: @@_backgroundColorHover;
+      }
+      .ui.basic.@{consequence}.buttons .button:focus,
+      .ui.basic.@{consequence}.button:focus {
+        background: transparent;
+        box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset;
+        color: @@_backgroundColorHover;
+      }
+      .ui.basic.@{consequence}.buttons .active.button,
+      .ui.basic.@{consequence}.active.button {
+        background: transparent;
+        box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset;
+        color: @@_backgroundColorDown;
+      }
+      .ui.basic.@{consequence}.buttons .button:active,
+      .ui.basic.@{consequence}.button:active {
+        box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
+        color: @@_backgroundColorDown;
+      }
+      .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
+        margin-left: -@basicColoredBorderSize;
+      }
+    }
+  })
 }
 
-/*---------------
-    Positive
-----------------*/
-
-.addConsequence(positive);
-
-/*---------------
-     Negative
-----------------*/
-
-.addConsequence(negative);
 
 & when (@variationButtonGroups) {
   /*******************************

package/src/definitions/elements/input.less

@@ -97,7 +97,7 @@
 
   .ui.disabled.input > input,
   .ui.input:not(.disabled) input[disabled] {
-    pointer-events: none;
+    pointer-events: @disabledPointerEvents;
   }
 }
 
@@ -191,7 +191,7 @@
       color: @formStates[@@state][color];
       box-shadow: @formStates[@@state][boxShadow];
     }
-    & when (@state=error) {
+    & when (@state=error) and (@variationInputInvalid) {
       .ui.input > input:not(:placeholder-shown):invalid {
         background-color: @formStates[@@state][background];
         border-color: @formStates[@@state][borderColor];
@@ -718,12 +718,13 @@
       color: @fileButtonTextColor;
     }
   }
-
-  .ui.form .field input[type="file"]:required:invalid,
-  .ui.file.input input[type="file"]:required:invalid {
-    color: @negativeTextColor;
-    background: @negativeBackgroundColor ;
-    border-color: @negativeBorderColor;
+  & when (@variationInputInvalid) {
+    .ui.form .field input[type="file"]:required:invalid,
+    .ui.file.input input[type="file"]:required:invalid {
+      color: @negativeTextColor;
+      background: @negativeBackgroundColor;
+      border-color: @negativeBorderColor;
+    }
   }
 
   input[type="file"].ui.invisible.file.input,

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

@@ -1086,6 +1086,7 @@
 --------------------*/
 
 @disabledOpacity: 0.45;
+@disabledPointerEvents: none;
 @disabledTextColor: rgba(40, 40, 40, 0.3);
 @invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
 

package/src/themes/default/globals/variation.variables

@@ -38,6 +38,7 @@
 @variationButtonWrapping: true;
 @variationButtonWrapped: true;
 @variationButtonSpaced: true;
+@variationButtonConsequences: positive, negative;
 @variationButtonSizes: @variationAllSizes;
 @variationButtonColors: @variationAllColors;
 
@@ -125,6 +126,7 @@
 @variationInputDisabled: true;
 @variationInputInverted: true;
 @variationInputStates: @variationAllStates;
+@variationInputInvalid: true;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -271,6 +273,7 @@
 @variationFormTransparent: true;
 @variationFormLoading: true;
 @variationFormStates: @variationAllStates;
+@variationFormInvalid: true;
 @variationFormRequired: true;
 @variationFormInline: true;
 @variationFormGrouped: true;