oo-loop 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/loop.css +189 -625
  2. package/dist/loop.min.css +1 -1
  3. package/package.json +4 -3
  4. package/scss/_loop.scss +23 -27
  5. package/scss/_variables.scss +6 -2
  6. package/scss/base/_base.scss +11 -19
  7. package/scss/base/_type.scss +27 -63
  8. package/scss/components/_button.scss +56 -84
  9. package/scss/components/_columns.scss +69 -89
  10. package/scss/components/_form.scss +5 -7
  11. package/scss/components/_grid.scss +50 -62
  12. package/scss/components/form/_checkbox.scss +33 -41
  13. package/scss/components/form/_input.scss +12 -74
  14. package/scss/components/form/_mixin.scss +47 -0
  15. package/scss/components/form/_radio.scss +27 -34
  16. package/scss/components/form/_select.scss +38 -46
  17. package/scss/components/form/_toggle.scss +21 -30
  18. package/scss/functions/_array.scss +12 -8
  19. package/scss/functions/_empty.scss +6 -3
  20. package/scss/functions/_index.scss +7 -0
  21. package/scss/functions/_map.scss +4 -2
  22. package/scss/functions/_replace.scss +7 -4
  23. package/scss/functions/_split.scss +10 -6
  24. package/scss/functions/_type.scss +5 -3
  25. package/scss/mixins/_breakpoint.scss +12 -22
  26. package/scss/mixins/_loop.scss +19 -17
  27. package/scss/utilities/_color.scss +9 -18
  28. package/scss/utilities/_container.scss +9 -10
  29. package/scss/utilities/_float.scss +7 -11
  30. package/scss/utilities/_list.scss +9 -14
  31. package/scss/utilities/_spacing.scss +29 -40
  32. package/scss/utilities/_text.scss +19 -64
  33. package/scss/utilities/_visibility.scss +10 -9
  34. package/scss/utilities/_wrapper.scss +5 -10
  35. package/scss/base/_all.scss +0 -9
  36. package/scss/functions/_all.scss +0 -9
  37. package/scss/mixins/_all.scss +0 -7
package/dist/loop.css CHANGED
@@ -1,39 +1,3 @@
1
- /**
2
- * getMapValue
3
- * @param $map map map of data
4
- * @param $key string key to retrieve the value from
5
- * @return string
6
- */
7
- /**
8
- * getColors
9
- * Get value from the map variable $colors
10
- * @param $key string key to retrieve the value from
11
- * @return string
12
- */
13
- /**
14
- * getTextColors
15
- * Get value from the map variable $text-colors
16
- * @param $key string key to retrieve the value from
17
- * @return string
18
- */
19
- /**
20
- * getBgColors
21
- * Get value from the map variable $bg-colors
22
- * @param $key string key to retrieve the value from
23
- * @return string
24
- */
25
- /**
26
- * getBorderColors
27
- * Get value from the map variable $border-colors
28
- * @param $key string key to retrieve the value from
29
- * @return string
30
- */
31
- /**
32
- * getTextSizes
33
- * Get value from the map variable $text-sizes
34
- * @param $key string key to retrieve the value from
35
- * @return string
36
- */
37
1
  /**
38
2
  * Variables
39
3
  * Change at your own will
@@ -68,610 +32,50 @@
68
32
  /**
69
33
  * Text Transform
70
34
  */
