chenhaodong / mew-iview

Blame view

src/styles/mixins/checkbox.less 6.26 KB
Edit Raw Normal View History
6c5fbd8b   梁灏   add Checkbox UI 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
  .checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
      @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
  
      // 普通状态
      .@{checkbox-prefix-cls} {
          display: inline-block;
          vertical-align: middle;
          white-space: nowrap;
          cursor: pointer;
          outline: none;
          line-height: 1;
          position: relative;
77f7bb95   梁灏   add Transfer comp... 
14
15
16
17
 
          &-disabled{
              cursor: @cursor-disabled;
          }
6c5fbd8b   梁灏   add Checkbox UI 
18
19
20
21
22
23
24
25
 
          &:hover {
              .@{checkbox-inner-prefix-cls} {
                  border-color: #bcbcbc;
              }
          }
  
          &-inner {
              display: inline-block;
77b4e431   梁灏   optimize Checkbox... 
26
27
 
              width: 14px;
              height: 14px;
6c5fbd8b   梁灏   add Checkbox UI 
28
29
30
31
 
              position: relative;
              top: 0;
              left: 0;
              border: 1px solid @border-color-base;
77b4e431   梁灏   optimize Checkbox... 
32
 
              border-radius: 2px;
6c5fbd8b   梁灏   add Checkbox UI 
33
 
              background-color: #fff;
e2645048   jingsam   :fire: remove tra... 
34
35
 
              transition: border-color @transition-time @ease-in-out, background-color @transition-time @ease-in-out;
6c5fbd8b   梁灏   add Checkbox UI 
36
37
38
 
              &:after {
                  content: '';
                  display: table;
7d5431d8   梁灏   update some style 
39
 
                  width: 4px;
6c5fbd8b   梁灏   add Checkbox UI 
40
41
 
                  height: 8px;
                  position: absolute;
77b4e431   梁灏   optimize Checkbox... 
42
 
                  top: 1px;
6c5fbd8b   梁灏   add Checkbox UI 
43
44
45
46
 
                  left: 4px;
                  border: 2px solid #fff;
                  border-top: 0;
                  border-left: 0;
e2645048   jingsam   :fire: remove tra... 
47
48
 
                  transform: rotate(45deg) scale(0);
                  transition: all @transition-time @ease-in-out;
6c5fbd8b   梁灏   add Checkbox UI 
49
50
 
              }
          }
77f1cc2e   梁灏   Checkbox add size... 
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
          &-large{
              font-size: 16px;
              & .@{checkbox-inner-prefix-cls} {
                  width: 16px;
                  height: 16px;
                  &:after{
                      width: 5px;
                      height: 9px;
                  }
              }
          }
          &-small{
              font-size: 12px;
              & .@{checkbox-inner-prefix-cls} {
                  width: 12px;
                  height: 12px;
                  &:after{
                      top: 0;
                      left: 3px;
                  }
              }
          }
6c5fbd8b   梁灏   add Checkbox UI 
73
74
75
76
77
78
79
80
81
82
83
84
 
  
          &-input {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              z-index: 1;
              cursor: pointer;
              opacity: 0;
77f7bb95   梁灏   add Transfer comp... 
85
86
87
88
 
  
              &[disabled]{
                  cursor: @cursor-disabled;
              }
6c5fbd8b   梁灏   add Checkbox UI 
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
          }
      }
  
      // 选中状态
      .@{checkbox-prefix-cls}-checked {
  
          &:hover {
              .@{checkbox-inner-prefix-cls} {
                  border-color: @primary-color;
              }
          }
  
          .@{checkbox-inner-prefix-cls} {
              border-color: @primary-color;
              background-color: @primary-color;
  
              &:after {
                  content: '';
                  display: table;
7d5431d8   梁灏   update some style 
108
 
                  width: 4px;
6c5fbd8b   梁灏   add Checkbox UI 
109
110
 
                  height: 8px;
                  position: absolute;
77b4e431   梁灏   optimize Checkbox... 
111
 
                  top: 1px;
6c5fbd8b   梁灏   add Checkbox UI 
112
113
114
115
 
                  left: 4px;
                  border: 2px solid #fff;
                  border-top: 0;
                  border-left: 0;
e2645048   jingsam   :fire: remove tra... 
116
117
 
                  transform: rotate(45deg) scale(1);
                  transition: all @transition-time @ease-in-out;
6c5fbd8b   梁灏   add Checkbox UI 
118
119
120
 
              }
          }
      }
