diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index d698f0fb6..0db6c232e 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -21,10 +21,11 @@ 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.

+

A grid is made up of columns of content. By default a grid must assume a certain number of columns.

+

Each set of columns matching up to the number of columns in a grid create a row.

-
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

+
Using Grids +

The semantic library assumes 12 columns by default. 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

It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.

@@ -91,8 +92,7 @@ type : 'UI Collection'

Rows

-

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.

+

A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.

@@ -222,31 +222,28 @@ type : 'UI Collection'
-

Grid

-

A grid will automatically center any columns that do not match a full row width. This is useful for centering content

+

Columns

+

Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.

+

A grid will automatically center any columns that do not match a full row width.

-
-
-
- 1 -
+
+
+ 1
-
-
- 2 -
+
+
+
+ 2
-
-
- 3 -
+
+
+
+ 3
-
-
-
- 4 -
+
+
+ 4
@@ -256,7 +253,7 @@ type : 'UI Collection'

Grid

-
+

Page Grid

A grid can be formatted for page content adding gutters before and after the content of the grid to help make page contents easier to read.

@@ -286,9 +283,9 @@ type : 'UI Collection'
-
+

Responsive Grid

-

A grid can be responsive to a browsers width.

+

A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.

@@ -321,9 +318,9 @@ type : 'UI Collection'

-
-

Changing column count

-

A grid can have a different number of columns

+
+

Changing grid column count

+

A grid can have a different number of columns per row

@@ -394,44 +391,13 @@ type : 'UI Collection'
-
-

Floating (Horizontal Alignment)

-

A column can be aligned, or "floated", to either the left or right of its row.

-
-
-
-
- Dogs -
-
- Poodle -
-
- Cockerspaniel -
-
-
-
-
-
- Cats -
-
- Abysinnian -
-
- Sphynx -
-
-
-
-
+

Vertical Alignment

-

A grid or row can specify its vertical alignment can have its columns vertically centered.

-
-
+

A grid can specify its vertical alignment to have all its columns vertically centered.

+
+
@@ -460,11 +426,19 @@ type : 'UI Collection'
-
+
+
+ +

Rows

+
+

Vertical Alignment

+

A row can also specify its vertical alignment to have its columns vertically centered.

+
+
- Dogs + Cats
@@ -489,11 +463,11 @@ type : 'UI Collection'
-
+
- Cats + Dogs
@@ -518,43 +492,12 @@ type : 'UI Collection'
-
-
- -
-

Evenly Divided Grid w/ Rows

-

Content that does not match evenly finish a row will be centered in the next row

-
-
+
-
-

Let's go ahead and get you signed up.

-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
-
- - -
- +
+
+ Cats
-
Submit
@@ -568,31 +511,13 @@ type : 'UI Collection'
Cockerspaniel
-
- Cats -
-
- Abysinnian -
-
- Sphynx -
-
-
-
-

Log in to your account

-
- - -
-
- - +
+
+ Monkeys
-
Login
@@ -601,22 +526,53 @@ type : 'UI Collection'

Columns

-
+
+

Row Alignment (Floating)

+

A column can be aligned, or "floated", to either the left or right of its row.

+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Cats +
+
+ Abysinnian +
+
+ Sphynx +
+
+
+
+ +

Column Width

A column can span across multiple grid columns.

-
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien sed dui porta id sagittis sapien imperdiet. Quisque suscipit dui vel sapien dapibus a faucibus sapien mattis. Nulla facilisi. Aliquam vitae ante a quam tincidunt blandit. Duis adipiscing, metus at dictum auctor, odio enim ornare urna, quis aliquam arcu nibh vitae felis. Donec gravida aliquam enim in mattis. Phasellus risus purus, luctus quis lobortis eget, dignissim quis ante.
+
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
-
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. Pellentesque aliquet pellentesque nibh ut tincidunt. Nunc faucibus euismod tincidunt. Etiam convallis adipiscing est, id rutrum erat facilisis eu. Mauris in porttitor diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consectetur orci nec quam semper sit amet bibendum nulla feugiat. Nam vehicula, arcu blandit semper sodales, nisi nisl imperdiet dolor, nec hendrerit dui lorem id felis. Integer diam ante, tempus dictum varius in, bibendum vitae nibh. Sed placerat, libero quis ultricies tempor, nisl ipsum semper orci, vitae viverra mauris lectus nec enim. Quisque eget massa eu ligula blandit molestie.
+
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat.
-
diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 3b0b69341..c485f2e69 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -8,8 +8,8 @@ type : 'UI Collection'

