From 17e0cdbbd14c778114a345a0509364522fb7b3c4 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Fri, 13 Jun 2014 15:40:55 -0400
Subject: [PATCH] Continuing work on list variables, fixes for icon header
 alignment with line height

---
 src/definitions/views/list.less               | 220 +++++++++---------
 .../default/elements/header.variables         |   2 +-
 .../packages/default/elements/icon.overrides  |   5 +
 .../packages/default/globals/site.variables   |   2 +-
 .../packages/default/views/list.variables     | 129 +++++++++-
 5 files changed, 249 insertions(+), 109 deletions(-)

diff --git a/src/definitions/views/list.less b/src/definitions/views/list.less
index f806d9d03..fd86bfcc8 100755
--- a/src/definitions/views/list.less
+++ b/src/definitions/views/list.less
@@ -72,14 +72,14 @@ ol.ui.list > li:first-child,
   visibility: hidden;
 }
 
-ul.ui.list > li:first-child,
-ol.ui.list > li:first-child,
-.ui.list > .item:first-child {
+ul.ui.list li:first-child,
+ol.ui.list li:first-child,
+.ui.list .item:first-child {
   padding-top: 0em !important;
 }
-ul.ui.list > li:last-child,
-ol.ui.list > li:last-child,
-.ui.list > .item:last-child {
+ul.ui.list li:last-child,
+ol.ui.list li:last-child,
+.ui.list .item:last-child {
   padding-bottom: 0em !important;
 }
 
@@ -95,7 +95,9 @@ ol.ui.list ol,
 /* Icon */
 .ui.list .item > .icon {
   display: table-cell;
-  padding: 0em @iconDistance 0em 0em;
+  margin: 0em;
+  padding-top: @iconOffset;
+  padding-right: @iconDistance;
   vertical-align: @iconAlign;
   transition: @iconTransition;
 }
@@ -113,6 +115,7 @@ ol.ui.list ol,
 .ui.list .item > img.image,
 .ui.list .item > .image:only-child {
   display: inline-block;
+  vertical-align: middle;
   padding-right: 0em;
 }
 
@@ -120,13 +123,22 @@ ol.ui.list ol,
 .ui.list .item > .image + .content,
 .ui.list .item > .icon + .content {
   display: table-cell;
+  padding-left: @contentDistance;
+  vertical-align: @contentAlign;
+}
+.ui.list .item > .image + .content,
+.ui.list .item > .icon + .content {
+  display: table-cell;
+  padding-left: @contentDistance;
   vertical-align: @contentAlign;
 }
 .ui.list .item > img.image + .content {
   display: inline-block;
+  vertical-align: middle;
 }
 .ui.list .item > .content > .list {
   margin-left: 0em;
+  padding-left: 0em;
 }
 
 /* Link */
@@ -138,28 +150,30 @@ ol.ui.list ol,
   color: @itemLinkHoverColor;
 }
 .ui.list a .icon {
-  color: rgba(0, 0, 0, 0.6);
+  color: @itemLinkIconColor;
 }
 
 /* Header */
 .ui.list .header {
   display: block;
   margin: 0em;
-  font-weight: bold;
+  font-family: @itemHeaderFontFamily;
+  font-weight: @itemHeaderFontWeight;
+  color: @itemHeaderColor;
 }
 .ui.list .description {
   display: block;
-  color: rgba(0, 0, 0, 0.8);
+  color: @itemDescriptionColor;
 }
 
 /* Floated Content */
 .ui.list .item > .left.floated {
-  margin-right: 1em;
   float: left;
+  margin-right: @floatMargin;
 }
 .ui.list .item > .right.floated {
-  margin-left: 1em;
   float: right;
+  margin-left: @floatMargin;
 }
 
 
@@ -178,7 +192,7 @@ ol.ui.list ol,
 }
 .ui.horizontal.list > .item {
   display: inline-block;
-  margin-left: 1em;
+  margin-left: @horizontalSpacing;
   font-size: 1rem;
 }
 .ui.horizontal.list > .item:first-child {
@@ -199,7 +213,7 @@ ol.ui.list ol,
 /* Horizontal List */
 .ui.horizontal.list .item > .icon {
   margin: 0em;
-  padding: 0em 0.25em 0em 0em;
+  padding: 0em @horizontalIconDistance 0em 0em;
 }
 .ui.horizontal.list .item > .icon,
 .ui.horizontal.list .item > .icon + .content {
@@ -217,11 +231,10 @@ ol.ui.list ol,
 --------------------*/
 
 .ui.list a:hover .icon {
-  color: rgba(0, 0, 0, 0.8);
+  color: @itemLinkIconHoverColor;
 }
 
 
-
 /*******************************
            Variations
 *******************************/
@@ -231,55 +244,54 @@ ol.ui.list ol,
 --------------------*/
 
 .ui.inverted.list a .icon {
-  color: rgba(255, 255, 255, 0.6);
+  color: @invertedIconLinkColor;
+}
+.ui.inverted.list .header {
+  color: @invertedHeaderColor;
 }
 .ui.inverted.list .description {
-  color: rgba(255, 255, 255, 0.8);
+  color: @invertedDescriptionColor;
 }
 
 /*-------------------
        Link
 --------------------*/
 
-.ui.link.list .item {
-  color: rgba(0, 0, 0, 0.3);
-}
+.ui.link.list .item,
 .ui.link.list a.item,
 .ui.link.list .item a {
-  color: rgba(0, 0, 0, 0.5);
+  color: @linkListItemColor;
 }
 .ui.link.list a.item:hover,
 .ui.link.list .item a:hover {
-  color: rgba(0, 0, 0, 0.8);
+  color:@linkListItemHoverColor;
 }
 .ui.link.list a.item:active,
 .ui.link.list .item a:active {
-  color: rgba(0, 0, 0, 0.8);
+  color:@linkListItemDownColor;
 }
 .ui.link.list a.active.item,
 .ui.link.list .active.item a {
-  color: rgba(0, 0, 0, 0.8);
+  color: @linkListItemActiveColor;
 }
 
 /* Inverted */
-.ui.inverted.link.list .item {
-  color: rgba(255, 255, 255, 0.4);
-}
+.ui.inverted.link.list .item,
 .ui.inverted.link.list a.item,
 .ui.inverted.link.list .item a {
-  color: rgba(255, 255, 255, 0.6);
+  color: @invertedLinkListItemColor;
 }
 .ui.inverted.link.list a.item:hover,
 .ui.inverted.link.list .item a:hover {
-  color: rgba(255, 255, 255, 0.8);
+  color: @invertedLinkListItemHoverColor;
 }
 .ui.inverted.link.list a.item:active,
 .ui.inverted.link.list .item a:active {
-  color: rgba(255, 255, 255, 0.9);
+  color: @invertedLinkListItemDownColor;
 }
 .ui.inverted.link.list a.active.item,
 .ui.inverted.link.list .active.item a {
-  color: rgba(255, 255, 255, 0.8);
+  color: @invertedLinkListItemActiveColor;
 }
 
 /*-------------------
@@ -288,60 +300,58 @@ ol.ui.list ol,
 
 .ui.selection.list .item {
   cursor: pointer;
-  color: rgba(0, 0, 0, 0.4);
-  padding: 0.5em;
-
-  transition:
-    0.2s color ease,
-    0.2s padding-left ease,
-    0.2s background-color ease
-  ;
+  background: @selectionListBackground;
+  padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;
+  color: @selectionListColor;
+  transition: @selectionListTransition;
 }
 .ui.selection.list .item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-  color: rgba(0, 0, 0, 0.7);
+  background: @selectionListHoverBackground;
+  color: @selectionListHoverColor;
 }
 .ui.selection.list .item:active {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.7);
+  background: @selectionListDownBackground;
+  color: @selectionListDownColor;
 }
 .ui.selection.list .item.active {
-  background-color: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.7);
+  background: @selectionListActiveBackground;
+  color: @selectionListActiveColor;
 }
 
-.ui.animated.list .item {
-  transition:
-    0.2s color ease,
-    0.2s padding-left ease,
-    0.2s background-color ease
-  ;
-}
-.ui.animated.list:not(.horizontal) .item:hover {
-  padding-left: 1em;
-}
-.ui.animated.list:not(.horizontal) .item:hover .item:hover {
-  padding-left: 0.5em;
-}
-
-
 /* Inverted */
+
 .ui.inverted.selection.list .item {
-  color: rgba(255, 255, 255, 0.6);
+  background: @invertedSelectionListBackground;
+  color: @selectionListColor;
 }
 .ui.inverted.selection.list .item:hover {
-  background-color: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.8);
+  background: @invertedSelectionListHoverBackground;
+  color: @invertedSelectionListHoverColor;
 }
 .ui.inverted.selection.list .item:active {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.7);
+  background: @invertedSelectionListDownBackground;
+  color: @invertedSelectionListDownColor;
 }
 .ui.inverted.selection.list .item.active {
-  background-color: rgba(255, 255, 255, 0.08);
-  color: #FFFFFF;
+  background: @invertedSelectionListActiveBackground;
+  color: @invertedSelectionListActiveColor;
 }
 
