grid changes

Former-commit-id: 620f02f454ef6b51ccd6e1abecf26f3f6b27b727
Former-commit-id: 8d15c49f9315bb90f6916a272e4e47e91147fffb

node/src/documents/collections/grid.html

@@ -23,7 +23,8 @@ type   : 'UI Collection'
     <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 ignore warning block"><i class="icon heart"></i> <b>Tip</b>
+    <p>If only a single column is specified inside a grid or a grid row, semantic 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></p></div>
     <div class="ui grid">
       <div class="column">
         1
@@ -177,7 +178,7 @@ type   : 'UI Collection'
     
     <div class="ui two column responsive grid">
       <div class="column">
-        <div class="ui labeled vertical fluid contrasting icon menu">
+        <div class="ui labeled vertical fluid inverted icon menu">
           <a class="item">
             <i class="icon mail"></i>
             Mail

node/src/documents/collections/menu.html

@@ -239,9 +239,9 @@ type   : 'UI Collection'
 
   <h3>Menu</h3>
   <div class="example">
-    <h4>Contrasting</h4>
+    <h4>Inverted</h4>
     <p>A menu may have its colors inverted to show greater contrast</p>
-    <div class="ui contrasting menu">
+    <div class="ui inverted menu">
       <div class="item">
         Site Title
       </div>
@@ -272,7 +272,7 @@ type   : 'UI Collection'
         Green 2
       </a>
     </div>
-    <div class="ui green contrasting compact menu">
+    <div class="ui green inverted compact menu">
       <a class="item">
         Green 1
       </a>
@@ -280,7 +280,7 @@ type   : 'UI Collection'
         Green 2
       </a>
     </div>
-    <div class="ui red contrasting compact menu">
+    <div class="ui red inverted compact menu">
       <a class="item">
         Red 1
       </a>
@@ -288,7 +288,7 @@ type   : 'UI Collection'
         Red 2
       </a>
     </div>
-    <div class="ui blue contrasting compact menu">
+    <div class="ui blue inverted compact menu">
       <a class="item">
         Blue 1
       </a>
@@ -297,7 +297,7 @@ type   : 'UI Collection'
       </a>
     </div>
     <br><br>
-    <div class="ui purple contrasting compact menu">
+    <div class="ui purple inverted compact menu">
       <a class="item">
         Purple 1
       </a>
@@ -305,7 +305,7 @@ type   : 'UI Collection'
         Purple 2
       </a>
     </div>
-    <div class="ui orange contrasting compact menu">
+    <div class="ui orange inverted compact menu">
       <a class="item">
         Orange 1
       </a>
@@ -313,7 +313,7 @@ type   : 'UI Collection'
         Orange 2
       </a>
     </div>
-    <div class="ui teal contrasting compact menu">
+    <div class="ui teal inverted compact menu">
       <a class="item">
         Teal 1
       </a>
@@ -369,7 +369,7 @@ type   : 'UI Collection'
       </a>
     </div>
     <br><br>
-    <div class="ui vertical red contrasting labeled icon menu">
+    <div class="ui vertical red inverted labeled icon menu">
       <a class="item">
         <i class="icon mail"></i>
         Mail

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

