Increase contrast in form elements. (vufind-org#3207)

subhh · Dec 22, 2023 · 74bac9e · 74bac9e
1 parent 9d0e3d5
commit 74bac9e
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 18 deletions.
diff --git a/themes/bootprint3/css/compiled.css b/themes/bootprint3/css/compiled.css
diff --git a/themes/bootstrap3/css/compiled.css b/themes/bootstrap3/css/compiled.css
diff --git a/themes/bootstrap3/less/components/form.less b/themes/bootstrap3/less/components/form.less
@@ -1,4 +1,10 @@
 form {
+    .form-control {
+        border-color: #888;
+        &:focus {
+            border-color: #3F9AE4;
+        }
+      }
     textarea:invalid,
     input:invalid {
         box-shadow: 0 0 2px 1px rgba(255, 0, 0, 0.9);

diff --git a/themes/bootstrap3/scss/components/form.scss b/themes/bootstrap3/scss/components/form.scss
@@ -1,4 +1,10 @@
 form {
+    .form-control {
+        border-color: #888;
+        &:focus {
+            border-color: #3F9AE4;
+        }
+      }
     textarea:invalid,
     input:invalid {
         box-shadow: 0 0 2px 1px rgba(255, 0, 0, 0.9);

diff --git a/themes/local_theme_example/css/compiled.css b/themes/local_theme_example/css/compiled.css
diff --git a/themes/sandal/css/compiled.css b/themes/sandal/css/compiled.css
diff --git a/themes/sandal/less/common.less b/themes/sandal/less/common.less
@@ -43,15 +43,19 @@ table { font-size: @reduced-font-size; }
 
 .form-control { box-shadow: none; }
 .form-control:hover,
-.form-control:focus { border-color: @brand-primary; }
 .form-control:focus {
-  padding-bottom: 4px; // Prevent jumping
-  border-bottom: 3px solid @brand-secondary;
-  box-shadow: none;
+  /* #LESS> */
+  --outline-color: fade(@brand-primary, 40%);
+  /* <#LESS */
+  /* #SCSS>
+  --outline-color: color.change($brand-primary, $alpha: 0.4);
+  <#SCSS */
+
+  border-color: @brand-primary;
+  outline: 4px solid var(--outline-color);
 }
-select.form-control {
-  padding-bottom: @padding-base-vertical;
-  border: 1px solid @light-silver;
+.form-control:focus {
+  --outline-color: @gold;
 }
 
 .breadcrumb a { color: @dark-gray; }

diff --git a/themes/sandal/scss/common.scss b/themes/sandal/scss/common.scss
@@ -43,15 +43,19 @@ table { font-size: $reduced-font-size; }
 
 .form-control { box-shadow: none; }
 .form-control:hover,
-.form-control:focus { border-color: $brand-primary; }
 .form-control:focus {
-  padding-bottom: 4px; // Prevent jumping
-  border-bottom: 3px solid $brand-secondary;
-  box-shadow: none;
+  /* #LESS>
+  --outline-color: rgba($brand-primary, (40/100));
+  <#LESS */
+  /* #SCSS> */
+  --outline-color: color.change($brand-primary, $alpha: 0.4);
+  /* <#SCSS */
+
+  border-color: $brand-primary;
+  outline: 4px solid var(--outline-color);
 }
-select.form-control {
-  padding-bottom: $padding-base-vertical;
-  border: 1px solid $light-silver;
+.form-control:focus {
+  --outline-color: $gold;
 }
 
 .breadcrumb a { color: $dark-gray; }