Add note-list focus styles.

tropy · Mar 25, 2017 · dd71258 · dd71258
1 parent 3f9638f
commit dd71258
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/stylesheets/components/note/_list.scss b/src/stylesheets/components/note/_list.scss
@@ -29,17 +29,26 @@ $panel-separator-color: #ddd !default;
     }
 
     &.active {
-      color: $note-active-color;
-      background: $note-active-bg;
+      color: $note-list-active-color;
+      background: $note-list-active-bg;
+
+      @at-root #{selector-replace(&, ".note.list", ".note.list:focus")} {
+        color: $note-list-focus-color;
+        background: $note-list-focus-bg;
+      }
 
       &::before {
         content: none;
       }
 
       & + .note {
-        border-top: 1px solid $note-active-bg;
+        border-top: 1px solid $note-list-active-bg;
         padding-top: ($note-padding-vertical - 1px);
 
+        @at-root #{selector-replace(&, ".note.list", ".note.list:focus")} {
+          border-top-color: $note-list-focus-bg;
+        }
+
         &::before {
           content: none;
         }

diff --git a/src/stylesheets/themes/_light.scss b/src/stylesheets/themes/_light.scss
@@ -204,8 +204,10 @@ $photo-list-active-color: $shade-8;
 $photo-list-active-bg: $shade-3;
 
 // Note list
-$note-active-color: $shade-0;
-$note-active-bg: $brand-primary;
+$note-list-focus-color:  $shade-0;
+$note-list-focus-bg:     $brand-primary;
+$note-list-active-color: $shade-8;
+$note-list-active-bg:    $shade-3;
 
 // Editable
 $editable-color: $text-color;