Add CSS variable and class styles

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud-libraries · Jan 27, 2023 · 4f43cb0 · 4f43cb0
1 parent 73346f0
commit 4f43cb0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/css/global/variables.css b/src/css/global/variables.css
@@ -57,6 +57,9 @@
     --vs-dropdown-option--active-bg: #136cfb;
     --vs-dropdown-option--active-color: #fff;
 
+    /* Keyboard Focus State */
+    --vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px #949494;
+
     /* Deselect State */
     --vs-dropdown-option--deselect-bg: #fb5858;
     --vs-dropdown-option--deselect-color: #fff;

diff --git a/src/css/modules/dropdown-option.css b/src/css/modules/dropdown-option.css
@@ -14,6 +14,10 @@
     color: var(--vs-dropdown-option--active-color);
 }
 
+.vs__dropdown-option--kb-focus {
+    box-shadow: var(--vs-dropdown-option--kb-focus-box-shadow);
+}
+
 .vs__dropdown-option--deselect {
     background: var(--vs-dropdown-option--deselect-bg);
     color: var(--vs-dropdown-option--deselect-color);