71
- /**
72
- * Text Decoration
73
- */
74
- /**
75
- * Letter Spacing
76
- */
77
- /**
78
- * Font Style
79
- */
80
- /**
81
- * Font Weight
82
- */
83
- /**
84
- * Font Family
85
- */
86
- /**
87
- * List
88
- */
89
- /**
90
- * Container
91
- */
92
- /**
93
- * Columns
94
- */
95
- /**
96
- * Grid
97
- */
98
- /**
99
- * Spacing
100
- */
101
- /**
102
- * Wrapper
103
- */
104
- /**
105
- * Button
106
- */
107
- /**
108
- * Form
109
- */
110
- /**
111
- * Float utilities
112
- */
113
- /**
114
- * Visibility Utilities
115
- */
116
- /**
117
- * isString
118
- * @param string|list $data
119
- * @return bool
120
- */
121
- /**
122
- * isList
123
- * @param string|list $data
124
- * @return bool
125
- */
126
- /**
127
- * isMap
128
- * @param string|list $data
129
- * @return bool
130
- */
131
- /**
132
- * Empty
133
- * @param string|list $data
134
- * @return bool
135
- */
136
- /**
137
- * In List
138
- * @param $needle string the searched value
139
- * @param $haystack array|string the list to search in
140
- * @return bool
141
- */
142
- /**
143
- * mergeArray
144
- * @param $array1 list|map list or map
145
- * @param $array2 list|map list or map being the same type of $array1
146
- * @return list|map
147
- */
148
- /**
149
- * Is Bright
150
- * @param color
151
- * @return bool
152
- */
153
- /**
154
- * isString
155
- * @param string|list $data
156
- * @return bool
157
- */
158
- /**
159
- * isList
160
- * @param string|list $data
161
- * @return bool
162
- */
163
- /**
164
- * isMap
165
- * @param string|list $data
166
- * @return bool
167
- */
168
- /**
169
- * Empty
170
- * @param string|list $data
171
- * @return bool
172
- */
173
- /**
174
- * getMapValue
175
- * @param $map map map of data
176
- * @param $key string key to retrieve the value from
177
- * @return string
178
- */
179
- /**
180
- * getColors
181
- * Get value from the map variable $colors
182
- * @param $key string key to retrieve the value from
183
- * @return string
184
- */
185
- /**
186
- * getTextColors
187
- * Get value from the map variable $text-colors
188
- * @param $key string key to retrieve the value from
189
- * @return string
190
- */
191
- /**
192
- * getBgColors
193
- * Get value from the map variable $bg-colors
194
- * @param $key string key to retrieve the value from
195
- * @return string
196
- */
197
- /**
198
- * getBorderColors
199
- * Get value from the map variable $border-colors
200
- * @param $key string key to retrieve the value from
201
- * @return string
202
- */
203
- /**
204
- * getTextSizes
205
- * Get value from the map variable $text-sizes
206
- * @param $key string key to retrieve the value from
207
- * @return string
208
- */
209
- /**
210
- * Replace
211
- * @param string $search The value being searched
212
- * @param string $replace The replacement value
213
- * @parem string $subject The string being searched and replaced on
214
- *
215
- * @return string
216
- */
217
- /**
218
- * Split
219
- * @param string $pattern The string character to split your string by
220
- * @param string $subject The input string
221
- * @param list $list The list being populated
222
- *
223
- * @return list
224
- */
225
- /**
226
- * isString
227
- * @param string|list $data
228
- * @return bool
229
- */
230
- /**
231
- * isList
232
- * @param string|list $data
233
- * @return bool
234
- */
235
- /**
236
- * isMap
237
- * @param string|list $data
238
- * @return bool
239
- */
240
- /**
241
- * breakpoints
242
- * based on material guidelines
243
- * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
244
- */
245
- /**
246
- * isString
247
- * @param string|list $data
248
- * @return bool
249
- */
250
- /**
251
- * isList
252
- * @param string|list $data
253
- * @return bool
254
- */
255
- /**
256
- * isMap
257
- * @param string|list $data
258
- * @return bool
259
- */
260
- /**
261
- * Empty
262
- * @param string|list $data
263
- * @return bool
264
- */
265
- /**
266
- * In List
267
- * @param $needle string the searched value
268
- * @param $haystack array|string the list to search in
269
- * @return bool
270
- */
271
- /**
272
- * mergeArray
273
- * @param $array1 list|map list or map
274
- * @param $array2 list|map list or map being the same type of $array1
275
- * @return list|map
276
- */
277
- /**
278
- * Is Bright
279
- * @param color
280
- * @return bool
281
- */
282
- /**
283
- * isString
284
- * @param string|list $data
285
- * @return bool
286
- */
287
- /**
288
- * isList
289
- * @param string|list $data
290
- * @return bool
291
- */
292
- /**
293
- * isMap
294
- * @param string|list $data
295
- * @return bool
296
- */
297
- /**
298
- * Empty
299
- * @param string|list $data
300
- * @return bool
301
- */
302
- /**
303
- * getMapValue
304
- * @param $map map map of data
305
- * @param $key string key to retrieve the value from
306
- * @return string
307
- */
308
- /**
309
- * getColors
310
- * Get value from the map variable $colors
311
- * @param $key string key to retrieve the value from
312
- * @return string
313
- */
314
- /**
315
- * getTextColors
316
- * Get value from the map variable $text-colors
317
- * @param $key string key to retrieve the value from
318
- * @return string
319
- */
320
- /**
321
- * getBgColors
322
- * Get value from the map variable $bg-colors
323
- * @param $key string key to retrieve the value from
324
- * @return string
325
- */
326
- /**
327
- * getBorderColors
328
- * Get value from the map variable $border-colors
329
- * @param $key string key to retrieve the value from
330
- * @return string
331
- */
332
- /**
333
- * getTextSizes
334
- * Get value from the map variable $text-sizes
335
- * @param $key string key to retrieve the value from
336
- * @return string
337
- */
338
- /**
339
- * Replace
340
- * @param string $search The value being searched
341
- * @param string $replace The replacement value
342
- * @parem string $subject The string being searched and replaced on
343
- *
344
- * @return string
345
- */
346
- /**
347
- * Split
348
- * @param string $pattern The string character to split your string by
349
- * @param string $subject The input string
350
- * @param list $list The list being populated
351
- *
352
- * @return list
353
- */
354
- /**
355
- * isString
356
- * @param string|list $data
357
- * @return bool
358
- */
359
- /**
360
- * isList
361
- * @param string|list $data
362
- * @return bool
363
- */
364
- /**
365
- * isMap
366
- * @param string|list $data
367
- * @return bool
368
- */
369
- /**
370
- * Clearfix
371
- */
372
- /**
373
- * fontSmoothing
374
- * @param $smooth bool Apply smoothing ?
375
- */
376
- /**
377
- * Loop
378
- */
379
- /**
380
- * isString
381
- * @param string|list $data
382
- * @return bool
383
- */
384
- /**
385
- * isList
386
- * @param string|list $data
387
- * @return bool
388
- */
389
- /**
390
- * isMap
391
- * @param string|list $data
392
- * @return bool
393
- */
394
- /**
395
- * Empty
396
- * @param string|list $data
397
- * @return bool
398
- */
399
- /**
400
- * In List
401
- * @param $needle string the searched value
402
- * @param $haystack array|string the list to search in
403
- * @return bool
404
- */
405
- /**
406
- * mergeArray
407
- * @param $array1 list|map list or map
408
- * @param $array2 list|map list or map being the same type of $array1
409
- * @return list|map
410
- */
411
- /**
412
- * Is Bright
413
- * @param color
414
- * @return bool
415
- */
416
- /**
417
- * isString
418
- * @param string|list $data
419
- * @return bool
420
- */
421
- /**
422
- * isList
423
- * @param string|list $data
424
- * @return bool
425
- */
426
- /**
427
- * isMap
428
- * @param string|list $data
429
- * @return bool
430
- */
431
- /**
432
- * Empty
433
- * @param string|list $data
434
- * @return bool
435
- */
436
- /**
437
- * getMapValue
438
- * @param $map map map of data
439
- * @param $key string key to retrieve the value from
440
- * @return string
441
- */
442
- /**
443
- * getColors
444
- * Get value from the map variable $colors
445
- * @param $key string key to retrieve the value from
446
- * @return string
447
- */
448
- /**
449
- * getTextColors
450
- * Get value from the map variable $text-colors
451
- * @param $key string key to retrieve the value from
452
- * @return string
453
- */
454
- /**
455
- * getBgColors
456
- * Get value from the map variable $bg-colors
457
- * @param $key string key to retrieve the value from
458
- * @return string
459
- */
460
- /**
461
- * getBorderColors
462
- * Get value from the map variable $border-colors
463
- * @param $key string key to retrieve the value from
464
- * @return string
465
- */
466
- /**
467
- * getTextSizes
468
- * Get value from the map variable $text-sizes
469
- * @param $key string key to retrieve the value from
470
- * @return string
471
- */
472
- /**
473
- * Replace
474
- * @param string $search The value being searched
475
- * @param string $replace The replacement value
476
- * @parem string $subject The string being searched and replaced on
477
- *
478
- * @return string
479
- */
480
- /**
481
- * Split
482
- * @param string $pattern The string character to split your string by
483
- * @param string $subject The input string
484
- * @param list $list The list being populated
485
- *
486
- * @return list
487
- */
488
- /**
489
- * isString
490
- * @param string|list $data
491
- * @return bool
492
- */
493
- /**
494
- * isList
495
- * @param string|list $data
496
- * @return bool
497
- */
498
- /**
499
- * isMap
500
- * @param string|list $data
501
- * @return bool
502
- */
503
- /**
504
- * breakpoints
505
- * based on material guidelines
506
- * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
507
- */
508
- /**
509
- * isString
510
- * @param string|list $data
511
- * @return bool
512
- */
513
- /**
514
- * isList
515
- * @param string|list $data
516
- * @return bool
517
- */
518
- /**
519
- * isMap
520
- * @param string|list $data
521
- * @return bool
522
- */
523
- /**
524
- * Empty
525
- * @param string|list $data
526
- * @return bool
527
- */
528
- /**
529
- * In List
530
- * @param $needle string the searched value
531
- * @param $haystack array|string the list to search in
532
- * @return bool
533
- */
534
- /**
535
- * mergeArray
536
- * @param $array1 list|map list or map
537
- * @param $array2 list|map list or map being the same type of $array1
538
- * @return list|map
539
- */
540
- /**
541
- * Is Bright
542
- * @param color
543
- * @return bool
544
- */
545
- /**
546
- * isString
547
- * @param string|list $data
548
- * @return bool
549
- */
550
- /**
551
- * isList
552
- * @param string|list $data
553
- * @return bool
554
- */
555
- /**
556
- * isMap
557
- * @param string|list $data
558
- * @return bool
559
- */
560
- /**
561
- * Empty
562
- * @param string|list $data
563
- * @return bool
564
- */
565
- /**
566
- * getMapValue
567
- * @param $map map map of data
568
- * @param $key string key to retrieve the value from
569
- * @return string
570
- */
571
- /**
572
- * getColors
573
- * Get value from the map variable $colors
574
- * @param $key string key to retrieve the value from
575
- * @return string
576
- */
577
- /**
578
- * getTextColors
579
- * Get value from the map variable $text-colors
580
- * @param $key string key to retrieve the value from
581
- * @return string
35
+ /**
36
+ * Text Decoration
582
37
  */
