From c6a5e97eed1c26b85e1cc7fb586b03f5e836a1c0 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 5 Jun 2015 13:46:40 -0400 Subject: [PATCH] #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 | 3 ++ src/definitions/elements/rail.less | 57 +++++++++++++--------- src/themes/default/elements/rail.variables | 15 +++++- 3 files changed, 49 insertions(+), 26 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index aab4c5c9a..1c57ec4b5 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/elements/rail.less b/src/definitions/elements/rail.less index 85aaf38c0..0d090313d 100755 --- a/src/definitions/elements/rail.less +++ b/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; } /*-------------- diff --git a/src/themes/default/elements/rail.variables b/src/themes/default/elements/rail.variables index 254b1dbf2..1665f7d49 100644 --- a/src/themes/default/elements/rail.variables +++ b/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; \ No newline at end of file