From af897ca937423c62e501a82d5d3e978d000b08d0 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 18 Jul 2024 11:32:10 -0400 Subject: [PATCH] Added focus-ring-color to _bootstrap-variable.scss file and changed the color to blue. Compiled using compile_styles.sh --- src/scss/_bootstrap-variables.scss | 3 +++ src/shared/themed-bootstrap.css | 22 +++++++++++----------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/scss/_bootstrap-variables.scss b/src/scss/_bootstrap-variables.scss index 299e7580..e153f083 100644 --- a/src/scss/_bootstrap-variables.scss +++ b/src/scss/_bootstrap-variables.scss @@ -53,3 +53,6 @@ $warning: $cod-accent-yellow !default; $danger: #b3393b !default; $light: #fff !default; $dark: #000 !default; + + +$focus-ring-color: blue; \ No newline at end of file diff --git a/src/shared/themed-bootstrap.css b/src/shared/themed-bootstrap.css index 0cfaede9..90f9a207 100644 --- a/src/shared/themed-bootstrap.css +++ b/src/shared/themed-bootstrap.css @@ -130,7 +130,7 @@ --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25em; --bs-focus-ring-opacity: 0.25; - --bs-focus-ring-color: rgba(0, 68, 69, 0.25); + --bs-focus-ring-color: blue; --bs-form-valid-color: #9fd5b3; --bs-form-valid-border-color: #9fd5b3; --bs-form-invalid-color: #b3393b; @@ -2181,7 +2181,7 @@ progress { background-color: var(--bs-body-bg); border-color: #80a2a2; outline: 0; - box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + box-shadow: 0 0 0 0.25em blue; } .form-control::-webkit-date-and-time-value { min-width: 85px; @@ -2330,7 +2330,7 @@ textarea.form-control-lg { .form-select:focus { border-color: #80a2a2; outline: 0; - box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + box-shadow: 0 0 0 0.25em blue; } .form-select[multiple], .form-select[size]:not([size='1']) { @@ -2409,7 +2409,7 @@ textarea.form-control-lg { .form-check-input:focus { border-color: #80a2a2; outline: 0; - box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + box-shadow: 0 0 0 0.25em blue; } .form-check-input:checked { background-color: #004445; @@ -2505,12 +2505,12 @@ textarea.form-control-lg { .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, - 0 0 0 0.25em rgba(0, 68, 69, 0.25); + 0 0 0 0.25em blue; } .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, - 0 0 0 0.25em rgba(0, 68, 69, 0.25); + 0 0 0 0.25em blue; } .form-range::-moz-focus-outer { border: 0; @@ -3896,7 +3896,7 @@ fieldset:disabled .btn { } .nav-link:focus-visible { outline: 0; - box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + box-shadow: 0 0 0 0.25em blue; } .nav-link.disabled { color: var(--bs-nav-link-disabled-color); @@ -4593,7 +4593,7 @@ fieldset:disabled .btn { --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23001b1c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-border-color: #80a2a2; - --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25em blue; --bs-accordion-body-padding-x: 1.25em; --bs-accordion-body-padding-y: 1em; --bs-accordion-active-color: var(--bs-primary-text-emphasis); @@ -4736,7 +4736,7 @@ fieldset:disabled .btn { --bs-pagination-hover-border-color: var(--bs-border-color); --bs-pagination-focus-color: var(--bs-link-hover-color); --bs-pagination-focus-bg: var(--bs-secondary-bg); - --bs-pagination-focus-box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + --bs-pagination-focus-box-shadow: 0 0 0 0.25em blue; --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #004445; --bs-pagination-active-border-color: #004445; @@ -5336,7 +5336,7 @@ fieldset:disabled .btn { --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; - --bs-btn-close-focus-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); + --bs-btn-close-focus-shadow: 0 0 0 0.25em blue; --bs-btn-close-focus-opacity: 1; --bs-btn-close-disabled-opacity: 0.25; --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); @@ -12536,7 +12536,7 @@ fieldset:disabled .btn { --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25em; --bs-focus-ring-opacity: 0.25; - --bs-focus-ring-color: rgba(0, 68, 69, 0.25); + --bs-focus-ring-color: blue; --bs-form-valid-color: #9fd5b3; --bs-form-valid-border-color: #9fd5b3; --bs-form-invalid-color: #b3393b;