jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes some issues with how button styles ended up after merges

Browse source
This commit is contained in:
Alex Humphries 2026-01-07 17:09:32 -05:00
parent e001e04ec2
commit 43a0a5c459
3 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/styles/common-validation-styles.scss
View file

@ -8,22 +8,19 @@ html {
&.list-button, &.list-button,
&.list-button.list-group, &.list-button.list-group,
&.list-card &.option-label { &.list-card &.option-label {
border: 1px solid $red;
position: relative;
z-index: 4;
.button-content { .button-content {
border: none; border: 1px solid $red;
}
&:hover {
@include box-shadow-hover($red-200);
z-index: 5;
} }
input[type="radio"]:focus+.list-button-content { input[type="radio"]:focus+.list-button-content {
box-shadow: 0 0 0 2.5px $red; box-shadow: 0 0 0 2.5px $red;
} }
&:not(.selected):not(.no-hover):hover {
position: relative;
@include box-shadow-hover($red-200);
z-index: 5;
}
} }
&.list-card { &.list-card {

4
src/styles/shared-input-button-styles.scss
View file

@ -1,7 +1,9 @@
.base-input-button { .base-input-button {
&:not(:disabled):hover { &:not(.disabled) {
cursor: pointer; cursor: pointer;
}
&:not(.has-error):hover {
&.list-button, &.list-button,
&.list-button-horizontal, &.list-button-horizontal,
&.list-card { &.list-card {

17
src/ux-components/list-button/list-button.vue
View file

@ -2,10 +2,13 @@
<baseInputButton <baseInputButton
v-bind="$props" v-bind="$props"
v-model="selectedValue" v-model="selectedValue"
buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100 mb-2"> buttonWrapperClasses="list-group base-input-button list-button no-hover d-flex flex-column w-100">
<div <div
:aria-label="buttonLabel" :aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"> class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4"
:class="{
'has-sub-copy': buttonLabelSubCopy,
}">
<span <span
class="m-0" class="m-0"
:class="textPosition"> :class="textPosition">
@ -78,7 +81,6 @@ $heritage-checked-border-color: #0070d1;
} }
.list-button { .list-button {
outline: none; outline: none;
border-radius: $border-radius-xl;
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
position: static; //override bootstrap position: static; //override bootstrap
@ -86,6 +88,9 @@ $heritage-checked-border-color: #0070d1;
background: $heritage-checked-background-color; background: $heritage-checked-background-color;
border-color: $heritage-checked-border-color; border-color: $heritage-checked-border-color;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
&:not(.has-sub-copy) {
font-weight: 500;
}
} }
&:checked + .list-button-content span:nth-child(2) { &:checked + .list-button-content span:nth-child(2) {
font-weight: 400; font-weight: 400;
@ -104,10 +109,12 @@ $heritage-checked-border-color: #0070d1;
box-shadow: $heritage-box-shadow; box-shadow: $heritage-box-shadow;
width: 100%; width: 100%;
outline: none; outline: none;
box-shadow: $box-shadow-input;
height: 2.8125rem;
margin-bottom: .625rem; margin-bottom: .625rem;
&:not(.has-sub-copy) {
font-weight: 400;
}
span { span {
&.small { &.small {
color: $darker-gray; color: $darker-gray;