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

Move list-button styles to component. Delete common-list-styles.scss.

Browse source
This commit is contained in:
bmauger 2022-01-27 14:54:10 -05:00
parent 30fcdbefce
commit 21d2ba883d
3 changed files with 34 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -5,7 +5,6 @@
<style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-list-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
</style>

44
src/styles/common-list-styles.scss
View file

@ -1,44 +0,0 @@
.list-group {
&.list-button {
input[type="radio"],
input[type="checkbox"] {
opacity: 0;
position: fixed;
width: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue inset;
}
&:focus + label {
box-shadow: 0 0 0 2.5px $blue inset;
}
&:checked + label {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-100;
}
cursor: pointer;
}
+ p {
display: none;
}
}
}
}

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

@ -77,6 +77,40 @@ export default {
position: static; //override bootstrap
height: 0;
}
&:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue inset;
}
&:focus + label {
box-shadow: 0 0 0 2.5px $blue inset;
}
&:checked + label {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
font-weight: 500;
}
}
label {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-100;
}
cursor: pointer;
}
+ p {
display: none;
}
}
}
</style>