fomantic-ui 2.9.0-beta.170 → 2.9.0-beta.174

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.170",
+  "version": "2.9.0-beta.174",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/api.js

@@ -74,6 +74,7 @@ $.api = $.fn.api = function(parameters) {
         url,
         data,
         requestStartTime,
+        originalData,
 
         // standard module
         element         = this,
@@ -86,6 +87,7 @@ $.api = $.fn.api = function(parameters) {
 
         initialize: function() {
           if(!methodInvoked) {
+            originalData = settings.data;
             module.bind.events();
           }
           module.instantiate();
@@ -197,7 +199,7 @@ $.api = $.fn.api = function(parameters) {
 
           // Add form content
           if(settings.serializeForm) {
-            settings.data = module.add.formData(settings.data);
+            settings.data = module.add.formData(originalData || settings.data);
           }
 
           // call beforesend and get any settings changes
@@ -428,7 +430,7 @@ $.api = $.fn.api = function(parameters) {
               formData = {},
               hasOtherData
             ;
-            data         = data || settings.data;
+            data         = data || originalData || settings.data;
             hasOtherData = $.isPlainObject(data);
 
             $.each($form.serializeArray(), function (i, element) {

package/src/definitions/elements/input.less

@@ -300,8 +300,8 @@
   .ui.icon.input > i.icon:not(.link) {
     pointer-events: none;
   }
-  .ui.ui.ui.ui.icon.input > textarea,
-  .ui.ui.ui.ui.icon.input > input {
+  .ui.ui.ui.ui.icon.input:not(.corner) > textarea,
+  .ui.ui.ui.ui.icon.input:not(.corner) > input {
     padding-right: @iconMargin;
   }
 
@@ -332,9 +332,12 @@
     right: auto;
     left: @circularIconHorizontalOffset;
   }
-  .ui.ui.ui.ui[class*="left icon"].input > textarea,
-  .ui.ui.ui.ui[class*="left icon"].input > input {
+  .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > textarea,
+  .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input {
     padding-left: @iconMargin;
+  }
+  .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea,
+  .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input {
     padding-right: @horizontalPadding;
   }
 
@@ -401,31 +404,94 @@
   }
 
   /* Spacing with corner label */
-  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
-  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
-    padding-right: @labeledMargin !important;
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input {
+    padding-right: @labeledMargin;
   }
+  .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown,
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
-    padding-right: @labeledIconInputMargin !important;
+    padding-right: @labeledIconInputMargin;
   }
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
     margin-right: @labeledIconMargin;
   }
 
   /* Left Labeled */
-  .ui[class*="left corner labeled"].labeled.input > textarea,
-  .ui[class*="left corner labeled"].labeled.input > input {
-    padding-left: @labeledMargin !important;
+  .ui[class*="left icon"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > textarea,
+  .ui[class*="left corner labeled"].input > input {
+    padding-left: @labeledMargin;
   }
   & when (@variationInputIcon) {
-    .ui[class*="left corner labeled"].icon.input > textarea,
-    .ui[class*="left corner labeled"].icon.input > input {
-      padding-left: @labeledIconInputMargin !important;
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown,
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea,
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input {
+      padding-right: @labeledIconInputMargin;
+    }
+    .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown,
+    .ui[class*="left corner labeled"][class*="left icon"].input > textarea,
+    .ui[class*="left corner labeled"][class*="left icon"].input > input {
+      padding-left: @labeledAndIconMargin;
     }
     .ui[class*="left corner labeled"].icon.input > i.icon {
       margin-left: @labeledIconMargin;
     }
+    .ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input {
+      padding-right: @labeledMargin;
+    }
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input {
+      padding-right: @labeledMargin * 2;
+    }
+  }
+
+  .ui[class*="left icon"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > .ui.dropdown {
+    & > .search {
+      padding-left: @labeledMargin;
+    }
+    & > .menu {
+      padding-left: @labeledIconMargin;
+      & > .item {
+        padding-left: @labeledMargin;
+        margin-left: -@labeledIconMargin;
+      }
+    }
+  }
+  .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown {
+    & > .search {
+      padding-left: @labeledAndIconMargin;
+    }
+    & > .menu > .item {
+      padding-left: @labeledAndIconMargin;
+    }
+  }
+  .ui.icon.input:not([class*="left icon"]) > .ui.dropdown,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown {
+    & > .search {
+      padding-right: @labeledMargin + @labeledIconInputMargin;
+    }
+    & > .remove.icon,
+      > .dropdown.icon  {
+      padding-right: @labeledMargin;
+    }
+  }
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown {
+    & > .search {
+      padding-right: @labeledAndIconMargin + @labeledIconInputMargin;
+    }
+    & > .remove.icon,
+    > .dropdown.icon  {
+      padding-right: @labeledAndIconMargin;
+    }
+  }
+  .ui.icon.input > .ui.visible.dropdown ~ i.icon,
+  .ui.icon.input > .ui.active.dropdown ~ i.icon,
+  .ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label,
+  .ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label {
+    z-index: @labeledDropdownZIndex;
   }
 }
 & when (@variationInputIcon) {

package/src/definitions/elements/segment.less

@@ -438,10 +438,10 @@
       flex-direction: row;
       background-color: transparent;
       padding: 0;
-      box-shadow: @boxShadow;
-      margin: @margin;
-      border-radius: @borderRadius;
-      border: @border;
+      box-shadow: @groupedBoxShadow;
+      margin: @groupedMargin;
+      border-radius: @groupedBorderRadius;
+      border: @groupedBorder;
     }
     .ui.stackable.horizontal.segments {
       flex-wrap: wrap;

package/src/definitions/modules/dropdown.less

@@ -128,7 +128,7 @@
   font-size: @itemFontSize;
   color: @itemColor;
 
-  padding: @itemPadding !important;
+  padding: @itemPadding;
   text-transform: @itemTextTransform;
   font-weight: @itemFontWeight;
   box-shadow: @itemBoxShadow;
@@ -562,7 +562,7 @@ select.ui.dropdown {
   /* Menu Item */
   .ui.selection.dropdown .menu > .item {
     border-top: @selectionItemDivider;
-    padding: @selectionItemPadding !important;
+    padding: @selectionItemPadding;
     white-space: normal;
     word-wrap: normal;
   }

package/src/themes/bookish/elements/header.overrides

@@ -2,7 +2,7 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Karma);
+@import (css) url('https://fonts.googleapis.com/css2?family=Karma');
 
 h1.ui.header,
 .ui.huge.header {

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

@@ -2,7 +2,7 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
+@import (css) url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');
 
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {

package/src/themes/chubby/elements/header.overrides

@@ -2,4 +2,4 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
+@import (css) url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');

package/src/themes/default/elements/input.variables

@@ -60,8 +60,11 @@
 
 @labeledMargin: 2.5em;
 @labeledIconInputMargin: 3.25em;
+@labeledAndIconMargin: 4em;
 @labeledIconMargin: 1.25em;
 
+@labeledDropdownZIndex: 10;
+
 /*-------------------
         States
 --------------------*/

package/src/themes/default/modules/checkbox.variables

@@ -149,7 +149,7 @@
 /* Toggle */
 @toggleLaneWidth: 3.5rem;
 @toggleHandleSize: 1.5rem;
-@toggleTransitionDuration: 0.2s;
+@toggleTransitionDuration: 0.3s;
 
 @toggleWidth: @toggleLaneWidth;
 @toggleHeight: @toggleHandleSize;
@@ -157,12 +157,12 @@
 @toggleHandleRadius: @circularRadius;
 @toggleHandleOffset: 0;
 @toggleHandleTransition:
-  background @sliderTransitionDuration @defaultEasing,
-  left @sliderTransitionDuration @defaultEasing
+  background @toggleTransitionDuration @defaultEasing,
+  left @toggleTransitionDuration @defaultEasing
 ;
 @toggleHandleTransitionRightAligned:
-  background @sliderTransitionDuration @defaultEasing,
-  right @sliderTransitionDuration @defaultEasing
+  background @toggleTransitionDuration @defaultEasing,
+  right @toggleTransitionDuration @defaultEasing
 ;
 
 @toggleLaneBackground: @transparentBlack;

package/src/themes/instagram/views/card.overrides

@@ -3,7 +3,7 @@
 *******************************/
 
 
-@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
+@import (css) url('https://fonts.googleapis.com/css2?family=Montserrat');
 
 .ui.cards > .card,
 .ui.card {

package/src/themes/material/collections/menu.overrides

@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto);
+@import (css) url('https://fonts.googleapis.com/css2?family=Roboto');

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

@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto);
+@import (css) url('https://fonts.googleapis.com/css2?family=Roboto');
 
 .ui.primary.button:hover {
   box-shadow:

package/src/themes/material/elements/header.overrides

@@ -2,7 +2,7 @@
            Overrides
 *******************************/
 
-@import url(https://fonts.googleapis.com/css?family=Roboto);
+@import (css) url('https://fonts.googleapis.com/css2?family=Roboto');
 
 h1.ui.header,
 .ui.huge.header {

package/src/themes/material/modules/dropdown.overrides

@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
+@import (css) url('https://fonts.googleapis.com/css2?family=Roboto');
 
 .ui.dropdown {
   font-family: 'Roboto';

package/src/themes/material/modules/modal.overrides

@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto);
+@import (css) url('https://fonts.googleapis.com/css2?family=Roboto');
 
 .ui.modal .header {
   font-family: "Roboto", Arial, Sans-serif !important;

package/src/themes/rtl/globals/site.overrides

@@ -3,4 +3,4 @@
 *******************************/
 
 /* Import Droid Arabic Kufi */
-@import 'https://fonts.googleapis.com/earlyaccess/droidarabickufi.css';
+@import (css) url('https://fonts.googleapis.com/css2?family=Droid+Arabic+Kufi');