Merge branch 'css' of github.com:Semantic-Org/Semantic-UI into css

server/documents/elements/divider.html.eco

@@ -12,6 +12,7 @@ themes      : ['default']
 
 <%- @partial('header') %>
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/divider.less" />
+
 <div class="main container">
 
   <div class="peek">
@@ -75,6 +76,9 @@ themes      : ['default']
   <div class="example">
     <h4 class="ui header">Horizontal Divider</h4>
     <p>A divider can segment content horizontally</p>
+    <div class="ui ignored positive message">Horizontal dividers can also be used in combination with <a href="/elements/header.html">header</a> and <a href="/elements/icon.html">icons</a> to create different styles of dividers.
+    </div>
+    <div class="ui ignored message">Dividers in Semantic <code>1.0</code> will automatically vary the size of their rules to match the length of your text</div>
     <h3 class="ui header">Retrieve Order</h3>
     <div class="ui tertiary form segment">
       <div class="field">
@@ -94,18 +98,41 @@ themes      : ['default']
       <i class="add icon"></i>
     </div>
   </div>
-
-  <div class="example">
-    <h4 class="ui header">Icon Divider</h4>
-    <p>A divider can include an icon</p>
-    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
-    <div class="ui horizontal icon divider">
-      <i class="circular heart icon"></i>
+  <div class="another example">
+    <div class="ui segment">
+      <h2 class="ui header">
+        Doggie Treat
+        <div class="sub header">$4.99 for 100</div>
+      </h2>
+      <div class="ui primary button">Add to cart</div>
+      <p>Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.</p>
+      <h4 class="ui horizontal header divider">
+        <i class="bar chart icon"></i>
+        Specifications
+      </h4>
+      <table class="ui very basic definition table">
+        <tbody>
+          <tr>
+            <td class="two wide column">Size</td>
+            <td>1" x 2"</td>
+          </tr>
+          <tr>
+            <td>Weight</td>
+            <td>6 ounces</td>
+          </tr>
+          <tr>
+            <td>Color</td>
+            <td>Yellowish</td>
+          </tr>
+          <tr>
+            <td>Odor</td>
+            <td>Not Much Usually</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
   </div>
 
-
   <h2 class="ui dividing header">Variations</h2>
 
   <div class="example">

server/documents/index.html.eco

@@ -22,7 +22,7 @@ type   : 'Semantic'
         </h1>
         <h2 class="ui inverted header">UI is the vocabulary of the web.</h2>
         <div class="ui huge inverted buttons">
-          <a class="ui basic teal inverted view-ui button"><i class="list layout icon"></i>UI Library</a>
+          <a class="ui basic pink inverted view-ui button"><i class="list layout icon"></i>UI Library</a>
           <a class="ui disabled basic red inverted button" data-title="Coming Soon">
             <i class="tint icon"></i>
             Themes

src/definitions/collections/table.less

@@ -696,10 +696,13 @@
 .ui.very.basic.table {
   border: none;
 }
