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

CASH-1684: Update component styling for left align text

Browse source
This commit is contained in:
credelinghuys 2026-04-06 09:35:48 -04:00
parent b56f427feb
commit df35037adc
1 changed files with 88 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/ux-components/alert/alert.vue
View file

@ -200,25 +200,79 @@ export default {
} }
&.alert-info { &.alert-info {
background-color: $blue-100; background-color: $blue-100;
.alert-heading {
color: $blue-700; &.bordered {
border-color: $blue-400;
}
&.text-start {
.alert-heading {
display: flex;
align-items: center;
color: $black;
font-weight: 700;
.warning-icon {
margin-right: 0.5rem;
}
}
hr {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-color: $blue-400;
}
}
&.text-center {
.alert-heading {
color: $blue-700;
}
} }
svg { svg {
fill: $blue-700; fill: $blue-700;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
hr {
border-color: $red-800;
}
} }
&.alert-danger { &.alert-danger {
background-color: $red-100; background-color: $red-100;
.alert-heading {
color: $red-600; &.bordered {
border-color: $red-400;
}
&.text-start {
.alert-heading {
display: flex;
align-items: center;
color: $black;
font-weight: 700;
.warning-icon {
margin-right: 0.5rem;
}
}
hr {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-color: $red-400;
}
}
&.text-center {
.alert-heading {
color: $red-600;
}
} }
svg { svg {
fill: $red-600; fill: $red-600;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
hr {
border-color: $red-800;
}
} }
&.alert-warning { &.alert-warning {
background-color: $yellow-100; background-color: $yellow-100;
@ -268,14 +322,42 @@ export default {
} }
&.alert-success { &.alert-success {
background-color: $green-100; background-color: $green-100;
.alert-heading {
color: $green-700; &.bordered {
border-color: $green-400;
}
&.text-start {
.alert-heading {
display: flex;
align-items: center;
color: $black;
font-weight: 700;
.warning-icon {
margin-right: 0.5rem;
}
}
hr {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-color: $green-400;
}
}
&.text-center {
.alert-heading {
color: $green-700;
}
} }
svg { svg {
fill: $green-700; fill: $green-700;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
hr {
border-color: $green-800;
}
} }
&.bordered { &.bordered {
border: 1px solid; border: 1px solid;