From b7ccfa75f43b74344b7654256778a8115e76ba43 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 28 May 2015 12:57:02 -0400 Subject: [PATCH] Redo stackable grid divider to use table cell #2311 --- RELEASE-NOTES.md | 1 + src/definitions/collections/grid.less | 5 --- src/definitions/elements/divider.less | 32 ++++++++++--------- src/themes/default/elements/divider.overrides | 9 ++++++ 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 36c280176..30f867faf 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -129,6 +129,7 @@ - **Checkbox** - Fix `:focus` styles only applying if checkbox is unchecked - **Divider** - Hidden divider now correctly hides vertical dividers - **Divider** - Fixes single icon alignment inside `vertical divider` or `horizontal divider` +- **Divider** - Fixed slight offset in `vertical divider` when it automatically adjusts to `horizontal divider` inside a `stackable grid` - **Dropdown** - `focus` after changing tabs will no longer cause menu to re-open **Thanks @trevorharwell** - **Dropdown** - Fix issue with search dropdown refocusing on self the first time after "tabbing" away in Chrome - **Dropdown** - Fixes issue with headers disappearing inside of `ui dropdown` when nested in `ui menu` diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index c78409f8f..65d14b8e6 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -1642,11 +1642,6 @@ body > .ui.grid { margin-right: -(@stackableGutter / 2) !important; } - /* Equal Height Stackable */ - .ui[class*="equal height"].stackable.page.grid { - display: block !important; - } - /* Divided Stackable */ .ui.stackable.divided.grid > .row:first-child > .column:first-child, .ui.stackable.celled.grid > .row:first-child > .column:first-child, diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less index 41d66adf8..7539a622b 100755 --- a/src/definitions/elements/divider.less +++ b/src/definitions/elements/divider.less @@ -132,42 +132,44 @@ /* Inside grid */ @media only screen and (max-width : (@tabletBreakpoint - 1px)) { + .ui.stackable.grid .ui.vertical.divider, .ui.grid .stackable.row .ui.vertical.divider { - position: relative; - margin: @margin; - left: 50%; + display: table; + white-space: nowrap; height: auto; + margin: @horizontalMargin; overflow: hidden; line-height: 1; text-align: center; + position: static; + top: 0; + left: 0; + transform: none; } .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before, .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after { - position: absolute; - top: 50%; - left: auto; + position: static; + left: 0; + border-left: none; content: ''; - z-index: 3; - - width: 50%; + display: table-cell; + position: relative; top: 50%; - height: 0px; - - border-top: @shadowWidth solid @shadowColor; - border-bottom: @highlightWidth solid @highlightColor; + width: 50%; + background-repeat: no-repeat; } .ui.stackable.grid .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before { - margin-left: -(50% + @horizontalDividerMargin); + background-position: right @horizontalDividerMargin top 50%; } .ui.stackable.grid .ui.vertical.divider:after, .ui.grid .stackable.row .ui.vertical.divider:after { - margin-left: @horizontalDividerMargin; + background-position: left @horizontalDividerMargin top 50%; } } diff --git a/src/themes/default/elements/divider.overrides b/src/themes/default/elements/divider.overrides index b30fe4783..2690ca2e1 100644 --- a/src/themes/default/elements/divider.overrides +++ b/src/themes/default/elements/divider.overrides @@ -6,4 +6,13 @@ .ui.horizontal.divider:before, .ui.horizontal.divider:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); +} + +@media only screen and (max-width : (@tabletBreakpoint - 1px)) { + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); + } } \ No newline at end of file