Blame view

src/styles/components/notice.less 1.57 KB
40f8606f   梁灏   add Notice component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  @notice-prefix-cls: ~"@{css-prefix}notice";
  @icon-prefix-cls: ~"@{css-prefix}icon";
  
  @notice-width: 335px;
  @notice-padding: 16px;
  @notice-margin-bottom: 10px;
  
  .@{notice-prefix-cls} {
      position: fixed;
      z-index: @zindex-notification;
      width: @notice-width;
      margin-right: 24px;
  
      &-notice {
          padding: @notice-padding;
          border-radius: @border-radius-base;
          box-shadow: @shadow-base;
          border: 1px solid @border-color-base;
          background: #fff;
          line-height: 1.5;
          position: relative;
          margin-bottom: @notice-margin-bottom;
          overflow: hidden;
  
          &-close {
              position: absolute;
              right: 16px;
              top: 10px;
              color: #999;
              outline: none;
  
              i{
                  .close-base(-3px);
              }
          }
      }
  
      &-title {
e1596b7e   梁灏   add Button UI
39
          font-size: @font-size-base;
40f8606f   梁灏   add Notice component
40
41
42
43
44
          color: @text-color;
          margin-bottom: 4px;
      }
  
      &-desc {
e1596b7e   梁灏   add Button UI
45
          font-size: 12px;
40f8606f   梁灏   add Notice component
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
          color: @legend-color;
          text-align: justify;
      }
  
      &-with-icon &-title{
          margin-left: 51px;
          margin-bottom: 4px;
      }
  
      &-with-icon  &-desc {
          margin-left: 51px;
      }
  
      &-icon {
          position: absolute;
          left: 21px;
          top: 50%;
          margin-top: -21px;
          font-size: 28px;
  
          &-success {
              color: @success-color;
          }
          &-info {
              color: @primary-color;
          }
          &-warning {
              color: @warning-color;
          }
          &-error {
              color: @error-color;
          }
      }
  }