Various fixes to grid/menu

Former-commit-id: fbfda95948
Former-commit-id: eee2fc5bc4

node/src/documents/collections/grid.html

@@ -7,21 +7,23 @@ type   : 'UI Collection'
 ---
 
 <div class="segment">
-  <div class="ui grid">
-    <div class="eight wide column">
+  <div class="ui main responsive grid">
+    <div class="column">
       <h1>Grid</h1>
       <p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
     </div>
   </div>
 </div>
-<div class="main ui grid">
-<div class="twelve wide column">
+<div class="main responsive ui grid">
+<div class="column">
   
   <h2>Collection</h2>
   
   <div class="example">
     <h4>Grid</h4>
     <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns. The semantic library assumes 12 columns by default.</p>
+    
+    <div class="ui ignore warning block"><i class="icon heart"></i> For convenience if only a single column is specified inside a grid or grid row, it will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></div>
     <div class="ui grid">
       <div class="column">
         1
@@ -63,7 +65,9 @@ type   : 'UI Collection'
   </div>
   <div class="example">
     <h4>Rows</h4>
-    <p>A basic grid has padding on the first and last columns of each row. If no rows are specified, a grid will assume only one row. A row must always have the same number of columns as the grid.</p>
+    <p>A basic grid has padding on the first and last columns of each row.</p>
+    <p>A row is used to create vertical padding between rows of columns on a page. If no rows are specified, a grid column will sit flush along each side of the grid.</p>
+    <p>/p>
     <div class="ui grid">
       <div class="row">
         <div class="column">
@@ -166,6 +170,36 @@ type   : 'UI Collection'
   
   <h3>Grid</h3>
   
+  <div class="example">
+    <h4>Responsive Grid</h4>
+    <p>A responsive grid is a special type of grid useful for designing page layouts. A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.</p>
+    
+    <div class="ui two column responsive grid">
+      <div class="column">
+        <div class="ui labeled vertical fluid contrasting icon menu">
+          <a class="item">
+            <i class="icon mail"></i>
+            Mail
+          </a>
+          <a class="item">
+            <i class="icon th-list"></i>
+            Directory
+          </a>
+          <a class="item">
+            <i class="icon star"></i>
+            Favorites
+          </a>
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui segment">
+          <b>Inbox</b>
+          <p>Welcome to your inbox. Would you like to see more information?</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
   <div class="example">
     <h4>Evenly Divided Grid</h4>
     <p>A grid can be divided into equal parts.</p>

node/src/documents/collections/menu.html

@@ -319,62 +319,62 @@ type   : 'UI Collection'
   <div class="example">
     <h4>Icons</h4>
     <p>A menu may have just icons</p>
-    <div class="ui icon link menu">
-      <div class="item">
+    <div class="ui icon menu">
+      <a class="item">
         <i class="icon mail"></i>
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon th-list"></i>
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon star"></i>
-      </div>
+      </a>
     </div>
     <br><br>
-    <div class="ui vertical icon link menu">
-      <div class="item">
+    <div class="ui vertical icon menu">
+      <a class="item">
         <i class="icon mail"></i>
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon th-list"></i>
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon star"></i>
-      </div>
+      </a>
     </div>
   </div>
 
   <div class="example">
     <h4>Icons</h4>
     <p>A menu may have labeled icons</p>
-    <div class="ui labeled icon link menu">
-      <div class="item">
+    <div class="ui labeled icon menu">
+      <a class="item">
         <i class="icon mail"></i>
         Mail
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon th-list"></i>
         Directory
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon star"></i>
         Favorites
-      </div>
+      </a>
     </div>
     <br><br>
-    <div class="ui vertical red contrasting labeled icon link menu">
-      <div class="item">
+    <div class="ui vertical red contrasting labeled icon menu">
+      <a class="item">
         <i class="icon mail"></i>
         Mail
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon th-list"></i>
         Directory
-      </div>
-      <div class="item">
+      </a>
+      <a class="item">
         <i class="icon star"></i>
         Favorites
-      </div>
+      </a>
     </div>
   </div>
 

node/src/files/components/semantic/src/collections/grid.css

