← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/less/modules/checkbox.less

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/less/modules/checkbox.less
 
1
/*
 
2
 * # Semantic - Checkbox
 
3
 * http://github.com/jlukic/semantic-ui/
 
4
 *
 
5
 *
 
6
 * Copyright 2014 Contributors
 
7
 * Released under the MIT license
 
8
 * http://opensource.org/licenses/MIT
 
9
 *
 
10
 */
 
11
 
 
12
/*******************************
 
13
           Checkbox
 
14
*******************************/
 
15
 
 
16
/*--------------
 
17
    Standard
 
18
---------------*/
 
19
 
 
20
 
 
21
/*--- Content ---*/
 
22
 
 
23
.ui.checkbox {
 
24
  position: relative;
 
25
  display: inline-block;
 
26
 
 
27
  min-width: 1em;
 
28
  min-height: 1.25em;
 
29
  line-height: 1em;
 
30
 
 
31
  outline: none;
 
32
  vertical-align: middle;
 
33
}
 
34
.ui.checkbox input {
 
35
  position: absolute;
 
36
  top: 0px;
 
37
  left: 0px;
 
38
  opacity: 0;
 
39
  outline: none;
 
40
}
 
41
 
 
42
 
 
43
/*--- Box ---*/
 
44
 
 
45
.ui.checkbox .box,
 
46
.ui.checkbox label {
 
47
  cursor: pointer;
 
48
  padding-left: 2em;
 
49
  outline: none;
 
50
}
 
51
 
 
52
.ui.checkbox .box:before,
 
53
.ui.checkbox label:before {
 
54
  position: absolute;
 
55
  top: 0em;
 
56
  left: 0em;
 
57
 
 
58
  line-height: 1;
 
59
  width: 1em;
 
60
  height: 1em;
 
61
  left: 0em;
 
62
  content: '';
 
63
 
 
64
  border-radius: 4px;
 
65
 
 
66
  background: #FFFFFF;
 
67
 
 
68
  -webkit-transition:
 
69
    background-color 0.3s ease,
 
70
    -webkit-box-shadow 0.3s ease;
 
71
 
 
72
     -moz-transition:
 
73
    background-color 0.3s ease,
 
74
    box-shadow 0.3s ease
 
75
  ;
 
76
 
 
77
          transition:
 
78
    background-color 0.3s ease,
 
79
    box-shadow 0.3s ease
 
80
  ;
 
81
 
 
82
  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
 
83
 
 
84
          box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
 
85
}
 
86
 
 
87
/*--- Checkbox ---*/
 
88
.ui.checkbox .box:after,
 
89
.ui.checkbox label:after {
 
90
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
91
  filter: alpha(opacity=0);
 
92
  opacity: 0;
 
93
  content: '';
 
94
  position: absolute;
 
95
  background: transparent;
 
96
  border: 0.2em solid #333333;
 
97
  border-top: none;
 
98
  border-right: none;
 
99
  -webkit-transform: rotate(-45deg);
 
100
     -moz-transform: rotate(-45deg);
 
101
      -ms-transform: rotate(-45deg);
 
102
          transform: rotate(-45deg);
 
103
}
 
104
.ui.checkbox .box:after,
 
105
.ui.checkbox label:after {
 
106
  top: 0.275em;
 
107
  left: 0.2em;
 
108
  width: 0.45em;
 
109
  height: 0.15em;
 
110
}
 
111
 
 
112
/*--- Inside Label ---*/
 
113
.ui.checkbox label {
 
114
  display: block;
 
115
  color: rgba(0, 0, 0, 0.6);
 
116
 
 
117
  -webkit-transition: color 0.2s ease;
 
118
 
 
119
     -moz-transition: color 0.2s ease;
 
120
 
 
121
          transition: color 0.2s ease;
 
122
}
 
123
.ui.checkbox label:hover {
 
124
  color: rgba(0, 0, 0, 0.8);
 
125
}
 
126
 
 
127
.ui.checkbox input:focus ~ label {
 
128
  color: rgba(0, 0, 0, 0.8);
 
129
}
 
130
 
 
131
/*--- Outside Label  ---*/
 
132
.ui.checkbox ~ label {
 
133
  cursor: pointer;
 
134
  opacity: 0.85;
 
135
  vertical-align: middle;
 
136
}
 
137
.ui.checkbox ~ label:hover {
 
138
  opacity: 1;
 
139
}
 
140
 
 
141
 
 
142
/*******************************
 
143
           States
 
144
*******************************/
 
145
 
 
146
 
 
147
/*--- Hover ---*/
 
148
.ui.checkbox .box:hover::before,
 
149
.ui.checkbox label:hover::before {
 
150
  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
 
151
          box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
 
152
}
 
