bullframe.css 3.8.1 → 4.0.1

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 (103) hide show
  1. package/.browserslistrc +10 -6
  2. package/.stylelintrc.json +10 -0
  3. package/CHANGELOG.md +20 -4
  4. package/LICENSE +20 -20
  5. package/README.md +28 -179
  6. package/dist/css/bullframe-classless-dark-prefers.css +357 -425
  7. package/dist/css/bullframe-classless-dark-prefers.min.css +2 -3
  8. package/dist/css/bullframe-classless-dark-prefers.min.css.map +1 -1
  9. package/dist/css/bullframe-classless-dark.css +328 -412
  10. package/dist/css/bullframe-classless-dark.min.css +2 -3
  11. package/dist/css/bullframe-classless-dark.min.css.map +1 -1
  12. package/dist/css/bullframe-classless.css +237 -293
  13. package/dist/css/bullframe-classless.min.css +2 -2
  14. package/dist/css/bullframe-classless.min.css.map +1 -1
  15. package/dist/css/bullframe-dark-prefers.css +468 -633
  16. package/dist/css/bullframe-dark-prefers.min.css +2 -2
  17. package/dist/css/bullframe-dark-prefers.min.css.map +1 -1
  18. package/dist/css/bullframe-dark.css +402 -593
  19. package/dist/css/bullframe-dark.min.css +2 -2
  20. package/dist/css/bullframe-dark.min.css.map +1 -1
  21. package/dist/css/bullframe-utilities.css +87 -125
  22. package/dist/css/bullframe-utilities.min.css +1 -1
  23. package/dist/css/bullframe-utilities.min.css.map +1 -1
  24. package/dist/css/bullframe.css +288 -455
  25. package/dist/css/bullframe.min.css +1 -1
  26. package/dist/css/bullframe.min.css.map +1 -1
  27. package/docs/test/css/style.css +130 -130
  28. package/docs/test/icons/safari-pinned-tab.svg +28 -28
  29. package/docs/test/js/vendor/html5shiv.js +335 -335
  30. package/docs/test/js/vendor/ie10-viewport-bug-workaround.js +20 -20
  31. package/gulpfile.js +5 -2
  32. package/index.html +1214 -1223
  33. package/package.json +14 -11
  34. package/src/scss/bullframe-classless-dark-prefers.scss +5 -5
  35. package/src/scss/bullframe-classless-dark.scss +5 -5
  36. package/src/scss/bullframe-classless.scss +1 -9
  37. package/src/scss/bullframe-dark-prefers.scss +4 -4
  38. package/src/scss/bullframe-dark.scss +4 -4
  39. package/src/scss/bullframe-utilities.scss +1 -1
  40. package/src/scss/bullframe.scss +0 -7
  41. package/src/scss/forms/_forms-normalization.scss +4 -2
  42. package/src/scss/forms/_forms-styling-radio-checkbox.scss +84 -85
  43. package/src/scss/forms/_forms-styling-range.scss +99 -103
  44. package/src/scss/forms/_forms-styling-select.scss +63 -63
  45. package/src/scss/forms/_forms-styling.scss +119 -121
  46. package/src/scss/miscellaneous/_misc-focus.scss +0 -1
  47. package/src/scss/miscellaneous/_misc-layout.scss +1 -24
  48. package/src/scss/mixins/_mixin-grid-flex.scss +83 -83
  49. package/src/scss/mixins/_mixin-layout.scss +42 -42
  50. package/src/scss/mixins/_mixin-texts.scss +38 -37
  51. package/src/scss/typography/_typography-blockquotes.scss +23 -23
  52. package/src/scss/typography/_typography-headings.scss +43 -43
  53. package/src/scss/typography/_typography-html-body.scss +72 -72
  54. package/src/scss/typography/_typography-misc.scss +3 -3
  55. package/src/scss/typography/_typography-monospaced-elements.scss +50 -56
  56. package/src/scss/utilities/_utility-buttons.scss +71 -71
  57. package/src/scss/utilities/_utility-embeds.scss +34 -34
  58. package/src/scss/utilities/_utility-filters.scss +24 -24
  59. package/src/scss/utilities/_utility-form-states.scss +80 -80
  60. package/src/scss/utilities/_utility-global-dark-classless.scss +157 -169
  61. package/src/scss/utilities/_utility-global-dark-prefers-classless.scss +3 -3
  62. package/src/scss/utilities/_utility-global-dark-prefers.scss +3 -3
  63. package/src/scss/utilities/_utility-global-dark-scrollbars.scss +29 -29
  64. package/src/scss/utilities/_utility-global-dark.scss +213 -224
  65. package/src/scss/utilities/_utility-grid-system.scss +204 -204
  66. package/src/scss/utilities/_utility-layout.scss +195 -196
  67. package/src/scss/utilities/_utility-lists.scss +17 -17
  68. package/src/scss/utilities/_utility-print.scss +101 -111
  69. package/src/scss/utilities/_utility-reduced-motion.scss +29 -29
  70. package/src/scss/utilities/_utility-tables.scss +40 -40
  71. package/src/scss/utilities/_utility-texts.scss +199 -199
  72. package/src/scss/utilities/_utility-z-index.scss +82 -82
  73. package/src/scss/variables/_variables-breakpoints.scss +5 -5
  74. package/src/scss/variables/_variables-colors.scss +31 -31
  75. package/src/scss/variables/_variables-spacing.scss +25 -25
  76. package/src/scss/variables/_variables-texts.scss +12 -12
  77. package/dist/css/bullframe-classless-dark-ie10+.css +0 -1321
  78. package/dist/css/bullframe-classless-dark-ie10+.min.css +0 -4
  79. package/dist/css/bullframe-classless-dark-ie10+.min.css.map +0 -1
  80. package/dist/css/bullframe-classless-dark-prefers-ie10+.css +0 -1301
  81. package/dist/css/bullframe-classless-dark-prefers-ie10+.min.css +0 -4
  82. package/dist/css/bullframe-classless-dark-prefers-ie10+.min.css.map +0 -1
  83. package/dist/css/bullframe-classless-ie10+.css +0 -1084
  84. package/dist/css/bullframe-classless-ie10+.min.css +0 -3
  85. package/dist/css/bullframe-classless-ie10+.min.css.map +0 -1
  86. package/dist/css/bullframe-dark-ie10+.css +0 -2569
  87. package/dist/css/bullframe-dark-ie10+.min.css +0 -3
  88. package/dist/css/bullframe-dark-ie10+.min.css.map +0 -1
  89. package/dist/css/bullframe-dark-prefers-ie10+.css +0 -2541
  90. package/dist/css/bullframe-dark-prefers-ie10+.min.css +0 -3
  91. package/dist/css/bullframe-dark-prefers-ie10+.min.css.map +0 -1
  92. package/dist/css/bullframe-ie10+.css +0 -2250
  93. package/dist/css/bullframe-ie10+.min.css +0 -2
  94. package/dist/css/bullframe-ie10+.min.css.map +0 -1
  95. package/docs/images-readme/browserstack-logo.png +0 -0
  96. package/src/scss/bullframe-classless-dark-ie10+.scss +0 -5
  97. package/src/scss/bullframe-classless-dark-prefers-ie10+.scss +0 -5
  98. package/src/scss/bullframe-classless-ie10+.scss +0 -43
  99. package/src/scss/bullframe-dark-ie10+.scss +0 -4
  100. package/src/scss/bullframe-dark-prefers-ie10+.scss +0 -4
  101. package/src/scss/bullframe-ie10+.scss +0 -121
  102. package/src/scss/forms/_forms-styling-ie-hacks.scss +0 -56
  103. package/src/scss/forms/_forms-styling-select-ie-hacks.scss +0 -30
