fomantic-ui 2.9.0-beta.250 → 2.9.0-beta.251

package/package.json

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

package/src/definitions/collections/form.less

@@ -141,6 +141,13 @@
   padding: initial;
 }
 
+.ui.form input::-webkit-calendar-picker-indicator {
+  padding: 0;
+  opacity: @iconOpacity;
+  transition: @iconTransition;
+  cursor: pointer;
+}
+
 /* Text Area */
 .ui.input textarea,
 .ui.form textarea {
@@ -484,6 +491,10 @@
   box-shadow: @textAreaFocusBoxShadow;
   -webkit-appearance: none;
 }
+/* Focus */
+.ui.form input:focus::-webkit-calendar-picker-indicator {
+  opacity: @iconFocusOpacity;
+}
 
 & when not (@variationFormStates = false) {
   /*--------------------

package/src/definitions/elements/container.less

@@ -137,6 +137,25 @@
   }
 }
 
+& when (@variationContainerWide) {
+  /* Wide Container */
+  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    .ui.ui.ui.wide.container {
+      width: @tabletWideWidth;
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+    .ui.ui.ui.wide.container {
+      width: @computerWideWidth;
+    }
+  }
+  @media only screen and (min-width: @largeMonitorBreakpoint) {
+    .ui.ui.ui.wide.container {
+      width: @largeMonitorWideWidth;
+    }
+  }
+}
+
 & when (@variationContainerFluid) {
   /* Fluid */
   .ui.fluid.container {

package/src/definitions/elements/input.less

@@ -55,6 +55,12 @@
   &:not([type="color"]) {
     padding: @padding;
   }
+  &::-webkit-calendar-picker-indicator {
+    padding: 0;
+    opacity: @iconOpacity;
+    transition: @iconTransition;
+    cursor: pointer;
+  }
 }
 
 
@@ -342,9 +348,10 @@
   }
 
   /* Focus */
+  .ui.input > input:focus::-webkit-calendar-picker-indicator,
   .ui.icon.input > textarea:focus ~ i.icon,
   .ui.icon.input > input:focus ~ i.icon {
-    opacity: 1;
+    opacity: @iconFocusOpacity;
   }
 }
 

package/src/definitions/elements/segment.less

@@ -668,7 +668,7 @@
   }
   & when (@variationSegmentAttached) {
     /* Attached */
-    .ui.inverted.attached.segment {
+    .ui.ui.inverted.attached.segment {
       border-color: @solidWhiteBorderColor;
     }
   }

package/src/definitions/modules/calendar.less

@@ -173,7 +173,7 @@
 }
 
 & when (@variationCalendarMultiMonth) {
-  .ui.calendar.popup > .ui.grid {
+  .ui.calendar.popup > .ui.ui.grid {
     margin: @multiMonthMargin;
     & > .column:not(:first-child) {
       padding-left: @multiMonthPadding;

package/src/definitions/modules/dropdown.js

@@ -3397,7 +3397,7 @@ $.fn.dropdown = function(parameters) {
             return $(event.target).closest($icon).length > 0;
           },
           chrome: function() {
-            return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+            return !!window.chrome && !window.StyleMedia;
           },
           alreadySetup: function() {
             return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0);

package/src/definitions/modules/search.js

@@ -403,7 +403,7 @@ $.fn.search = function(parameters) {
             return $results.hasClass(className.animating);
           },
           chrome: function() {
-            return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+            return !!window.chrome && !window.StyleMedia;
           },
           hidden: function() {
             return $results.hasClass(className.hidden);

package/src/themes/default/collections/form.variables

@@ -149,6 +149,10 @@
 @groupedLabelFontWeight: @labelFontWeight;
 @groupedLabelTextTransform: @labelTextTransform;
 
+/* Icon */
+@iconOpacity: 0.5;
+@iconFocusOpacity: 1;
+@iconTransition: opacity 0.3s @defaultEasing;
 
 /* Inline */
 @inlineInputSize: @relativeMedium;

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

@@ -9,6 +9,7 @@
 /* Minimum Gutter is used to determine  the maximum container width for a given device */
 
 @maxWidth: 100%;
+@wideRatio: 1.2;
 
 /* Devices */
 @mobileMinimumGutter: 0;
@@ -17,14 +18,17 @@
 
 @tabletMinimumGutter: (@emSize  * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
+@tabletWideWidth: (@tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @tabletGutter: auto;
 
 @computerMinimumGutter: (@emSize  * 1.5);
 @computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
+@computerWideWidth: (@computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @computerGutter: auto;
 
 @largeMonitorMinimumGutter: (@emSize  * 2);
 @largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
+@largeMonitorWideWidth: (@largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @largeMonitorGutter: auto;
 
 /* Coupling (Add Negative Margin to container size) */

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

@@ -46,6 +46,7 @@
 @variationContainerRelaxed: true;
 @variationContainerVeryRelaxed: true;
 @variationContainerText: true;
+@variationContainerWide: true;
 @variationContainerFluid: true;
 @variationContainerAligned: true;
 @variationContainerJustified: true;