From 4733dc497ac88ac1f4941c748794e330ec5c2259 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sun, 24 Aug 2014 13:05:35 -0400 Subject: [PATCH] Fixes #357, Horizontal Dividers now adjust to text size automatically. Added loose coupling with header, for ui horizontal divider header --- src/definitions/elements/divider.less | 118 ++++++++---------- .../default/elements/divider.variables | 17 ++- .../packages/default/elements/icon.overrides | 1 + .../packages/default/elements/icon.variables | 2 +- 4 files changed, 61 insertions(+), 77 deletions(-) diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less index aedffd286..8a301ec70 100755 --- a/src/definitions/elements/divider.less +++ b/src/definitions/elements/divider.less @@ -26,34 +26,62 @@ .ui.divider { margin: @dividerMargin 0rem; - border-top: @shadowWidth solid @shadowColor; - border-bottom: @highlightWidth solid @highlightColor; - line-height: 1; height: 0em; - box-sizing: border-box; + font-weight: @fontWeight; + text-transform: @textTransform; + color: @color; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.ui.vertical.divider, -.ui.horizontal.divider { - position: absolute; +/*-------------- + Basic +---------------*/ - border: none; - height: 0em; - margin: 0em; - background-color: transparent; +.ui.divider:not(.vertical):not(.horizontal) { + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; +} + + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.divider { + position: relative; - font-weight: bold; + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; text-align: center; - text-transform: @dividerTextTransform; +} - color: @dividerTextColor; +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + position: absolute; + top: 50%; + content: ''; + z-index: 3; + + width: 50%; + top: 50%; + height: 0px; + + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; } +.ui.horizontal.divider:before { + margin-left: -(50% + @horizontalDividerMargin); +} +.ui.horizontal.divider:after { + margin-left: @horizontalDividerMargin; +} /*-------------- Vertical @@ -65,27 +93,30 @@ top: 50%; left: 50%; - margin: 0% 0% 0% -(@verticalDividerWidth / 2); - - width: @verticalDividerWidth; + width: @verticalDividerMargin; height: 50%; line-height: 0em; padding: 0em; + + border: none; + height: 0em; + background-color: transparent; + text-align: center; } .ui.vertical.divider:before, .ui.vertical.divider:after { position: absolute; left: 50%; - content: " "; + content: ''; z-index: 3; border-left: @shadowWidth solid @shadowColor; border-right: @highlightWidth solid @highlightColor; width: 0%; - height: 80%; + height: @verticalDividerHeight; } .ui.vertical.divider:before { @@ -96,45 +127,6 @@ bottom: 0px; } -/*-------------- - Horizontal ----------------*/ - -.ui.horizontal.divider { - position: relative; - top: 0%; - left: 0%; - - margin: @horizontalDividerVerticalMargin 0em; - height: auto; - padding: 0em; - - line-height: 1; -} - -.ui.horizontal.divider:before, -.ui.horizontal.divider:after { - position: absolute; - top: 50%; - content: ''; - z-index: 3; - - width: @horizontalDividerWidth; - top: 50%; - height: 0%; - - border-top: @shadowWidth solid @shadowColor; - border-bottom: @highlightWidth solid @highlightColor; -} - -.ui.horizontal.divider:before { - left: 0%; -} -.ui.horizontal.divider:after { - left: auto; - right: 0%; -} - /*-------------- Icon ---------------*/ @@ -167,7 +159,7 @@ } .ui.vertical.inverted.divider, .ui.horizontal.inverted.divider { - color: @directionalTextColor; + color: @invertedTextColor; } .ui.divider.inverted, .ui.divider.inverted:after, @@ -204,12 +196,4 @@ margin-bottom: @sectionMargin; } -/*-------------- - Sizes ----------------*/ - -.ui.divider { - font-size: 1rem; -} - .loadUIOverrides(); diff --git a/src/themes/packages/default/elements/divider.variables b/src/themes/packages/default/elements/divider.variables index 05338179f..deb05bb6c 100755 --- a/src/themes/packages/default/elements/divider.variables +++ b/src/themes/packages/default/elements/divider.variables @@ -14,8 +14,10 @@ @shadowWidth: 1px; @shadowColor: rgba(0, 0, 0, 0.1); -@dividerTextColor: @textColor; -@dividerTextTransform: uppercase; +/* Text */ +@fontWeight: bold; +@color: @darkTextColor; +@textTransform: uppercase; /*------------------- Coupling @@ -31,16 +33,13 @@ *******************************/ /* Horizontal / Vertical */ -@directionalFontSize: 0.875rem; -@directionalTextColor: @invertedLightTextColor; - -@horizontalDividerVerticalMargin: 1rem; -@horizontalDividerWidth: 40%; -@verticalDividerWidth: 6%; +@horizontalMargin: ''; +@horizontalDividerMargin: 1.5%; +@verticalDividerMargin: 1rem; +@verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")"; /* Inverted */ @invertedTextColor: @white; - @invertedHighlightColor: rgba(255, 255, 255, 0.15); @invertedShadowColor: rgba(0, 0, 0, 0.15); diff --git a/src/themes/packages/default/elements/icon.overrides b/src/themes/packages/default/elements/icon.overrides index 702629247..5b4f464e0 100755 --- a/src/themes/packages/default/elements/icon.overrides +++ b/src/themes/packages/default/elements/icon.overrides @@ -568,6 +568,7 @@ i.icon.shuffle:before { content: "\f074"; } i.icon.talk:before { content: "\f075"; } i.icon.chat:before { content: "\f075"; } i.icon.shopping.cart:before { content: "\f07a"; } +i.icon.bar.graph:before { content: "\f080"; } i.icon.key:before { content: "\f084"; } i.icon.privacy:before { content: "\f084"; } i.icon.cogs:before { content: "\f085"; } diff --git a/src/themes/packages/default/elements/icon.variables b/src/themes/packages/default/elements/icon.variables index 8decbf4ea..8c6934d05 100755 --- a/src/themes/packages/default/elements/icon.variables +++ b/src/themes/packages/default/elements/icon.variables @@ -11,7 +11,7 @@ @opacity: 0.75; @width: 1.23em; @height: 0.9em; -@distanceFromText: 0em; +@distanceFromText: 0.25em; @linkDuration: 0.3s; @loadingDuration: 2s;