77f1cc2e   梁灏   Checkbox add size... 
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
      .@{checkbox-prefix-cls}-large{
          .@{checkbox-prefix-cls}-checked{
              .@{checkbox-inner-prefix-cls} {
                  &:after{
                      width: 5px;
                      height: 9px;
                  }
              }
          }
      }
      .@{checkbox-prefix-cls}-small{
          .@{checkbox-prefix-cls}-checked{
              .@{checkbox-inner-prefix-cls} {
                  &:after{
                      top: 0;
                      left: 3px;
                  }
              }
          }
      }
6c5fbd8b   梁灏   add Checkbox UI 
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
  
      // 禁用
      .@{checkbox-prefix-cls}-disabled {
          &.@{checkbox-prefix-cls}-checked {
              &:hover {
                  .@{checkbox-inner-prefix-cls} {
                      border-color: @border-color-base;
                  }
              }
  
              .@{checkbox-inner-prefix-cls} {
                  background-color: #f3f3f3;
                  border-color: @border-color-base;
  
                  &:after {
                      animation-name: none;
                      border-color: #ccc;
                  }
              }
          }
  
          &:hover {
              .@{checkbox-inner-prefix-cls} {
                  border-color: @border-color-base;
              }
          }
  
          .@{checkbox-inner-prefix-cls} {
              border-color: @border-color-base;
              background-color: #f3f3f3;
              &:after {
                  animation-name: none;
                  border-color: #f3f3f3;
              }
          }
  
          .@{checkbox-inner-prefix-cls}-input {
              cursor: default;
          }
  
          & + span {
              color: #ccc;
              cursor: @cursor-disabled;
          }
      }
07e243ff   梁灏   update Checkbox i... 
187
188
189
190
191
192
193
194
195
196
197
198
 
      // 半选状态
      .@{checkbox-prefix-cls}-indeterminate{
          .@{checkbox-inner-prefix-cls}:after{
              content: '';
              width: 8px;
              height: 1px;
              transform: scale(1);
              position: absolute;
              left: 2px;
              top: 5px;
          }
b566d106   梁灏   update Tree 
199
200
201
202
203
 
          &:hover {
              .@{checkbox-inner-prefix-cls} {
                  border-color: @primary-color;
              }
          }
07e243ff   梁灏   update Checkbox i... 
204
205
206
207
208
 
          .@{checkbox-inner-prefix-cls}{
              background-color: @primary-color;
              border-color: @primary-color;
          }
      }
77f1cc2e   梁灏   Checkbox add size... 
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
 
      .@{checkbox-prefix-cls}-large {
          .@{checkbox-prefix-cls}-indeterminate{
              .@{checkbox-inner-prefix-cls}:after{
                  width: 10px;
                  top: 6px;
              }
          }
      }
      .@{checkbox-prefix-cls}-small {
          .@{checkbox-prefix-cls}-indeterminate{
              .@{checkbox-inner-prefix-cls}:after{
                  width: 6px;
                  top: 4px;
              }
          }
      }
07e243ff   梁灏   update Checkbox i... 
225
6c5fbd8b   梁灏   add Checkbox UI 
226
227
 
      .@{checkbox-prefix-cls}-wrapper {
          cursor: pointer;
3c01d81a   梁灏   fixed Modal bug,w... 
228
 
          font-size: @font-size-small;
6c5fbd8b   梁灏   add Checkbox UI 
229
 
          display: inline-block;
ba3e34e0   梁灏   update some styles 
230
 
          margin-right: 8px;
77f7bb95   梁灏   add Transfer comp... 
231
232
233
 
          &-disabled{
              cursor: @cursor-disabled;
          }
77f1cc2e   梁灏   Checkbox add size... 
234
235
236
237
 
  
          &.@{checkbox-prefix-cls}-large{
              font-size: @font-size-base;
          }
6c5fbd8b   梁灏   add Checkbox UI 
238
239
240
241
 
      }
  
      .@{checkbox-prefix-cls}-wrapper + span,
      .@{checkbox-prefix-cls} + span {
3c01d81a   梁灏   fixed Modal bug,w... 
242
 
          //margin-left: 4px;
07aa688e   梁灏   add Switch UI 
243
 
          margin-right: 4px;
6c5fbd8b   梁灏   add Checkbox UI 
244
245
246
247
248
249
250
251
 
      }
  
      .@{checkbox-prefix-cls}-group {
          font-size: @font-size-base;
          &-item {
              display: inline-block;
          }
      }
e2645048   jingsam   :fire: remove tra... 
252
 
  }