+/*-------------------
+       Animated
+--------------------*/
+
+.ui.animated.list .item {
+  transition: @animatedListTransition;
+}
+.ui.animated.list:not(.horizontal) .item:hover {
+  padding-left: @animatedListIndent;
+}
+.ui.animated.list:not(.horizontal) .item:hover .item:hover {
+  padding-left: @animatedListChildIndent;
+}
+
+
 /*-------------------
        Fitted
 --------------------*/
@@ -352,8 +362,8 @@ ol.ui.list ol,
 }
 
 .ui.fitted.selection.list .item {
-  margin-left: -0.5em;
-  margin-right: -0.5em;
+  margin-left: -@selectionListItemHorizontalPadding;
+  margin-right: -@selectionListItemHorizontalPadding;
 }
 
 /*-------------------
@@ -362,7 +372,7 @@ ol.ui.list ol,
 
 ul.ui.list,
 .ui.bulleted.list {
-  margin-left: 1.25rem;
+  margin-left: @bulletDistance;
 }
 ul.ui.list li,
 .ui.bulleted.list .item {
@@ -371,16 +381,15 @@ ul.ui.list li,
 ul.ui.list li:before,
 .ui.bulleted.list .item:before {
   position: absolute;
-  left: -1.25rem;
-  content: '•';
-
-  line-height: 1.2em;
-  vertical-align: top;
+  left: @bulletOffset;
+  content: @bulletCharacter;
+  opacity: @bulletOpacity;
+  vertical-align: @bulletVerticalAlign;
 }
 
 ul.ui.list ul,
 .ui.bulleted.list .list {
-  padding-left: 1.25rem;
+  padding-left: @bulletChildDistance;
 }
 
 /* Horizontal Bulleted */
