hy-checkbox/lib/NotificationRoot/notificationRoot.less

checkbox & radio ui components for react

@import "../../app/variables.less";
@keyframes progressLine {
    0% {
        width: 100%;
    }
    100% {
        width: 1%;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    60% {
        opacity: 1
    }
    100% {
        opacity: 0;
    }
}
.@{ult-prefix}-ui-notice dl dd { margin: 0 0 8px 0;}
.@{ult-prefix}-ui-notice-wrap{ position: fixed; top: 60px; right: 30px;
   .@{ult-prefix}-ui-notification{  width: 320px; background: @white;box-shadow: 3px 3px 6px fade(@black, 9%); border: 1px solid @border; padding: 16px 36px 16px 76px; position: relative;
    min-height: @base-space *8;border-radius: 6px;overflow: auto;
      .@{ult-prefix}-notification-form {
            .iconfont {
                position: absolute;
                 width: @base-space * 4;
                 height: @base-space * 4;
                 left: @base-space *3;
                 top: @base-space * 2;
                font-size: @base-space * 4;
                color: dodgerblue; line-height: normal;
            }
            .@{ult-prefix}-notification-title{ font-size: 14px; color: @text-title;}
            .@{ult-prefix}-notification-content{ font-size: 12px; color: @text-body; line-height: 20px; padding: 3px 0;}
            .@{ult-prefix}-notification-progress {
                position: absolute; right: 0; bottom: 0;
                width: 100%;
                height: 4px;
                margin-top: 10px;
                border-radius: 6px;
                background-color: dodgerblue; opacity: .4;
                &.warning {
                    background-color: red;
                }
                animation: progressLine 3s;
            }

        }

        &.animate {
            animation: fadeOut 3s;
            .@{ult-prefix}-notification-progress {
                animation: progressLine 3s;
            }
        }
    &.success{
        .@{ult-prefix}-notification-form {
            .@{ult-prefix}-notification-progress {background-color: @success;}
            .iconfont { color: @success;}
            }
        }
     &.infor{
        .@{ult-prefix}-notification-form {
            .@{ult-prefix}-notification-progress {background-color: @primary;}
            .iconfont { color: @primary;}
            }
        }
    &.warning{
        .@{ult-prefix}-notification-form {
            .@{ult-prefix}-notification-progress {background-color: @warning;}
            .iconfont { color: @warning;}
            }
        }
    &.danger{
        .@{ult-prefix}-notification-form {
            .@{ult-prefix}-notification-progress {background-color: @danger;}
            .iconfont { color: @danger;}
            }
        }
     &:hover {
        -moz-box-shadow: 0 0 6px fade(@black, 16%);
        -webkit-box-shadow: 0 0 6px fade(@black, 16%);
        box-shadow: 0 0 6px fade(@black, 16%);
    }
    .@{ult-prefix}-notification-close{
        font-size: @base-space*3 / 2; position: absolute; top: @base-space*2; right:@base-space*3/2; float: right;font-weight: normal;color: #fff;-webkit-text-shadow: 0 1px 0 #fff;text-shadow: 0 1px 0 #fff;opacity: .8;-ms-filter: alpha(Opacity=80); cursor: pointer;
        filter: alpha(opacity=80);
        .@{ult-prefix}-close-x {
            color: fade(@black, 25%);
            &:hover,&:focus {
                color: @text-body;
            }
            .iconfont{font-size: @base-space*3 / 2;}
        }
    }
  }
}