Menu

-

A menu is a ui collection made up of items. These items can be links, dropdowns, menus themselves, badges, or other standard html types.

-

Items containing menus are formatted as sub menus. Menus containing menus are formatted as the same tier as the parent menu.

+

A menu is a collection of interface elements. These items can be links, dropdowns, menus themselves, badges, or other standard html types.

+

Menu items containing menus themselves are formatted as sub menus. Menus with menus as children are formatted as the same tier as the parent menu.

@@ -59,6 +59,7 @@ type : 'UI Collection'
A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
+ Username
@@ -125,22 +126,22 @@ type : 'UI Collection'
- Text Item +

Are you ready to try out a pro membership?

-
-

Welcome back username

-

You have had:

-
    -
  • 12 messages
    • -
  • 9 new invites
    • -
-

..and a birthday cake since you last were on the site.

+
+

Welcome back username

+ +

Link Item

-

A menu may have either a real page link or an item that behaves as a link.

+

A menu may contain a link item, or an item formatted as if it is a link.

+ +
+

Items that are anchor tags will automatically be formatted as a link.

+
Visit Google @@ -263,15 +264,15 @@ type : 'UI Collection'

Basic

A menu may reduce its complexity to blend in with a page

-
+ Section 1 -
-
+ + Section 2 -
-
+ + Section 3 -
+
diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index 674d62aaa..403ac328c 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/node/src/files/components/semantic/src/collections/grid.css @@ -106,7 +106,7 @@ @media only screen and (max-width : 1000px) { .ui.responsive.grid { - padding: 0% 5%; + padding: 0% 5.55%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -114,7 +114,7 @@ } @media only screen and (min-width : 1000px) { .ui.responsive.grid { - padding: 0% 10%; + padding: 0% 8%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -282,10 +282,13 @@ /* Vertical Centered */ .ui.aligned.grid, -.ui.grid .aligned.row { +.ui.grid > .aligned.row { display: table; width: 100%; } +.ui.aligned.grid > .row { + display: table-row; +} .ui.aligned.grid .column, .ui.grid .aligned.row .column { display: table-cell; @@ -293,17 +296,17 @@ .ui.top.aligned.grid .column, .ui.grid .top.aligned.column, -.ui.grid .top.aligned.row .column { +.ui.grid > .top.aligned.row .column { vertical-align: top; } .ui.middle.aligned.grid .column, .ui.grid .middle.aligned.column, -.ui.grid .middle.aligned.row .column { +.ui.grid > .middle.aligned.row .column { vertical-align: middle; } .ui.bottom.aligned.grid .column, .ui.grid .bottom.aligned.column, -.ui.grid .bottom.aligned.row .column { +.ui.grid > .bottom.aligned.row .column { vertical-align: bottom; } diff --git a/node/src/files/components/semantic/src/collections/menu.css b/node/src/files/components/semantic/src/collections/menu.css index cb0a6d78e..3be77f6b0 100644 --- a/node/src/files/components/semantic/src/collections/menu.css +++ b/node/src/files/components/semantic/src/collections/menu.css @@ -48,7 +48,9 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); vertical-align: middle; - min-height: 1.33em; + + line-height: 1.2em; + min-height: 1.2em; -webkit-transition: opacity 0.1s linear, @@ -204,7 +206,6 @@ .ui.menu .text.item > *, .ui.menu .item > p:only-child { - font-size: 0.95em; line-height: 1.3; } .ui.menu .item > p:first-child { @@ -628,6 +629,7 @@ .ui.vertical.icon.menu { width: auto; display: inline-block; + min-height: 0em; } .ui.icon.menu .item { text-align: center; @@ -956,7 +958,7 @@ .ui.vertical.pointing.menu .item.active:after { position: absolute; top: 50%; - right: -0.3em; + right: -0.4em; bottom: auto; left: auto; diff --git a/node/src/files/components/semantic/src/elements/header.css b/node/src/files/components/semantic/src/elements/header.css index b4b7608e7..d8de16e82 100644 --- a/node/src/files/components/semantic/src/elements/header.css +++ b/node/src/files/components/semantic/src/elements/header.css @@ -1,98 +1,141 @@ +/* + * # Semantic Headers - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 29 2013 + */ + /******************************* - Headers & Text Blocks + Header *******************************/ -/* Header Block */ +/* Standard */ .ui.header { - min-height: 18px; - margin: 15px 0px; - padding: 8px 13px; - - background-color: #FFFFFF; - box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); + line-height: 1.33; - line-height: 1.5; - font-size: 16px; + font-size: 1.33em; font-weight: bold; - text-shadow: 0px 1px 0px #FFFFFF; + color: rgba(50, 50, 50, 0.9); - -webkit-border-radius: 4px 4px 4px 4px; - -moz-border-radius: 4px 4px 4px 4px; - border-radius: 4px 4px 4px 4px; + padding: 0em; + border: none; } -/* Sub Header (De-emphasized) */ -.ui.sub.header { - margin: 0px; +/* Positioning */ +.ui.header:first-child { + margin-top: 0em; +} +.ui.header + p { + margin-top: 0em; +} - border: none; - border-bottom: 1px solid #DADADA; - border-radius: 0px; - background-color: #FFFFFF; - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); +/*-------------- + Page Heading +---------------*/ - font-size: 14px; - padding: 6px 25px; - color: #55356A; +h1.ui.header { + min-height: 1rem; + margin: 2rem 0rem 1.5rem; + line-height: 1.33rem; + font-size: 2rem; + color: rgba(20, 20, 20, 1); +} +h2.ui.header { + margin: 1.5rem 0rem 1rem; + line-height: 1.33rem; + font-size: 1.5rem; + color: rgba(20, 20, 20, 0.9); +} +h3.ui.header { + margin: 1.3rem 0rem 1rem; + line-height: 1.33rem; + font-size: 1.33rem; + color: rgba(30, 30, 30, 0.9); +} +h4.ui.header { + margin: 0.75rem 0rem 0.3rem; + line-height: 1.33rem; + font-size: 1.1rem; + color: rgba(30, 30, 30, 0.9); +} +h5.ui.header { + margin: 0rem 0rem 0.2rem; + line-height: 1.2rem; + font-size: 1rem; + color: rgba(40, 40, 40, 0.9); } -/* Neutral Header */ -.ui.neutral.block, -.ui.neutral.header { - background-color: #E0E0E0; - background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - border-color: #CCCCCC; +/*-------------- + Content Heading +---------------*/ - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.huge.ui.header { + min-height: 1em; + line-height: 1.33em; + font-size: 2em; + color: rgba(20, 20, 20, 1); +} +.large.ui.header { + line-height: 1.33em; + font-size: 1.5em; + color: rgba(20, 20, 20, 0.9); +} +.small.ui.header { + margin-bottom: 0.25em; + line-height: 1.33em; + font-size: 1.1em; + color: rgba(30, 30, 30, 0.9); +} +.tiny.ui.header { + margin-bottom: 0em; + line-height: 1.2em; + font-size: 1em; + color: rgba(40, 40, 40, 0.9); +} - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); +/******************************* + States +*******************************/ + +.ui.header.disabled { + opacity: 0.5; } +/******************************* + Variations +*******************************/ + + /* Attached Header */ .ui.header.attached, .ui.header.attached.top { - margin: 0px; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + margin: 0em; + -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .ui.header.attached.bottom { - margin-top: 0px; + margin-top: 0em; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; } .ui.header.simple { - border-radius: 0px; + border-radius: 0em; background-color: #FAFAFA; background-image: none; } -/*-------------- - Resizes ----------------*/ -.ui.header { - font-size: 16px; -} -.ui.header.large { - padding-top: 8px; - padding-bottom: 8px; - font-size: 18px; -} -.ui.header.huge { - padding-top: 8px; - padding-bottom: 8px; - font-size: 22px; -} +/******************************* + Groups +*******************************/ + diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 122d310a5..402f0e6cd 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -153,6 +153,12 @@ li { */ +ul.list { + list-style-type: disc; +} +ul.list li { + list-style-position: outside; +} /* text and headers */ @@ -185,7 +191,6 @@ h4 { } h4 + p { margin: 0px 0px 20px; - color: #888888; } pre { background-color: #F0F0F0; @@ -207,7 +212,7 @@ table code { background-color: transparent; } p { - margin: 10px 0px; + margin: 1em 0em; } p > a { font-weight: bold; @@ -556,29 +561,26 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ #example .highlighted.example .grid, #example .ui.type.items .image .grid { - background-color: #F0F0F0; + background-color: #FCFCFC; } #example .highlighted.example .grid .row, #example .ui.type.items .image .grid .row { - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid #DDDDDD; } #example .highlighted.example .grid .column, #example .ui.type.items .image .grid .column { background-color: #F4F4F4; - min-height: 100px; + min-height: 50px; -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2; -moz-box-shadow: 0px 0px 0px 1px #E2E2E2; box-shadow: 0px 0px 0px 1px #E2E2E2; } #example .highlighted.example .grid .segment, #example .ui.type.items .image .grid .segment { - min-height: 100px; - border: 1px solid #DDDDDD; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - + min-height: 50px; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; @@ -609,7 +611,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ } #example .sticky-wrapper.stuck .peek { margin-left: 0px; - left: 105px; + left: 165px; } } diff --git a/src/collections/grid.css b/src/collections/grid.css index 674d62aaa..403ac328c 100755 --- a/src/collections/grid.css +++ b/src/collections/grid.css @@ -106,7 +106,7 @@ @media only screen and (max-width : 1000px) { .ui.responsive.grid { - padding: 0% 5%; + padding: 0% 5.55%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -114,7 +114,7 @@ } @media only screen and (min-width : 1000px) { .ui.responsive.grid { - padding: 0% 10%; + padding: 0% 8%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -282,10 +282,13 @@ /* Vertical Centered */ .ui.aligned.grid, -.ui.grid .aligned.row { +.ui.grid > .aligned.row { display: table; width: 100%; } +.ui.aligned.grid > .row { + display: table-row; +} .ui.aligned.grid .column, .ui.grid .aligned.row .column { display: table-cell; @@ -293,17 +296,17 @@ .ui.top.aligned.grid .column, .ui.grid .top.aligned.column, -.ui.grid .top.aligned.row .column { +.ui.grid > .top.aligned.row .column { vertical-align: top; } .ui.middle.aligned.grid .column, .ui.grid .middle.aligned.column, -.ui.grid .middle.aligned.row .column { +.ui.grid > .middle.aligned.row .column { vertical-align: middle; } .ui.bottom.aligned.grid .column, .ui.grid .bottom.aligned.column, -.ui.grid .bottom.aligned.row .column { +.ui.grid > .bottom.aligned.row .column { vertical-align: bottom; } diff --git a/src/collections/menu.css b/src/collections/menu.css index cb0a6d78e..3be77f6b0 100755 --- a/src/collections/menu.css +++ b/src/collections/menu.css @@ -48,7 +48,9 @@ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); vertical-align: middle; - min-height: 1.33em; + + line-height: 1.2em; + min-height: 1.2em; -webkit-transition: opacity 0.1s linear, @@ -204,7 +206,6 @@ .ui.menu .text.item > *, .ui.menu .item > p:only-child { - font-size: 0.95em; line-height: 1.3; } .ui.menu .item > p:first-child { @@ -628,6 +629,7 @@ .ui.vertical.icon.menu { width: auto; display: inline-block; + min-height: 0em; } .ui.icon.menu .item { text-align: center; @@ -956,7 +958,7 @@ .ui.vertical.pointing.menu .item.active:after { position: absolute; top: 50%; - right: -0.3em; + right: -0.4em; bottom: auto; left: auto; diff --git a/src/elements/header.css b/src/elements/header.css index b4b7608e7..d8de16e82 100755 --- a/src/elements/header.css +++ b/src/elements/header.css @@ -1,98 +1,141 @@ +/* + * # Semantic Headers - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 29 2013 + */ + /******************************* - Headers & Text Blocks + Header *******************************/ -/* Header Block */ +/* Standard */ .ui.header { - min-height: 18px; - margin: 15px 0px; - padding: 8px 13px; - - background-color: #FFFFFF; - box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); + line-height: 1.33; - line-height: 1.5; - font-size: 16px; + font-size: 1.33em; font-weight: bold; - text-shadow: 0px 1px 0px #FFFFFF; + color: rgba(50, 50, 50, 0.9); - -webkit-border-radius: 4px 4px 4px 4px; - -moz-border-radius: 4px 4px 4px 4px; - border-radius: 4px 4px 4px 4px; + padding: 0em; + border: none; } -/* Sub Header (De-emphasized) */ -.ui.sub.header { - margin: 0px; +/* Positioning */ +.ui.header:first-child { + margin-top: 0em; +} +.ui.header + p { + margin-top: 0em; +} - border: none; - border-bottom: 1px solid #DADADA; - border-radius: 0px; - background-color: #FFFFFF; - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); - background: linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.03) 100%); +/*-------------- + Page Heading +---------------*/ - font-size: 14px; - padding: 6px 25px; - color: #55356A; +h1.ui.header { + min-height: 1rem; + margin: 2rem 0rem 1.5rem; + line-height: 1.33rem; + font-size: 2rem; + color: rgba(20, 20, 20, 1); +} +h2.ui.header { + margin: 1.5rem 0rem 1rem; + line-height: 1.33rem; + font-size: 1.5rem; + color: rgba(20, 20, 20, 0.9); +} +h3.ui.header { + margin: 1.3rem 0rem 1rem; + line-height: 1.33rem; + font-size: 1.33rem; + color: rgba(30, 30, 30, 0.9); +} +h4.ui.header { + margin: 0.75rem 0rem 0.3rem; + line-height: 1.33rem; + font-size: 1.1rem; + color: rgba(30, 30, 30, 0.9); +} +h5.ui.header { + margin: 0rem 0rem 0.2rem; + line-height: 1.2rem; + font-size: 1rem; + color: rgba(40, 40, 40, 0.9); } -/* Neutral Header */ -.ui.neutral.block, -.ui.neutral.header { - background-color: #E0E0E0; - background: -webkit-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -moz-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -o-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: -ms-linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - background: linear-gradient(top, #E0E0E0 0px, #DCDCDC 100%); - border-color: #CCCCCC; +/*-------------- + Content Heading +---------------*/ - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.huge.ui.header { + min-height: 1em; + line-height: 1.33em; + font-size: 2em; + color: rgba(20, 20, 20, 1); +} +.large.ui.header { + line-height: 1.33em; + font-size: 1.5em; + color: rgba(20, 20, 20, 0.9); +} +.small.ui.header { + margin-bottom: 0.25em; + line-height: 1.33em; + font-size: 1.1em; + color: rgba(30, 30, 30, 0.9); +} +.tiny.ui.header { + margin-bottom: 0em; + line-height: 1.2em; + font-size: 1em; + color: rgba(40, 40, 40, 0.9); +} - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); +/******************************* + States +*******************************/ + +.ui.header.disabled { + opacity: 0.5; } +/******************************* + Variations +*******************************/ + + /* Attached Header */ .ui.header.attached, .ui.header.attached.top { - margin: 0px; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + margin: 0em; + -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .ui.header.attached.bottom { - margin-top: 0px; + margin-top: 0em; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; } .ui.header.simple { - border-radius: 0px; + border-radius: 0em; background-color: #FAFAFA; background-image: none; } -/*-------------- - Resizes ----------------*/ -.ui.header { - font-size: 16px; -} -.ui.header.large { - padding-top: 8px; - padding-bottom: 8px; - font-size: 18px; -} -.ui.header.huge { - padding-top: 8px; - padding-bottom: 8px; - font-size: 22px; -} +/******************************* + Groups +*******************************/ +