583
38
  /**
584
- * getBgColors
585
- * Get value from the map variable $bg-colors
586
- * @param $key string key to retrieve the value from
587
- * @return string
39
+ * Letter Spacing
588
40
  */
589
41
  /**
590
- * getBorderColors
591
- * Get value from the map variable $border-colors
592
- * @param $key string key to retrieve the value from
593
- * @return string
42
+ * Font Style
594
43
  */
595
44
  /**
596
- * getTextSizes
597
- * Get value from the map variable $text-sizes
598
- * @param $key string key to retrieve the value from
599
- * @return string
45
+ * Font Weight
600
46
  */
601
47
  /**
602
- * Replace
603
- * @param string $search The value being searched
604
- * @param string $replace The replacement value
605
- * @parem string $subject The string being searched and replaced on
606
- *
607
- * @return string
48
+ * Font Family
608
49
  */
609
50
  /**
610
- * Split
611
- * @param string $pattern The string character to split your string by
612
- * @param string $subject The input string
613
- * @param list $list The list being populated
614
- *
615
- * @return list
51
+ * List
616
52
  */
617
53
  /**
618
- * isString
619
- * @param string|list $data
620
- * @return bool
54
+ * Container
621
55
  */
622
56
  /**
623
- * isList
624
- * @param string|list $data
625
- * @return bool
57
+ * Columns
626
58
  */