153
 
 
154
/*--- Down ---*/
 
155
.ui.checkbox .box:active::before,
 
156
.ui.checkbox label:active::before {
 
157
  background-color: #F5F5F5;
 
158
}
 
159
 
 
160
/*--- Focus ---*/
 
161
.ui.checkbox input:focus ~ .box:before,
 
162
.ui.checkbox input:focus ~ label:before {
 
163
  -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
 
164
          box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
 
165
}
 
166
 
 
167
/*--- Active ---*/
 
168
.ui.checkbox input:checked ~ .box:after,
 
169
.ui.checkbox input:checked ~ label:after {
 
170
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
171
  filter: alpha(opacity=100);
 
172
  opacity: 1;
 
173
}
 
174
 
 
175
/*--- Disabled ---*/
 
176
.ui.disabled.checkbox ~ .box:after,
 
177
.ui.checkbox input[disabled] ~ .box:after,
 
178
.ui.disabled.checkbox label,
 
179
.ui.checkbox input[disabled] ~ label {
 
180
  opacity: 0.4;
 
181
  color: rgba(0, 0, 0, 0.3);
 
182
}
 
183
 
 
184
 
 
185
/*******************************
 
186
          Variations
 
187
*******************************/
 
188
 
 
189
 
 
190
/*--------------
 
191
     Radio
 
192
---------------*/
 
193
 
 
194
.ui.radio.checkbox .box:before,
 
195
.ui.radio.checkbox label:before {
 
196
  min-width: 1em;
 
197
  height: 1em;
 
198
  border-radius: 500px;
 
199
  -webkit-transform: none;
 
200
     -moz-transform: none;
 
201
      -ms-transform: none;
 
202
          transform: none;
 
203
}
 
204
.ui.radio.checkbox .box:after,
 
205
.ui.radio.checkbox label:after {
 
206
  border: none;
 
207
  top: 0.2em;
 
208
  left: 0.2em;
 
209
 
 
210
  width: 0.6em;
 
211
  height: 0.6em;
 
212
 
 
213
  background-color: #555555;
 
214
 
 
215
  -webkit-transform: none;
 
216
 
 
217
     -moz-transform: none;
 
218
 
 
219
      -ms-transform: none;
 
220
 
 
221
          transform: none;
 
222
  border-radius: 500px;
 
223
}
 
224
 
 
225
/*--------------
 
226
     Slider
 
227
---------------*/
 
228
 
 
229
.ui.slider.checkbox {
 
230
  cursor: pointer;
 
231
  min-width: 3em;
 
232
}
 
233
 
 
234
/* Line */
 
235
.ui.slider.checkbox:after {
 
236
  position: absolute;
 
237
  top: 0.5em;
 
238
  left: 0em;
 
239
  content: '';
 
240
 
 
241
  width: 3em;
 
242
  height: 2px;
 
243
  background-color: rgba(0, 0, 0, 0.1);
 
244
}
 
245
 
 
246
/* Button */
 
247
.ui.slider.checkbox .box,
 
248
.ui.slider.checkbox label {
 
249
  padding-left: 4em;
 
250
}
 
251
.ui.slider.checkbox .box:before,
 
252
.ui.slider.checkbox label:before {
 
253
  cursor: pointer;
 
254
  display: block;
 
255
 
 
256
  position: absolute;
 
257
  top: -0.25em;
 
258
  left: 0em;
 
259
  z-index: 1;
 
260
 
 
261
  width: 1.5em;
 
262
  height: 1.5em;
 
263
 
 
264
  -webkit-transform: none;
 
265
 
 
266
     -moz-transform: none;
 
267
 
 
268
      -ms-transform: none;
 
269
 
 
270
          transform: none;
 
271
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
272
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
273
 
 
274
  border-radius: 50rem;
 
275
 
 
276
  -webkit-transition: left 0.3s ease 0s;
 
277
 
 
278
     -moz-transition: left 0.3s ease 0s;
 
279
 
 
280
          transition: left 0.3s ease 0s;
 
281
}
 
282
 
 
283
/* Button Activation Light */
 
284
.ui.slider.checkbox .box:after,
 
