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

WIP update mixin. Update Alert svg width/height.

Browse source
This commit is contained in:
bmauger 2021-11-19 08:53:24 -05:00
parent 14f9d86a3d
commit a1ba5911a2
3 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/styles/commonRadioStyles.scss
View file

@ -18,7 +18,7 @@
label { label {
position: relative; position: relative;
background: $white; background: $white;
height: 3rem; min-height: 3rem;
transition: all 150ms linear; transition: all 150ms linear;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
border: 1px solid $gray-500; border: 1px solid $gray-500;
@ -37,7 +37,8 @@
color: $danger; color: $danger;
} }
} }
@include spinner; //Add spinner. Specify width and height
@include spinner(1rem,1rem);
} }
} }
} }

6
src/styles/mixins/customMixins.scss
View file

@ -7,7 +7,7 @@
//Spinner //Spinner
//Choose color and position //Choose color and position
@mixin spinner { @mixin spinner($width, $height) {
&.spinner { &.spinner {
//Open an overlay to prevent page interaction //Open an overlay to prevent page interaction
&:before { &:before {
@ -27,8 +27,8 @@
mask: url(../../assets/img/icons/spinner.svg); mask: url(../../assets/img/icons/spinner.svg);
mask-size: cover; mask-size: cover;
position: absolute; position: absolute;
width: 1rem; width: $width;
height: 1rem; height: $height;
animation: rotation 1s infinite linear; animation: rotation 1s infinite linear;
@keyframes rotation { @keyframes rotation {
100% { 100% {

8
src/uxComponents/alert/alert.vue
View file

@ -51,6 +51,8 @@ export default {
} }
svg { svg {
fill: $blue-700; fill: $blue-700;
width: 1rem;
height: 1rem;
} }
} }
&.alert-danger { &.alert-danger {
@ -59,6 +61,8 @@ export default {
} }
svg { svg {
fill: $red-700; fill: $red-700;
width: 1rem;
height: 1rem;
} }
} }
&.alert-warning { &.alert-warning {
@ -67,6 +71,8 @@ export default {
} }
svg { svg {
fill: $yellow-700; fill: $yellow-700;
width: 1rem;
height: 1rem;
} }
} }
&.alert-success { &.alert-success {
@ -75,6 +81,8 @@ export default {
} }
svg { svg {
fill: $green-700; fill: $green-700;
width: 1rem;
height: 1rem;
} }
} }
} }