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-group,
&.list-card &.option-label {
border: 1px solid $red;
position: relative;
z-index: 4;
.button-content {
border: none;
}
&:hover {
@include box-shadow-hover($red-200);
z-index: 5;
border: 1px solid $red;
}
input[type="radio"]:focus+.list-button-content {
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 {

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

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

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

@ -2,10 +2,13 @@
<baseInputButton
v-bind="$props"
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
: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
class="m-0"
:class="textPosition">
@ -78,7 +81,6 @@ $heritage-checked-border-color: #0070d1;
}
.list-button {
outline: none;
border-radius: $border-radius-xl;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
@ -86,6 +88,9 @@ $heritage-checked-border-color: #0070d1;
background: $heritage-checked-background-color;
border-color: $heritage-checked-border-color;
box-shadow: 0 0 0 1px $blue;
&:not(.has-sub-copy) {
font-weight: 500;
}
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
@ -104,10 +109,12 @@ $heritage-checked-border-color: #0070d1;
box-shadow: $heritage-box-shadow;
width: 100%;
outline: none;
box-shadow: $box-shadow-input;
height: 2.8125rem;
margin-bottom: .625rem;
&:not(.has-sub-copy) {
font-weight: 400;
}
span {
&.small {
color: $darker-gray;