Styles for contact items.

2 files changed, 36 insertions, 22 deletions

diff --git a/templates/@theme-base/_full.scss b/templates/@theme-base/_full.scss
index fe597d4..5e9eb18 100644
--- a/templates/@theme-base/_full.scss
+++ b/templates/@theme-base/_full.scss
@@ -126,9 +126,18 @@ body {
   background: $base;
 }
 
+.items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer {
+  border-color: lighten($base, 10%);
+
+  .item-container, .item-container-row {
+    border-color: lighten($base, 10%);
+  }
+}
+
 // Unread, not active
-.conversation.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
-.conversation.item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container {
+.item-container:not(.item-is-selected):not(.read):not(.active),
+.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
+.item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container {
   background: lighten($base, 5%);
 }
 
diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss
index 7adbe55..422bef2 100644
--- a/templates/@theme-base/_styles.scss
+++ b/templates/@theme-base/_styles.scss
@@ -98,32 +98,32 @@ $boxshadow-main: none;
   &.marked::before {
     background: $highlight;
   }
+}
 
-  &.item-container, &.item-container-row  {
-    &:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
-      background: $color-standard-text;
-    }
+.item-container, .item-container-row  {
+  &:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
+    background: $color-standard-text;
   }
+}
 
-  &.item-container.selected, &.item-container-row.selected,
-  &.item-container.active, &.item-is-selected {
-    background: rgba($highlight, 0.1);
-  }
+.item-container.selected, .item-container-row.selected,
+.item-container.active, .item-is-selected {
+  background: rgba($highlight, 0.1);
+}
 
-  .selectBoxElement-container:hover {
-    .item-icon {
-      background-color: transparent;
-      border: 1px solid darken($highlight, 5%);
+.selectBoxElement-container:hover {
+  .item-icon {
+    background-color: transparent;
+    border: 1px solid darken($highlight, 5%);
 
-      .item-icon-fakecheck-icon {
-        fill: darken($highlight, 5%);
-      }
+    .item-icon-fakecheck-icon {
+      fill: darken($highlight, 5%);
     }
+  }
 
-   .item-checkbox:checked + .item-icon {
-      background-color: darken($highlight, 5%);
-      border-color: darken($highlight, 5%);
-    }
+ .item-checkbox:checked + .item-icon {
+    background-color: darken($highlight, 5%);
+    border-color: darken($highlight, 5%);
   }
 }
 
@@ -132,8 +132,13 @@ $boxshadow-main: none;
   border-color: $highlight;
 }
 
+.item-checkbox + .item-icon:hover {
+  background-color: darken($highlight, 5%);
+  border-color: darken($highlight, 5%);
+}
+
 .item-checkbox + .item-icon:hover .item-icon-fakecheck-icon {
-  fill: $highlight;
+  fill: $navigation;
 }
 
 .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon {