From 2fe762c317f25507321e955ee7bc6ac687795f1e Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Fri, 17 May 2013 13:36:10 -0400 Subject: [PATCH] adding definition page and many variations to segments Former-commit-id: 03c3f1be36d2a607e5a1845c05f4510b452db38c Former-commit-id: 0811e6484652287189288d137241e09fa5d5ce07 --- build/minified/elements/header.min.css | 2 +- build/minified/elements/segment.min.css | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/packaged/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/elements/header.css | 2 +- build/uncompressed/elements/segment.css | 152 +++++++++++++- node/src/documents/elements/header.html | 18 +- node/src/documents/elements/segment.html | 128 ++++++++++++ .../components/semantic/elements/header.css | 2 +- .../components/semantic/elements/segment.css | 152 +++++++++++++- src/elements/button.less | 1 + src/elements/header.less | 3 +- src/elements/segment.less | 192 +++++++++++++++++- 13 files changed, 620 insertions(+), 38 deletions(-) create mode 100755 node/src/documents/elements/segment.html diff --git a/build/minified/elements/header.min.css b/build/minified/elements/header.min.css index d4e10e243..a833ef247 100644 --- a/build/minified/elements/header.min.css +++ b/build/minified/elements/header.min.css @@ -1 +1 @@ -.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33rem;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33rem;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33rem;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33rem;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2rem;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.header.disabled{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0} \ No newline at end of file +.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33rem;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33rem;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33rem;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33rem;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2rem;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.disabled.header{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0} \ No newline at end of file diff --git a/build/minified/elements/segment.min.css b/build/minified/elements/segment.min.css index 0a90d36d2..2392225f3 100644 --- a/build/minified/elements/segment.min.css +++ b/build/minified/elements/segment.min.css @@ -1 +1 @@ -.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);padding:1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.segment div:first-child{margin-top:0}.ui.segment .attached.label:first-child+*{margin-top:2em}.ui.segment .bottom.attached.label:first-child+*{margin-top:0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.ui.segment .list li{padding:10px 25px} \ No newline at end of file +.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:1em 0;padding:.5em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.segment div:first-child{margin-top:0}.ui.segment div:last-child{margin-bottom:0}.ui.segment .attached.label:first-child+*{margin-top:2em}.ui.segment .bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.5}.ui.inverted.segment{background-color:#222;padding:.7em 1em;color:#FFF}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.segment:before{position:absolute;top:0;width:100%;content:'';height:1px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(255,255,255,.8)}.ui.blue.segment{color:#6ECFF5!important}.ui.green.segment{color:#A1CF64!important}.ui.red.segment{color:#EF4D6D!important}.ui.purple.segment{color:#564F8A!important}.ui.teal.segment{color:#00B5AD!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{background-color:#555}.ui.primary.inverted.segment{background-color:#777;color:#F5F5F5}.ui.secondary.inverted.segment{background-color:#777;color:#F5F5F5}.ui.tertiary.inverted.segment{background-color:#B0B0B0;color:#EBEBEB}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index a20c67a79..3c8a46397 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -92835bf7befedceca4f6ad8d2d074a0dad5769c4 \ No newline at end of file +a0234ff39dcf422e63fafa25c4b51f8c0d236058 \ No newline at end of file diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index 2b696d9b9..cc308c545 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -0f07dbd48e46e923a00189bae39db59576075359 \ No newline at end of file +7220d569e6fdfced633f365fb442ebed1e5a6618 \ No newline at end of file diff --git a/build/uncompressed/elements/header.css b/build/uncompressed/elements/header.css index 06dbdd950..692418e8e 100644 --- a/build/uncompressed/elements/header.css +++ b/build/uncompressed/elements/header.css @@ -86,7 +86,7 @@ h5.ui.header { /******************************* States *******************************/ -.ui.header.disabled { +.ui.disabled.header { opacity: 0.5; } /******************************* diff --git a/build/uncompressed/elements/segment.css b/build/uncompressed/elements/segment.css index a43ede20e..31b538b6c 100644 --- a/build/uncompressed/elements/segment.css +++ b/build/uncompressed/elements/segment.css @@ -1,5 +1,16 @@ +/* + * # Semantic Segment - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: May 17 2013 + */ /******************************* - Page Segments + Segment *******************************/ .ui.segment { position: relative; @@ -7,7 +18,8 @@ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - padding: 1em; + margin: 1em 0em; + padding: 0.5em 1em; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; @@ -17,22 +29,150 @@ box-sizing: border-box; overflow: hidden; } -/* Label at the top of a segment */ +/*------------------- + Loose Coupling +--------------------*/ +/* No padding on edge content */ .ui.segment div:first-child { margin-top: 0px; } +.ui.segment div:last-child { + margin-bottom: 0px; +} +/* Padding on next content after a label */ .ui.segment .attached.label:first-child + * { margin-top: 2em; } .ui.segment .bottom.attached.label:first-child + * { margin-top: 0em; } +/******************************* + States +*******************************/ +.ui.disabled.segment { + opacity: 0.5; +} +/******************************* + Variations +*******************************/ +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + background-color: #222222; + padding: 0.7em 1em; + color: #FFFFFF; +} +/*------------------- + Basic +--------------------*/ +.ui.basic.segment { + position: relative; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.segment:before { + position: absolute; + top: 0px; + width: 100%; + content: ''; + height: 1px; + background-color: rgba(0, 0, 0, 0.05); + border-top: 1px solid rgba(255, 255, 255, 0.8); +} +/*------------------- + Colors +--------------------*/ +.ui.blue.segment { + color: #6ECFF5 !important; +} +.ui.green.segment { + color: #A1CF64 !important; +} +.ui.red.segment { + color: #EF4D6D !important; +} +.ui.purple.segment { + color: #564F8A !important; +} +.ui.teal.segment { + color: #00B5AD !important; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.segment { + text-align: left; +} +.ui.right.aligned.segment { + text-align: right; +} +.ui.center.aligned.segment { + text-align: center; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.segment, +.ui.left.floated.segment { + float: left; +} +.ui.right.floated.segment { + float: right; +} +/*------------------- + Raised +--------------------*/ +.ui.raised.segment { + -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + background-color: #555555; +} +.ui.primary.inverted.segment { + background-color: #777777; + color: #F5F5F5; +} +.ui.secondary.inverted.segment { + background-color: #777777; + color: #F5F5F5; +} +.ui.tertiary.inverted.segment { + background-color: #B0B0B0; + color: #EBEBEB; +} +/*------------------- + Ordinality +--------------------*/ +.ui.primary.segment { + background-color: #FFFFFF; + color: #555555; +} +.ui.secondary.segment { + background-color: #F5F5F5; + color: #777777; +} +.ui.tertiary.segment { + background-color: #EBEBEB; + color: #B0B0B0; +} +/*------------------- + Attached +--------------------*/ .ui.segment.attached { top: -1px; bottom: -1px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; + margin: 0em; -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; box-shadow: 0px 0px 0px 1px #DDDDDD; @@ -40,6 +180,7 @@ .ui.top.attached.segment { top: 0px; bottom: -1px; + margin-top: 0em; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; @@ -47,11 +188,8 @@ .ui.segment.bottom.attached { top: -1px; bottom: 0px; + margin-bottom: 0em; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } -/* Common Views */ -.ui.segment .list li { - padding: 10px 25px; -} diff --git a/node/src/documents/elements/header.html b/node/src/documents/elements/header.html index fac5975ee..baa54516e 100755 --- a/node/src/documents/elements/header.html +++ b/node/src/documents/elements/header.html @@ -77,17 +77,17 @@ type : 'UI Element'

Variations

-

Icon Header

-

A header can be formatted to be displayed with an icon

+

Icon

+

A header can be formatted to emphasize an icon

- - Paint a Picture + + Message Anyone

-

Floated Header

-

A header can be formatted to be displayed with an icon

+

Floating

+

A header can sit to the left or right of other content

Go Forward @@ -99,7 +99,7 @@ type : 'UI Element'

Text Alignment

-

A header can be formatted to be displayed with an icon

+

A header can have its text aligned to a side

Right @@ -108,14 +108,14 @@ type : 'UI Element' Left

- and Center + Center

Colors

-

A header can be formatted as different colors

+

A header can be formatted with different colors

Black
diff --git a/node/src/documents/elements/segment.html b/node/src/documents/elements/segment.html new file mode 100755 index 000000000..ac4738d82 --- /dev/null +++ b/node/src/documents/elements/segment.html @@ -0,0 +1,128 @@ +--- +layout : 'default' +css : 'header' + +title : 'Segment' +type : 'UI Element' +--- +
+
+

Segment

+

A segment is used to create a grouping of related content.

+
+
+
+ +
+
+ Standard + Variations +
+
+

Standard

+ +
+

Segment

+

A segment of content

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +

Variations

+ +
+

Inverted

+

A segment can have its colors inverted for contrast

+
+

I'm here to tell you something, and you will probably read me first.

+
+
+ +
+

Ordinality

+

A segment can be formatted to appear more or less noticable

+
+

I'm here to tell you something, and you will probably read me first.

+
+
+

I am pretty noticable but you might check out other content before you look at me.

+
+
+

If you notice me you must be looking very hard.

+
+
+ +
+

Ordinality

+

A segment can be formatted to appear more or less noticable

+
+

I'm here to tell you something, and you will probably read me first.

+
+
+

I am pretty noticable but you might check out other content before you look at me.

+
+
+

If you notice me you must be looking very hard.

+
+
+ +
+

Floated

+

A header can sit to the left or right of other content

+

+

This segment will appear to the right +

+

+ This segment will appear to the left +

+
+ +
+

Text Alignment

+

A header can have its text aligned to a side

+
+ Right +
+
+ Left +
+
+ Center +
+
+ +
+

Basic

+

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

+
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+ +
+

Raised

+

A segment may be formatted to raise above the page.

+
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+ + +
+

Attached

+

A segment can be attached to other content on a page

+ +
+

This segment is on top

+
+
+

This segment is attached on both sides

+
+
+

This segment is on bottom

+
+
+ + +
\ No newline at end of file diff --git a/node/src/files/components/semantic/elements/header.css b/node/src/files/components/semantic/elements/header.css index 06dbdd950..692418e8e 100644 --- a/node/src/files/components/semantic/elements/header.css +++ b/node/src/files/components/semantic/elements/header.css @@ -86,7 +86,7 @@ h5.ui.header { /******************************* States *******************************/ -.ui.header.disabled { +.ui.disabled.header { opacity: 0.5; } /******************************* diff --git a/node/src/files/components/semantic/elements/segment.css b/node/src/files/components/semantic/elements/segment.css index a43ede20e..31b538b6c 100644 --- a/node/src/files/components/semantic/elements/segment.css +++ b/node/src/files/components/semantic/elements/segment.css @@ -1,5 +1,16 @@ +/* + * # Semantic Segment - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: May 17 2013 + */ /******************************* - Page Segments + Segment *******************************/ .ui.segment { position: relative; @@ -7,7 +18,8 @@ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - padding: 1em; + margin: 1em 0em; + padding: 0.5em 1em; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; @@ -17,22 +29,150 @@ box-sizing: border-box; overflow: hidden; } -/* Label at the top of a segment */ +/*------------------- + Loose Coupling +--------------------*/ +/* No padding on edge content */ .ui.segment div:first-child { margin-top: 0px; } +.ui.segment div:last-child { + margin-bottom: 0px; +} +/* Padding on next content after a label */ .ui.segment .attached.label:first-child + * { margin-top: 2em; } .ui.segment .bottom.attached.label:first-child + * { margin-top: 0em; } +/******************************* + States +*******************************/ +.ui.disabled.segment { + opacity: 0.5; +} +/******************************* + Variations +*******************************/ +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + background-color: #222222; + padding: 0.7em 1em; + color: #FFFFFF; +} +/*------------------- + Basic +--------------------*/ +.ui.basic.segment { + position: relative; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.ui.basic.segment:before { + position: absolute; + top: 0px; + width: 100%; + content: ''; + height: 1px; + background-color: rgba(0, 0, 0, 0.05); + border-top: 1px solid rgba(255, 255, 255, 0.8); +} +/*------------------- + Colors +--------------------*/ +.ui.blue.segment { + color: #6ECFF5 !important; +} +.ui.green.segment { + color: #A1CF64 !important; +} +.ui.red.segment { + color: #EF4D6D !important; +} +.ui.purple.segment { + color: #564F8A !important; +} +.ui.teal.segment { + color: #00B5AD !important; +} +/*------------------- + Aligned +--------------------*/ +.ui.left.aligned.segment { + text-align: left; +} +.ui.right.aligned.segment { + text-align: right; +} +.ui.center.aligned.segment { + text-align: center; +} +/*------------------- + Floated +--------------------*/ +.ui.floated.segment, +.ui.left.floated.segment { + float: left; +} +.ui.right.floated.segment { + float: right; +} +/*------------------- + Raised +--------------------*/ +.ui.raised.segment { + -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); +} +/*------------------- + Inverted +--------------------*/ +.ui.inverted.segment { + background-color: #555555; +} +.ui.primary.inverted.segment { + background-color: #777777; + color: #F5F5F5; +} +.ui.secondary.inverted.segment { + background-color: #777777; + color: #F5F5F5; +} +.ui.tertiary.inverted.segment { + background-color: #B0B0B0; + color: #EBEBEB; +} +/*------------------- + Ordinality +--------------------*/ +.ui.primary.segment { + background-color: #FFFFFF; + color: #555555; +} +.ui.secondary.segment { + background-color: #F5F5F5; + color: #777777; +} +.ui.tertiary.segment { + background-color: #EBEBEB; + color: #B0B0B0; +} +/*------------------- + Attached +--------------------*/ .ui.segment.attached { top: -1px; bottom: -1px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; + margin: 0em; -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; box-shadow: 0px 0px 0px 1px #DDDDDD; @@ -40,6 +180,7 @@ .ui.top.attached.segment { top: 0px; bottom: -1px; + margin-top: 0em; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; @@ -47,11 +188,8 @@ .ui.segment.bottom.attached { top: -1px; bottom: 0px; + margin-bottom: 0em; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } -/* Common Views */ -.ui.segment .list li { - padding: 10px 25px; -} diff --git a/src/elements/button.less b/src/elements/button.less index 3b0c06f15..630cab9f7 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -264,6 +264,7 @@ /*------------------- Disabled --------------------*/ + .ui.button.disabled, .ui.button.disabled.hover, .ui.button.disabled.down { diff --git a/src/elements/header.less b/src/elements/header.less index a88e0278f..e85a03ef9 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -98,10 +98,11 @@ h5.ui.header { States *******************************/ -.ui.header.disabled { +.ui.disabled.header { opacity: 0.5; } + /******************************* Variations *******************************/ diff --git a/src/elements/segment.less b/src/elements/segment.less index 947082c26..42ba1876d 100755 --- a/src/elements/segment.less +++ b/src/elements/segment.less @@ -1,5 +1,18 @@ +/* + * # Semantic Segment - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: May 17 2013 + */ + + /******************************* - Page Segments + Segment *******************************/ .ui.segment { @@ -10,7 +23,8 @@ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - padding: 1em; + margin: 1em 0em; + padding: 0.5em 1em; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; @@ -24,10 +38,19 @@ overflow: hidden; } -/* Label at the top of a segment */ +/*------------------- + Loose Coupling +--------------------*/ + +/* No padding on edge content */ .ui.segment div:first-child { margin-top: 0px; } +.ui.segment div:last-child { + margin-bottom: 0px; +} + +/* Padding on next content after a label */ .ui.segment .attached.label:first-child + * { margin-top: 2em; } @@ -35,6 +58,156 @@ margin-top: 0em; } +/******************************* + States +*******************************/ + +.ui.disabled.segment { + opacity: 0.5; +} + + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + background-color: #222222; + padding: 0.7em 1em; + color: #FFFFFF; +} + +/*------------------- + Basic +--------------------*/ + +.ui.basic.segment { + position: relative; + background-color: transparent; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.ui.basic.segment:before { + position: absolute; + top: 0px; + width: 100%; + content: ''; + height: 1px; + background-color: rgba(0, 0, 0, 0.05); + border-top: 1px solid rgba(255, 255, 255, 0.8); +} + +/*------------------- + Colors +--------------------*/ + +.ui.blue.segment { + color: #6ECFF5 !important; +} +.ui.green.segment { + color: #A1CF64 !important; +} +.ui.red.segment { + color: #EF4D6D !important; +} +.ui.purple.segment { + color: #564F8A !important; +} +.ui.teal.segment { + color: #00B5AD !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.segment { + text-align: left; +} +.ui.right.aligned.segment { + text-align: right; +} +.ui.center.aligned.segment { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.segment, +.ui.left.floated.segment { + float: left; +} +.ui.right.floated.segment { + float: right; +} + +/*------------------- + Raised +--------------------*/ + +.ui.raised.segment { + -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1); +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + background-color: #555555; +} + +.ui.primary.inverted.segment { + background-color: #777777; + color: #F5F5F5; +} +.ui.secondary.inverted.segment { + background-color: #777777; + color: #F5F5F5; +} + +.ui.tertiary.inverted.segment { + background-color: #B0B0B0; + color: #EBEBEB; +} + + +/*------------------- + Ordinality +--------------------*/ + +.ui.primary.segment { + background-color: #FFFFFF; + color: #555555; +} + +.ui.secondary.segment { + background-color: #F5F5F5; + color: #777777; +} + +.ui.tertiary.segment { + background-color: #EBEBEB; + color: #B0B0B0; +} + + +/*------------------- + Attached +--------------------*/ + .ui.segment.attached { top: -1px; bottom: -1px; @@ -43,6 +216,8 @@ -webkit-border-radius: 0px; border-radius: 0px; + margin: 0em; + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; box-shadow: 0px 0px 0px 1px #DDDDDD; @@ -50,6 +225,9 @@ .ui.top.attached.segment { top: 0px; bottom: -1px; + + margin-top: 0em; + -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; @@ -57,12 +235,10 @@ .ui.segment.bottom.attached { top: -1px; bottom: 0px; + + margin-bottom: 0em; + -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; } - -/* Common Views */ -.ui.segment .list li { - padding: 10px 25px; -} \ No newline at end of file