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

@@ -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();

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);
 

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"; }

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;