refactor(buttons): fix hover/focus bg, use css vars over rules

cal-itp · Nov 25, 2024 · 4e3fd9f · 4e3fd9f
1 parent 24d6322
commit 4e3fd9f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/benefits/core/templates/core/includes/lang-selector.html b/benefits/core/templates/core/includes/lang-selector.html
@@ -16,7 +16,7 @@
       {% get_language_info for code as langinfo %}
       <input name="next" type="hidden" value="{{ redirect_to }}" />
       <input name="language" type="hidden" value="{{ code }}" />
-      <button class="btn btn-lg btn-outline-light" type="submit">{{ langinfo.name_local | capfirst }}</button>
+      <button class="btn btn-outline-light" type="submit">{{ langinfo.name_local | capfirst }}</button>
     </form>
   {% endif %}
 {% endfor %}
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -227,8 +227,9 @@ h4 {
 
 /* Language button */
 #header-container .btn-outline-light {
-  font-size: var(--bs-body-font-size);
-  padding: 3.5px 29.01px; /* 126 x 38px, all screen sizes  */
+  --bs-btn-font-size: var(--bs-body-font-size);
+  --bs-btn-padding-y: 3.5px;
+  --bs-btn-padding-x: 29.01px;
 }
 
 /* Main */
@@ -323,6 +324,7 @@ footer .footer-links li a.footer-link:visited {
 .btn,
 .btn-lg {
   --bs-btn-border-radius: var(--border-radius);
+  --bs-btn-hover-bg: #ffffff;
 }
 
 .btn.btn-lg.btn-primary {
@@ -348,10 +350,10 @@ footer .footer-links li a.footer-link:visited {
 .btn-outline-dark:focus,
 .btn-outline-dark:focus-visible,
 .btn-outline-light:focus,
-.btn-ouline-dark:focus-visible {
-  outline: 3px solid var(--focus-color) !important;
-  outline-offset: 2px !important;
-  box-shadow: none !important; /* override CA State Web Template */
+.btn-ouline-light:focus-visible {
+  outline: 3px solid var(--focus-color);
+  outline-offset: 2px;
+  box-shadow: none;
 }
 
 .btn-text {
@@ -363,7 +365,7 @@ footer .footer-links li a.footer-link:visited {
 /* Previous Button, Language Button */
 .btn-outline-dark,
 .btn-outline-light {
-  border-width: 2px;
+  --bs-btn-border-width: 2px;
 }
 
 /* Custom button: Loading spinner */