627
59
  /**
628
- * isMap
629
- * @param string|list $data
630
- * @return bool
60
+ * Grid
631
61
  */
632
62
  /**
633
- * Loop
634
- *
635
- * @param $data list|map Data to loop through
636
- * @param $properties string|list Property name to use
637
- * @param $prefix string String to prepend to the selector
638
- * @param $is-important ?bool Set the !important flag ?
639
- * @param $suffix ?string String to append to the selector
63
+ * Spacing
640
64
  */
641
65
  /**
642
- * Loop breakpoints
643
- *
644
- * @param $breakpoints list List of breakpoints classes
645
- * @param $data list|map Data to loop through
646
- * @param $properties string|list Property name to use
647
- * @param $prefix string String to prepend to the selector
648
- * @param $is-important ?bool Set the !important flag ?
649
- * @param $suffix ?string String to append to the selector
66
+ * Wrapper
650
67
  */
651
68
  /**
652
- * Loop map keys
653
- *
654
- * @param $keys list Keys of the map
655
- * @param $map map Map to search in
656
- * @param $properties string|list Property name to use
657
- * @param $prefix string String to prepend to the selector
658
- * @param $is-important ?bool Set the !important flag ?
659
- * @param $suffix ?string String to append to the selector
69
+ * Button
660
70
  */
