ant-design/style/components/alert.less

167 lines
3.2 KiB
Plaintext
Raw Normal View History

2015-07-27 20:53:08 +08:00
@import "../mixins/index";
2015-08-20 16:55:42 +08:00
@alert-prefix-cls: ~"@{css-prefix}alert";
@alert-title-prefix-cls: ~"@{css-prefix}alert-with-description";
2015-07-27 20:53:08 +08:00
2015-08-20 16:55:42 +08:00
.@{alert-prefix-cls} {
2015-07-27 20:53:08 +08:00
position: relative;
padding: 8px 8px 8px 16px;
border-radius: @border-radius-base;
2015-07-29 16:00:18 +08:00
color: @text-color;
2015-07-27 20:53:08 +08:00
font-size: 12px;
line-height: 16px;
margin-bottom: 10px;
&-icon {
margin-right: 8px;
2015-07-29 16:00:18 +08:00
font-size: 14px;
2015-07-27 20:53:08 +08:00
}
2015-07-29 10:27:31 +08:00
&-description {
2015-07-27 20:53:08 +08:00
font-size: 12px;
line-height: 16px;
}
&-success {
2015-07-29 17:22:36 +08:00
border: 1px solid tint(@success-color, 80%);
2015-07-27 20:53:08 +08:00
background-color: tint(@success-color, 90%);
.anticon {
2015-07-29 10:27:31 +08:00
color: @success-color;
2015-07-27 20:53:08 +08:00
}
}
&-info {
2015-07-29 17:22:36 +08:00
border: 1px solid tint(@primary-color, 80%);
2015-07-27 20:53:08 +08:00
background-color: tint(@primary-color, 90%);
.anticon {
2015-07-29 10:27:31 +08:00
color: @primary-color;
2015-07-27 20:53:08 +08:00
}
}
&-warn {
2015-07-29 17:22:36 +08:00
border: 1px solid tint(@warning-color, 80%);
2015-07-27 20:53:08 +08:00
background-color: tint(@warning-color, 90%);
.anticon {
2015-07-29 10:27:31 +08:00
color: @warning-color;
2015-07-27 20:53:08 +08:00
}
}
&-error {
2015-07-29 17:22:36 +08:00
border: 1px solid tint(@error-color, 80%);
2015-07-27 20:53:08 +08:00
background-color: tint(@error-color, 90%);
.anticon {
2015-07-29 10:27:31 +08:00
color: @error-color;
2015-07-27 20:53:08 +08:00
}
}
2015-07-29 17:22:36 +08:00
&-close-icon, &-with-description-close-icon {
font-size: 12px;
2015-07-29 15:22:47 +08:00
position: absolute;
right: 8px;
top: 50%;
margin-top: -6px;
2015-07-29 16:00:18 +08:00
transition: color .3s ease;
color: #999;
2015-07-29 15:22:47 +08:00
width: 12px;
height: 12px;
overflow: hidden;
&-x {
position: absolute;
top: -3px;
&:before {
font-weight: 700;
text-shadow: 0 1px 0 #fff;
2015-11-12 22:59:25 +08:00
content: "\e62d";
2015-07-29 15:22:47 +08:00
font-family: "anticon";
}
}
&:hover {
2015-07-29 16:00:18 +08:00
color: #444;
2015-07-29 15:22:47 +08:00
}
2015-07-27 20:53:08 +08:00
}
&-close-text {
position: absolute;
right: 16px;
}
2015-07-29 17:22:36 +08:00
&-with-description {
padding: 16px 16px 16px 69px;
position: relative;
border-radius: @border-radius-base;
margin-bottom: 10px;
2015-07-27 20:53:08 +08:00
color: @text-color;
2015-07-29 17:22:36 +08:00
&-icon {
position: absolute;
top: 50%;
left: 24px;
margin-top: -22px;
font-size: 29px;
2015-07-27 20:53:08 +08:00
}
2015-07-29 17:22:36 +08:00
&-close-icon {
position: absolute;
top: 17px;
right: 16px;
cursor: pointer;
font-size: 12px;
2015-07-27 20:53:08 +08:00
}
2015-07-29 17:22:36 +08:00
&-message {
font-size: 14px;
color: @text-color;
2015-07-27 20:53:08 +08:00
}
2015-07-29 17:22:36 +08:00
&-description {
font-size: 12px;
color: @legend-color;
2015-07-27 20:53:08 +08:00
}
2015-07-28 14:52:01 +08:00
2015-07-29 17:22:36 +08:00
&-success {
border: 1px solid tint(@success-color, 80%);
background-color: tint(@success-color, 90%);
.anticon {
color: @success-color;
}
}
2015-07-29 15:22:47 +08:00
2015-07-29 17:22:36 +08:00
&-info {
border: 1px solid tint(@primary-color, 80%);
background-color: tint(@primary-color, 90%);
.anticon {
color: @primary-color;
2015-07-28 14:52:01 +08:00
}
2015-07-27 20:53:08 +08:00
}
2015-07-29 15:22:47 +08:00
2015-07-29 17:22:36 +08:00
&-warn {
border: 1px solid tint(@warning-color, 80%);
background-color: tint(@warning-color, 90%);
.anticon {
color: @warning-color;
}
2015-07-29 15:22:47 +08:00
}
2015-07-29 17:22:36 +08:00
&-error {
border: 1px solid tint(@error-color, 80%);
background-color: tint(@error-color, 90%);
.anticon {
color: @error-color;
}
}
2015-07-27 20:53:08 +08:00
}
2015-08-20 13:06:47 +08:00
2015-08-20 13:17:17 +08:00
&-close {
2015-08-20 13:06:47 +08:00
height: 0 !important;
opacity: 0 !important;
margin: 0;
padding-top: 0;
padding-bottom: 0;
transition: all .3s @ease-in-out;
transform-origin: 50% 0;
animation-timing-function: @ease-in-out !important;
}
2015-07-29 16:00:18 +08:00
}