Add new variables for segment, better explanation of horizontal and vertical segments, additional height of raised segment

server/documents/elements/segment.html.eco

@@ -52,20 +52,52 @@ themes      : ['default', 'GitHub']
       <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="another example">
+    <div class="ui tall 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 class="ui header">Vertical Segment</h4>
-    <p>A vertical segment divides content vertically</p>
-    <div class="ui vertical segment">
-      <p>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.</p>
+    <p>A vertical segment formats content to be aligned as part of a vertical group</p>
+    <div class="ui ignored info message">
+      <h3 class="ui header">When to use Directional Segments</h3>
+      <p>Horizontal and vertical segments, are most effectively used with grids, to allow for content to sit only certain columns in a row to receive borders, instead of setting all columns to bordered with <code>ui divided grid</code>.</p>
+      <p>A <code>vertical segment</code> for example, only adds vertical padding and a vertical border, while a <code>basic vertical segment</code> adds only the padding.</p>
+    </div>
+    <div class="ui segment">
+      <div class="ui vertical segment">
+        <p>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.</p>
+      </div>
+      <div class="ui vertical segment">
+        <p>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.</p>
+      </div>
+      <div class="ui vertical segment">
+        <p>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.</p>
+      </div>
     </div>
   </div>
 
   <div class="example">
     <h4 class="ui header">Horizontal Segment</h4>
-    <p>A horizontal segment divides content horizontally</p>
-    <div class="ui horizontal segment">
-      <p>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.</p>
+    <p>A vertical segment formats content to be aligned as part of a horizontal group</p>
+    <div class="ui three column grid">
+      <div class="column">
+        <div class="ui horizontal segment">
+          <p>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.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui horizontal segment">
+          <p>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.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="ui horizontal segment">
+          <p>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.</p>
+        </div>
+      </div>
     </div>
   </div>
 

src/definitions/elements/segment.less

@@ -45,14 +45,13 @@
   margin-bottom: 0em;
 }
 
-/* Testing removal
 .ui.segment:after {
   content: '';
   display: block;
   height: 0px;
   clear: both;
   visibility: hidden;
-}*/
+}
 
 .ui.vertical.segment {
   margin: 0em;
@@ -67,6 +66,10 @@
 .ui.vertical.segment:first-child {
   padding-top: 0em;
 }
+.ui.vertical.segment:last-child {
+  padding-bottom: 0em;
+  box-shadow: none;
+}
 
 .ui.horizontal.segment {
   margin: 0em;
@@ -81,6 +84,10 @@
 .ui.horizontal.segment:first-child {
   padding-left: 0em;
 }
+.ui.horizontal.segment:last-child {
+  box-shadow: none;
+  padding-right: 0em;
+}
 
 /*-------------------
     Loose Coupling
@@ -187,17 +194,23 @@
 .ui.stacked.segment:before {
   content: '';
   position: absolute;
-  bottom: -3px;
+  bottom: -(@stackedHeight / 2);
   left: 0%;
 
   border-top: 1px solid @borderColor;
-  background-color: @subtleTransparentBlack;
+  background-color: @stackedPageBackground;
 
   width: 100%;
   height: @stackedHeight;
   visibility: visible;
 }
 .ui.stacked.segment:before {
+  display: none;
+}
+
+/* Add additional page */
+.ui.tall.stacked.segment:before {
+  display: block;
   bottom: 0px;
 }
 

src/themes/packages/default/elements/segment.variables

@@ -42,8 +42,10 @@
 @circularPadding: 2em;
 
 /* Stacked */
-@stackedPadding: @verticalPadding + (0.7em);
-@stackedHeight: 5px;
+@stackedHeight: 6px;
+@stackedPageBackground: @subtleTransparentBlack;
+@stackedPadding: @verticalPadding + (0.4em);
+@tallStackedPadding: @verticalPadding + (0.8em);
 
 /* Raised */
 @raisedShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);