Update v3 checkbox style

This doesn't _quite_ match the design, but would require a big CSS hack to customise it further, so I thought let's start with this.
openfoodfoundation · Nov 16, 2023 · 7c55d6e · 7c55d6e
1 parent e3632b9
commit 7c55d6e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 11 deletions.
diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
@@ -84,11 +84,13 @@
                   = error_message_on variant, :price
                 %td.field
                   %div.on-hand__wrapper
-                    = variant_form.number_field :on_hand, 'aria-label': t('admin.products_page.columns.on_hand')
-                    = error_message_on variant, :on_hand
-                    = variant_form.label :on_demand do
-                      = variant_form.check_box :on_demand
-                      = t('admin.products_page.columns.on_demand')
+                    .field
+                      = variant_form.number_field :on_hand, 'aria-label': t('admin.products_page.columns.on_hand')
+                      = error_message_on variant, :on_hand
+                    .field.checkbox
+                      = variant_form.label :on_demand do
+                        = variant_form.check_box :on_demand
+                        = t('admin.products_page.columns.on_demand')
                 %td.align-left
                   .content= variant.product.supplier&.name # same as product
                 %td.align-left

diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss
@@ -13,7 +13,7 @@ $lighter-grey: #f8f9fa !default; // Lighter grey
 $light-grey: #eff1f2 !default; // Light grey (Porcelain)
 $medium-grey: #919191 !default; // Medium grey
 $dark-grey: #2e3132 !default; // Dark Grey
-$near-black: #191c1d !default; // Near-black
+$near-black: #191c1d !default; // Near-black (Shark)
 $fair-pink: #ffefeb !default; // Fair Pink
 $roof-terracotta: #b83b1f !default; // Roof Terracotta
 

diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -79,6 +79,10 @@ $color-txt-changed-brd:         $bright-orange !default;
 $vpadding-txt:                   5px;
 $hpadding-txt:                   8px;
 
+// Checkboxes
+$color-checkbox-brd:            $near-black !default;
+$color-checkbox-fill:           $teal !default;
+
 // Modal colors
 $color-modal-close-btn:          $color-5 !default;
 $color-modal-close-btn-hover:    darken($color-5, 5%) !default;

diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -36,6 +36,18 @@ fieldset {
   }
 }
 
+input[type="checkbox"] {
+  width: 1em;
+  height: 1em;
+  margin-right: 3px;
+}
+
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"] {
+  accent-color: $color-checkbox-fill;
+}
+
 textarea {
   line-height: 19px;
 }
@@ -76,14 +88,11 @@ span.info {
   padding: 10px 0;
 
   &.checkbox {
-    input[type="checkbox"] {
-      display: inline-block;
-      width: auto;
-    }
-
     label {
       cursor: pointer;
       display: block;
+      font-size: inherit;
+      font-weight: normal;
     }
   }