@anyblades/blades 3.1.0-beta.5 → 3.1.0-beta.7

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 (82) hide show
  1. package/.prettierrc.json +0 -7
  2. package/README.md +27 -50
  3. package/_includes/.prettierrc.json +12 -0
  4. package/_includes/package.json +10 -0
  5. package/css/blades.css +941 -1804
  6. package/css/blades.min.css +11 -1
  7. package/css/blades.ninja.css +1123 -2264
  8. package/css/blades.ninja.min.css +16 -1
  9. package/css/float-label.css +34 -187
  10. package/css/float-label.min.css +1 -1
  11. package/css/layered/blades.layered.css +941 -1804
  12. package/css/layered/blades.layered.min.css +11 -1
  13. package/css/layered/compact.css +10 -31
  14. package/css/layered/components/accordion.css +32 -21
  15. package/css/layered/components/card.css +8 -16
  16. package/css/layered/components/dropdown-popover.css +44 -59
  17. package/css/layered/components/dropdown.css +61 -61
  18. package/css/layered/components/group.css +40 -156
  19. package/css/layered/components/loading.css +28 -35
  20. package/css/layered/components/modal-modern.css +7 -15
  21. package/css/layered/components/modal.css +54 -65
  22. package/css/layered/components/nav.css +36 -36
  23. package/css/layered/components/progress.css +18 -23
  24. package/css/layered/components/timeline.css +5 -19
  25. package/css/layered/components/tooltip.css +88 -103
  26. package/css/layered/components.css +371 -517
  27. package/css/layered/content/button.css +37 -117
  28. package/css/layered/content/code-block.css +11 -23
  29. package/css/layered/content/code.css +11 -26
  30. package/css/layered/content/embedded-content.css +5 -10
  31. package/css/layered/content/figure.css +3 -5
  32. package/css/layered/content/icon.css +20 -47
  33. package/css/layered/content/link.css +18 -40
  34. package/css/layered/content/misc.css +1 -5
  35. package/css/layered/content/table.css +4 -10
  36. package/css/layered/content/typography.css +22 -41
  37. package/css/layered/content.css +102 -254
  38. package/css/layered/forms/basics.css +64 -142
  39. package/css/layered/forms/checkbox-radio-switch.css +46 -75
  40. package/css/layered/forms/float-label/core.css +13 -85
  41. package/css/layered/forms/float-label/theme.css +22 -104
  42. package/css/layered/forms/float-label.css +34 -187
  43. package/css/layered/forms/input-color.css +5 -5
  44. package/css/layered/forms/input-datetime.css +9 -26
  45. package/css/layered/forms/input-file.css +7 -8
  46. package/css/layered/forms/input-range.css +43 -50
  47. package/css/layered/forms/input-search.css +16 -47
  48. package/css/layered/forms.css +197 -355
  49. package/css/layered/layout/columns.css +4 -24
  50. package/css/layered/layout/container.css +13 -13
  51. package/css/layered/layout/document.css +4 -12
  52. package/css/layered/layout/grid.css +6 -8
  53. package/css/layered/layout/landmarks.css +1 -7
  54. package/css/layered/layout/overflow-auto.css +0 -3
  55. package/css/layered/layout/section.css +0 -3
  56. package/css/layered/layout.css +26 -39
  57. package/css/layered/utilities.css +6 -15
  58. package/css/layered/variables-blades.css +4 -16
  59. package/css/layered/variables.css +77 -181
  60. package/css/pico.conditional.css +785 -1368
  61. package/css/pico.conditional.min.css +1 -1
  62. package/css/pico.css +785 -1368
  63. package/css/pico.min.css +1 -1
  64. package/package.json +43 -31
  65. package/src/blades/_index.css +9 -9
  66. package/src/blades/components/_dropdown-popover.css +2 -0
  67. package/src/blades/components/_modal-modern.css +2 -0
  68. package/src/blades/forms/float-label/_index.css +2 -2
  69. package/src/blades.css +2 -2
  70. package/src/blades.ninja.css +3 -3
  71. package/src/float-label.css +1 -1
  72. package/src/ninja/_index.css +8 -9
  73. package/src/ninja/_table-helpers.css +4 -4
  74. package/src/ninja/_table-responsive.css +5 -5
  75. package/src/ninja/_utilities.css +1 -1
  76. package/src/pico/_index.css +6 -6
  77. package/src/pico/components/_index.css +9 -9
  78. package/src/pico/content/_index.css +8 -8
  79. package/src/pico/forms/_index.css +7 -7
  80. package/src/pico/layout/_index.css +5 -5
  81. package/src/pico.css +2 -2
  82. package/src/ninja/_scroll-to.css +0 -10
