|
|
|
|
|
@import '../abstracts/variables';
|
|
|
|
|
|
|
|
|
|
|
|
.alert {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
padding: 6px 16px;
|
|
|
|
|
|
border-radius: var(--default-borderradius);
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
|
|
|
|
|
|
|
|
|
|
&.square {
|
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.dense {
|
|
|
|
|
|
padding: 0px 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-text {
|
|
|
|
|
|
&-normal {
|
|
|
|
|
|
color: var(--palette-text-primary);
|
|
|
|
|
|
background-color: var(--palette-dark-hover);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@each $color in $palette-colors {
|
|
|
|
|
|
&-#{$color} {
|
|
|
|
|
|
color: var(--palette-#{$color}-darken);
|
|
|
|
|
|
background-color: var(--palette-#{$color}-hover);
|
|
|
|
|
|
|
|
|
|
|
|
& .alert-icon {
|
|
|
|
|
|
color: var(--palette-#{$color});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-outlined {
|
|
|
|
|
|
&-normal {
|
|
|
|
|
|
color: var(--palette-text-primary);
|
|
|
|
|
|
border: 1px solid var(--palette-text-primary);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@each $color in $palette-colors {
|
|
|
|
|
|
&-#{$color} {
|
|
|
|
|
|
color: var(--palette-#{$color}-darken);
|
|
|
|
|
|
border: 1px solid var(--palette-#{$color});
|
|
|
|
|
|
|
|
|
|
|
|
& .alert-icon {
|
|
|
|
|
|
color: var(--palette-#{$color});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-filled {
|
|
|
|
|
|
&-normal {
|
|
|
|
|
|
color: var(--palette-dark-text);
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
background-color: var(--palette-dark);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@each $color in $palette-colors {
|
|
|
|
|
|
&-#{$color} {
|
|
|
|
|
|
color: var(--palette-#{$color}-text);
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
background-color: var(--palette-#{$color});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-icon {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
|
padding: 7px 0;
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
|
margin-inline-end: 12px;
|
|
|
|
|
|
margin-inline-start: unset;
|
|
|
|
|
|
|
|
|
|
|
|
&.alert-icon-left {
|
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
|
margin-inline-end: 12px;
|
|
|
|
|
|
margin-inline-start: unset;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.alert-icon-right {
|
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
|
margin-inline-start: 12px;
|
|
|
|
|
|
margin-inline-end: unset;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-message {
|
|
|
|
|
|
padding: 9px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-position {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.alert-close {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex: 0;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
}
|
