From 9767c87f9c0383f177a1bbe6b043f1e42e4e3a01 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 7 May 2013 15:42:36 -0400 Subject: [PATCH] grid changes Former-commit-id: 620f02f454ef6b51ccd6e1abecf26f3f6b27b727 Former-commit-id: 8d15c49f9315bb90f6916a272e4e47e91147fffb --- 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'

Grid

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.

-
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 one wide column
+
Tip +

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 one wide column

1 @@ -177,7 +178,7 @@ type : 'UI Collection'
-
+
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'

Menu

-

Contrasting

+

Inverted

A menu may have its colors inverted to show greater contrast

-
+
Site Title
@@ -272,7 +272,7 @@ type : 'UI Collection' Green 2
-
+
Green 1 @@ -280,7 +280,7 @@ type : 'UI Collection' Green 2
-
+
Red 1 @@ -288,7 +288,7 @@ type : 'UI Collection' Red 2
-
+
Blue 1 @@ -297,7 +297,7 @@ type : 'UI Collection'


-
+
Purple 1 @@ -305,7 +305,7 @@ type : 'UI Collection' Purple 2
-
+
Orange 1 @@ -313,7 +313,7 @@ type : 'UI Collection' Orange 2
-
+
Teal 1 @@ -369,7 +369,7 @@ type : 'UI Collection'


-
+
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 @@
-
+
<%= @document.type %>: <%= @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