segment: adds stacked segment, fixes some examples

Former-commit-id: 83292bbaa9
Former-commit-id: bade842855

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);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}
+.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:1.3em 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 :first-child{margin-top:0}.ui.segment :last-child{margin-bottom:0}.ui.segment :only-child{margin: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.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.stacked.segment{padding-bottom:1.2em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:#F8F8F8;width:100%;height:5px}.ui.stacked.segment:before{bottom:0}.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;color:#FFF}.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}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-18baf2216d41d73d40c246a400fabcba27d2cdc0
+11e29d08f2505d1d66b911b0ca9abc94740da773

build/uncompressed/elements/segment.css

@@ -19,7 +19,7 @@
   -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);
   margin: 1em 0em;
-  padding: 0.5em 1em;
+  padding: 1.3em 1em;
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
@@ -33,11 +33,14 @@
     Loose Coupling
 --------------------*/
 /* No padding on edge content */
-.ui.segment div:first-child {
-  margin-top: 0px;
+.ui.segment :first-child {
+  margin-top: 0em;
 }
-.ui.segment div:last-child {
-  margin-bottom: 0px;
+.ui.segment :last-child {
+  margin-bottom: 0em;
+}
+.ui.segment :only-child {
+  margin: 0em;
 }
 /* Padding on next content after a label */
 .ui.segment .attached.label:first-child + * {
@@ -55,14 +58,6 @@
 /*******************************
            Variations
 *******************************/
-/*-------------------
-      Inverted 
---------------------*/
-.ui.inverted.segment {
-  background-color: #222222;
-  padding: 0.7em 1em;
-  color: #FFFFFF;
-}
 /*-------------------
        Basic
 --------------------*/
@@ -122,6 +117,26 @@
 .ui.right.floated.segment {
   float: right;
 }
+/*-------------------
+       Stacked
+--------------------*/
+.ui.stacked.segment {
+  padding-bottom: 1.2em;
+}
+.ui.stacked.segment:after,
+.ui.stacked.segment:before {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0%;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #F8F8F8;
+  width: 100%;
+  height: 5px;
+}
+.ui.stacked.segment:before {
+  bottom: 0px;
+}
 /*-------------------
        Raised
 --------------------*/
@@ -135,6 +150,7 @@
 --------------------*/
 .ui.inverted.segment {
   background-color: #555555;
+  color: #FFFFFF;
 }
 .ui.primary.inverted.segment {
   background-color: #777777;

node/src/documents/elements/segment.html

@@ -52,10 +52,7 @@ type   : 'UI Element'
       <p>If you notice me you must be looking very hard.</p>
     </div>
   </div>
-  
   <div class="another example">
-    <h4>Ordinality</h4>
-    <p>A segment can be formatted to appear more or less noticable</p>
     <div class="ui primary inverted segment">
       <p>I'm here to tell you something, and you will probably read me first.</p>
     </div>
@@ -70,12 +67,12 @@ type   : 'UI Element'
   <div class="example">
     <h4>Floated</h4>
     <p>A header can sit to the left or right of other content</p>
-    <h3 class="ui right floated segment">
+    <div class="ui right floated segment">
       <p>This segment will appear to the right
-    </h3>
-    <h3 class="ui left floated segment">
+    </div>
+    <div class="ui left floated segment">
       This segment will appear to the left
-    </h3>
+    </div>
   </div>
   
   <div class="example">
@@ -100,6 +97,14 @@ type   : 'UI Element'
     </div>
   </div>
   
+  <div class="example">
+    <h4>Stacked</h4>
+    <p>A segment can be formatted to show it contains multiple pages</p>
+    <div class="ui stacked segment">
+      <p>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.</p>
+    </div>
+  </div>
+  
   <div class="example">
     <h4>Raised</h4>
     <p>A segment may be formatted to raise above the page.</p>

node/src/files/components/semantic/elements/segment.css

@@ -19,7 +19,7 @@
   -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);
   margin: 1em 0em;
-  padding: 0.5em 1em;
+  padding: 1.3em 1em;
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
@@ -33,11 +33,14 @@
     Loose Coupling
 --------------------*/
 /* No padding on edge content */
-.ui.segment div:first-child {
-  margin-top: 0px;
+.ui.segment :first-child {
+  margin-top: 0em;
 }
-.ui.segment div:last-child {
-  margin-bottom: 0px;
+.ui.segment :last-child {
+  margin-bottom: 0em;
+}
+.ui.segment :only-child {
+  margin: 0em;
 }
 /* Padding on next content after a label */
 .ui.segment .attached.label:first-child + * {
@@ -55,14 +58,6 @@
 /*******************************
            Variations
 *******************************/
-/*-------------------
-      Inverted 
---------------------*/
-.ui.inverted.segment {
-  background-color: #222222;
-  padding: 0.7em 1em;
-  color: #FFFFFF;
-}
 /*-------------------
        Basic
 --------------------*/
@@ -122,6 +117,26 @@
 .ui.right.floated.segment {
   float: right;
 }
+/*-------------------
+       Stacked
+--------------------*/
+.ui.stacked.segment {
+  padding-bottom: 1.2em;
+}
+.ui.stacked.segment:after,
+.ui.stacked.segment:before {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0%;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #F8F8F8;
+  width: 100%;
+  height: 5px;
+}
+.ui.stacked.segment:before {
+  bottom: 0px;
+}
 /*-------------------
        Raised
 --------------------*/
@@ -135,6 +150,7 @@
 --------------------*/
 .ui.inverted.segment {
   background-color: #555555;
+  color: #FFFFFF;
 }
 .ui.primary.inverted.segment {
   background-color: #777777;

node/src/files/stylesheets/semantic.css

@@ -509,6 +509,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 #example .another.example {
   border-top: none;
 }
+#example .another.example i.code {
+  top: 15px;
+}
 #example .example > p {
   color: #888888;
 }

src/elements/segment.less

@@ -24,7 +24,7 @@
   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
   margin: 1em 0em;
-  padding: 0.5em 1em;
+  padding: 1.3em 1em;
 
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
@@ -42,12 +42,17 @@
     Loose Coupling
 --------------------*/
 
+
+
 /* No padding on edge content */
-.ui.segment div:first-child {
-  margin-top: 0px;
+.ui.segment :first-child {
+  margin-top: 0em;
 }
-.ui.segment div:last-child {
-  margin-bottom: 0px;
+.ui.segment :last-child {
+  margin-bottom: 0em;
+}
+.ui.segment :only-child {
+  margin: 0em;
 }
 
 /* Padding on next content after a label */
@@ -72,15 +77,6 @@
            Variations
 *******************************/
 
-/*-------------------
-      Inverted 
---------------------*/
-
-.ui.inverted.segment {
-  background-color: #222222;
-  padding: 0.7em 1em;
-  color: #FFFFFF;
-}
 
 /*-------------------
        Basic
@@ -151,6 +147,30 @@
   float: right;
 }
 
+/*-------------------
+       Stacked
+--------------------*/
+
+.ui.stacked.segment {
+  padding-bottom: 1.2em;
+}
+.ui.stacked.segment:after,
+.ui.stacked.segment:before {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0%;
+
+  border-top: 1px solid rgba(0, 0, 0, 0.1); 
+
+  background-color: #F8F8F8;
+  width: 100%;
+  height: 5px;
+}
+.ui.stacked.segment:before {
+  bottom: 0px;
+}
+
 /*-------------------
        Raised
 --------------------*/
@@ -167,6 +187,7 @@
 
 .ui.inverted.segment {
   background-color: #555555;
+  color: #FFFFFF;
 }
 
 .ui.primary.inverted.segment {