661
71
  /**
662
- * Loop map keys modifiers
663
- *
664
- * @param $keys list keys of the map
665
- * @param $map map map to search in
666
- * @param $properties string|list property name to use
667
- * @param $is-important ?bool set the !important flag ?
668
- * @param $suffix ?string string to append to the selector
72
+ * Form
669
73
  */
670
74
  /**
671
- * Triangle
75
+ * Float utilities
672
76
  */
673
77
  /**
674
- * Import bases
78
+ * Visibility Utilities
675
79
  */
676
80
  /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
677
81
  /* Document
@@ -975,6 +379,10 @@ template {
975
379
  display: none;
976
380
  }
977
381
 
382
+ /**
383
+ * fontSmoothing
384
+ * @param $smooth bool Apply smoothing ?
385
+ */
978
386
  /**
979
387
  * Base
980
388
  */
@@ -1000,6 +408,100 @@ body {
1000
408
  background-color: #fff;
1001
409
  }
1002
410
 
411
+ /**
412
+ * isString
413
+ * @param string|list $data
414
+ * @return bool
415
+ */
416
+ /**
417
+ * isList
418
+ * @param string|list $data
419
+ * @return bool
420
+ */
421
+ /**
422
+ * isMap
423
+ * @param string|list $data
424
+ * @return bool
425
+ */
426
+ /**
427
+ * Empty
428
+ * @param string|list $data
429
+ * @return bool
430
+ */
431
+ /**
432
+ * In List
433
+ * @param $needle string the searched value
434
+ * @param $haystack array|string the list to search in
435
+ * @return bool
436
+ */
437
+ /**
438
+ * mergeArray
439
+ * @param $array1 list|map list or map
440
+ * @param $array2 list|map list or map being the same type of $array1
441
+ * @return list|map
442
+ */
443
+ /**
444
+ * Is Bright
445
+ * @param color
446
+ * @return bool
447
+ */
448
+ /**
449
+ * getMapValue
450
+ * @param $map map map of data
451
+ * @param $key string key to retrieve the value from
452
+ * @return string
453
+ */
454
+ /**
455
+ * getColors
456
+ * Get value from the map variable $colors
457
+ * @param $key string key to retrieve the value from
458
+ * @return string
459
+ */
460
+ /**
461
+ * getTextColors
462
+ * Get value from the map variable $text-colors
463
+ * @param $key string key to retrieve the value from
464
+ * @return string
465
+ */
466
+ /**
467
+ * getBgColors
468
+ * Get value from the map variable $bg-colors
469
+ * @param $key string key to retrieve the value from
470
+ * @return string
471
+ */
472
+ /**
473
+ * getBorderColors
474
+ * Get value from the map variable $border-colors
475
+ * @param $key string key to retrieve the value from
476
+ * @return string
477
+ */
478
+ /**
479
+ * getTextSizes
480
+ * Get value from the map variable $text-sizes
481
+ * @param $key string key to retrieve the value from
482
+ * @return string
483
+ */
484
+ /**
485
+ * Replace
486
+ * @param string $search The value being searched
487
+ * @param string $replace The replacement value
488
+ * @parem string $subject The string being searched and replaced on
489
+ *
490
+ * @return string
491
+ */
492
+ /**
493
+ * Split
494
+ * @param string $pattern The string character to split your string by
495
+ * @param string $subject The input string
496
+ * @param list $list The list being populated
497
+ *
498
+ * @return list
499
+ */
500
+ /**
501
+ * breakpoints
502
+ * based on material guidelines
503
+ * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
504
+ */
1003
505
  /**
1004
506
  * Typography
1005
507
  */