@@ -31,21 +31,33 @@
   .ui.responsive.grid {
     padding: 0% 5%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 1000px) {
   .ui.responsive.grid {
     padding: 0% 12.5%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 1500px) {
   .ui.responsive.grid {
     padding: 0% 15%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 1750px) {
   .ui.responsive.grid {
     padding: 0% 23%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 2000px) {
   .ui.responsive.grid {
@@ -53,7 +65,6 @@
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {
-    font-size: 1.25rem;
   }
 }
 
@@ -68,8 +79,8 @@
   text-align: left;
   font-size: 1rem;
 
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-left: 1.33%;
+  padding-right: 1.33%;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

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

@@ -420,93 +420,93 @@
 }
 
 
-/*--- Contrasting ---*/
-.ui.contrasting.menu {
+/*--- inverted ---*/
+.ui.inverted.menu {
   background-color: #333333;
   box-shadow: none;
 }
-.ui.contrasting.menu .header.item {
+.ui.inverted.menu .header.item {
   background-color: rgba(255, 255, 255, 0.15);
   -webkit-box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
   -moz-box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
   box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
 }
 
-.ui.contrasting.menu .item,
-.ui.contrasting.menu .item > a {
+.ui.inverted.menu .item,
+.ui.inverted.menu .item > a {
   color: #FFFFFF;
 }
-.ui.link.contrasting.menu .item:hover,
-.ui.contrasting.menu .item.hover,
-.ui.contrasting.menu .link.item:hover,
-.ui.contrasting.menu a.item:hover,
-.ui.contrasting.menu .dropdown.item.hover,
-.ui.contrasting.menu .dropdown.item:hover {
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .dropdown.item.hover,
+.ui.inverted.menu .dropdown.item:hover {
   background-color: rgba(255, 255, 255, 0.05);
 }
-.ui.contrasting.menu .item .item,
-.ui.contrasting.menu .item .item > a {
+.ui.inverted.menu .item .item,
+.ui.inverted.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.contrasting.menu .item .item > a:hover {
+.ui.inverted.menu .item .item > a:hover {
   background-color: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.9);
 }
-.ui.contrasting.menu .dropdown.item .menu .item,
-.ui.contrasting.menu .dropdown.item .menu .item a {
+.ui.inverted.menu .dropdown.item .menu .item,
+.ui.inverted.menu .dropdown.item .menu .item a {
   color: rgba(0, 0, 0, 0.75);
 }
-.ui.contrasting.menu .item .menu a.item:hover,
-.ui.contrasting.menu .item .menu a.item.hover,
-.ui.contrasting.menu .item .menu .link.item:hover,
-.ui.contrasting.menu .item .menu .link.item.hover {
+.ui.inverted.menu .item .menu a.item:hover,
+.ui.inverted.menu .item .menu a.item.hover,
+.ui.inverted.menu .item .menu .link.item:hover,
+.ui.inverted.menu .item .menu .link.item.hover {
   color: rgba(255, 255, 255, 1);
 }
-.ui.contrasting.menu .item.active,
-.ui.contrasting.menu .item.active a {
+.ui.inverted.menu .item.active,
+.ui.inverted.menu .item.active a {
   color: rgba(255, 255, 255, 1);
 }
 
-/*--- Contrasting Colors  ---*/
-.ui.contrasting.green.menu {
+/*--- inverted Colors  ---*/
+.ui.inverted.green.menu {
   background-color: #A1CF64;
 }
-.ui.contrasting.green.pointing.menu .item.active:after {
+.ui.inverted.green.pointing.menu .item.active:after {
   background-color: #A1CF64;
 }
-.ui.contrasting.red.menu {
+.ui.inverted.red.menu {
   background-color: #EF4D6D;
 }
-.ui.contrasting.red.pointing.menu .item.active:after {
+.ui.inverted.red.pointing.menu .item.active:after {
   background-color: #F16883;
 }
-.ui.contrasting.blue.menu {
+.ui.inverted.blue.menu {
   background-color: #6ECFF5;
 }
-.ui.contrasting.blue.pointing.menu .item.active:after {
+.ui.inverted.blue.pointing.menu .item.active:after {
   background-color: #6ECFF5;
 }
-.ui.contrasting.purple.menu {
+.ui.inverted.purple.menu {
   background-color: #564F8A;
 }
-.ui.contrasting.purple.pointing.menu .item.active:after {
+.ui.inverted.purple.pointing.menu .item.active:after {
   background-color: #564F8A;
 }
-.ui.contrasting.orange.menu {
+.ui.inverted.orange.menu {
   background-color: #F05940;
 }
-.ui.contrasting.orange.pointing.menu .item.active:after {
+.ui.inverted.orange.pointing.menu .item.active:after {
   background-color: #F05940;
 }
-.ui.contrasting.teal.menu {
+.ui.inverted.teal.menu {
   background-color: #00B5AD;
 }
-.ui.contrasting.teal.pointing.menu .item.active:after {
+.ui.inverted.teal.pointing.menu .item.active:after {
   background-color: #00B5AD;
 }
 
 /*--- Border ---*/
-.ui.contrasting.menu .item:before {
+.ui.inverted.menu .item:before {
   background-image: -webkit-linear-gradient(top,
     rgba(255, 255, 255, 0.03) 0%,
     rgba(255, 255, 255, 0.1) 50%,
@@ -533,7 +533,7 @@
     rgba(255, 255, 255, 0.03) 100%)
   ;
 }
-.ui.vertical.contrasting.menu .item:before {
+.ui.vertical.inverted.menu .item:before {
   background-image: -webkit-linear-gradient(left,
     rgba(255, 255, 255, 0.03) 0%,
     rgba(255, 255, 255, 0.1) 50%,
@@ -564,10 +564,10 @@
 /*--- Hover ---*/
 
 /*--- Down ---*/
-.ui.contrasting.menu .item.down,
-.ui.contrasting.menu .dropdown.item:active,
-.ui.contrasting.menu .link.item:active,
-.ui.contrasting.menu a.item:active {
+.ui.inverted.menu .item.down,
+.ui.inverted.menu .dropdown.item:active,
+.ui.inverted.menu .link.item:active,
+.ui.inverted.menu a.item:active {
   background-color: rgba(255, 255, 255, .1);
 
   -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
@@ -576,17 +576,17 @@
 }
 
 /*--- Active ---*/
-.ui.contrasting.menu .item.active {
+.ui.inverted.menu .item.active {
   border-color: transparent;
   background-color: rgba(255, 255, 255, 0.15);
 }
 
 /*--- Pointers ---*/
-.ui.contrasting.pointing.menu .item.active:after {
+.ui.inverted.pointing.menu .item.active:after {
   background-color: #3E3E3E;
   box-shadow: none;
 }
-.ui.contrasting.pointing.menu .item.active:hover:after {
+.ui.inverted.pointing.menu .item.active:hover:after {
   background-color: #3B3B3B;
 }
 
@@ -621,11 +621,11 @@
   opacity: 1;
 }
 
-/*--- Contrasting ---*/
-.ui.contrasting.icon.menu .item {
+/*--- inverted ---*/
+.ui.inverted.icon.menu .item {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.contrasting.icon.menu .icon {
+.ui.inverted.icon.menu .icon {
   color: rgba(255, 255, 255, 1);
 }
 
@@ -958,6 +958,7 @@
   background-color: #F0F0F0;
 }
 
+
 /*--------------
     Attached
 ---------------*/
@@ -1002,14 +1003,14 @@
   font-size: 0.875rem;
 }
 .ui.small.vertical.menu {
-  width: 18rem;
+  width: 13rem;
 }
 
 .ui.menu .item {
   font-size: 1rem;
 }
 .ui.vertical.menu {
-  width: 230px;
+  width: 15rem;
 }
 
 
@@ -1017,5 +1018,5 @@
   font-size: 1.125rem;
 }
 .ui.large.vertical.menu {
-  width: 275px;
+  width: 18rem;
 }

node/src/layouts/default.html.eco

@@ -87,7 +87,7 @@
     </div>
   </div>
 
-  <div class="ui fixed transparent contrasting main menu">
+  <div class="ui fixed transparent inverted main menu">
     <div class="container">
       <div class="title item">
         <b><%= @document.type %>:</b> <%= @document.title %>

src/collections/grid.css

@@ -31,21 +31,33 @@
   .ui.responsive.grid {
     padding: 0% 5%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 1000px) {
   .ui.responsive.grid {
     padding: 0% 12.5%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 1500px) {
   .ui.responsive.grid {
     padding: 0% 15%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 1750px) {
   .ui.responsive.grid {
     padding: 0% 23%;
   }
+  .ui.responsive.grid > .column,
+  .ui.responsive.grid > .row > .column {
+  }
 }
 @media only screen and (min-width : 2000px) {
   .ui.responsive.grid {
@@ -53,7 +65,6 @@
   }
   .ui.responsive.grid > .column,
   .ui.responsive.grid > .row > .column {
-    font-size: 1.25rem;
   }
 }
 
@@ -68,8 +79,8 @@
   text-align: left;
   font-size: 1rem;
 
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-left: 1.33%;
+  padding-right: 1.33%;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;

src/collections/menu.css

@@ -420,93 +420,93 @@
 }
 
 
-/*--- Contrasting ---*/
-.ui.contrasting.menu {
+/*--- inverted ---*/
+.ui.inverted.menu {
   background-color: #333333;
   box-shadow: none;
 }
-.ui.contrasting.menu .header.item {
+.ui.inverted.menu .header.item {
   background-color: rgba(255, 255, 255, 0.15);
   -webkit-box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
   -moz-box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
   box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
 }
 
-.ui.contrasting.menu .item,
-.ui.contrasting.menu .item > a {
+.ui.inverted.menu .item,
+.ui.inverted.menu .item > a {
   color: #FFFFFF;
 }
-.ui.link.contrasting.menu .item:hover,
-.ui.contrasting.menu .item.hover,
-.ui.contrasting.menu .link.item:hover,
-.ui.contrasting.menu a.item:hover,
-.ui.contrasting.menu .dropdown.item.hover,
-.ui.contrasting.menu .dropdown.item:hover {
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .item.hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover,
+.ui.inverted.menu .dropdown.item.hover,
+.ui.inverted.menu .dropdown.item:hover {
   background-color: rgba(255, 255, 255, 0.05);
 }
-.ui.contrasting.menu .item .item,
-.ui.contrasting.menu .item .item > a {
+.ui.inverted.menu .item .item,
+.ui.inverted.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.contrasting.menu .item .item > a:hover {
+.ui.inverted.menu .item .item > a:hover {
   background-color: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.9);
 }
-.ui.contrasting.menu .dropdown.item .menu .item,
-.ui.contrasting.menu .dropdown.item .menu .item a {
+.ui.inverted.menu .dropdown.item .menu .item,
+.ui.inverted.menu .dropdown.item .menu .item a {
   color: rgba(0, 0, 0, 0.75);
 }
-.ui.contrasting.menu .item .menu a.item:hover,
-.ui.contrasting.menu .item .menu a.item.hover,
-.ui.contrasting.menu .item .menu .link.item:hover,
-.ui.contrasting.menu .item .menu .link.item.hover {
+.ui.inverted.menu .item .menu a.item:hover,
+.ui.inverted.menu .item .menu a.item.hover,
+.ui.inverted.menu .item .menu .link.item:hover,
+.ui.inverted.menu .item .menu .link.item.hover {
   color: rgba(255, 255, 255, 1);
 }
-.ui.contrasting.menu .item.active,
-.ui.contrasting.menu .item.active a {
+.ui.inverted.menu .item.active,
+.ui.inverted.menu .item.active a {
   color: rgba(255, 255, 255, 1);
 }
 
-/*--- Contrasting Colors  ---*/
-.ui.contrasting.green.menu {
+/*--- inverted Colors  ---*/
+.ui.inverted.green.menu {
   background-color: #A1CF64;
 }
-.ui.contrasting.green.pointing.menu .item.active:after {
+.ui.inverted.green.pointing.menu .item.active:after {
   background-color: #A1CF64;
 }
-.ui.contrasting.red.menu {
+.ui.inverted.red.menu {
   background-color: #EF4D6D;
 }
-.ui.contrasting.red.pointing.menu .item.active:after {
+.ui.inverted.red.pointing.menu .item.active:after {
   background-color: #F16883;
 }
-.ui.contrasting.blue.menu {
+.ui.inverted.blue.menu {
   background-color: #6ECFF5;
 }
-.ui.contrasting.blue.pointing.menu .item.active:after {
+.ui.inverted.blue.pointing.menu .item.active:after {
   background-color: #6ECFF5;
 }
-.ui.contrasting.purple.menu {
+.ui.inverted.purple.menu {
   background-color: #564F8A;
 }
-.ui.contrasting.purple.pointing.menu .item.active:after {
+.ui.inverted.purple.pointing.menu .item.active:after {
   background-color: #564F8A;
 }
-.ui.contrasting.orange.menu {
+.ui.inverted.orange.menu {
   background-color: #F05940;
 }
-.ui.contrasting.orange.pointing.menu .item.active:after {
+.ui.inverted.orange.pointing.menu .item.active:after {
   background-color: #F05940;
 }
-.ui.contrasting.teal.menu {
+.ui.inverted.teal.menu {
   background-color: #00B5AD;
 }
-.ui.contrasting.teal.pointing.menu .item.active:after {
+.ui.inverted.teal.pointing.menu .item.active:after {
   background-color: #00B5AD;
 }
 
 /*--- Border ---*/
-.ui.contrasting.menu .item:before {
+.ui.inverted.menu .item:before {
   background-image: -webkit-linear-gradient(top,
     rgba(255, 255, 255, 0.03) 0%,
     rgba(255, 255, 255, 0.1) 50%,
@@ -533,7 +533,7 @@
     rgba(255, 255, 255, 0.03) 100%)
   ;
 }
-.ui.vertical.contrasting.menu .item:before {
+.ui.vertical.inverted.menu .item:before {
   background-image: -webkit-linear-gradient(left,
     rgba(255, 255, 255, 0.03) 0%,
     rgba(255, 255, 255, 0.1) 50%,
@@ -564,10 +564,10 @@
 /*--- Hover ---*/
 
 /*--- Down ---*/
-.ui.contrasting.menu .item.down,
-.ui.contrasting.menu .dropdown.item:active,
-.ui.contrasting.menu .link.item:active,
-.ui.contrasting.menu a.item:active {
+.ui.inverted.menu .item.down,
+.ui.inverted.menu .dropdown.item:active,
+.ui.inverted.menu .link.item:active,
+.ui.inverted.menu a.item:active {
   background-color: rgba(255, 255, 255, .1);
 
   -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
@@ -576,17 +576,17 @@
 }
 
 /*--- Active ---*/
-.ui.contrasting.menu .item.active {
+.ui.inverted.menu .item.active {
   border-color: transparent;
   background-color: rgba(255, 255, 255, 0.15);
 }
 
 /*--- Pointers ---*/
-.ui.contrasting.pointing.menu .item.active:after {
+.ui.inverted.pointing.menu .item.active:after {
   background-color: #3E3E3E;
   box-shadow: none;
 }
-.ui.contrasting.pointing.menu .item.active:hover:after {
+.ui.inverted.pointing.menu .item.active:hover:after {
   background-color: #3B3B3B;
 }
 
@@ -621,11 +621,11 @@
   opacity: 1;
 }
 
-/*--- Contrasting ---*/
-.ui.contrasting.icon.menu .item {
+/*--- inverted ---*/
+.ui.inverted.icon.menu .item {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.contrasting.icon.menu .icon {
+.ui.inverted.icon.menu .icon {
   color: rgba(255, 255, 255, 1);
 }
 
@@ -958,6 +958,7 @@
   background-color: #F0F0F0;
 }
 
+
 /*--------------
     Attached
 ---------------*/
@@ -1002,14 +1003,14 @@
   font-size: 0.875rem;
 }
 .ui.small.vertical.menu {
-  width: 18rem;
+  width: 13rem;
 }
 
 .ui.menu .item {
   font-size: 1rem;
 }
 .ui.vertical.menu {
-  width: 230px;
+  width: 15rem;
 }
 
 
@@ -1017,5 +1018,5 @@
   font-size: 1.125rem;
 }
 .ui.large.vertical.menu {
-  width: 275px;
+  width: 18rem;
 }