From d1c5672befe9dbc6c88943a53fb7e525c3fce7f3 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 7 May 2013 12:27:51 -0400 Subject: [PATCH] Various fixes to grid/menu Former-commit-id: fbfda95948802f97d06ac9167b8351f2ad22efd0 Former-commit-id: eee2fc5bc42072017052903406e75cbc6f0ce7e1 --- node/src/documents/collections/grid.html | 44 +++++++++++++-- node/src/documents/collections/menu.html | 56 +++++++++---------- .../semantic/src/collections/grid.css | 27 ++++++--- .../semantic/src/collections/menu.css | 14 +++-- node/src/files/stylesheets/semantic.css | 16 ++++++ src/collections/grid.css | 27 ++++++--- src/collections/menu.css | 14 +++-- 7 files changed, 137 insertions(+), 61 deletions(-) diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 5bdc99152..f6d6eda28 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -7,21 +7,23 @@ type : 'UI Collection' ---
-
-
+
+

Grid

A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.

-
-
+
+

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
1 @@ -63,7 +65,9 @@ type : 'UI Collection'

Rows

-

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.

+

A basic grid has padding on the first and last columns of each row.

+

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>

@@ -166,6 +170,36 @@ type : 'UI Collection'

Grid

+
+

Responsive Grid

+

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.

+ +
+
+
+ + + Mail + + + + Directory + + + + Favorites + +
+
+
+
+ Inbox +

Welcome to your inbox. Would you like to see more information?

+
+
+
+
+

Evenly Divided Grid

A grid can be divided into equal parts.

diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 45f2dcfaa..a5bbac918 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -319,62 +319,62 @@ type : 'UI Collection'

Icons

A menu may have just icons

-
-
+
+ -
-
+ + -
-
+ + -
+


-
-
+
+ -
-
+ + -
-
+ + -
+

Icons

A menu may have labeled icons

-
-
+
+ Mail -
-
+ + Directory -
-
+ + Favorites -
+


-
-
+
+ Mail -
-
+ + Directory -
-
+ + Favorites -
+
diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index b0c6672d0..b11029eb7 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/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%; diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index 0445fd40a..e5ef54895 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/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, diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index f41f560e3..f643ae3f3 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/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 { diff --git a/src/collections/grid.css b/src/collections/grid.css index b0c6672d0..b11029eb7 100755 --- a/src/collections/grid.css +++ b/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%; diff --git a/src/collections/menu.css b/src/collections/menu.css index 0445fd40a..e5ef54895 100755 --- a/src/collections/menu.css +++ b/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,