chenhaodong / mew-iview

Blame view

src/styles/mixins/checkbox.less 6.74 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
 
          &-large{
77f1cc2e   梁灏   Checkbox add size... 
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
              & .@{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 
72
73
74
75
76
77
78
79
80
81
82
83
 
  
          &-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... 
84
85
86
87
 
  
              &[disabled]{
                  cursor: @cursor-disabled;
              }
6c5fbd8b   梁灏   add Checkbox UI 
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
          }
      }
  
      // 选中状态
      .@{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 
107
 
                  width: 4px;
6c5fbd8b   梁灏   add Checkbox UI 
108
109
 
                  height: 8px;
                  position: absolute;
77b4e431   梁灏   optimize Checkbox... 
110
 
                  top: 1px;
6c5fbd8b   梁灏   add Checkbox UI 
111
112
113
114
 
                  left: 4px;
                  border: 2px solid #fff;
                  border-top: 0;
                  border-left: 0;
e2645048   jingsam   :fire: remove tra... 
115
116
 
                  transform: rotate(45deg) scale(1);
                  transition: all @transition-time @ease-in-out;
6c5fbd8b   梁灏   add Checkbox UI 
117
118
119
 
              }
          }
      }
77f1cc2e   梁灏   Checkbox add size... 
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
      .@{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 
140
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
 
  
      // 禁用
      .@{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... 
186
187
188
189
190
191
192
193
194
195
196
197
 
      // 半选状态
      .@{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 
198
199
200
201
202
 
          &:hover {
              .@{checkbox-inner-prefix-cls} {
                  border-color: @primary-color;
              }
          }
07e243ff   梁灏   update Checkbox i... 
203
204
205
206
 
          .@{checkbox-inner-prefix-cls}{
              background-color: @primary-color;
              border-color: @primary-color;
          }
3ea24615   梁灏   update checkbox s... 
207
208
209
210
211
212
213
214
215
 
          &.@{checkbox-prefix-cls}-disabled{
              .@{checkbox-inner-prefix-cls}{
                  background-color: #f3f3f3;
                  border-color: @border-color-base;
              }
              .@{checkbox-inner-prefix-cls}:after{
                  border-color: @input-placeholder-color;
              }
          }
07e243ff   梁灏   update Checkbox i... 
216
 
      }
77f1cc2e   梁灏   Checkbox add size... 
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
 
      .@{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... 
233
6c5fbd8b   梁灏   add Checkbox UI 
234
235
 
      .@{checkbox-prefix-cls}-wrapper {
          cursor: pointer;
3c01d81a   梁灏   fixed Modal bug,w... 
236
 
          font-size: @font-size-small;
6c5fbd8b   梁灏   add Checkbox UI 
237
 
          display: inline-block;
ba3e34e0   梁灏   update some styles 
238
 
          margin-right: 8px;
98252a9e   Xotic750   Checkbox WIP 
239
240
241
242
243
244
245
246
 
          outline: 0;
          &:focus,
          &:active {
              & .@{checkbox-prefix-cls}-inner {
                  box-shadow: 0 0 0 2px fade(@primary-color, 20%);
              }
          }
77f7bb95   梁灏   add Transfer comp... 
247
248
249
 
          &-disabled{
              cursor: @cursor-disabled;
          }
77f1cc2e   梁灏   Checkbox add size... 
250
251
252
253
 
  
          &.@{checkbox-prefix-cls}-large{
              font-size: @font-size-base;
          }
6c5fbd8b   梁灏   add Checkbox UI 
254
255
256
257
 
      }
  
      .@{checkbox-prefix-cls}-wrapper + span,
      .@{checkbox-prefix-cls} + span {
3c01d81a   梁灏   fixed Modal bug,w... 
258
 
          //margin-left: 4px;
07aa688e   梁灏   add Switch UI 
259
 
          margin-right: 4px;
6c5fbd8b   梁灏   add Checkbox UI 
260
261
262
263
264
265
266
267
 
      }
  
      .@{checkbox-prefix-cls}-group {
          font-size: @font-size-base;
          &-item {
              display: inline-block;
          }
      }
e2645048   jingsam   :fire: remove tra... 
268
 
  }