From ecb953d0dd3050bb9eac3c4e58822978f4167067 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 16 Sep 2014 12:09:30 -0400
Subject: [PATCH] Add new variables for segment, better explanation of
 horizontal and vertical segments, additional height of raised segment

---
 server/documents/elements/segment.html.eco    | 44 ++++++++++++++++---
 src/definitions/elements/segment.less         | 21 +++++++--
 .../default/elements/segment.variables        |  6 ++-
 3 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/server/documents/elements/segment.html.eco b/server/documents/elements/segment.html.eco
index 5a7e483b7..090b9928c 100755
--- a/server/documents/elements/segment.html.eco
+++ b/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>
 
diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index 94c17d1d6..793c434e8 100755
--- a/src/definitions/elements/segment.less
+++ b/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;
 }
 
diff --git a/src/themes/packages/default/elements/segment.variables b/src/themes/packages/default/elements/segment.variables
index 4803fac45..eeae631a7 100755
--- a/src/themes/packages/default/elements/segment.variables
+++ b/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);