Work in progress commit of UI list variables

server/documents/views/list.html.eco

@@ -28,27 +28,27 @@ type        : 'UI View'
         <div class="content">
           <div class="header">Schnoodle</div>
           Your new dog
-        </div>
-        <div class="list">
-          <div class="item">
-            <i class="mail outline icon"></i>
-            <div class="content">
-              <a class="header">Thanks for being my owner</a>
-              <div class="description">Im so glad you chose to bring me home from the shelter...</div>
+          <div class="list">
+            <div class="item">
+              <i class="mail outline icon"></i>
+              <div class="content">
+                <a class="header">Thanks for being my owner</a>
+                <div class="description">Im so glad you chose to bring me home from the shelter...</div>
+              </div>
             </div>
-          </div>
-          <div class="item">
-            <i class="mail outline icon"></i>
-            <div class="content">
-              <a class="header">What a walk</a>
-              <div class="description">Man i am so tired that walk today really was too far...</div>
+            <div class="item">
+              <i class="mail outline icon"></i>
+              <div class="content">
+                <a class="header">What a walk</a>
+                <div class="description">Man i am so tired that walk today really was too far...</div>
+              </div>
             </div>
-          </div>
-          <div class="item">
-            <i class="map icon"></i>
-            <div class="content">
-              <a class="header">Sorry about your old dog</a>
-              <div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
+            <div class="item">
+              <i class="map icon"></i>
+              <div class="content">
+                <a class="header">Sorry about your old dog</a>
+                <div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
+              </div>
             </div>
           </div>
         </div>
@@ -58,27 +58,27 @@ type        : 'UI View'
         <div class="content">
           <div class="header">Ragamuffin</div>
           Your old dog.
-        </div>
-        <div class="list">
-          <div class="item">
-            <i class="photo icon"></i>
-            <div class="content">
-              <a class="header">Was on a walk today</a>
-              <div class="description">Here's a picture of me on the farm with a cow...</div>
+          <div class="list">
+            <div class="item">
+              <i class="photo icon"></i>
+              <div class="content">
+                <a class="header">Was on a walk today</a>
+                <div class="description">Here's a picture of me on the farm with a cow...</div>
+              </div>
             </div>
-          </div>
-          <div class="item">
-            <i class="mail outline icon"></i>
-            <div class="content">
-              <a class="header">Ruff Ruff</a>
-              <div class="description">I know i usually message you in english but i wanted to see how your dog language was progressing...</div>
+            <div class="item">
+              <i class="mail outline icon"></i>
+              <div class="content">
+                <a class="header">Ruff Ruff</a>
+                <div class="description">I know i usually message you in english but i wanted to see how your dog language was progressing...</div>
+              </div>
             </div>
-          </div>
-          <div class="item">
-            <i class="mail outline icon"></i>
-            <div class="content">
-              <a class="header">Reaching Out</a>
-              <div class="description">Hey its your old dog, been a while since you sent me to the farm...</div>
+            <div class="item">
+              <i class="mail outline icon"></i>
+              <div class="content">
+                <a class="header">Reaching Out</a>
+                <div class="description">Hey its your old dog, been a while since you sent me to the farm...</div>
+              </div>
             </div>
           </div>
         </div>

src/definitions/views/list.less

@@ -1,5 +1,5 @@
 /*
- * # Semantic List - Flat
+ * # Semantic List
  * http://github.com/jlukic/semantic-ui/
  *
  *
@@ -10,6 +10,16 @@
  * Released: April 26 2013
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'list';
+
+@import '../../semantic.config';
+
+
 /*******************************
             List
 *******************************/
@@ -17,15 +27,9 @@
 ul.ui.list,
 ol.ui.list,
 .ui.list {
-  list-style-type: none;
-  margin: 1em 0em;
-  padding: 0em;
-}
-ul.ui.list ul,
-ol.ui.list ol,
-.ui.list .list {
-  margin: 0em;
-  padding: 0.5em 0em 0.5em 1em;
+  list-style-type: @listStyleType;
+  margin: @margin;
+  padding: @verticalPadding @horizontalPadding;
 }
 
 ul.ui.list:first-child,
@@ -42,7 +46,6 @@ ol.ui.list:last-child,
   padding-bottom: 0em;
 }
 
-
 /*******************************
             Content
 *******************************/
@@ -52,13 +55,15 @@ ul.ui.list li,
 ol.ui.list li,
 .ui.list .item {
   display: list-item;
-  list-style-type: none;
-  list-style-position: outside;
+  list-style-type: @listStyleType;
+  list-style-position: @listStylePosition;
 
-  padding: 0.3rem 0em;
-  line-height: 1.2;
+  padding: @itemVerticalPadding @itemHorizontalPadding;
+  line-height: @itemLineHeight;
 }
 
+ul.ui.list > li:first-child,
+ol.ui.list > li:first-child,
 .ui.list .item:after {
   content: '';
   display: block;
@@ -67,7 +72,6 @@ ol.ui.list li,
   visibility: hidden;
 }
 
-/* First Last Child */
 ul.ui.list > li:first-child,
 ol.ui.list > li:first-child,
 .ui.list > .item:first-child {
@@ -79,68 +83,62 @@ ol.ui.list > li:last-child,
   padding-bottom: 0em !important;
 }
 
