#2366, rail now uses border-box to ensure that height matches container by default. Added sizing variables for calculating width with padding

RELEASE-NOTES.md

@@ -13,6 +13,7 @@
 - **Popup** - Popups are no longer exclusive by default. Opening a popup will not necessarily close other visible popups. You can change this behavior by using the setting `exclusive: true`. Additionally the default theme now uses `1em` size for `medium` popups.
 - **Colors** - Default colors have been slightly adjusted, and new colors have been added, which may cause slight changes in your design.
 - **Segment** - Segment no longer includes a [clearfix](http://learnlayout.com/clearfix.html) by default. You will need to specify a `clearing segment` to fix issues caused by floated content.
+- **Rail** - Rail now uses `border-box` instead of previous `content-box`. This means any manually set rail widths will now need to account for padding. This fixes issues where rail height may be mismatched when using padding due to differences in `100%` height
 - **Tab** - `onTabInit` and `onTabLoad` have been renamed to `onFirstLoad` and `onLoad` respectively. This is to conform to the naming conventions of other modules. Previous callbacks will continue to work but will produce deprecation notices in console. Two new callbacks `onVisible` and `onRequest` have been added as well.
 
 **New UI**
@@ -205,6 +206,7 @@
 - **Popup** - Fixed bug which could cause pre-existing inline popup to be removed from DOM after hiding
 - **Popup** - Fixes popup offstage position calculations with pages including horizontal scrollbars
 - **Popup** - Added `addTouchEvents` to specify whether touch events should be added to trigger popup on mobile
+- **Rail** - Rail 100% height now uses `border-box` to ensure exact height match to container
 - **Rating** - Rating now correctly adjusts if `data` attributes change
 - **Reveal** - Removed `masked` reveal, all reveals are masked by default
 - **RTL** - Fixed `rtl: 'both'` in `semantic.json` not building both versions of source correctly.
@@ -221,6 +223,7 @@
 - **Steps** - Fixes bug where `ordered steps` had smaller numbers in `IE10`
 - **Steps** - Fixed bug where `stackable steps` were not working correctly
 - **Sticky** - Fix issue with sticky content scroll css transition causing element to scroll too slowly when cannot fit on screen.
+- **Sticky** - Fix issues when `pushing: true` with sticky content having incorrect bottom spacing, when container has bottom padding
 - **Sticky** - Fixed issue with sticky content animating width on display in some cases.
 - **Tab** - Tab name is no longer case sensitive
 - **Table** - Fixes `sorted` column are not correctly centered with `center aligned` due to margin on sort icon

src/definitions/elements/rail.less

@@ -27,21 +27,20 @@
   top: 0%;
   width: @width;
   height: @height;
-  box-sizing: @contentSizing;
 }
 
 .ui.left.rail {
   left: auto;
   right: 100%;
-  padding: 0em (@distance / 2) 0em 0em;
-  margin: 0em (@distance / 2) 0em 0em;
+  padding: 0em @splitDistance 0em 0em;
+  margin: 0em @splitDistance 0em 0em;
 }
 
 .ui.right.rail {
   left: 100%;
   right: auto;
-  padding: 0em 0em 0em (@distance / 2);
-  margin: 0em 0em 0em (@distance / 2);
+  padding: 0em 0em 0em @splitDistance;
+  margin: 0em 0em 0em @splitDistance;
 }
 
 /*******************************
@@ -55,52 +54,62 @@
 .ui.left.internal.rail {
   left: 0%;
   right: auto;
-  padding: 0em 0em 0em (@distance / 2);
-  margin: 0em 0em 0em (@distance / 2);
+  padding: 0em 0em 0em @splitDistance;
+  margin: 0em 0em 0em @splitDistance;
 }
 
 .ui.right.internal.rail {
   left: auto;
   right: 0%;
-  padding: 0em (@distance / 2) 0em 0em;
-  margin: 0em (@distance / 2) 0em 0em;
+  padding: 0em @splitDistance 0em 0em;
+  margin: 0em @splitDistance 0em 0em;
 }
 
 
 /*--------------
-     Divided
+    Dividing
 ---------------*/
 
+.ui.dividing.rail {
+  width: @dividingWidth;
+}
 .ui.left.dividing.rail {
-  padding: 0em (@dividedDistance / 2) 0em 0em;
-  margin: 0em (@dividedDistance / 2) 0em 0em;
-  border-right: @dividedBorder;
+  padding: 0em @splitDividingDistance 0em 0em;
+  margin: 0em @splitDividingDistance 0em 0em;
+  border-right: @dividingBorder;
 }
 .ui.right.dividing.rail {
-  border-left: @dividedBorder;
-  padding: 0em 0em 0em (@dividedDistance / 2);
-  margin: 0em 0em 0em (@dividedDistance / 2);
+  border-left: @dividingBorder;
+  padding: 0em 0em 0em @splitDividingDistance;
+  margin: 0em 0em 0em @splitDividingDistance;
 }
 
 /*--------------
     Distance
 ---------------*/
 
+.ui.close.rail {
+  width: @closeWidth;
+}
 .ui.close.left.rail {
-  padding: 0em (@closeDistance / 2) 0em 0em;
-  margin: 0em (@closeDistance / 2) 0em 0em;
+  padding: 0em @splitCloseDistance 0em 0em;
+  margin: 0em @splitCloseDistance 0em 0em;
 }
 .ui.close.right.rail {
-  padding: 0em 0em 0em (@closeDistance / 2);
-  margin: 0em 0em 0em (@closeDistance / 2);
+  padding: 0em 0em 0em @splitCloseDistance;
+  margin: 0em 0em 0em @splitCloseDistance;
+}
+
+.ui.very.close.rail {
+  width: @veryCloseWidth;
 }
 .ui.very.close.left.rail {
-  padding: 0em (@veryCloseDistance / 2) 0em 0em;
-  margin: 0em (@veryCloseDistance / 2) 0em 0em;
+  padding: 0em @splitVeryCloseDistance 0em 0em;
+  margin: 0em @splitVeryCloseDistance 0em 0em;
 }
 .ui.very.close.right.rail {
-  padding: 0em 0em 0em (@veryCloseDistance / 2);
-  margin: 0em 0em 0em (@veryCloseDistance / 2);
+  padding: 0em 0em 0em @splitVeryCloseDistance;
+  margin: 0em 0em 0em @splitVeryCloseDistance;
 }
 
 /*--------------

src/themes/default/elements/rail.variables

@@ -6,10 +6,11 @@
        Element
 --------------------*/
 
-@contentSizing: content-box;
 @width: 300px;
 @height: 100%;
+
 @distance: 4rem;
+@splitDistance: (@distance / 2);
 
 /*-------------------
       Variations
@@ -19,8 +20,18 @@
 @closeDistance: 2em;
 @veryCloseDistance: 1em;
 
+@splitCloseDistance: (@closeDistance / 2);
+@splitVeryCloseDistance: (@veryCloseDistance / 2);
+
+@closeWidth: @width + @splitCloseDistance;
+@veryCloseWidth: @width + @splitVeryCloseDistance;
+
 /* Divided */
 @dividedBorder: 1px solid @borderColor;
 @dividedDistance: 5rem;
+@splitDividedDistance: (@dividedDistance / 2);
+
+@dividedRailWidth:
+
+@medium: 1em;
 
-@medium: 1em;