From 4bd925e3ecb70a5ce6e85b02efc9883ee8fdd378 Mon Sep 17 00:00:00 2001 From: krisztin Date: Fri, 7 Feb 2025 14:21:31 +0000 Subject: [PATCH 1/3] Add and update new input border variables 1. Border colour did not have sufficient contrast. New contrast ratio passes WCAG AA for Graphical Objects and user interface components. 2. New border variable to aid consistency and future maintanance. --- app/webpacker/css/admin_v3/globals/variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss index 6aa5247dd1..2af50728ec 100644 --- a/app/webpacker/css/admin_v3/globals/variables.scss +++ b/app/webpacker/css/admin_v3/globals/variables.scss @@ -83,7 +83,7 @@ $color-sel-hover-bg: $lighter-grey !default; // Text inputs styles $color-txt-bg: $lighter-grey !default; -$color-txt-brd: $lighter-grey !default; +$color-txt-brd: $dark-grey !default; $color-txt-text: $near-black !default; $color-txt-hover-brd: $teal !default; $color-txt-disabled-text: $medium-grey !default; @@ -171,6 +171,7 @@ $h3-size: $h4-size + 2 !default; $h2-size: $h3-size + 2 !default; $h1-size: $h2-size + 2 !default; +$border-input: 1px solid $color-txt-brd; $border-radius: 4px !default; $box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07) !default; From 49bf5997b77f42a3dcae5afe985b2a212ec869fd Mon Sep 17 00:00:00 2001 From: krisztin Date: Fri, 7 Feb 2025 14:29:27 +0000 Subject: [PATCH 2/3] Update all borders for inputs Inputs include custom made ones such as tags, select2s and tom selects. Some border radii were using mixins but not utilising it, hence they are now variables. --- app/webpacker/css/admin/tag_rules.scss | 6 ++++++ app/webpacker/css/admin_v3/components/select2.scss | 10 ++++++++-- app/webpacker/css/admin_v3/components/tom_select.scss | 5 ++--- app/webpacker/css/admin_v3/shared/forms.scss | 5 ++--- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/app/webpacker/css/admin/tag_rules.scss b/app/webpacker/css/admin/tag_rules.scss index 9050008b82..125f11c888 100644 --- a/app/webpacker/css/admin/tag_rules.scss +++ b/app/webpacker/css/admin/tag_rules.scss @@ -1,4 +1,10 @@ tags-input { + .tags { + border: $border-input; + border-radius: $border-radius; + box-shadow: none; + padding: 4px; // hack to make the height match other inputs + } &.limit-reached { input, span.input { diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss index 1c6fc91f54..49540120be 100644 --- a/app/webpacker/css/admin_v3/components/select2.scss +++ b/app/webpacker/css/admin_v3/components/select2.scss @@ -1,3 +1,9 @@ +.select2-container { + border: $border-input; + border-radius: $border-radius; + padding-bottom: 7px; // hack to make the height match other inputs +} + .select2-container { &:hover .select2-choice, &.select2-container-active .select2-choice { @@ -6,7 +12,6 @@ } .select2-choice { background-image: none !important; - background-color: $color-sel-bg; border: none !important; box-shadow: none !important; @include border-radius($border-radius); @@ -40,7 +45,7 @@ } .select2-drop { - border-color: $color-sel-hover-bg; + border-color: $color-txt-brd; box-shadow: none !important; z-index: 1000000; @@ -141,6 +146,7 @@ } .select2-choices { @extend input, [type="text"]; + border: none; padding: 6px 3px 3px 3px; box-shadow: none; background-image: none !important; diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss index 5f0eb481e2..b1335e796a 100644 --- a/app/webpacker/css/admin_v3/components/tom_select.scss +++ b/app/webpacker/css/admin_v3/components/tom_select.scss @@ -17,10 +17,9 @@ .ts-control { box-shadow: none; - border-color: $lighter-grey; - background-color: $lighter-grey; + border: $border-input; + border-radius: $border-radius; background-image: none; - @include border-radius($border-radius); input { font-size: $body-font-size; diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss index 57cc0789db..0ee5f16f68 100644 --- a/app/webpacker/css/admin_v3/shared/forms.scss +++ b/app/webpacker/css/admin_v3/shared/forms.scss @@ -14,11 +14,10 @@ input[type="datetime"], input[type="time"], input[type="number"], textarea { - @include border-radius($border-radius); padding: ($vpadding-txt - 1px) ($hpadding-txt - 1px); // Minus 1px for border - border: 1px solid $color-txt-brd; + border: $border-input; + border-radius: $border-radius; color: $color-txt-text; - background-color: $color-txt-bg; font-size: 14px; line-height: 22px; From f1ae37569702c43064c463e4443e40f6a775a82b Mon Sep 17 00:00:00 2001 From: krisztin Date: Tue, 11 Feb 2025 20:48:54 +0000 Subject: [PATCH 3/3] Add new border scss variable to old admin variables Tags' rules are still coming from the old admin styles hence had to add the new (admin_v3) border variable to the old one. Has a hard coded colour value of #2e3132 as it has no access to the new colours. --- app/webpacker/css/admin/globals/variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss index ef335f5492..f35788dc5f 100644 --- a/app/webpacker/css/admin/globals/variables.scss +++ b/app/webpacker/css/admin/globals/variables.scss @@ -146,6 +146,7 @@ $h2-size: $h3-size + 2 !default; $h1-size: $h2-size + 2 !default; $border-radius: 3px !default; +$border-input: 1px solid #2e3132; // Copied over from admin_v3 variables as a temporary solution $font-weight-bold: 600 !default; $font-weight-normal: 400 !default;