mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
81 lines
1.8 KiB
SCSS
81 lines
1.8 KiB
SCSS
@import './mixins/mixins.scss';
|
|
@import './theme/default.scss';
|
|
|
|
@include b(alert) {
|
|
color: rgba(255, 146, 164, 1);
|
|
border-radius: 12px;
|
|
position: relative;
|
|
.n-alert__icon {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 15px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 19px;
|
|
height: 19px;
|
|
.n-icon {
|
|
margin-left: -2px;
|
|
margin-top: -2px;
|
|
font-size: 23px;
|
|
}
|
|
}
|
|
.n-alert__body-wrapper {
|
|
padding: 15px 19px 15px 47px;
|
|
.n-alert__title {
|
|
font-size: 16px;
|
|
line-height: 19px;
|
|
margin-bottom: 9px;
|
|
font-weight: 700;
|
|
}
|
|
.n-alert__content {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
&.n-alert--no-icon {
|
|
.n-alert__body-wrapper {
|
|
padding-left: 19px;
|
|
}
|
|
}
|
|
&.n-alert--success {
|
|
background-color: rgba(99, 226, 183, 0.2);
|
|
box-shadow: inset 0 0 0 1.2px rgba(99, 226, 183, .5);
|
|
.n-icon {
|
|
color: rgba(99, 226, 183, 1);
|
|
}
|
|
.n-alert__title {
|
|
color: rgba(99, 226, 183, 1);
|
|
}
|
|
}
|
|
&.n-alert--info {
|
|
background-color: rgba(98,187,252,0.2);
|
|
box-shadow: inset 0 0 0 1.2px rgba(98,187,252, .5);
|
|
.n-icon {
|
|
color: rgba(98, 187, 252, 1);
|
|
}
|
|
.n-alert__title {
|
|
color: rgba(98, 187, 252, 1);
|
|
}
|
|
}
|
|
&.n-alert--warning {
|
|
background-color: rgba(245, 166, 35, 0.2);
|
|
box-shadow: inset 0 0 0 1.2px rgba(245, 166, 35, .5);
|
|
.n-icon {
|
|
color: rgba(245, 166, 35, 1);
|
|
}
|
|
.n-alert__title {
|
|
color:rgba(245, 166, 35, 1);
|
|
}
|
|
}
|
|
&.n-alert--error {
|
|
background-color: rgba(255, 146, 164, 0.2);
|
|
box-shadow: inset 0 0 0 1.2px rgba(255, 146, 164, 0.5);
|
|
.n-icon {
|
|
color:rgba(255, 146, 164, 1);
|
|
}
|
|
.n-alert__title {
|
|
color:rgba(255, 146, 164, 1);
|
|
}
|
|
}
|
|
|
|
} |