Build 1.4.0

RELEASE-NOTES.md

@@ -2,6 +2,8 @@
 
 ### Version 1.4.0 - December 22, 2014
 
+[Browse Issues for 1.4.0](https://github.com/Semantic-Org/Semantic-UI/issues?q=milestone%3A1.4.0)
+
 **Enhancements**
 - **Modal** - Modal now accepts custom dimmer settings with setting `dimmerSettings``
 - **Form** - Form inputs without ``type`` specified are now formatted **Thanks PSyton**

dist/components/accordion.css

@@ -214,6 +214,14 @@
   width: 100%;
 }
 
+/*--------------
+     Inverted
+---------------*/
+
+.ui.inverted.accordion .title:not(.ui) {
+  color: #ffffff;
+}
+
 
 /*******************************
          Theme Overrides

dist/components/button.css

@@ -43,6 +43,7 @@
           user-select: none;
   -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
           transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
+  will-change: box-shadow, transform, opacity, color, background;
   -webkit-tap-highlight-color: transparent;
 }
 

dist/components/dropdown.css

@@ -479,7 +479,7 @@ select.ui.dropdown {
   width: 100%;
   outline: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  padding: inherit
+  padding: inherit;
   /*Amazing trick */
 }
 

dist/components/form.css

@@ -81,6 +81,7 @@
 ---------------------*/
 
 .ui.form textarea,
+.ui.form input:not([type]),
 .ui.form input[type="text"],
 .ui.form input[type="email"],
 .ui.form input[type="date"],
@@ -93,6 +94,7 @@
   width: 100%;
   vertical-align: top;
 }
+.ui.form input:not([type]),
 .ui.form input[type="text"],
 .ui.form input[type="email"],
 .ui.form input[type="date"],
@@ -101,6 +103,7 @@
 .ui.form input[type="number"],
 .ui.form input[type="url"],
 .ui.form input[type="tel"] {
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
   margin: 0em;
   outline: none;
   -webkit-appearance: none;
@@ -271,6 +274,7 @@
         Focus
 ---------------------*/
 
+.ui.form input:not([type]):focus,
 .ui.form input[type="text"]:focus,
 .ui.form input[type="email"]:focus,
 .ui.form input[type="date"]:focus,
@@ -337,6 +341,7 @@
   color: #ffffff;
 }
 .ui.form .fields.error .field textarea,
+.ui.form .fields.error .field input:not([type]),
 .ui.form .fields.error .field input[type="text"],
 .ui.form .fields.error .field input[type="email"],
 .ui.form .fields.error .field input[type="date"],
@@ -346,6 +351,7 @@
 .ui.form .fields.error .field input[type="url"],
 .ui.form .fields.error .field input[type="tel"],
 .ui.form .field.error textarea,
+.ui.form .field.error input:not([type]),
 .ui.form .field.error input[type="text"],
 .ui.form .field.error input[type="email"],
 .ui.form .field.error input[type="date"],
@@ -361,6 +367,7 @@
   box-shadow: 2px 0em 0em 0em #d95c5c inset;
 }
 .ui.form .field.error textarea:focus,
+.ui.form .field.error input:not([type]):focus,
 .ui.form .field.error input[type="text"]:focus,
 .ui.form .field.error input[type="email"]:focus,
 .ui.form .field.error input[type="date"]:focus,

dist/components/grid.css

@@ -938,11 +938,12 @@
 
 .ui.centered.grid,
 .ui.centered.grid > .row,
-.ui.grid .centered.row {
+.ui.grid > .centered.row {
   text-align: center;
 }
-.ui.centered.grid > .column:not(.aligned),
+.ui.centered.grid > .column:not(.aligned):not(.row),
 .ui.centered.grid > .row > .column:not(.aligned),
+.ui.centered.grid > .row:not(.centered),
 .ui.grid .centered.row > .column:not(.aligned) {
   text-align: left;
 }
@@ -1563,10 +1564,14 @@
   .ui.stackable.grid {
     display: block !important;
     width: auto;
-    margin-left: -1rem;
-    margin-right: -1rem;
+    margin-left: -1rem !important;
+    margin-right: -1rem !important;
     padding: 0em;
   }
+  .ui.stackable.padded.grid:not(.vertically) {
+    margin-left: -1rem !important;
+    margin-right: -1rem !important;
+  }
   .ui.stackable.grid > .row > .wide.column,
   .ui.stackable.grid > .wide.column,
   .ui.stackable.grid > .column.grid > .column,
@@ -1584,8 +1589,8 @@
     padding: 0em;
   }
   .ui.stackable.grid .column > .ui.stackable.grid {
-    margin-left: -2rem;
-    margin-right: -2rem;
+    margin-left: -2rem !important;
+    margin-right: -2rem !important;
   }
   .ui.stackable.celled.grid > .column:not(.row),
   .ui.stackable.divided.grid > .column:not(.row),

dist/components/input.css

@@ -32,7 +32,7 @@
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: left;
   line-height: 1.2142em;
-  font-family: "Helvetica Neue", "Helvetica", Arial;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
   padding: 0.67861em 1em;
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.15);

dist/components/menu.css

@@ -234,7 +234,7 @@
 
 
 /* Dropdown */
-.ui.menu .ui.dropdown.visible {
+.ui.menu .ui.dropdown.item.visible {
   background: rgba(0, 0, 0, 0.03);
   border-bottom-right-radius: 0em;
   border-bottom-left-radius: 0em;
@@ -462,15 +462,16 @@
   content: "\f0da";
   margin-left: 1em;
 }
+.ui.vertical.menu .active.dropdown.item {
+  border-top-right-radius: 0em;
+  border-bottom-right-radius: 0em;
+}
 .ui.vertical.menu .dropdown.item .menu {
   top: 0% !important;
   left: 100%;
   margin: 0px 0px 0px 0px;
   box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
-}
-.ui.vertical.menu .dropdown.item.active {
-  border-top-right-radius: 0em;
-  border-bottom-right-radius: 0em;
+  border-radius: 0em 0.2857rem 0.2857rem 0.2857rem;
 }
 .ui.vertical.menu .dropdown.item .menu .item {
   font-size: 1rem;

dist/components/modal.js

@@ -77,30 +77,7 @@ $.fn.modal = function(parameters) {
           module.verbose('Initializing dimmer', $context);
 
           module.create.id();
-
-          if($.fn.dimmer === undefined) {
-            module.error(error.dimmer);
-            return;
-          }
-
-          $dimmable = $context
-            .dimmer({
-              debug      : settings.debug,
-              dimmerName : 'modals',
-              closable   : false,
-              useCSS     : true,
-              duration   : {
-                show     : settings.duration,
-                hide     : settings.duration
-              }
-            })
-          ;
-
-          if(settings.detachable) {
-            $dimmable.dimmer('add content', $module);
-          }
-
-          $dimmer = $dimmable.dimmer('get dimmer');
+          module.create.dimmer();
           module.refreshModals();
 
           module.verbose('Attaching close events', $close);
@@ -118,6 +95,30 @@ $.fn.modal = function(parameters) {
         },
 
         create: {
+          dimmer: function() {
+            var
+              defaultSettings = {
+                debug      : settings.debug,
+                dimmerName : 'modals',
+                duration   : {
+                  show     : settings.duration,
+                  hide     : settings.duration
+                }
+              },
+              dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
+            ;
+            if($.fn.dimmer === undefined) {
+              module.error(error.dimmer);
+              return;
+            }
+            module.debug('Creating dimmer with settings', dimmerSettings);
+            $dimmable = $context.dimmer(dimmerSettings);
+            if(settings.detachable) {
+              module.verbose('Modal is detachable, moving content into dimmer');
+              $dimmable.dimmer('add content', $module);
+            }
+            $dimmer = $dimmable.dimmer('get dimmer');
+          },
           id: function() {
             module.verbose('Creating unique id for element');
             id = module.get.uniqueID();
@@ -801,36 +802,41 @@ $.fn.modal = function(parameters) {
 
 $.fn.modal.settings = {
 
-  name          : 'Modal',
-  namespace     : 'modal',
+  name           : 'Modal',
+  namespace      : 'modal',
 
-  debug         : false,
-  verbose       : true,
-  performance   : true,
+  debug          : false,
+  verbose        : true,
+  performance    : true,
 
-  allowMultiple : false,
-  detachable    : true,
-  closable      : true,
-  autofocus     : true,
+  allowMultiple  : false,
+  detachable     : true,
+  closable       : true,
+  autofocus      : true,
+
+  dimmerSettings : {
+    closable : false,
+    useCSS   : true
+  },
 
-  context       : 'body',
+  context        : 'body',
 
-  queue         : false,
-  duration      : 500,
-  easing        : 'easeOutExpo',
-  offset        : 0,
-  transition    : 'scale',
+  queue          : false,
+  duration       : 500,
+  easing         : 'easeOutExpo',
+  offset         : 0,
+  transition     : 'scale',
 
-  padding       : 30,
+  padding        : 30,
 
-  onShow        : function(){},
-  onHide        : function(){},
+  onShow         : function(){},
+  onHide         : function(){},
 
-  onVisible     : function(){},
-  onHidden      : function(){},
+  onVisible      : function(){},
+  onHidden       : function(){},
 
-  onApprove     : function(){ return true; },
-  onDeny        : function(){ return true; },
+  onApprove      : function(){ return true; },
+  onDeny         : function(){ return true; },
 
   selector    : {
     close    : '.close, .actions .button',

dist/components/progress.css

@@ -34,15 +34,6 @@
 }
 
 /* Indicating */
-.ui.indicating.progress .bar[style^="width: 1%"],
-.ui.indicating.progress .bar[style^="width: 2%"],
-.ui.indicating.progress .bar[style^="width: 3%"],
-.ui.indicating.progress .bar[style^="width: 4%"],
-.ui.indicating.progress .bar[style^="width: 5%"],
-.ui.indicating.progress .bar[style^="width: 6%"],
-.ui.indicating.progress .bar[style^="width: 7%"],
-.ui.indicating.progress .bar[style^="width: 8%"],
-.ui.indicating.progress .bar[style^="width: 9%"],
 .ui.indicating.progress .bar[style^="width: 1"],
 .ui.indicating.progress .bar[style^="width: 2"] {
   background-color: #d95c5c;
@@ -66,39 +57,56 @@
   background-color: #66da81;
 }
 
-/* Single Digits Last */
-.ui.indicating.progress .bar[style^="width: 1%"] + .label,
-.ui.indicating.progress .bar[style^="width: 2%"] + .label,
-.ui.indicating.progress .bar[style^="width: 3%"] + .label,
-.ui.indicating.progress .bar[style^="width: 4%"] + .label,
-.ui.indicating.progress .bar[style^="width: 5%"] + .label,
-.ui.indicating.progress .bar[style^="width: 6%"] + .label,
-.ui.indicating.progress .bar[style^="width: 7%"] + .label,
-.ui.indicating.progress .bar[style^="width: 8%"] + .label,
-.ui.indicating.progress .bar[style^="width: 9%"] + .label,
-.ui.indicating.progress .bar[style^="width: 1"] + .label,
-.ui.indicating.progress .bar[style^="width: 2"] + .label {
+/* Indicating Label */
+.ui.indicating.progress[data-percent^="1"] .label,
+.ui.indicating.progress[data-percent^="2"] .label {
   color: #d95c5c;
 }
-.ui.indicating.progress .bar[style^="width: 3"] + .label {
+.ui.indicating.progress[data-percent^="3"] .label {
   color: #d9a65c;
 }
-.ui.indicating.progress .bar[style^="width: 4"] + .label,
-.ui.indicating.progress .bar[style^="width: 5"] + .label {
+.ui.indicating.progress[data-percent^="4"] .label,
+.ui.indicating.progress[data-percent^="5"] .label {
   color: #e6bb48;
 }
-.ui.indicating.progress .bar[style^="width: 6"] + .label {
+.ui.indicating.progress[data-percent^="6"] .label {
   color: #ddc928;
 }
-.ui.indicating.progress .bar[style^="width: 7"] + .label,
-.ui.indicating.progress .bar[style^="width: 8"] + .label {
+.ui.indicating.progress[data-percent^="7"] .label,
+.ui.indicating.progress[data-percent^="8"] .label {
   color: #b4d95c;
 }
-.ui.indicating.progress .bar[style^="width: 9"] + .label,
-.ui.indicating.progress .bar[style^="width: 100"] + .label {
+.ui.indicating.progress[data-percent^="9"] .label,
+.ui.indicating.progress[data-percent^="100"] .label {
   color: #66da81;
 }
-.ui.indicating.progress.success .bar + .label {
+
+/* Single Digits */
+.ui.indicating.progress .bar[style^="width: 1%"],
+.ui.indicating.progress .bar[style^="width: 2%"],
+.ui.indicating.progress .bar[style^="width: 3%"],
+.ui.indicating.progress .bar[style^="width: 4%"],
+.ui.indicating.progress .bar[style^="width: 5%"],
+.ui.indicating.progress .bar[style^="width: 6%"],
+.ui.indicating.progress .bar[style^="width: 7%"],
+.ui.indicating.progress .bar[style^="width: 8%"],
+.ui.indicating.progress .bar[style^="width: 9%"] {
+  background-color: #d95c5c;
+}
+.ui.indicating.progress[data-percent="1"] .label,
+.ui.indicating.progress[data-percent="2"] .label,
+.ui.indicating.progress[data-percent="3"] .label,
+.ui.indicating.progress[data-percent="4"] .label,
+.ui.indicating.progress[data-percent="5"] .label,
+.ui.indicating.progress[data-percent="6"] .label,
+.ui.indicating.progress[data-percent="7"] .label,
+.ui.indicating.progress[data-percent="8"] .label,
+.ui.indicating.progress[data-percent="9"] .label {
+  color: #d95c5c;
+}
+
+/* Indicating Success */
+.ui.indicating.progress.success .label {
   color: #356e36;
 }
 

dist/components/progress.js

@@ -251,6 +251,9 @@ $.fn.progress = function(parameters) {
               $bar
                 .css('width', value + '%')
               ;
+              $module
+                .attr('data-percent', parseInt(value, 10))
+              ;
             }
           },
           initials: function() {

dist/components/reset.css

@@ -29,7 +29,7 @@ input[type="email"],
 input[type="search"],
 input[type="password"] {
   -webkit-appearance: none;
-  -moz-appearance: none
+  -moz-appearance: none;
   
 /* mobile firefox too! */
 }
@@ -56,7 +56,7 @@ html {
   -ms-text-size-adjust: 100%;
   
 /* 2 */
-  -webkit-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%;
   
 /* 2 */
 }
@@ -99,7 +99,7 @@ video {
   display: inline-block;
   
 /* 1 */
-  vertical-align: baseline
+  vertical-align: baseline;
   
 /* 2 */
 }
@@ -265,7 +265,7 @@ textarea {
   font: inherit;
   
 /* 2 */
-  margin: 0
+  margin: 0;
   
 /* 3 */
 }
@@ -299,7 +299,7 @@ input[type="submit"] {
   -webkit-appearance: button;
   
 /* 2 */
-  cursor: pointer
+  cursor: pointer;
   
 /* 3 */
 }
@@ -337,7 +337,7 @@ input[type="radio"] {
   box-sizing: border-box;
   
 /* 1 */
-  padding: 0
+  padding: 0;
   
 /* 2 */
 }
@@ -388,7 +388,7 @@ legend {
   border: 0;
   
 /* 1 */
-  padding: 0
+  padding: 0;
   
 /* 2 */
 }

dist/components/segment.css

@@ -46,7 +46,7 @@
   background-color: transparent;
   border-radius: 0px;
   border: none;
-  box-shadow: 0px 1px 0px rgba(39, 41, 43, 0.15);
+  box-shadow: 0px -1px 0px rgba(39, 41, 43, 0.15) inset;
 }
 .ui[class*="vertical segment"]:last-child {
   box-shadow: none;

dist/components/sidebar.css

@@ -37,8 +37,8 @@
   z-index: 102;
 }
 
-/* 3D Rendering */
-.ui.sidebar * {
+/* GPU Layers for Child Elements */
+.ui.sidebar > * {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transform: rotateZ(0deg);

dist/components/site.css

@@ -8,7 +8,7 @@
  * http://opensource.org/licenses/MIT
  *
  */
-@import 'http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';
+@import 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';
 
 
 

dist/components/site.min.css

@@ -8,4 +8,4 @@
  * http://opensource.org/licenses/MIT
  *
  */
-@import 'http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';*,:after,:before{box-sizing:border-box}body,html{height:100%}html{font-size:14px}body{margin:0;padding:0;min-width:278px;background:#f7f7f7;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.33;color:rgba(0,0,0,.8);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.33em;margin:-webkit-calc(2rem - .165em) 0 1rem;margin:calc(2rem - .165em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.714rem}h3{font-size:1.28rem}h4{font-size:1.071rem}h5{font-size:1rem}p{margin:0 0 1em;line-height:1.33}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#009fda;text-decoration:none}a:hover{color:#00b2f3}::-webkit-selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}::-moz-selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}::selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}
+@import 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin';*,:after,:before{box-sizing:border-box}body,html{height:100%}html{font-size:14px}body{margin:0;padding:0;min-width:278px;background:#f7f7f7;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.33;color:rgba(0,0,0,.8);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.33em;margin:-webkit-calc(2rem - .165em) 0 1rem;margin:calc(2rem - .165em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.714rem}h3{font-size:1.28rem}h4{font-size:1.071rem}h5{font-size:1rem}p{margin:0 0 1em;line-height:1.33}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#009fda;text-decoration:none}a:hover{color:#00b2f3}::-webkit-selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}::-moz-selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}::selection{background-color:rgba(255,255,160,.4);color:rgba(0,0,0,.8)}

dist/components/step.css

@@ -420,7 +420,7 @@
 .ui.steps .step.completed > .icon:before,
 .ui.ordered.steps .step.completed:before {
   font-family: 'Step';
-  content: '\e800'
+  content: '\e800';
   
 /* '' */
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "title": "Semantic UI",
   "description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
   "homepage": "http://www.semantic-ui.com",