Refactor .list class stylesheets

src/stylesheets/css/Lungo.layout.list.css

@@ -1,17 +1,21 @@
+.list{font-size:1.2em;font-weight:bold;width:inherit;}
 .list li:not(.toolbar){padding:8px 6px;list-style-type:none;}
-.list li:not(.toolbar) a{width:auto;display:block;}
-.list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;line-height:32px;}
-.list strong,.list small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-.list strong{width:75%;font-size:1.1em;}
-.list small{display:block;font-size:0.9em;font-style:normal;}
-.list li.anchor{font-size:0.9em;font-weight:bold;padding-top:3px;padding-bottom:3px;}
-.list .anchor a{padding:0px;}
-.list .anchor .icon{width:14px !important;height:14px !important;margin-right:4px !important;font-size:1.3em !important;font-weight:normal;line-height:16px !important;}
+.list a{display:block;}
+.list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;}
+.list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.85em;font-weight:normal;}
+.list .icon{display:inline-block;}
+.list .tip{font-size:0.85em;font-weight:bold;}
+.list .light{font-size:0.9em;font-weight:normal;}
+.list .anchor{font-size:0.75em;padding:3px 6px !important;}
+.list .anchor .icon{width:14px !important;height:14px !important;margin-right:4px !important;font-size:1.3em !important;line-height:16px !important;}
 .list .anchor .bubble{display:none;}
-.list li.info{min-height:48px;}
-.list li.info img,.list li.info .icon{height:48px;width:48px;line-height:48px;}
 .list .search input{width:88%;}
 .list .search a{float:right;height:30px;margin:0px;padding:0px;}
 .list .search a .icon{height:12px;width:30px;margin:0px;font-size:1.2em;font-weight:normal;}
 .list a.arrow:before{float:right;content:">";position:relative;top:6px;font-size:16px;font-family:"Courier New",Courier,mono;font-weight:bold;}
-.list .bubble{position:relative;right:2px;top:6px;float:right;padding:2px 3px 3px;line-height:1.0em;font-weight:bold;font-size:0.85em;}
+.list .onright{font-size:0.85em;}
+.list .onright .icon{font-size:1.2em !important;height:12px !important;width:12px !important;margin:0px;}
+.indented ul{border:1px solid #c5c5c5;box-shadow:0px 0px 6px #bbb;margin-bottom:10px;}
+.indented.rounded ul{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.indented.rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;-moz-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+.indented.rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}

src/stylesheets/less/Lungo.layout.list.less

@@ -7,79 +7,68 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
  
-.list li:not(.toolbar) {
-	padding: 8px 6px;
-	list-style-type: none;
-}
-
-.list li:not(.toolbar) a {
-	width: auto; 
-	display: block;
-}
-
-.list li:not(.toolbar) img, .list li:not(.toolbar) .icon {
-	float: left;
-	width: 32px;
-	height: 32px;
-	margin-right: 6px;	
-	font-size: 36px;
-	font-weight: normal;
-	line-height: 32px;
+ @import "mixins.less";
+ 
+.list {
+    font-size: 1.2em;
+    font-weight: bold;
+    width: inherit;
 }
+ 
+	.list li:not(.toolbar) {
+		padding: 8px 6px;
+		list-style-type: none;
+	}
 	
-.list strong, .list small {
-	overflow: hidden;  
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
+	.list a{
+	    display: block;
+	}
 	
-.list strong {
-	width: 75%;
-	font-size: 1.1em;
-}
-
-.list small {
-	display: block;
-	font-size: 0.9em;
-	font-style: normal;
-}
-
-/* @group .anchor */
-.list li.anchor { 	
-	font-size: 0.9em; 
-	font-weight: bold;
-	padding-top: 3px;
-	padding-bottom: 3px;
-}
+	.list li:not(.toolbar) img, .list li:not(.toolbar) .icon {
+		float: left;
+		width: 32px;
+		height: 32px;
+		margin-right: 6px;	
+		font-size: 36px;
+		font-weight: normal;
+	}
 	
-.list .anchor a {
-	padding: 0px;
-}
-
-.list .anchor .icon {
-	width: 14px !important;
-	height: 14px !important;	
-	margin-right: 4px !important; 	
-	font-size:  1.3em !important;
-	font-weight: normal;
-	line-height: 16px !important;	
-}
-
-.list .anchor .bubble {
-	display: none;
-}
-/* @end */
+	.list small {
+		display: block;
+		overflow: hidden;  
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		font-size: 0.85em;
+		font-weight: normal;
+	}
+	
+	.list .icon {
+	    display: inline-block;
+	}
+	
+	.list .tip {
+    	font-size: 0.85em;
+    	font-weight: bold;
+	}
+	
+	.list .light {
+    	font-size: 0.9em;
+    	font-weight: normal;
+	}
 
-/* @group .info */
-.list li.info {
-	min-height: 48px;
-}
+	.list .anchor { 	
+		font-size: 0.75em;
+		padding: 3px 6px !important;
+	}
+		.list .anchor .icon {
+			width: 14px !important;
+			height: 14px !important;	
+			margin-right: 4px !important; 	
+			font-size:  1.3em !important;
+			line-height: 16px !important;	
+		}
 
-.list li.info img, .list li.info .icon {
-	height: 48px;
-	width: 48px;
-	line-height: 48px;
-}
+		.list .anchor .bubble { display: none; }
 /* @end */
 
 /* @group .search */
@@ -115,15 +104,25 @@
 }
 /* @end */
 
-/* @group .bubble */
-.list .bubble { 
-	position: relative; 
-	right: 2px;
-	top: 6px;
-	float: right;
-	padding: 2px 3px 3px;	
-	line-height: 1.0em;
-	font-weight: bold; 
+/* @group .onright */
+.list .onright {
 	font-size: 0.85em;
 }
-/* @end */
+	.list .onright .icon {
+    	font-size: 1.2em !important;
+    	height: 12px !important;
+    	width: 12px !important;
+    	margin: 0px;
+	}
+/* @end */
+
+/* @group .indented */
+	.indented ul {
+		border: 1px solid #c5c5c5;
+		box-shadow: 0px 0px 6px #bbb;
+		margin-bottom: 10px;
+	}
+	.indented.rounded ul { .border-radius(4px); }	
+	.indented.rounded li:first-child { .border-radius(4px 4px 0px 0px); }
+	.indented.rounded li:last-child { .border-radius(0px 0px 4px 4px); }
+/* @end */