Colors
-
A header can be formatted as different colors
+
A header can be formatted with different colors
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
+
+
+
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