-.ui.very.basic.table:not(.sortable) th,
-.ui.very.basic.table:not(.sortable) td {
+.ui.very.basic.table:not(.sortable):not(.striped) th,
+.ui.very.basic.table:not(.sortable):not(.striped) td {
   padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding;
 }
+.ui.very.basic.table:not(.sortable):not(.striped) tbody tr:last-child td {
+  padding-bottom: 0em;
+}
 
 /*--------------
      Padded

src/definitions/elements/divider.less

@@ -26,34 +26,70 @@
 .ui.divider {
   margin: @dividerMargin 0rem;
 
-  border-top: @shadowWidth solid @shadowColor;
-  border-bottom: @highlightWidth solid @highlightColor;
-
   line-height: 1;
   height: 0em;
 
-  box-sizing: border-box;
+  font-weight: @fontWeight;
+  text-transform: @textTransform;
+  color: @color;
 
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.ui.vertical.divider,
-.ui.horizontal.divider {
-  position: absolute;
+/*--------------
+      Basic
+---------------*/
 
-  border: none;
-  height: 0em;
-  margin: 0em;
-  background-color: transparent;
+.ui.divider:not(.vertical):not(.horizontal) {
+  border-top: @shadowWidth solid @shadowColor;
+  border-bottom: @highlightWidth solid @highlightColor;
+}
+
+/*--------------
+    Coupling
+---------------*/
+
+.ui.grid > .ui.divider {
+  font-size: 1rem;
+}
+
+
+/*--------------
+   Horizontal
+---------------*/
 
-  font-weight: bold;
+.ui.horizontal.divider {
+  position: relative;
+
+  height: auto;
+  margin: @horizontalMargin;
+  overflow: hidden;
+  line-height: 1;
   text-align: center;
-  text-transform: @dividerTextTransform;
+}
 
-  color: @dividerTextColor;
+.ui.horizontal.divider:before,
+.ui.horizontal.divider:after {
+  position: absolute;
+  top: 50%;
+  content: '';
+  z-index: 3;
+
+  width: 50%;
+  top: 50%;
+  height: 0px;
+
+  border-top: @shadowWidth solid @shadowColor;
+  border-bottom: @highlightWidth solid @highlightColor;
 }
 
+.ui.horizontal.divider:before {
+  margin-left: -(50% + @horizontalDividerMargin);
+}
+.ui.horizontal.divider:after {
+  margin-left: @horizontalDividerMargin;
+}
 
 /*--------------
     Vertical
@@ -65,27 +101,27 @@
   top: 50%;
   left: 50%;
 
-  margin: 0% 0% 0% -(@verticalDividerWidth / 2);
-
-  width: @verticalDividerWidth;
+  margin: 0rem;
+  padding: 0em;
+  width: auto;
   height: 50%;
 
   line-height: 0em;
-  padding: 0em;
+  text-align: center;
 }
 
 .ui.vertical.divider:before,
 .ui.vertical.divider:after {
   position: absolute;
   left: 50%;
-  content: " ";
+  content: '';
   z-index: 3;
 
   border-left: @shadowWidth solid @shadowColor;
   border-right: @highlightWidth solid @highlightColor;
 
   width: 0%;
-  height: 80%;
+  height: @verticalDividerHeight;
 }
 
 .ui.vertical.divider:before {
@@ -96,45 +132,6 @@
   bottom: 0px;
 }
 
-/*--------------
-    Horizontal
----------------*/
-
-.ui.horizontal.divider {
-  position: relative;
-  top: 0%;
-  left: 0%;
-
-  margin: @horizontalDividerVerticalMargin 0em;
-  height: auto;
-  padding: 0em;
-
-  line-height: 1;
-}
-
-.ui.horizontal.divider:before,
-.ui.horizontal.divider:after {
-  position: absolute;
-  top: 50%;
-  content: '';
-  z-index: 3;
-
-  width: @horizontalDividerWidth;
-  top: 50%;
-  height: 0%;
-
-  border-top: @shadowWidth solid @shadowColor;
-  border-bottom: @highlightWidth solid @highlightColor;
-}
-
-.ui.horizontal.divider:before {
-  left: 0%;
-}
-.ui.horizontal.divider:after {
-  left: auto;
-  right: 0%;
-}
-
 /*--------------
       Icon
 ---------------*/
@@ -167,16 +164,16 @@
 }
 .ui.vertical.inverted.divider,
 .ui.horizontal.inverted.divider {
-  color: @directionalTextColor;
+  color: @invertedTextColor;
 }
 .ui.divider.inverted,
 .ui.divider.inverted:after,
 .ui.divider.inverted:before {
-  border-top-color: @invertedShadowColor;
-  border-bottom-color: @invertedHighlightColor;
+  border-top-color: @invertedShadowColor !important;
+  border-bottom-color: @invertedHighlightColor !important;
 
-  border-left-color: @invertedShadowColor;
-  border-right-color: @invertedHighlightColor;
+  border-left-color: @invertedShadowColor !important;
+  border-right-color: @invertedHighlightColor !important;
 }
 
 /*--------------
@@ -204,12 +201,4 @@
   margin-bottom: @sectionMargin;
 }
 
-/*--------------
-      Sizes
----------------*/
-
-.ui.divider {
-  font-size: 1rem;
-}
-
 .loadUIOverrides();

src/definitions/modules/search.js

@@ -243,7 +243,7 @@ $.fn.search = function(parameters) {
             }
             else {
               module.debug("Querying for '" + searchTerm + "'");
-              if($.isPlainObject(settings.source)) {
+              if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
                 module.search.local(searchTerm);
               }
               else if(settings.apiSettings) {
@@ -811,4 +811,4 @@ $.fn.search.settings = {
   }
 };
 
-})( jQuery, window , document );
+})( jQuery, window , document );

src/themes/packages/default/elements/divider.variables

@@ -9,13 +9,15 @@
 @dividerMargin: 1rem;
 
 @highlightWidth: 1px;
-@highlightColor: rgba(255, 255, 255, 0.8);
+@highlightColor: rgba(255, 255, 255, 0.2);
 
 @shadowWidth: 1px;
 @shadowColor: rgba(0, 0, 0, 0.1);
 
-@dividerTextColor: @textColor;
-@dividerTextTransform: uppercase;
+/* Text */
+@fontWeight: bold;
+@color: @darkTextColor;
+@textTransform: uppercase;
 
 /*-------------------
        Coupling
@@ -31,16 +33,13 @@
 *******************************/
 
 /* Horizontal / Vertical */
-@directionalFontSize: 0.875rem;
-@directionalTextColor: @invertedLightTextColor;
-
-@horizontalDividerVerticalMargin: 1rem;
-@horizontalDividerWidth: 40%;
-@verticalDividerWidth: 6%;
+@horizontalMargin: '';
+@horizontalDividerMargin: 1.5%;
+@verticalDividerMargin: 1rem;
+@verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")";
 
 /* Inverted */
 @invertedTextColor: @white;
-
 @invertedHighlightColor: rgba(255, 255, 255, 0.15);
 @invertedShadowColor: rgba(0, 0, 0, 0.15);
 

src/themes/packages/default/elements/icon.overrides

@@ -568,6 +568,7 @@ i.icon.shuffle:before { content: "\f074"; }
 i.icon.talk:before { content: "\f075"; }
 i.icon.chat:before { content: "\f075"; }
 i.icon.shopping.cart:before { content: "\f07a"; }
+i.icon.bar.graph:before { content: "\f080"; }
 i.icon.key:before { content: "\f084"; }
 i.icon.privacy:before { content: "\f084"; }
 i.icon.cogs:before { content: "\f085"; }

src/themes/packages/default/elements/icon.variables

@@ -11,7 +11,7 @@
 @opacity: 0.75;
 @width: 1.23em;
 @height: 0.9em;
-@distanceFromText: 0em;
+@distanceFromText: 0.25em;
 
 @linkDuration: 0.3s;
 @loadingDuration: 2s;