@harvest-profit/npk
Version:
NPK UI Design System
51 lines (42 loc) • 1.28 kB
CSS
.ApplicationAlert {
/* Vars */
--application-alert-bg-color: var(--warning-bg-color);
--application-alert-fg-color: var(--warning-fg-color);
width: 100%;
background-color: var(--application-alert-bg-color);
color: var(--application-alert-fg-color);
padding: 0.375rem;
border-bottom: 2px solid;
border-top: 2px solid;
border-color: rgb(from var(--border-highlight-color) r g b / 10%);
/* Places the border on the inside allowing for borders to not impact button sizes */
box-sizing: border-box;
text-decoration: none;
display: flex;
flex-direction: row;
justify-content: center;
transition: background-color 100ms ease-in-out;
&:hover {
color: var(--application-alert-fg-color);
}
.ApplicationAlertText {
margin: 0;
font-size: var(--size-14);
}
.ApplicationAlertIcon {
margin-right: var(--size-6);
line-height: 0.9;
svg {
display: inline-block;
vertical-align: text-bottom;
overflow: visible;
}
}
&:where([data-variant="primary"]) {
--application-alert-bg-color: var(--primary-bg-color);
--application-alert-fg-color: var(--primary-fg-color);
}
&:where(a[href], button):hover {
background-color: rgb(from var(--application-alert-bg-color) r g b / 95%);
}
}