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

CSR-933 fix error styles.

Browse source
This commit is contained in:
Bryan Mauger 2022-11-11 09:04:57 -05:00
parent 03ffdf1878
commit 6d233b521d
2 changed files with 53 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/styles/common-error-styles.scss
View file

@ -3,6 +3,7 @@ html {
// START HOVER
&.list-button-horizontal,
&.list-button,
&.list-button.list-group,
&.list-card {
border: 1px solid $red;
position: relative;
@ -16,6 +17,9 @@ html {
@include box-shadow-hover($red-200);
z-index: 5;
}
input[type="radio"]:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $red;
}
}
&.ui-radio {
@ -26,6 +30,11 @@ html {
}
}
}
.form-check-input {
&:focus {
@include box-shadow-hover($red-200);
}
}
// END HOVER
&.list-button,

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

@ -60,56 +60,54 @@ export default {
</script>
<style lang="scss" scoped>
.list-group {
.loader {
position: absolute;
}
&.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
.loader {
position: absolute;
}
.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
span {
&.small {
font-size: 0.75rem;
color: $gray-550;
}
}
}