@@ -390,11 +399,11 @@ ul.ui.horizontal.bulleted.list,
 }
 ul.ui.horizontal.bulleted.list li,
 .ui.horizontal.bulleted.list .item {
-  margin-left: 1.5rem;
+  margin-left: @horizontalBulletSpacing;
 }
 ul.ui.horizontal.bulleted.list li:before,
 .ui.horizontal.bulleted.list .item:before {
-  left: -0.9em;
+  left: @horizontalBulletOffset;
 }
 ul.ui.horizontal.bulleted.list li:first-child,
 .ui.horizontal.bulleted.list .item:first-child {
@@ -423,25 +432,28 @@ ol.ui.list li,
 ol.ui.list li:before,
 .ui.ordered.list .item:before {
   position: absolute;
-  left: -1.5rem;
-
-  counter-increment: ordered;
-  content: counters(ordered, ".");
-
-  text-align: right;
-  vertical-align: top;
-  opacity: 0.5;
+  left: @orderedCountOffset;
+  counter-increment: @orderedCountName;
+  content: @orderedCountContent;
+  text-align: @orderedCountTextAlign;
+  vertical-align: @orderedCountVerticalAlign;
+  opacity: @orderedCountOpacity;
 }
 
 ol.ui.list ol,
 .ui.ordered.list .list {
-  counter-reset: ordered;
-  padding-left: 2.5em;
+  counter-reset: @orderedCountName;
+  padding-left: @orderedCountDistance;
 }
 
+/* Child Lists */
+ol.ui.list ol,
+.ui.ordered.list .list {
+  padding-left: @orderedChildCountDistance;
+}
 ol.ui.list ol li:before,
 .ui.ordered.list .list .item:before {
-  left: -2em;
+  left: @orderedChildCountOffset;
 }
 
 /* Horizontal Ordered */
@@ -452,7 +464,7 @@ ol.ui.horizontal.list,
 ol.ui.horizontal.list li:before,
 .ui.ordered.horizontal.list .item:before {
   position: static;
-  margin: 0em 0.5em 0em 0em;
+  margin: 0em @horizontalOrderedCountDistance 0em 0em;
 }
 
 
@@ -462,16 +474,16 @@ ol.ui.horizontal.list li:before,
 
 .ui.divided.list  .item,
 .ui.divided.list:not(.horizontal) .list {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: @dividedBorder;
 }
 .ui.divided.list .list .item {
-  border-top: none;
+  border-top: @dividedChildListBorder;
 }
 .ui.divided.list .item .menu .item {
-  border-width: 0px;
+  border-top: @dividedChildItemBorder;
 }
 .ui.divided.list .item:first-child {
-  border-top-width: 0px;
+  border-top: none;
 }
 
 /* Sub Menu */
@@ -484,7 +496,7 @@ ol.ui.horizontal.list li:before,
   padding-right: 1rem;
 }
 .ui.divided.list:not(.horizontal) .list .item:first-child {
-  border-top-width: 1px;
+  border-top-width: @dividedBorderWidth;
 }
 
 /* Divided bulleted */
