updated to 2.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bb_lists",
-  "version": "1.4",
+  "version": "2.0",
   "homepage": "https://github.com/buildingfirefoxos/bb_lists",
   "authors": [
     "The gaia team"

lists.css

@@ -1,7 +1,6 @@
 /* ----------------------------------
  * Lists
  * ---------------------------------- */
-
 [data-type="list"] {
   font-weight: 400;
   padding: 0 1.5rem;
@@ -20,24 +19,26 @@
 
 /* Title divisors */
 [data-type="list"] header {
-  border-bottom: 0.1rem solid #ff4E00;
-  padding: 0.5rem 1rem;
+  padding: 0 1.5rem;
   margin: 0;
   font-size: 1.6rem;
-  line-height: 1.8rem;
+  height: 3rem;
+  line-height: 4rem;
   font-weight: normal;
-  color: #ff4E00;
+  color: #ff4e00;
   text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* List items */
 [data-type="list"] li {
   width: 100%;
   height: 6rem;
-  -moz-box-sizing: border-box;
-  transition: transform 0.3s ease, padding 0.3s ease;
+  box-sizing: border-box;
   border-bottom: solid 0.1rem #e7e7e7;
-  color: #000;
+  color: #333;
   margin: 0;
   display: block;
   position: relative;
@@ -49,32 +50,37 @@
 }
 
 /* Pressed State */
+li a:active {
+  background-color: transparent; /* remove default color for active state */
+}
+
 [data-type="list"] li > a {
   text-decoration: none;
-  color: #000;
+  color: #333;
   display: block;
   height: 6rem;
   position: relative;
   border: none;
   outline: none;
 }
 
+[data-type="list"].active li:after,
 [data-type="list"] li > a:after {
   content: "";
-  background-color: #b1f1ff;
-  opacity: 0;
   pointer-events: none;
   position: absolute;
-  left: 0;
+  left: -1.5rem;
   top: 0;
-  right: 0;
+  right: -1.5rem;
   bottom: 0;
-  z-index: 0;
+  z-index: 3;
 }
 
+[data-type="list"].active li:active:after,
+[data-type="list"].active li:hover:after,
 [data-type="list"] li > a:active:after,
 [data-type="list"] li > a:hover:after {
-  opacity: 0.6;
+  background-color: rgba(0,213,255,0.3);
 }
 
 /* Disabled */
@@ -109,19 +115,27 @@
   width: 3rem;
   height: 6rem;
   background: #fff no-repeat left center / 100% auto;
-  font: 0/0 a;
+  font-size: 0;
   display: block;
   overflow: hidden;
 }
 
+[data-type="list"] aside span[data-type=img],
 [data-type="list"] aside img {
   display: block;
   overflow: hidden;
-  width: 6rem;
-  height: 6rem;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 2.5rem;
+  margin-top: 0.5rem;
+  box-sizing: border-box;
+  box-shadow: 0 0 0 0.1rem #dedede;
   background: transparent center center / cover;
   position: relative;
   z-index: 1;
+
+  /* Favor performance over quality */
+  image-rendering: -moz-crisp-edges;
 }
 
 /* Text content */
@@ -132,15 +146,15 @@
   border: none;
   display: block;
   margin: 0;
-  color: #5b5b5b;
+  color: #858585;
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
 [data-type="list"] li p:first-of-type {
   font-size: 1.8rem;
   line-height: 2.2rem;
-  color: #000;
+  color: #333;
   padding: 1rem 0 0;
 }
 
@@ -172,7 +186,6 @@
   z-index: 1;
   width: auto;
   height: auto;
-  border-top: solid 0.1rem #e7e7e7;
 }
 
 [data-type="list"] li > .pack-checkbox input ~ span:after,
@@ -184,17 +197,26 @@
 
 /* Edit mode */
 [data-type="list"] [data-type="edit"] li {
-  transform: translateX(4rem);
-  padding-left: 0;
+  padding-left: 4rem;
 }
 
 [data-type="list"] [data-type="edit"] li > .pack-checkbox,
 [data-type="list"] [data-type="edit"] li > .pack-radio,
 [data-type="list"] [data-type="edit"] li > .pack-switch {
   pointer-events: auto;
+  left: 0;
 }
 
 [data-type="list"] [data-type="edit"] li > a:active:after,
 [data-type="list"] [data-type="edit"] li > a:hover:after {
   display: none;
 }
+
+[data-type="list"] [data-type="edit"] aside.pack-end {
+  display: none;
+}
+
+/* Themes */
+.skin-comms [data-type="list"] header {
+  color: #4997a7;
+}