Blame view

styles/components/alert.less 2.39 KB
9d69bab6   梁灏   add Alert component
1
  @alert-prefix-cls: ~"@{css-prefix}alert";
7c15ac9e   梁灏   add Message compo...
2
  @icon-prefix-cls: ~"@{css-prefix}icon";
9d69bab6   梁灏   add Alert component
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
39
40
41
42
43
44
45
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
  
  .@{alert-prefix-cls}{
      position: relative;
      padding: 8px 48px 8px 16px;
      border-radius: @border-radius-base;
      color: @text-color;
      font-size: 12px;
      line-height: 16px;
      margin-bottom: 10px;
  
      &&-with-icon{
          padding: 8px 48px 8px 38px;
      }
  
      &-icon {
          font-size: 14px;
          top: 8px;
          left: 16px;
          position: absolute;
      }
  
      &-desc {
          font-size: 12px;
          color: @legend-color;
          line-height: 21px;
          display: none;
      }
  
      &-success {
          border: 1px solid tint(@success-color, 80%);
          background-color: tint(@success-color, 90%);
          .@{alert-prefix-cls}-icon {
              color: @success-color;
          }
      }
  
      &-info {
          border: 1px solid tint(@primary-color, 80%);
          background-color: tint(@primary-color, 90%);
          .@{alert-prefix-cls}-icon {
              color: @primary-color;
          }
      }
  
      &-warning {
          border: 1px solid tint(@warning-color, 80%);
          background-color: tint(@warning-color, 90%);
          .@{alert-prefix-cls}-icon {
              color: @warning-color;
          }
      }
  
      &-error {
          border: 1px solid tint(@error-color, 80%);
          background-color: tint(@error-color, 90%);
          .@{alert-prefix-cls}-icon {
              color: @error-color;
          }
      }
  
      &-close {
          font-size: 12px;
          position: absolute;
          right: 16px;
          top: 8px;
          overflow: hidden;
          cursor: pointer;
  
7c15ac9e   梁灏   add Message compo...
71
          .@{icon-prefix-cls}-ios-close-empty {
9d69bab6   梁灏   add Alert component
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
              font-size: 22px;
              color: @legend-color;
              transition: color @transition-time ease;
              position: relative;
              top: -3px;
              &:hover {
                  color: #444;
              }
          }
      }
  
      &-with-desc {
          padding: 16px;
          position: relative;
          border-radius: @border-radius-base;
          margin-bottom: 10px;
          color: @text-color;
          line-height: 1.5;
      }
  
      &-with-desc&-with-icon{
          padding: 16px 16px 16px 69px;
      }
  
      &-with-desc &-desc{
          display: block;
      }
  
      &-with-desc &-message {
          font-size: 14px;
          color: @text-color;
          display: block;
      }
  
      &-with-desc &-icon {
          top: 50%;
          left: 24px;
          margin-top: -21px;
          font-size: 28px;
      }
  }