@@ -1,6 +1,5 @@
1
- /*! bullframe.css v3.8.0 | MIT License | https://github.com/marcop135/bullframe.css */
2
- /*! custom build: bullframe-classless-dark */
3
- /*! custom build: bullframe-classless */
1
+ /*! bullframe.css v4.0.1 | MIT License | https://github.com/marcop135/bullframe.css */
2
+ /*! custom build: bullframe-classless-dark */ /*! custom build: bullframe-classless */
4
3
  *,
5
4
  *::before,
6
5
  *::after {
@@ -27,26 +26,10 @@ template {
27
26
  display: none;
28
27
  }
29
28
 
30
- a,
31
- area,
32
- button,
33
- input,
34
- label,
35
- select,
36
- summary,
37
- textarea,
38
- [tabindex] {
39
- -ms-touch-action: manipulation;
40
- }
41
-
42
29
  [hidden] {
43
30
  display: none !important;
44
31
  }
45
32
 
46
- @-ms-viewport {
47
- width: device-width;
48
- }
49
-
50
33
  html {
51
34
  -webkit-text-size-adjust: 100%;
52
35
  -moz-text-size-adjust: 100%;
@@ -130,7 +113,7 @@ blockquote small {
130
113
  }
131
114
 
132
115
  blockquote small:before {
133
- content: '\2014 \00A0';
116
+ content: "— ";
134
117
  }
135
118
 
136
119
  q {
@@ -140,19 +123,14 @@ q {
140
123
  pre {
141
124
  margin: 0 0 20px 0;
142
125
  margin: 0 0 2rem 0;
143
- }
144
-
145
- pre {
146
126
  display: block;
147
127
  overflow: auto;
148
128
  word-break: break-all;
149
129
  word-wrap: break-word;
150
130
  white-space: pre;
151
131
  -webkit-hyphens: none;
152
- -ms-hyphens: none;
153
132
  hyphens: none;
154
133
  -ms-overflow-style: auto;
155
- display: block;
156
134
  }
157
135
 
158
136
  pre,
@@ -160,7 +138,7 @@ code,
160
138
  kbd,
161
139
  samp {
162
140
  font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
163
- font-size: .875em;
141
+ font-size: 0.875em;
164
142
  }
165
143
 
166
144
  code {
@@ -188,7 +166,6 @@ abbr[data-original-title] {
188
166
  text-decoration: underline;
189
167
  -webkit-text-decoration: underline dotted;
190
168
  text-decoration: underline dotted;
191
- cursor: help;
192
169
  border-bottom: 0;
193
170
  }
194
171
 
@@ -208,6 +185,7 @@ strong {
208
185
  font-weight: inherit;
209
186
  }
210
187
 
188
+ /* stylelint-disable-next-line */
211
189
  b,
212
190
  strong {
213
191
  font-weight: bolder;
@@ -227,12 +205,12 @@ sup {
227
205
 
228
206
  sup {
229
207
  top: -8px;
230
- top: -.8rem;
208
+ top: -0.8rem;
231
209
  }
232
210
 
233
211
  sub {
234
212
  bottom: -4px;
235
- bottom: -.4rem;
213
+ bottom: -0.4rem;
236
214
  }
237
215
 
238
216
  small {
@@ -269,7 +247,6 @@ a {
269
247
  text-decoration: none;
270
248
  background-color: transparent;
271
249
  }
272
-
273
250
  a:hover, a:focus {
274
251
  text-decoration: underline;
275
252
  color: #0056b3;
@@ -333,7 +310,7 @@ dd {
333
310
  }
334
311
 
335
312
  nav li:before {
336
- content: '\200B';
313
+ content: "​";
337
314
  position: absolute;
338
315
  }
339
316
 
@@ -446,8 +423,8 @@ textarea {
446
423
 
447
424
  html input,
448
425
  button,
449
- [type='radio'],
450
- [type='checkbox'],
426
+ [type=radio],
427
+ [type=checkbox],
451
428
  select,
452
429
  optgroup,
453
430
  textarea {
@@ -463,12 +440,12 @@ legend {
463
440
 
464
441
  html label,
465
442
  button,
466
- [type='image'],
467
- [type='submit'],
468
- [type='reset'],
469
- html [type='button'],
470
- [type='radio'],
471
- [type='checkbox'] {
443
+ [type=image],
444
+ [type=submit],
445
+ [type=reset],
446
+ html [type=button],
447
+ [type=radio],
448
+ [type=checkbox] {
472
449
  width: auto;
473
450
  }
474
451
 
@@ -477,14 +454,14 @@ label,
477
454
  select,
478
455
  textarea,
479
456
  button,
480
- html [type='button'],
481
- [type='reset'],
482
- [type='submit'],
457
+ html [type=button],
458
+ [type=reset],
459
+ [type=submit],
483
460
  output {
484
461
  display: inline-block;
485
462
  }
486
463
 
487
- [type='file'] {
464
+ [type=file] {
488
465
  display: block;
489
466
  background-color: transparent;
490
467
  }
@@ -541,8 +518,8 @@ label textarea {
541
518
  font-size: 110%;
542
519
  }
543
520
 
544
- [type='number']::-webkit-outer-spin-button,
545
- [type='number']::-webkit-inner-spin-button {
521
+ [type=number]::-webkit-outer-spin-button,
522
+ [type=number]::-webkit-inner-spin-button {
546
523
  height: auto;
547
524
  }
548
525
 
@@ -560,7 +537,7 @@ label textarea {
560
537
  padding: 0;
561
538
  }
562
539
 
563
- [type='search'] {
540
+ [type=search] {
564
541
  outline-offset: -2.5px;
565
542
  outline-offset: -0.25rem;
566
543
  }
@@ -578,8 +555,8 @@ select {
578
555
  word-wrap: normal;
579
556
  }
580
557
 
581
- [list]::-webkit-calendar-picker-indicator {
582
- display: none;
558
+ [list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
559
+ display: none !important;
583
560
  }
584
561
 
585
562
  optgroup {
@@ -591,23 +568,23 @@ optgroup {
591
568
  }
592
569
 
593
570
  button,
594
- html [type="button"],
595
- [type="reset"],
596
- [type="submit"],
597
- [type="email"],
598
- [type="number"],
599
- [type="text"],
600
- [type="tel"],
601
- [type="date"],
602
- [type="datetime-local"],
603
- [type="month"],
604
- [type="week"],
605
- [type="url"],
606
- [type="image"],
607
- [type="password"],
608
- [type="search"],
609
- [type="search"]::-webkit-search-decoration,
610
- [type="search"]::-webkit-search-cancel-button,
571
+ html [type=button],
572
+ [type=reset],
573
+ [type=submit],
574
+ [type=email],
575
+ [type=number],
576
+ [type=text],
577
+ [type=tel],
578
+ [type=date],
579
+ [type=datetime-local],
580
+ [type=month],
581
+ [type=week],
582
+ [type=url],
583
+ [type=image],
584
+ [type=password],
585
+ [type=search],
586
+ [type=search]::-webkit-search-decoration,
587
+ [type=search]::-webkit-search-cancel-button,
611
588
  input[list],
612
589
  textarea {
613
590
  -webkit-appearance: none;
@@ -626,22 +603,22 @@ textarea {
626
603
  border-radius: 0.25rem;
627
604
  }
628
605
 
629
- [type='radio'] {
606
+ [type=radio] {
630
607
  border-radius: 50%;
631
608
  }
632
609
 
633
- [type='checkbox'] {
610
+ [type=checkbox] {
634
611
  border-radius: 5px;
635
612
  border-radius: 0.5rem;
636
613
  }
637
614
 
638
- [type='radio'],
639
- [type='checkbox'] {
615
+ [type=radio],
616
+ [type=checkbox] {
640
617
  padding: 0;
641
618
  background-color: #fff;
642
619
  }
643
620
 
644
- [type='range'] {
621
+ [type=range] {
645
622
  background-color: transparent;
646
623
  }
647
624
 
@@ -669,9 +646,9 @@ textarea {
669
646
  }
670
647
 
671
648
  button,
672
- [type='button'],
673
- [type='reset'],
674
- [type='submit'] {
649
+ [type=button],
650
+ [type=reset],
651
+ [type=submit] {
675
652
  line-height: normal;
676
653
  text-align: center;
677
654
  margin: 0;
@@ -681,34 +658,32 @@ button,
681
658
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
682
659
  -webkit-user-select: none;
683
660
  -moz-user-select: none;
684
- -ms-user-select: none;
685
661
  user-select: none;
686
662
  border: 0;
687
663
  background-image: none;
688
664
  }
689
-
690
665
  button:hover, button:active, button:focus,
691
- [type='button']:hover,
692
- [type='button']:active,
693
- [type='button']:focus,
694
- [type='reset']:hover,
695
- [type='reset']:active,
696
- [type='reset']:focus,
697
- [type='submit']:hover,
698
- [type='submit']:active,
699
- [type='submit']:focus {
666
+ [type=button]:hover,
667
+ [type=button]:active,
668
+ [type=button]:focus,
669
+ [type=reset]:hover,
670
+ [type=reset]:active,
671
+ [type=reset]:focus,
672
+ [type=submit]:hover,
673
+ [type=submit]:active,
674
+ [type=submit]:focus {
700
675
  text-decoration: none;
701
676
  color: #222;
702
677
  }
703
678
 
704
679
  button,
705
680
  select,
706
- input[type='submit'],
707
- input[type='button'],
708
- [type='checkbox'],
709
- [type='range'],
710
- [type='radio'],
711
- [role='button'] {
681
+ input[type=submit],
682
+ input[type=button],
683
+ [type=checkbox],
684
+ [type=range],
685
+ [type=radio],
686
+ [role=button] {
712
687
  cursor: pointer;
713
688
  }
714
689
 
@@ -720,10 +695,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
720
695
  color: #666;
721
696
  }
722
697
 
723
- input:-ms-input-placeholder, textarea:-ms-input-placeholder {
724
- color: #666;
725
- }
726
-
727
698
  input::placeholder,
728
699
  textarea::placeholder {
729
700
  color: #666;
@@ -733,19 +704,18 @@ textarea::placeholder {
733
704
  box-shadow: none;
734
705
  }
735
706
 
736
- [type='email'],
737
- [type='number'],
738
- [type='password'],
739
- [type='tel'],
740
- [type='search'],
741
- [type='text'],
742
- [type='date'],
743
- [type='datetime-local'],
744
- [type='month'],
745
- [type='time'],
746
- [type='week'],
747
- [type='time'],
748
- [type='url'],
707
+ [type=email],
708
+ [type=number],
709
+ [type=password],
710
+ [type=tel],
711
+ [type=search],
712
+ [type=text],
713
+ [type=date],
714
+ [type=datetime-local],
715
+ [type=month],
716
+ [type=week],
717
+ [type=time],
718
+ [type=url],
749
719
  input[list],
750
720
  select,
751
721
  textarea {
@@ -755,79 +725,75 @@ textarea {
755
725
  padding: 0.5rem 0.75rem;
756
726
  }
757
727
 
758
- [type='email']:active, [type='email']:focus,
759
- [type='number']:active,
760
- [type='number']:focus,
761
- [type='password']:active,
762
- [type='password']:focus,
763
- [type='tel']:active,
764
- [type='tel']:focus,
765
- [type='search']:active,
766
- [type='search']:focus,
767
- [type='text']:active,
768
- [type='text']:focus,
769
- [type='date']:active,
770
- [type='date']:focus,
771
- [type='datetime-local']:active,
772
- [type='datetime-local']:focus,
773
- [type='month']:active,
774
- [type='month']:focus,
775
- [type='time']:active,
776
- [type='time']:focus,
777
- [type='week']:active,
778
- [type='week']:focus,
779
- [type='time']:active,
780
- [type='time']:focus,
781
- [type='url']:active,
782
- [type='url']:focus,
728
+ [type=email]:active, [type=email]:focus,
729
+ [type=number]:active,
730
+ [type=number]:focus,
731
+ [type=password]:active,
732
+ [type=password]:focus,
733
+ [type=tel]:active,
734
+ [type=tel]:focus,
735
+ [type=search]:active,
736
+ [type=search]:focus,
737
+ [type=text]:active,
738
+ [type=text]:focus,
739
+ [type=date]:active,
740
+ [type=date]:focus,
741
+ [type=datetime-local]:active,
742
+ [type=datetime-local]:focus,
743
+ [type=month]:active,
744
+ [type=month]:focus,
745
+ [type=week]:active,
746
+ [type=week]:focus,
747
+ [type=time]:active,
748
+ [type=time]:focus,
749
+ [type=url]:active,
750
+ [type=url]:focus,
783
751
  input[list]:active,
784
752
  input[list]:focus,
785
753
  select:active,
786
754
  select:focus,
787
755
  textarea:active,
788
756
  textarea:focus,
789
- [type='radio']:active,
790
- [type='radio']:focus,
791
- [type='checkbox']:active,
792
- [type='checkbox']:focus {
793
- transition: border .2s, background-color .2s, box-shadow .2s;
757
+ [type=radio]:active,
758
+ [type=radio]:focus,
759
+ [type=checkbox]:active,
760
+ [type=checkbox]:focus {
761
+ transition: border 0.2s, background-color 0.2s, box-shadow 0.2s;
794
762
  border-color: #007bff;
795
763
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
796
764
  }
797
765
 
798
766
  button,
799
- [type='button'],
800
- [type='reset'],
801
- [type='submit'] {
767
+ [type=button],
768
+ [type=reset],
769
+ [type=submit] {
802
770
  color: #222;
803
- padding: 6.66667px 13.33333px;
804
- padding: 0.66667rem 1.33333rem;
771
+ padding: 6.6666666667px 13.3333333333px;
772
+ padding: 0.6666666667rem 1.3333333333rem;
805
773
  background: #ccc;
806
- transition: color .2s, background .2s, box-shadow .2s;
774
+ transition: color 0.2s, background 0.2s, box-shadow 0.2s;
807
775
  }
808
-
809
776
  button:hover, button:active, button:focus,
810
- [type='button']:hover,
811
- [type='button']:active,
812
- [type='button']:focus,
813
- [type='reset']:hover,
814
- [type='reset']:active,
815
- [type='reset']:focus,
816
- [type='submit']:hover,
817
- [type='submit']:active,
818
- [type='submit']:focus {
777
+ [type=button]:hover,
778
+ [type=button]:active,
779
+ [type=button]:focus,
780
+ [type=reset]:hover,
781
+ [type=reset]:active,
782
+ [type=reset]:focus,
783
+ [type=submit]:hover,
784
+ [type=submit]:active,
785
+ [type=submit]:focus {
819
786
  text-decoration: none;
820
787
  color: #222;
821
788
  background: #b3b3b3;
822
789
  }
823
-
824
790
  button:active, button:focus,
825
- [type='button']:active,
826
- [type='button']:focus,
827
- [type='reset']:active,
828
- [type='reset']:focus,
829
- [type='submit']:active,
830
- [type='submit']:focus {
791
+ [type=button]:active,
792
+ [type=button]:focus,
793
+ [type=reset]:active,
794
+ [type=reset]:focus,
795
+ [type=submit]:active,
796
+ [type=submit]:focus {
831
797
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
832
798
  }
833
799
 
@@ -855,112 +821,49 @@ input:disabled:checked,
855
821
  select:disabled,
856
822
  textarea:disabled,
857
823
  label:disabled,
858
- button[aria-disabled="true"],
859
- input[aria-disabled="true"],
860
- input[aria-disabled="true"]:after,
861
- input[aria-disabled="true"]:before,
862
- input[aria-disabled="true"]:checked,
863
- select[aria-disabled="true"],
864
- textarea[aria-disabled="true"],
865
- label[aria-disabled="true"] {
824
+ button[aria-disabled=true],
825
+ input[aria-disabled=true],
826
+ input[aria-disabled=true]:after,
827
+ input[aria-disabled=true]:before,
828
+ input[aria-disabled=true]:checked,
829
+ select[aria-disabled=true],
830
+ textarea[aria-disabled=true],
831
+ label[aria-disabled=true] {
866
832
  cursor: default !important;
867
833
  cursor: not-allowed !important;
868
834
  pointer-events: none !important;
869
835
  -webkit-user-select: none !important;
870
836
  -moz-user-select: none !important;
871
- -ms-user-select: none !important;
872
837
  user-select: none !important;
873
838
  box-shadow: none !important;
874
- opacity: .5 !important;
875
- }
876
-
877
- @media \0screen {
878
- [type='email'],
879
- [type='number'],
880
- [type='password'],
881
- [type='tel'],
882
- [type='search'],
883
- [type='text'],
884
- [type='date'],
885
- [type='datetime-local'],
886
- [type='month'],
887
- [type='time'],
888
- [type='week'],
889
- [type='time'],
890
- [type='url'],
891
- [type='range'],
892
- input[list] {
893
- padding-top: 0;
894
- padding-bottom: 0;
895
- height: 32px;
896
- line-height: 32px;
897
- }
898
- }
899
-
900
- @media screen and (min-width: 0\0) and (-webkit-min-device-pixel-ratio: 0.75), screen and (min-width: 0\0) and (min-resolution: 72dpi) {
901
- [type='email'],
902
- [type='number'],
903
- [type='password'],
904
- [type='tel'],
905
- [type='search'],
906
- [type='text'],
907
- [type='date'],
908
- [type='datetime-local'],
909
- [type='month'],
910
- [type='time'],
911
- [type='week'],
912
- [type='time'],
913
- [type='url'],
914
- [type='range'],
915
- input[list] {
916
- line-height: 1.2;
917
- }
839
+ opacity: 0.5 !important;
918
840
  }
919
841
 
920
842
  select:not([size]):not([multiple]) {
921
843
  -webkit-appearance: none;
922
844
  -moz-appearance: none;
923
845
  appearance: none;
846
+ background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.85rem center/8px 10px;
847
+ padding-right: 20px;
848
+ padding-right: 2rem;
924
849
  }
925
850
 
926
851
  select::-ms-expand {
927
852
  display: none;
928
853
  }
929
854
 
930
- select:not([size]):not([multiple]) {
931
- background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.85rem center/8px 10px;
932
- padding-right: 20px;
933
- padding-right: 2rem;
934
- }
935
-
936
- *[dir='rtl'] select:not([size]):not([multiple]),
937
- select[dir='rtl']:not([size]):not([multiple]) {
938
- background-position: left .85rem top 50%;
855
+ *[dir=rtl] select:not([size]):not([multiple]),
856
+ select[dir=rtl]:not([size]):not([multiple]) {
857
+ background-position: left 0.85rem top 50%;
939
858
  padding-right: 7.5px;
940
859
  padding-right: 0.75rem;
941
860
  padding-left: 20px;
942
861
  padding-left: 2rem;
943
862
  }
944
863
 
945
- @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
946
- select:not([size]):not([multiple]) {
947
- padding-right: 7.5px;
948
- }
949
- *[dir='rtl'] select:not([size]):not([multiple]),
950
- select[dir='rtl']:not([size]):not([multiple]) {
951
- padding-left: 7.5px;
952
- }
953
- select:not([size]):not([multiple]),
954
- *[dir="rtl"] select:not([size]):not([multiple]),
955
- select[dir="rtl"]:not([size]):not([multiple]) {
956
- background-image: none;
957
- background-repeat: repeat;
958
- }
959
- }
960
-
961
864
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
962
- [type='checkbox'],
963
- [type='radio'] {
865
+ [type=checkbox],
866
+ [type=radio] {
964
867
  -webkit-appearance: none;
965
868
  -moz-appearance: none;
966
869
  appearance: none;
@@ -970,45 +873,44 @@ select[dir='rtl']:not([size]):not([multiple]) {
970
873
  position: relative;
971
874
  border: 1px solid #999;
972
875
  }
973
- [type='checkbox'] + label,
974
- [type='radio'] + label {
876
+ [type=checkbox] + label,
877
+ [type=radio] + label {
975
878
  line-height: 1.8rem;
976
879
  vertical-align: top;
977
880
  margin-left: 5px;
978
881
  margin-left: 0.5rem;
979
882
  }
980
- *[dir='rtl'] [type='checkbox'] + label,
981
- [type='checkbox'][dir='rtl'] + label, *[dir='rtl']
982
- [type='radio'] + label,
983
- [type='radio'][dir='rtl'] + label {
883
+ *[dir=rtl] [type=checkbox] + label, [type=checkbox][dir=rtl] + label,
884
+ *[dir=rtl] [type=radio] + label,
885
+ [type=radio][dir=rtl] + label {
984
886
  margin-left: 0;
985
887
  margin-right: 5px;
986
888
  margin-right: 0.5rem;
987
889
  }
988
- [type='checkbox']:after,
989
- [type='radio']:after {
990
- content: '';
890
+ [type=checkbox]:after,
891
+ [type=radio]:after {
892
+ content: "";
991
893
  display: block;
992
894
  position: absolute;
993
895
  }
994
- [type='checkbox']:checked,
995
- [type='radio']:checked {
896
+ [type=checkbox]:checked,
897
+ [type=radio]:checked {
996
898
  background-color: #007bff;
997
899
  border-color: #000;
998
900
  }
999
- [type='radio']:after {
901
+ [type=radio]:after {
1000
902
  width: 1.8rem;
1001
903
  height: 1.8rem;
1002
- left: -.05rem;
1003
- top: -.05rem;
904
+ left: -0.05rem;
905
+ top: -0.05rem;
1004
906
  border-radius: 50%;
1005
907
  background: #fff;
1006
908
  -webkit-transform: scale(0.35);
1007
909
  transform: scale(0.35);
1008
910
  }
1009
- [type='checkbox']:after {
1010
- width: .6rem;
1011
- height: .8rem;
911
+ [type=checkbox]:after {
912
+ width: 0.6rem;
913
+ height: 0.8rem;
1012
914
  border: 2px solid #fff;
1013
915
  border-top: 0;
1014
916
  border-left: 0;
@@ -1018,7 +920,84 @@ select[dir='rtl']:not([size]):not([multiple]) {
1018
920
  transform: rotate(43deg);
1019
921
  }
1020
922
  }
1021
-
923
+ @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
924
+ [type=range] {
925
+ -webkit-appearance: none;
926
+ -moz-appearance: none;
927
+ appearance: none;
928
+ width: 100%;
929
+ height: 1.4rem;
930
+ }
931
+ [type=range]::-webkit-slider-thumb {
932
+ border: 0;
933
+ -webkit-appearance: none;
934
+ appearance: none;
935
+ width: 1.5rem;
936
+ height: 1.5rem;
937
+ margin-top: -0.25rem;
938
+ background-color: #007bff;
939
+ border-radius: 1.5rem;
940
+ -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
941
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
942
+ }
943
+ [type=range]::-webkit-slider-thumb:active {
944
+ background-color: #007bff;
945
+ }
946
+ [type=range]::-moz-range-thumb {
947
+ border: 0;
948
+ -moz-appearance: none;
949
+ appearance: none;
950
+ width: 1.5rem;
951
+ height: 1.5rem;
952
+ background-color: #007bff;
953
+ border-radius: 1.5rem;
954
+ -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
955
+ transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
956
+ }
957
+ [type=range]::-moz-range-thumb:active {
958
+ background-color: #007bff;
959
+ }
960
+ [type=range]::-webkit-slider-runnable-track {
961
+ color: transparent;
962
+ border-color: transparent;
963
+ width: 100%;
964
+ height: 0.65rem;
965
+ cursor: pointer;
966
+ background-color: #e9e9e9;
967
+ }
968
+ [type=range]::-moz-range-track {
969
+ color: transparent;
970
+ border-color: transparent;
971
+ width: 100%;
972
+ height: 0.65rem;
973
+ cursor: pointer;
974
+ background-color: #e9e9e9;
975
+ }
976
+ [type=range]:focus {
977
+ outline: none;
978
+ }
979
+ [type=range]:focus::-webkit-slider-thumb {
980
+ box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
981
+ }
982
+ [type=range]:focus::-moz-slider-thumb {
983
+ box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
984
+ }
985
+ [type=range]::-moz-focus-outer {
986
+ border: 0;
987
+ }
988
+ [type=range]:focus::-moz-range-thumb {
989
+ box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
990
+ }
991
+ [type=range]:disabled {
992
+ pointer-events: none;
993
+ }
994
+ [type=range]:disabled::-webkit-slider-thumb {
995
+ background-color: #ccc;
996
+ }
997
+ [type=range]:disabled::-moz-slider-thumb {
998
+ background-color: #ccc;
999
+ }
1000
+ }
1022
1001
  table {
1023
1002
  max-width: 100%;
1024
1003
  border-collapse: collapse;
@@ -1061,42 +1040,6 @@ caption {
1061
1040
  font-size: 90%;
1062
1041
  }
1063
1042
 
1064
- /**
1065
- * Change the cursor on busy elements in all browsers (opinionated).
1066
- */
1067
- [aria-busy="true"] {
1068
- cursor: progress;
1069
- }
1070
-
1071
- /*
1072
- * Change the cursor on control elements in all browsers (opinionated).
1073
- */
1074
- [aria-controls] {
1075
- cursor: pointer;
1076
- }
1077
-
1078
- /*
1079
- * Change the cursor on disabled, not-editable, or otherwise
1080
- * inoperable elements in all browsers (opinionated).
1081
- */
1082
- [aria-disabled="true"],
1083
- [disabled] {
1084
- cursor: not-allowed;
1085
- }
1086
-
1087
- /*
1088
- * Change the display on visually hidden accessible elements
1089
- * in all browsers (opinionated).
1090
- */
1091
- [aria-hidden="false"][hidden] {
1092
- display: initial;
1093
- }
1094
-
1095
- [aria-hidden="false"][hidden]:not(:focus) {
1096
- clip: rect(0, 0, 0, 0);
1097
- position: absolute;
1098
- }
1099
-
1100
1043
  html {
1101
1044
  scrollbar-color: #595959 #111;
1102
1045
  }
@@ -1106,6 +1049,10 @@ html {
1106
1049
  height: 1.5rem;
1107
1050
  }
1108
1051
 
1052
+ ::-webkit-scrollbar-track {
1053
+ background-color: #111;
1054
+ }
1055
+
1109
1056
  ::-webkit-scrollbar-thumb {
1110
1057
  background-color: #595959;
1111
1058
  }
@@ -1114,10 +1061,6 @@ html {
1114
1061
  background-color: gray;
1115
1062
  }
1116
1063
 
1117
- ::-webkit-scrollbar-track {
1118
- background-color: #111;
1119
- }
1120
-
1121
1064
  html {
1122
1065
  color: #f0f0f0;
1123
1066
  }
@@ -1129,7 +1072,6 @@ body {
1129
1072
  a {
1130
1073
  color: #66b0ff;
1131
1074
  }
1132
-
1133
1075
  a:hover, a:focus {
1134
1076
  color: #1a88ff;
1135
1077
  }
@@ -1142,20 +1084,19 @@ ins {
1142
1084
  background-color: #b3b300;
1143
1085
  }
1144
1086
 
1145
- [type='email'],
1146
- [type='number'],
1147
- [type='password'],
1148
- [type='tel'],
1149
- [type='search'],
1150
- [type='text'],
1151
- [type='date'],
1152
- [type='datetime-local'],
1153
- [type='month'],
1154
- [type='time'],
1155
- [type='week'],
1156
- [type='time'],
1157
- [type='url'],
1158
- [type='range'],
1087
+ [type=email],
1088
+ [type=number],
1089
+ [type=password],
1090
+ [type=tel],
1091
+ [type=search],
1092
+ [type=text],
1093
+ [type=date],
1094
+ [type=datetime-local],
1095
+ [type=month],
1096
+ [type=week],
1097
+ [type=time],
1098
+ [type=url],
1099
+ [type=range],
1159
1100
  input[list],
1160
1101
  select,
1161
1102
  select:not([size]):not([multiple]),
@@ -1164,34 +1105,31 @@ textarea {
1164
1105
  border-color: #000;
1165
1106
  color: #ccc;
1166
1107
  }
1167
-
1168
- [type='email']:active, [type='email']:focus,
1169
- [type='number']:active,
1170
- [type='number']:focus,
1171
- [type='password']:active,
1172
- [type='password']:focus,
1173
- [type='tel']:active,
1174
- [type='tel']:focus,
1175
- [type='search']:active,
1176
- [type='search']:focus,
1177
- [type='text']:active,
1178
- [type='text']:focus,
1179
- [type='date']:active,
1180
- [type='date']:focus,
1181
- [type='datetime-local']:active,
1182
- [type='datetime-local']:focus,
1183
- [type='month']:active,
1184
- [type='month']:focus,
1185
- [type='time']:active,
1186
- [type='time']:focus,
1187
- [type='week']:active,
1188
- [type='week']:focus,
1189
- [type='time']:active,
1190
- [type='time']:focus,
1191
- [type='url']:active,
1192
- [type='url']:focus,
1193
- [type='range']:active,
1194
- [type='range']:focus,
1108
+ [type=email]:active, [type=email]:focus,
1109
+ [type=number]:active,
1110
+ [type=number]:focus,
1111
+ [type=password]:active,
1112
+ [type=password]:focus,
1113
+ [type=tel]:active,
1114
+ [type=tel]:focus,
1115
+ [type=search]:active,
1116
+ [type=search]:focus,
1117
+ [type=text]:active,
1118
+ [type=text]:focus,
1119
+ [type=date]:active,
1120
+ [type=date]:focus,
1121
+ [type=datetime-local]:active,
1122
+ [type=datetime-local]:focus,
1123
+ [type=month]:active,
1124
+ [type=month]:focus,
1125
+ [type=week]:active,
1126
+ [type=week]:focus,
1127
+ [type=time]:active,
1128
+ [type=time]:focus,
1129
+ [type=url]:active,
1130
+ [type=url]:focus,
1131
+ [type=range]:active,
1132
+ [type=range]:focus,
1195
1133
  input[list]:active,
1196
1134
  input[list]:focus,
1197
1135
  select:active,
@@ -1204,31 +1142,29 @@ textarea:focus {
1204
1142
  border-color: #3395ff;
1205
1143
  }
1206
1144
 
1207
- [type='email']:active, [type='email']:focus,
1208
- [type='number']:active,
1209
- [type='number']:focus,
1210
- [type='password']:active,
1211
- [type='password']:focus,
1212
- [type='tel']:active,
1213
- [type='tel']:focus,
1214
- [type='search']:active,
1215
- [type='search']:focus,
1216
- [type='text']:active,
1217
- [type='text']:focus,
1218
- [type='date']:active,
1219
- [type='date']:focus,
1220
- [type='datetime-local']:active,
1221
- [type='datetime-local']:focus,
1222
- [type='month']:active,
1223
- [type='month']:focus,
1224
- [type='time']:active,
1225
- [type='time']:focus,
1226
- [type='week']:active,
1227
- [type='week']:focus,
1228
- [type='time']:active,
1229
- [type='time']:focus,
1230
- [type='url']:active,
1231
- [type='url']:focus,
1145
+ [type=email]:active, [type=email]:focus,
1146
+ [type=number]:active,
1147
+ [type=number]:focus,
1148
+ [type=password]:active,
1149
+ [type=password]:focus,
1150
+ [type=tel]:active,
1151
+ [type=tel]:focus,
1152
+ [type=search]:active,
1153
+ [type=search]:focus,
1154
+ [type=text]:active,
1155
+ [type=text]:focus,
1156
+ [type=date]:active,
1157
+ [type=date]:focus,
1158
+ [type=datetime-local]:active,
1159
+ [type=datetime-local]:focus,
1160
+ [type=month]:active,
1161
+ [type=month]:focus,
1162
+ [type=week]:active,
1163
+ [type=week]:focus,
1164
+ [type=time]:active,
1165
+ [type=time]:focus,
1166
+ [type=url]:active,
1167
+ [type=url]:focus,
1232
1168
  input[list]:active,
1233
1169
  input[list]:focus,
1234
1170
  select:active,
@@ -1244,83 +1180,63 @@ select:not([size]):not([multiple]) {
1244
1180
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
1245
1181
  }
1246
1182
 
1247
- @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
1183
+ @media screen and (min-width: 0\0 ) and (-webkit-min-device-pixel-ratio: 0), screen and (min-width: 0\0 ) and (min-resolution: 0.001dpcm) {
1248
1184
  select:not([size]):not([multiple]),
1249
- *[dir="rtl"] select:not([size]):not([multiple]),
1250
- select[dir="rtl"]:not([size]):not([multiple]) {
1185
+ *[dir=rtl] select:not([size]):not([multiple]),
1186
+ select[dir=rtl]:not([size]):not([multiple]) {
1251
1187
  background-image: none;
1252
1188
  }
1253
1189
  }
1254
-
1255
1190
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
1256
- [type='range'] {
1191
+ [type=range] {
1257
1192
  background-color: transparent;
1258
1193
  }
1259
- [type='range']:focus {
1194
+ [type=range]:focus {
1260
1195
  background-color: transparent;
1261
1196
  }
1262
- [type='range']::-webkit-slider-runnable-track {
1197
+ [type=range]::-webkit-slider-runnable-track {
1263
1198
  background-color: #111;
1264
1199
  }
1265
- [type='range']::-moz-range-track {
1200
+ [type=range]::-moz-range-track {
1266
1201
  background-color: #111;
1267
1202
  }
1268
1203
  }
1269
-
1270
1204
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
1271
1205
  color: #999;
1272
1206
  }
1273
-
1274
1207
  input::-moz-placeholder, textarea::-moz-placeholder {
1275
1208
  color: #999;
1276
1209
  }
1277
-
1278
- input:-ms-input-placeholder, textarea:-ms-input-placeholder {
1279
- color: #999;
1280
- }
1281
-
1282
1210
  input::placeholder,
1283
1211
  textarea::placeholder {
1284
1212
  color: #999;
1285
1213
  }
1286
1214
 
1287
1215
  button,
1288
- [type='button'],
1289
- [type='reset'],
1290
- [type='submit'] {
1216
+ [type=button],
1217
+ [type=reset],
1218
+ [type=submit] {
1291
1219
  background: #ccc;
1292
1220
  }
1293
-
1294
1221
  button:hover, button:active, button:focus,
1295
- [type='button']:hover,
1296
- [type='button']:active,
1297
- [type='button']:focus,
1298
- [type='reset']:hover,
1299
- [type='reset']:active,
1300
- [type='reset']:focus,
1301
- [type='submit']:hover,
1302
- [type='submit']:active,
1303
- [type='submit']:focus {
1222
+ [type=button]:hover,
1223
+ [type=button]:active,
1224
+ [type=button]:focus,
1225
+ [type=reset]:hover,
1226
+ [type=reset]:active,
1227
+ [type=reset]:focus,
1228
+ [type=submit]:hover,
1229
+ [type=submit]:active,
1230
+ [type=submit]:focus {
1304
1231
  background: #b3b3b3;
1305
1232
  }
1306
-
1307
- button:active, button:focus,
1308
- [type='button']:active,
1309
- [type='button']:focus,
1310
- [type='reset']:active,
1311
- [type='reset']:focus,
1312
- [type='submit']:active,
1313
- [type='submit']:focus {
1314
- box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
1315
- }
1316
-
1317
1233
  button:active, button:focus,
1318
- [type='button']:active,
1319
- [type='button']:focus,
1320
- [type='reset']:active,
1321
- [type='reset']:focus,
1322
- [type='submit']:active,
1323
- [type='submit']:focus {
1234
+ [type=button]:active,
1235
+ [type=button]:focus,
1236
+ [type=reset]:active,
1237
+ [type=reset]:focus,
1238
+ [type=submit]:active,
1239
+ [type=submit]:focus {
1324
1240
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
1325
1241
  }
1326
1242
 
@@ -1331,4 +1247,4 @@ input:focus {
1331
1247
 
1332
1248
  :focus-visible {
1333
1249
  outline-color: #b37400;
1334
- }
1250
+ }