@@ -28,28 +28,28 @@
 }
 
 @media only screen and (max-width : 1000px) {
-  body > .ui.grid {
+  .ui.responsive.grid {
     padding: 0% 5%;
   }
 }
 @media only screen and (min-width : 1000px) {
-  body > .ui.grid {
-    padding: 0% 10%;
+  .ui.responsive.grid {
+    padding: 0% 7.5%;
   }
 }
 @media only screen and (min-width : 1500px) {
-  body > .ui.grid {
-    padding: 0% 15%;
+  .ui.responsive.grid {
+    padding: 0% 10%;
   }
 }
 @media only screen and (min-width : 1750px) {
-  body >.ui.grid {
-    padding: 0% 20%;
+  .ui.responsive.grid {
+    padding: 0% 15%;
   }
 }
 @media only screen and (min-width : 2000px) {
-  body > .ui.grid {
-    padding: 0% 25%;
+  .ui.responsive.grid {
+    padding: 0% 20%;
   }
 }
 
@@ -102,6 +102,9 @@
 
 
 /* Sizing Combinations */
+.ui.grid .one.wide.column {
+  width: 8.3333%;
+}
 .ui.grid .two.wide.column {
   width: 16.66667%;
 }
@@ -145,6 +148,12 @@
 .ui.grid > .row > .column {
   width: 8.3333%;
 }
+/* Assume full width with one column */
+.ui.grid > .column:only-child,
+.ui.grid > .row > .column:only-child {
+  width: 100%;
+}
+
 
 .ui.two.column.grid .column {
   width: 50%;

node/src/files/components/semantic/src/collections/menu.css

@@ -331,7 +331,7 @@
 .ui.menu .dropdown.item .menu .item.hover,
 .ui.menu .dropdown.item .menu .item:hover {
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.02);
 }
 
 /* Dropdown Display */
@@ -433,16 +433,20 @@
 .ui.contrasting.menu .item > a {
   color: #FFFFFF;
 }
-.ui.contrasting.menu .item > a:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.95);
+.ui.link.menu .item:hover,
+.ui.menu .item.hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover,
+.ui.menu .dropdown.item.hover,
+.ui.menu .dropdown.item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
 }
 .ui.contrasting.menu .item .item,
 .ui.contrasting.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
 }
 .ui.contrasting.menu .item .item > a:hover {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.9);
 }
 .ui.contrasting.menu .dropdown.item .menu .item,

node/src/files/stylesheets/semantic.css

@@ -81,6 +81,7 @@ h3::selection {
   font-style: normal;
   font-weight: normal;
   font-stretch: normal;
+  font-size-adjust: 0.448;
 }
 @font-face {
   font-family: 'Neutraface';
@@ -93,6 +94,7 @@ h3::selection {
   font-style: normal;
   font-weight: bold;
   font-stretch: normal;
+  font-size-adjust: 0.448;
 }
 
 @font-face {
@@ -106,6 +108,7 @@ h3::selection {
   font-style: italic;
   font-weight: normal;
   font-stretch: normal;
+  font-size-adjust: 0.448;
 }
 
 
@@ -230,6 +233,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 }
 
 #example .main.menu {
+  min-width: 370px;
   z-index: 999;
 }
 
@@ -300,6 +304,14 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 
 }
 
+#example .main.ui.grid {
+  position: relative;
+}
+
+#example .example > p {
+  color: #888888;
+}
+
 #example .peek .menu :nth-child(1) {
   border-left-color: #00B9F0;
 }
@@ -507,6 +519,10 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   cursor: pointer;
 }
 
+@media only screen and (max-width : 1100px) {
+
+}
+
 @media only screen and (max-width : 1420px) {
 
   #example .container {

src/collections/grid.css

@@ -28,28 +28,28 @@
 }
 
 @media only screen and (max-width : 1000px) {
-  body > .ui.grid {
+  .ui.responsive.grid {
     padding: 0% 5%;
   }
 }
 @media only screen and (min-width : 1000px) {
-  body > .ui.grid {
-    padding: 0% 10%;
+  .ui.responsive.grid {
+    padding: 0% 7.5%;
   }
 }
 @media only screen and (min-width : 1500px) {
-  body > .ui.grid {
-    padding: 0% 15%;
+  .ui.responsive.grid {
+    padding: 0% 10%;
   }
 }
 @media only screen and (min-width : 1750px) {
-  body >.ui.grid {
-    padding: 0% 20%;
+  .ui.responsive.grid {
+    padding: 0% 15%;
   }
 }
 @media only screen and (min-width : 2000px) {
-  body > .ui.grid {
-    padding: 0% 25%;
+  .ui.responsive.grid {
+    padding: 0% 20%;
   }
 }
 
@@ -102,6 +102,9 @@
 
 
 /* Sizing Combinations */
+.ui.grid .one.wide.column {
+  width: 8.3333%;
+}
 .ui.grid .two.wide.column {
   width: 16.66667%;
 }
@@ -145,6 +148,12 @@
 .ui.grid > .row > .column {
   width: 8.3333%;
 }
+/* Assume full width with one column */
+.ui.grid > .column:only-child,
+.ui.grid > .row > .column:only-child {
+  width: 100%;
+}
+
 
 .ui.two.column.grid .column {
   width: 50%;

src/collections/menu.css

@@ -331,7 +331,7 @@
 .ui.menu .dropdown.item .menu .item.hover,
 .ui.menu .dropdown.item .menu .item:hover {
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.02);
 }
 
 /* Dropdown Display */
@@ -433,16 +433,20 @@
 .ui.contrasting.menu .item > a {
   color: #FFFFFF;
 }
-.ui.contrasting.menu .item > a:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.95);
+.ui.link.menu .item:hover,
+.ui.menu .item.hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover,
+.ui.menu .dropdown.item.hover,
+.ui.menu .dropdown.item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
 }
 .ui.contrasting.menu .item .item,
 .ui.contrasting.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
 }
 .ui.contrasting.menu .item .item > a:hover {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.9);
 }
 .ui.contrasting.menu .dropdown.item .menu .item,