-.ui.horizontal.list > .item:first-child,
-.ui.horizontal.list > .item:last-child,
-.ui.celled.list > .item:first-child,
-.ui.celled.list > .item:last-child {
-  padding-top: 0.3em !important;
-  padding-bottom: 0.3em !important;
-}
-
-/* Sub-List */
+/* Child List */
+ul.ui.list ul,
+ol.ui.list ol,
 .ui.list .list {
   clear: both;
+  margin: 0em;
+  padding: @subListVerticalPadding 0em @subListVerticalPadding @subListIndent;
 }
 
 /* Icon */
 .ui.list .item > .icon {
-  display: block;
-  float: left;
-  margin: 0em 1em 0em 0em;
-  padding: 0.1em 0em 0em 0em;
+  display: table-cell;
+  padding: 0em @iconDistance 0em 0em;
+  vertical-align: @iconAlign;
+  transition: @iconTransition;
 }
 .ui.list .item > .icon:only-child {
   display: inline-block;
 }
-.ui.horizontal.list .item > .icon {
-  margin: 0em;
-  padding: 0em 0.25em 0em 0em;
-}
-.ui.horizontal.list .item > .icon,
-.ui.horizontal.list .item > .icon + .content {
-  float: none;
-  display: inline-block;
-}
+
 
 /* Image */
-.ui.list .item > img {
-  display: block;
-  float: left;
-  margin-right: 1em;
-  vertical-align: middle;
+.ui.list .item > .image {
+  display: table-cell;
+  padding-right: @imageDistance;
+  vertical-align: @imageAlign;
+}
+.ui.list .item > img.image,
+.ui.list .item > .image:only-child {
+  display: inline-block;
+  padding-right: 0em;
 }
 
 /* Content */
-.ui.list .item > .content {
-  vertical-align: middle;
-  line-height: 1.2;
-}
+.ui.list .item > .image + .content,
 .ui.list .item > .icon + .content {
-  vertical-align: top;
+  display: table-cell;
+  vertical-align: @contentAlign;
+}
+.ui.list .item > img.image + .content {
+  display: inline-block;
+}
+.ui.list .item > .content > .list {
+  margin-left: 0em;
 }
 
 /* Link */
 .ui.list a {
   cursor: pointer;
+  color: @itemLinkColor;
+}
+.ui.list a:hover {
+  color: @itemLinkHoverColor;
 }
 .ui.list a .icon {
   color: rgba(0, 0, 0, 0.6);
-
-  -webkit-transition: color 0.2s ease;
-  -moz-transition: color 0.2s ease;
-  -o-transition: color 0.2s ease;
-  -ms-transition: color 0.2s ease;
-  transition: color 0.2s ease;
 }
 
 /* Header */
@@ -191,6 +189,24 @@ ol.ui.list > li:last-child,
   padding-bottom: 0em;
 }
 
+/* Padding on all elements */
+.ui.horizontal.list > .item:first-child,
+.ui.horizontal.list > .item:last-child {
+  padding-top: @itemVerticalPadding;
+  padding-bottom: @itemVerticalPadding;
+}
+
+/* Horizontal List */
+.ui.horizontal.list .item > .icon {
+  margin: 0em;
+  padding: 0em 0.25em 0em 0em;
+}
+.ui.horizontal.list .item > .icon,
+.ui.horizontal.list .item > .icon + .content {
+  float: none;
+  display: inline-block;
+}
+
 
 /*******************************
              States
@@ -220,9 +236,6 @@ ol.ui.list > li:last-child,
 .ui.inverted.list .description {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.inverted.link.list .item {
-  color: rgba(255, 255, 255, 0.4);
-}
 
 /*-------------------
        Link
@@ -249,6 +262,9 @@ ol.ui.list > li:last-child,
 }
 
 /* Inverted */
+.ui.inverted.link.list .item {
+  color: rgba(255, 255, 255, 0.4);
+}
 .ui.inverted.link.list a.item,
 .ui.inverted.link.list .item a {
   color: rgba(255, 255, 255, 0.6);
@@ -542,6 +558,13 @@ ol.ui.horizontal.list li:before,
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+/* Padding on all elements */
+.ui.celled.list > .item:first-child,
+.ui.celled.list > .item:last-child {
+  padding-top: @itemVerticalPadding;
+  padding-bottom: @itemVerticalPadding;
+}
+
 /* Sub Menu */
 .ui.celled.list .item .list {
   margin-left: -0.5em;
@@ -666,4 +689,6 @@ ol.ui.horizontal.list li:before,
 }
 .ui.massive.list .item {
   font-size: 1.5rem;
-}
+}
+
+.loadUIOverrides();

src/themes/_site/views/list.overrides

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/_site/views/list.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/packages/default/views/list.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packages/default/views/list.variables

@@ -0,0 +1,55 @@
+
+/*-------------------
+    Globals Used
+--------------------*/
+
+// (Color Variables)
+// @transitionDuration
+// @transitionEasing
+// @iconWidth
+// @borderColor
+// @textColor, @invertedTextColor
+
+/*-------------------
+       List
+--------------------*/
+
+/* List */
+@listStyleType: none;
+@listStylePosition: outside;
+@margin: 0em;
+@verticalPadding: 0em;
+@horizontalPadding: 0em;
+
+/* Sub List */
+@subListVerticalPadding: 0.3em;
+@subListIndent: 1em;
+
+/* List Item */
+@itemVerticalPadding: 0.3em;
+@itemHorizontalPadding: 0em;
+@itemLineHeight: 1.2;
+
+
+/*-------------------
+      Elements
+--------------------*/
+
+/* Icon */
+@iconDistance: 1em;
+@iconAlign: top;
+@iconTransition: color 0.2s ease;
+
+/* Image */
+@imageDistance: 1em;
+@imageAlign: top;
+
+/* Content */
+@contentAlign: top;
+
+/* Link */
+@itemLinkColor: @textColor;
+@itemLinkHoverColor: @linkHoverColor;
+
+/* Linked Icon */
+@itemLinkIconColor: @lightTextColor;