285
.ui.slider.checkbox label:after {
 
286
  opacity: 1;
 
287
 
 
288
  position: absolute;
 
289
  content: '';
 
290
  top: 0.15em;
 
291
  left: 0em;
 
292
  z-index: 2;
 
293
 
 
294
  margin-left: 0.375em;
 
295
 
 
296
  border: none;
 
297
  width: 0.75em;
 
298
  height: 0.75em;
 
299
 
 
300
  border-radius: 50rem;
 
301
 
 
302
  -webkit-transform: none;
 
303
 
 
304
     -moz-transform: none;
 
305
 
 
306
      -ms-transform: none;
 
307
 
 
308
          transform: none;
 
309
 
 
310
  -webkit-transition:
 
311
    background 0.3s ease 0s,
 
312
    left 0.3s ease 0s
 
313
  ;
 
314
 
 
315
     -moz-transition:
 
316
    background 0.3s ease 0s,
 
317
    left 0.3s ease 0s
 
318
  ;
 
319
 
 
320
          transition:
 
321
    background 0.3s ease 0s,
 
322
    left 0.3s ease 0s
 
323
  ;
 
324
}
 
325
 
 
326
/* Selected Slider Toggle */
 
327
.ui.slider.checkbox input:checked ~ .box:before,
 
328
.ui.slider.checkbox input:checked ~ label:before,
 
329
.ui.slider.checkbox input:checked ~ .box:after,
 
330
.ui.slider.checkbox input:checked ~ label:after {
 
331
  left: 1.75em;
 
332
}
 
333
 
 
334
/* Off Color */
 
335
.ui.slider.checkbox .box:after,
 
336
.ui.slider.checkbox label:after {
 
337
  background-color: #D95C5C;
 
338
}
 
339
 
 
340
/* On Color */
 
341
.ui.slider.checkbox input:checked ~ .box:after,
 
342
.ui.slider.checkbox input:checked ~ label:after {
 
343
  background-color: #89B84C;
 
344
}
 
345
 
 
346
 
 
347
 
 
348
/*--------------
 
349
     Toggle
 
350
---------------*/
 
351
 
 
352
.ui.toggle.checkbox {
 
353
  cursor: pointer;
 
354
}
 
355
 
 
356
.ui.toggle.checkbox .box,
 
357
.ui.toggle.checkbox label {
 
358
  padding-left: 4em;
 
359
}
 
360
 
 
361
/* Switch */
 
362
.ui.toggle.checkbox .box:before,
 
363
.ui.toggle.checkbox label:before {
 
364
  cursor: pointer;
 
365
  display: block;
 
366
 
 
367
  position: absolute;
 
368
  content: '';
 
369
  top: -0.25em;
 
370
  left: 0em;
 
371
  z-index: 1;
 
372
 
 
373
  background-color: #FFFFFF;
 
374
  width: 3em;
 
375
  height: 1.5em;
 
376
 
 
377
  -webkit-transform: none;
 
378
 
 
379
     -moz-transform: none;
 
380
 
 
381
      -ms-transform: none;
 
382
 
 
383
          transform: none;
 
384
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
385
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
386
  border-radius: 50rem;
 
387
}
 
388
 
 
389
/* Activation Light */
 
390
.ui.toggle.checkbox .box:after,
 
391
.ui.toggle.checkbox label:after {
 
392
  opacity: 1;
 
393
 
 
394
  background-color: transparent;
 
395
  -webkit-box-shadow: none;
 
396
  box-shadow: none;
 
397
 
 
398
  content: '';
 
399
  position: absolute;
 
400
  top: 0.15em;
 
401
  left: 0.5em;
 
402
  z-index: 2;
 
403
 
 
404
  border: none;
 
405
  width: 0.75em;
 
406
  height: 0.75em;
 
407
 
 
408
  background-color: #D95C5C;
 
409
  border-radius: 50rem;
 
410
  -webkit-transition:
 
411
    background 0.3s ease 0s,
 
412
    left 0.3s ease 0s
 
413
  ;
 
414
     -moz-transition:
 
415
    background 0.3s ease 0s,
 
416
    left 0.3s ease 0s
 
417
  ;
 
418
          transition:
 
419
    background 0.3s ease 0s,
 
420
    left 0.3s ease 0s
 
421
  ;
 
422
}
 
423
 
 
424
/* Active */
 
425
.ui.toggle.checkbox:active .box:before,
 
426
.ui.toggle.checkbox:active label:before {
 
427
  background-color: #F5F5F5;
 
428
}
 
429
 
 
430
/* Active */
 
431
.ui.toggle.checkbox input:checked ~ .box:after,
 
432
.ui.toggle.checkbox input:checked ~ label:after {
 
433
  left: 1.75em;
 
434
  background-color: #89B84C;
 
435
}
 
436
 
 
437
 
 
438
 
 
439
/*--------------
 
440
     Sizes
 
441
---------------*/
 
442
 
 
443
.ui.checkbox {
 
444
  font-size: 1em;
 
445
}
 
446
.ui.large.checkbox {
 
447
  font-size: 1.25em;
 
448
}
 
449
.ui.huge.checkbox {
 
450
  font-size: 1.5em;
 
451
}
 
 
b'\\ No newline at end of file'