@@ -667,28 +679,28 @@ ol.ui.horizontal.list li:before,
 --------------------*/
 
 .ui.mini.list .item {
-  font-size: 0.7rem;
+  font-size: @mini;
 }
 .ui.tiny.list .item {
-  font-size: 0.8125rem;
+  font-size: @tiny;
 }
 .ui.small.list .item {
-  font-size: 0.875rem;
+  font-size: @small;
 }
 .ui.list .item {
-  font-size: 1rem;
+  font-size: @medium;
 }
 .ui.large.list .item {
-  font-size: 1.125rem;
+  font-size: @large;
 }
 .ui.big.list .item {
-  font-size: 1.25rem;
+  font-size: @big;
 }
 .ui.huge.list .item {
-  font-size: 1.375rem;
+  font-size: @huge;
 }
 .ui.massive.list .item {
-  font-size: 1.5rem;
+  font-size: @massive;
 }
 
 .loadUIOverrides();
diff --git a/src/themes/packages/default/elements/header.variables b/src/themes/packages/default/elements/header.variables
index 3f31c70d8..0068253b8 100755
--- a/src/themes/packages/default/elements/header.variables
+++ b/src/themes/packages/default/elements/header.variables
@@ -50,7 +50,7 @@
 
 /* Icon */
 @iconSize: 1em;
-@iconOffset: 0em;
+@iconOffset: (@lineHeight - 1em);
 @iconMargin: 1em;
 @iconAlignment: middle;
 
diff --git a/src/themes/packages/default/elements/icon.overrides b/src/themes/packages/default/elements/icon.overrides
index 2f08a547d..42fb6330b 100755
--- a/src/themes/packages/default/elements/icon.overrides
+++ b/src/themes/packages/default/elements/icon.overrides
@@ -530,6 +530,7 @@ i.icon.wechat:before { content: "\f1d7"; }
             Aliases
 *******************************/
 
+
 i.icon.video:before { content: "\f008"; }
 i.icon.sidebar:before { content: "\f00b"; }
 i.icon.check:before { content: "\f00c"; }
@@ -600,6 +601,10 @@ i.icon.numbered.list:before { content: "\f0cb"; }
 i.icon.magic:before { content: "\f0d0"; }
 i.icon.truck:before { content: "\f0d1"; }
 i.icon.currency:before { content: "\f0d6"; }
+i.icon.triangle.down:before { content: "\f0d7"; }
+i.icon.triangle.up:before { content: "\f0d8"; }
+i.icon.triangle.left:before { content: "\f0d9"; }
+i.icon.triangle.right:before { content: "\f0da"; }
 i.icon.envelope:before { content: "\f0e0"; }
 i.icon.conversation:before { content: "\f0e6"; }
 i.icon.lightning:before { content: "\f0e7"; }
diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables
index 0a382936d..ce0791880 100755
--- a/src/themes/packages/default/globals/site.variables
+++ b/src/themes/packages/default/globals/site.variables
@@ -181,7 +181,7 @@
 @invertedSelectedTextColor   : rgba(255, 255, 255, 1);
 @invertedDisabledTextColor   : rgba(255, 255, 255, 0.3);
 
-@unselectedTextColor         : rgba(0, 0, 0, 0.4);
+@unselectedTextColor         : rgba(0, 0, 0, 0.5);
 @selectedTextColor           : rgba(0, 0, 0, 0.8);
 @disabledTextColor           : rgba(0, 0, 0, 0.2);
 
diff --git a/src/themes/packages/default/views/list.variables b/src/themes/packages/default/views/list.variables
index fd80cc086..5d6c3e680 100755
--- a/src/themes/packages/default/views/list.variables
+++ b/src/themes/packages/default/views/list.variables
@@ -28,7 +28,7 @@
 /* List Item */
 @itemVerticalPadding: 0.3em;
 @itemHorizontalPadding: 0em;
-@itemLineHeight: 1.2;
+@itemLineHeight: 1.2em;
 
 
 /*-------------------
@@ -36,8 +36,9 @@
 --------------------*/
 
 /* Icon */
-@iconDistance: 1em;
+@iconDistance: 0.3em;
 @iconAlign: top;
+@iconOffset: (@itemLineHeight - 1em);
 @iconTransition: color 0.2s ease;
 
 /* Image */
@@ -45,6 +46,7 @@
 @imageAlign: top;
 
 /* Content */
