fix(yalb-1552): update checkbox toggle styles for clarity

yalesites-org · Sep 6, 2023 · fe8233a · fe8233a
1 parent 4368aab
commit fe8233a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/web/themes/custom/ys_admin_theme/css/gin-color-overrides.css b/web/themes/custom/ys_admin_theme/css/gin-color-overrides.css
diff --git a/web/themes/custom/ys_admin_theme/css/gin-custom.css b/web/themes/custom/ys_admin_theme/css/gin-custom.css
diff --git a/web/themes/custom/ys_admin_theme/css/gin-custom.css.map b/web/themes/custom/ys_admin_theme/css/gin-custom.css.map
diff --git a/web/themes/custom/ys_admin_theme/scss/gin-color-overrides.scss b/web/themes/custom/ys_admin_theme/scss/gin-color-overrides.scss
@@ -34,7 +34,7 @@
     --gin-bg-input: var(--darkest-gray) !important;
     --gin-border-color: var(--wool) !important;
     --gin-border-color-table-header: var(--darkest-gray) !important;
-    --gin-border-color-form-element: var(--light-gray) !important;
+    --gin-border-color-form-element: var(--darkest-gray) !important;
     --gin-bg-app: var(--darkest-gray);
     --gin-bg-layer3: var(--dark-theme-gray-hover);
     --colorGinText: var(--darkest-gray);

diff --git a/web/themes/custom/ys_admin_theme/scss/gin-custom.scss b/web/themes/custom/ys_admin_theme/scss/gin-custom.scss
@@ -181,12 +181,21 @@
   opacity: 0.8;
 }
 
+/* checkboxes */
+.gin--dark-mode :not(.glb-form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .glb-form-checkbox:checked + .glb-checkbox-toggle {
+  background-color: var(--robin-egg) !important;
+}
+
+.gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner::before {
+  background-color: var(--dark-theme-gray) !important;
+}
+
 .gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner::before {
   background-color: var(--darkest-gray) !important;
 }
 
 .gin--dark-mode .form-boolean--type-checkbox:not(:checked) + .checkbox-toggle  .checkbox-toggle__inner {
-  background-color: var(--dark-theme-gray) !important;
+  background-color: var(--wool) !important;
 }
 
 .gin--dark-mode table th {
@@ -197,11 +206,6 @@
   background: var(--dark-theme-gray);
 }
 
-.gin--dark-mode [data-drupal-selector^="views-ui-config-item-form-"] .js-form-type-checkbox,
-.gin--dark-mode .js-form-item-required,
-.gin--dark-mode .js-form-item-cas-enabled {
-  background-color: var(--darkest-gray);
-}
 
 /* checkbox spacing */ 
 .gin--dark-mode .js-form-type-checkbox.form-type--checkbox {