package/css/layered/forms/input-range.css CHANGED
@@ -1,9 +1,5 @@
1
1
  @layer blades {
2
- /**
3
- * Input type range
4
- */
5
- :where(:scope, [data-theme="light"], [data-theme="dark"]),
6
- :host {
2
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
7
3
  --pico-range-border-color: light-dark(#dfe3eb, #202632);
8
4
  --pico-range-active-border-color: light-dark(#bfc7d9, #2a3140);
9
5
  --pico-range-thumb-border-color: var(--pico-background-color);
@@ -15,105 +11,102 @@
15
11
  -webkit-appearance: none;
16
12
  -moz-appearance: none;
17
13
  appearance: none;
14
+ background: none;
18
15
  width: 100%;
19
16
  height: 1.25rem;
20
- background: none;
21
17
  }
18
+
22
19
  [type="range"]::-webkit-slider-runnable-track {
23
- width: 100%;
24
- height: 0.375rem;
25
20
  border-radius: var(--pico-border-radius);
26
21
  background-color: var(--pico-range-border-color);
27
- -webkit-transition:
28
- background-color var(--pico-transition),
22
+ width: 100%;
23
+ height: .375rem;
24
+ -webkit-transition: background-color var(--pico-transition),
29
25
  box-shadow var(--pico-transition);
30
- transition:
31
- background-color var(--pico-transition),
26
+ transition: background-color var(--pico-transition),
32
27
  box-shadow var(--pico-transition);
33
28
  }
29
+
34
30
  [type="range"]::-moz-range-track {
35
- width: 100%;
36
- height: 0.375rem;
37
31
  border-radius: var(--pico-border-radius);
38
32
  background-color: var(--pico-range-border-color);
39
- -moz-transition:
40
- background-color var(--pico-transition),
33
+ width: 100%;
34
+ height: .375rem;
35
+ -moz-transition: background-color var(--pico-transition),
41
36
  box-shadow var(--pico-transition);
42
- transition:
43
- background-color var(--pico-transition),
37
+ transition: background-color var(--pico-transition),
44
38
  box-shadow var(--pico-transition);
45
39
  }
40
+
46
41
  [type="range"]::-ms-track {
47
- width: 100%;
48
- height: 0.375rem;
49
42
  border-radius: var(--pico-border-radius);
50
43
  background-color: var(--pico-range-border-color);
51
- -ms-transition:
52
- background-color var(--pico-transition),
44
+ width: 100%;
45
+ height: .375rem;
46
+ -ms-transition: background-color var(--pico-transition),
53
47
  box-shadow var(--pico-transition);
54
- transition:
55
- background-color var(--pico-transition),
48
+ transition: background-color var(--pico-transition),
56
49
  box-shadow var(--pico-transition);
57
50
  }
51
+
58
52
  [type="range"]::-webkit-slider-thumb {
59
53
  -webkit-appearance: none;
60
- width: 1.25rem;
61
- height: 1.25rem;
62
- margin-top: -0.4375rem;
63
54
  border: 2px solid var(--pico-range-thumb-border-color);
64
- border-radius: 50%;
65
55
  background-color: var(--pico-range-thumb-color);
66
56
  cursor: pointer;
67
- -webkit-transition:
68
- background-color var(--pico-transition),
57
+ width: 1.25rem;
58
+ height: 1.25rem;
59
+ -webkit-transition: background-color var(--pico-transition),
69
60
  transform var(--pico-transition);
70
- transition:
71
- background-color var(--pico-transition),
61
+ transition: background-color var(--pico-transition),
72
62
  transform var(--pico-transition);
63
+ border-radius: 50%;
64
+ margin-top: -.4375rem;
73
65
  }
66
+
74
67
  [type="range"]::-moz-range-thumb {
75
68
  -webkit-appearance: none;
76
- width: 1.25rem;
77
- height: 1.25rem;
78
- margin-top: -0.4375rem;
79
69
  border: 2px solid var(--pico-range-thumb-border-color);
80
- border-radius: 50%;
81
70
  background-color: var(--pico-range-thumb-color);
82
71
  cursor: pointer;
83
- -moz-transition:
84
- background-color var(--pico-transition),
72
+ width: 1.25rem;
73
+ height: 1.25rem;
74
+ -moz-transition: background-color var(--pico-transition),
85
75
  transform var(--pico-transition);
86
- transition:
87
- background-color var(--pico-transition),
76
+ transition: background-color var(--pico-transition),
88
77
  transform var(--pico-transition);
78
+ border-radius: 50%;
79
+ margin-top: -.4375rem;
89
80
  }
81
+
90
82
  [type="range"]::-ms-thumb {
91
83
  -webkit-appearance: none;
92
- width: 1.25rem;
93
- height: 1.25rem;
94
- margin-top: -0.4375rem;
95
84
  border: 2px solid var(--pico-range-thumb-border-color);
96
- border-radius: 50%;
97
85
  background-color: var(--pico-range-thumb-color);
98
86
  cursor: pointer;
99
- -ms-transition:
100
- background-color var(--pico-transition),
87
+ width: 1.25rem;
88
+ height: 1.25rem;
89
+ -ms-transition: background-color var(--pico-transition),
101
90
  transform var(--pico-transition);
102
- transition:
103
- background-color var(--pico-transition),
91
+ transition: background-color var(--pico-transition),
104
92
  transform var(--pico-transition);
93
+ border-radius: 50%;
94
+ margin-top: -.4375rem;
105
95
  }
106
- [type="range"]:active,
107
- [type="range"]:focus-within {
96
+
97
+ [type="range"]:active, [type="range"]:focus-within {
108
98
  --pico-range-border-color: var(--pico-range-active-border-color);
109
99
  --pico-range-thumb-color: var(--pico-range-thumb-active-color);
110
100
  }
101
+
111
102
  [type="range"]:active::-webkit-slider-thumb {
112
103
  transform: scale(1.25);
113
104
  }
105
+
114
106
  [type="range"]:active::-moz-range-thumb {
115
107
  transform: scale(1.25);
116
108
  }
109
+
117
110
  [type="range"]:active::-ms-thumb {
118
111
  transform: scale(1.25);
119
112
  }
package/css/layered/forms/input-search.css CHANGED
@@ -1,66 +1,35 @@
1
1
  @layer blades {
2
- /**
3
- * Input type search
4
- */
5
- :where(:scope),
6
- :host {
2
+ :where(:scope), :host {
7
3
  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
8
4
  }
9
5
 
10
6
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
11
- padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
12
7
  background-image: var(--pico-icon-search);
13
- background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
14
- background-size: 1rem auto;
8
+ background-position: center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);
15
9
  background-repeat: no-repeat;
10
+ background-size: 1rem;
11
+ padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
16
12
  }
17
- input:not(
18
- [type="checkbox"],
19
- [type="radio"],
20
- [type="range"],
21
- [type="file"]
22
- )[type="search"][aria-invalid] {
13
+
14
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
15
+ background-position: 1.125rem, right .75rem center;
23
16
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
24
- background-position:
25
- center left 1.125rem,
26
- center right 0.75rem;
27
17
  }
28
- input:not(
29
- [type="checkbox"],
30
- [type="radio"],
31
- [type="range"],
32
- [type="file"]
33
- )[type="search"][aria-invalid="false"] {
18
+
19
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
34
20
  background-image: var(--pico-icon-search), var(--pico-icon-valid);
35
21
  }
36
- input:not(
37
- [type="checkbox"],
38
- [type="radio"],
39
- [type="range"],
40
- [type="file"]
41
- )[type="search"][aria-invalid="true"] {
22
+
23
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
42
24
  background-image: var(--pico-icon-search), var(--pico-icon-invalid);
43
25
  }
44
26
 
45
- [dir="rtl"]
46
- :where(input):not(
47
- [type="checkbox"],
48
- [type="radio"],
49
- [type="range"],
50
- [type="file"]
51
- )[type="search"] {
52
- background-position: center right 1.125rem;
27
+ [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
28
+ background-position: right 1.125rem center;
53
29
  }
54
- [dir="rtl"]
55
- :where(input):not(
56
- [type="checkbox"],
57
- [type="radio"],
58
- [type="range"],
59
- [type="file"]
60
- )[type="search"][aria-invalid] {
61
- background-position:
62
- center right 1.125rem,
63
- center left 0.75rem;
30
+
31
+ [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
32
+ background-position: right 1.125rem center, .75rem;
64
33
  }
65
34
 
66
35
  }