+@contentDistance: 0.5em;
 @contentAlign: top;
 
 /* Link */
@@ -52,4 +54,125 @@
 @itemLinkHoverColor: @linkHoverColor;
 
 /* Linked Icon */
-@itemLinkIconColor: @lightTextColor;
\ No newline at end of file
+@itemLinkIconColor: @lightTextColor;
+@itemLinkIconHoverColor: @textColor;
+@invertedIconLinkColor: @invertedLightTextColor;
+
+/* Header */
+@itemHeaderFontFamily: @headerFont;
+@itemHeaderFontWeight: bold;
+@itemHeaderColor: @textColor;
+
+/* Description */
+@itemDescriptionColor: @textColor;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Float */
+@floatMargin: 1em;
+
+/* Horizontal */
+@horizontalSpacing: 1em;
+@horizontalIconDistance: 0.25em;
+
+/* Inverted */
+@invertedListIconColor: @invertedLightTextColor;
+@invertedHeaderColor: @invertedTextColor;
+@invertedDescriptionColor: @invertedTextColor;
+
+/* Link List */
+@linkListItemColor: @unselectedTextColor;
+@linkListItemHoverColor: @selectedTextColor;
+@linkListItemDownColor: @selectedTextColor;
+@linkListItemActiveColor: @selectedTextColor;
+
+/* Inverted Link List */
+@invertedLinkListItemColor: @invertedUnselectedTextColor;
+@invertedLinkListItemHoverColor: @invertedUnselectedTextColor;
+@invertedLinkListItemDownColor: @invertedTextColor;
+@invertedLinkListItemActiveColor: @invertedSelectedTextColor;
+
+/* Selection List */
+@selectionListItemVerticalPadding: 0.5em;
+@selectionListItemHorizontalPadding: 0.5em;
+@selectionListTransition:
+  0.2s color ease,
+  0.2s padding-left ease,
+  0.2s background-color ease
+;
+/* Selection List States */
+@selectionListBackground: transparent;
+@selectionListColor: @unselectedTextColor;
+@selectionListHoverBackground: @subtleTransparentBlack;
+@selectionListHoverColor: @selectedTextColor;
+@selectionListDownBackground: @transparentBlack;
+@selectionListDownColor: @selectedTextColor;
+@selectionListActiveBackground: @transparentBlack;
+@selectionListActiveColor: @selectedTextColor;
+
+/* Inverted Selection List */
+@invertedSelectionListBackground: transparent;
+@invertedSelectionListColor: @invertedUnselectedTextColor;
+@invertedSelectionListHoverBackground: @subtleTransparentWhite;
+@invertedSelectionListHoverColor: @invertedSelectedTextColor;
+@invertedSelectionListDownBackground: @transparentWhite;
+@invertedSelectionListDownColor: @invertedSelectedTextColor;
+@invertedSelectionListActiveBackground: @transparentWhite;
+@invertedSelectionListActiveColor: @invertedSelectedTextColor;
+
+
+/* Animated List */
+@animatedListTransition:
+  0.2s color ease,
+  0.2s padding-left ease,
+  0.2s background-color ease
+;
+@animatedListIndent: 1em;
+@animatedListChildIndent: 0.5em;
+
+/* Bulleted */
+@bulletDistance: 1rem;
+@bulletOffset: -1rem;
+
+@bulletOpacity: 1;
+@bulletCharacter: '•';
+@bulletVerticalAlign: top;
+@bulletChildDistance: @bulletDistance;
+
+/* Horizontal Bullets */
+@horizontalBulletSpacing: 1.5rem;
+@horizontalBulletOffset: -0.9rem;
+
+/* Ordered List */
+@orderedCountName: ordered;
+@orderedCountContent: counters(ordered, ".");
+@orderedCountDistance: 2.5rem;
+@orderedCountOffset: -1.5rem;
+@orderedCountOpacity: 0.6;
+@orderedCountTextAlign: right;
+@orderedCountVerticalAlign: top;
+
+@orderedChildCountDistance: 2em;
+@orderedChildCountOffset: -2em;
+
+/* Horizontal Ordereded */
+@horizontalOrderedCountDistance: 0.5em;
+
+/* Divided */
+@dividedBorderWidth: 1px;
+@dividedBorder: @dividedBorderWidth solid @borderColor;
+@dividedChildListBorder: none;
+@dividedChildItemBorder: none;
+
+/* Sizes */
+@mini: 0.7rem;
+@tiny: 0.8rem;
+@small: 0.9rem;
+@medium: 1rem;
+@large: 1.1rem;
+@big: 1.2rem;
+@huge: 1.3rem;
+@massive: 1.5rem;