From 620f02f454ef6b51ccd6e1abecf26f3f6b27b727 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Tue, 7 May 2013 15:42:36 -0400
Subject: [PATCH] grid changes
---
node/src/documents/collections/grid.html | 5 +-
node/src/documents/collections/menu.html | 18 ++--
.../semantic/src/collections/grid.css | 17 ++-
.../semantic/src/collections/menu.css | 101 +++++++++---------
node/src/layouts/default.html.eco | 2 +-
src/collections/grid.css | 17 ++-
src/collections/menu.css | 101 +++++++++---------
7 files changed, 143 insertions(+), 118 deletions(-)
diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html
index 7e18f39ef..8e298d337 100755
--- a/node/src/documents/collections/grid.html
+++ b/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
diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html
index 22235fdde..5fed42abf 100755
--- a/node/src/documents/collections/menu.html
+++ b/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
diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css
index d3f3a675f..4c9185815 100644
--- a/node/src/files/components/semantic/src/collections/grid.css
+++ b/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;
diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css
index aa8a764a6..eef615161 100644
--- a/node/src/files/components/semantic/src/collections/menu.css
+++ b/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;
}
\ No newline at end of file
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco
index 428d2ea99..41dd5073a 100755
--- a/node/src/layouts/default.html.eco
+++ b/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 %>
diff --git a/src/collections/grid.css b/src/collections/grid.css
index d3f3a675f..4c9185815 100755
--- a/src/collections/grid.css
+++ b/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;
diff --git a/src/collections/menu.css b/src/collections/menu.css
index aa8a764a6..eef615161 100755
--- a/src/collections/menu.css
+++ b/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;
}
\ No newline at end of file