@@ -1159,9 +661,6 @@ hr, .hr {
1159
661
  border-bottom: 1px solid #cdcdcd;
1160
662
  }
1161
663
 
1162
- /**
1163
- * Grid
1164
- */
1165
664
  [oo-grid~=layout] {
1166
665
  display: grid;
1167
666
  grid-template-columns: repeat(12, 1fr);
@@ -2380,15 +1879,6 @@ hr, .hr {
2380
1879
  box-shadow: inset 1px 1px 1px 0 rgb(3.3035714286, 7.0535714286, 9.1964285714);
2381
1880
  }
2382
1881
 
2383
- /**
2384
- * Input
2385
- */
2386
- [oo-form~=toggle]:focus + label::after, [oo-form~=radio]:focus + label::after, [oo-form~=checkbox]:focus + label::after, [oo-form~=select] > select:focus,
2387
- [oo-form~=input]:focus {
2388
- box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
2389
- }
2390
-
2391
- [oo-form~=select] > select,
2392
1882
  [oo-form~=input] {
2393
1883
  padding: 0.5em 0.625em;
2394
1884
  display: block;
@@ -2408,9 +1898,9 @@ hr, .hr {
2408
1898
  -moz-appearance: none;
2409
1899
  appearance: none;
2410
1900
  }
2411
- [oo-form~=select] > select:focus,
2412
1901
  [oo-form~=input]:focus {
2413
1902
  outline: none;
1903
+ box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
2414
1904
  }
2415
1905
 
2416
1906
  label {
@@ -2473,12 +1963,33 @@ label + [oo-form~=select] {
2473
1963
  border-right-color: #4d4d4d;
2474
1964
  }
2475
1965
  [oo-form~=select] > select {
1966
+ padding: 0.5em 0.625em;
1967
+ display: block;
1968
+ width: 100%;
1969
+ max-width: 100%;
1970
+ min-height: 2.5em;
1971
+ color: #4d4d4d;
1972
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
1973
+ font-size: 1.6rem;
1974
+ font-style: normal;
1975
+ line-height: 1.15;
1976
+ border: 1px solid #d6d6d6;
1977
+ border-radius: 0.2em;
1978
+ background-color: #fff;
1979
+ box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5);
1980
+ -webkit-appearance: none;
1981
+ -moz-appearance: none;
1982
+ appearance: none;
2476
1983
  margin: 0;
2477
1984
  height: 100%;
2478
1985
  font-size: inherit;
2479
1986
  appearance: none;
2480
1987
  /* hide the default arrow in ie10 and ie11 */
2481
1988
  }
1989
+ [oo-form~=select] > select:focus {
1990
+ outline: none;
1991
+ box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
1992
+ }
2482
1993
  [oo-form~=select] > select::-ms-expand {
2483
1994
  display: none;
2484
1995
  }
@@ -2492,6 +2003,47 @@ label + [oo-form~=select] {
2492
2003
  border-color: inherit !important;
2493
2004
  }
2494
2005
 
2006
+ /**
2007
+ * Loop properties
2008
+ */
2009
+ /**
2010
+ * Loop
2011
+ *
2012
+ * @param $data list|map Data to loop through
2013
+ * @param $properties string|list Property name to use
2014
+ * @param $prefix string String to prepend to the selector
2015
+ * @param $is-important ?bool Set the !important flag ?
2016
+ * @param $suffix ?string String to append to the selector
2017
+ */
2018
+ /**
2019
+ * Loop breakpoints
2020
+ *
2021
+ * @param $breakpoints list List of breakpoints classes
2022
+ * @param $data list|map Data to loop through
2023
+ * @param $properties string|list Property name to use
2024
+ * @param $prefix string String to prepend to the selector
2025
+ * @param $is-important ?bool Set the !important flag ?
2026
+ * @param $suffix ?string String to append to the selector
2027
+ */
2028
+ /**
2029
+ * Loop map keys
2030
+ *
2031
+ * @param $keys list Keys of the map
2032
+ * @param $map map Map to search in
2033
+ * @param $properties string|list Property name to use
2034
+ * @param $prefix string String to prepend to the selector
2035
+ * @param $is-important ?bool Set the !important flag ?
2036
+ * @param $suffix ?string String to append to the selector
2037
+ */
2038
+ /**
2039
+ * Loop map keys modifiers
2040
+ *
2041
+ * @param $keys list keys of the map
2042
+ * @param $map map map to search in
2043
+ * @param $properties string|list property name to use
2044
+ * @param $is-important ?bool set the !important flag ?
2045
+ * @param $suffix ?string string to append to the selector
2046
+ */
2495
2047
  /**
2496
2048
  * Checkbox
2497
2049
  */
@@ -2536,6 +2088,9 @@ label + [oo-form~=select] {
2536
2088
  background-color: #fff;
2537
2089
  border-color: #d6d6d6;
2538
2090
  }
2091
+ [oo-form~=checkbox]:focus + label::after {
2092
+ box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
2093
+ }
2539
2094
  [oo-form~=checkbox] + label::before {
2540
2095
  left: 0.612rem;
2541
2096
  min-width: 1.44rem;
@@ -2605,6 +2160,9 @@ label + [oo-form~=select] {
2605
2160
  background-color: #fff;
2606
2161
  border-color: #d6d6d6;
2607
2162
  }
2163
+ [oo-form~=radio]:focus + label::after {
2164
+ box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
2165
+ }
2608
2166
  [oo-form~=radio] + label::after {
2609
2167
  margin-right: 0.6rem;
2610
2168
  }
@@ -2660,6 +2218,9 @@ label + [oo-form~=select] {
2660
2218
  background-color: #4d4d4d;
2661
2219
  border-color: #4d4d4d;
2662
2220
  }
2221
+ [oo-form~=toggle]:focus + label::after {
2222
+ box-shadow: 1px 1px 1px 0 rgba(170, 170, 170, 0.5), 1px 1px 2px 0px rgba(170, 170, 170, 0.85);
2223
+ }
2663
2224
  [oo-form~=toggle] + label::before {
2664
2225
  top: calc(50% - 0.84rem);
2665
2226
  min-width: 1.68rem;
@@ -2732,6 +2293,9 @@ label + [oo-form~=select] {
2732
2293
  max-width: none;
2733
2294
  }
2734
2295
 
2296
+ /**
2297
+ * Clearfix
2298
+ */
2735
2299
  /**
2736
2300
  * FLoat utilites
2737
2301
  */