focus borders on kui selects and textareas

elastic · Jun 12, 2017 · 495af49 · 495af49
1 parent f8bd667
commit 495af49
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/ui_framework/components/form/_select.scss b/ui_framework/components/form/_select.scss
@@ -1,11 +1,15 @@
 .kuiSelect {
   @include select;
-
   @include formControl;
 
   &.kuiSelect-isInvalid {
     @include formControlInvalid;
   }
+
+  &:focus {
+    box-shadow: none;
+    @include formControlFocus;
+  }
 }
 
 .kuiSelect--large {

diff --git a/ui_framework/components/form/_text_area.scss b/ui_framework/components/form/_text_area.scss
@@ -1,6 +1,11 @@
 .kuiTextArea {
   @include formControl;
 
+  &:focus {
+    box-shadow: none;
+    @include formControlFocus;
+  }
+
   &.kuiTextArea-isInvalid {
     @include formControlInvalid;
   }

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -1102,7 +1102,7 @@ body {
     border-color: #D86051; }
   .kuiSelect:focus {
     outline: none;
-    border-color: #6EADC1; }
+    border-color: #0079a5; }
   .kuiSelect:disabled {
     opacity: 0.4;
     cursor: not-allowed; }
@@ -1111,9 +1111,13 @@ body {
     border-color: #444444; }
     .theme-dark .kuiSelect:focus {
       outline: none;
-      border-color: #6EADC1; }
+      border-color: #0079a5; }
   .kuiSelect.kuiSelect-isInvalid {
     border-color: #D86051; }
+  .kuiSelect:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: #0079a5; }
 
 .kuiSelect--large {
   min-width: 400px; }
@@ -1169,6 +1173,10 @@ body {
     .theme-dark .kuiTextArea:focus {
       outline: none;
       border-color: #0079a5; }
+  .kuiTextArea:focus {
+    box-shadow: none;
+    outline: none;
+    border-color: #0079a5; }
   .kuiTextArea.kuiTextArea-isInvalid {
     border-color: #D86051; }