heyui
Version:
A UI components Library.
108 lines (99 loc) • 2.65 kB
text/less
@notice-prefix: ~"@{prefix}notice";
@notice-width: 350px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
.@{notice-prefix} {
&-container{
position: fixed;
top: 50px;
right: 10px;
}
transition: .7s;
.@{notify-prefix} {
&-container {
min-width: @notice-width;
top: auto;
right: -100px;
margin-bottom: 20px;
left: auto;
transform: none;
position: relative;
max-height: 0;
overflow: hidden;
header {
min-height: 20px;
line-height: 20px;
font-size: 16px;
padding: @notice-padding 0 0 @notice-padding;
}
}
&-content {
padding: @notice-padding - 4px @notice-padding;
color: @gray-color;
[class^="h-icon"], [class*=" h-icon"]{
margin-right: 10px;
display: inline-block;
}
}
}
&.@{notice-prefix}-has-icon{
header{
margin-left: 40px;
}
.@{notify-prefix}-content{
margin-left: 40px;
[class^="h-icon"], [class*=" h-icon"]{
margin-right: 10px;
float:left;
font-size: 30px;
position: absolute;
left: -25px;
top: -20px;
}
}
}
&.@{notify-prefix} {
&-show {
.@{notify-prefix}-container {
top: auto;
right: 0px;
max-height: 1000px;
}
}
}
}
// @notice-prefix: ~"@{prefix}notice";
// @notice-width: 350px;
// @notice-padding: 16px;
// @notice-margin-bottom: 10px;
// .@{notice-prefix} {
// position: fixed;
// right: -100px;
// margin-top: 40px;
// transition: @transition-time;
// .@{notify-prefix} {
// &-container {
// min-width: @notice-width;
// top: auto;
// left: auto;
// transform: none;
// position: static;
// transition: none;
// header {
// min-height: 20px;
// line-height: 20px;
// font-size: 16px;
// padding: @notice-padding 0 0 @notice-padding;
// }
// }
// &-content {
// padding: 10px @notice-padding @notice-padding;
// color: @gray-color;
// }
// }
// &.@{notify-prefix} {
// &-show {
// right: 10px;
// }
// }
// }