@anyblades/blades 3.1.0-alpha.2 → 3.1.0-beta.2

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 (87) hide show
  1. package/README.md +46 -15
  2. package/css/blades.css +158 -597
  3. package/css/blades.min.css +38 -12
  4. package/css/blades.ninja.css +4057 -0
  5. package/css/blades.ninja.min.css +190 -0
  6. package/css/float-label.css +207 -0
  7. package/css/float-label.min.css +55 -0
  8. package/css/{pico.layered.css → layered/blades.layered.css} +441 -16
  9. package/css/{pico.layered.min.css → layered/blades.layered.min.css} +74 -8
  10. package/css/layered/compact.css +54 -0
  11. package/css/layered/components/accordion.css +85 -0
  12. package/css/layered/components/card.css +48 -0
  13. package/css/layered/components/dropdown.css +191 -0
  14. package/css/layered/components/group.css +208 -0
  15. package/css/layered/components/loading.css +43 -0
  16. package/css/layered/components/modal.css +158 -0
  17. package/css/layered/components/nav.css +117 -0
  18. package/css/layered/components/progress.css +76 -0
  19. package/css/layered/components/tooltip.css +176 -0
  20. package/css/layered/components.css +1082 -0
  21. package/css/layered/content/button.css +208 -0
  22. package/css/layered/content/code.css +64 -0
  23. package/css/layered/content/embedded-content.css +41 -0
  24. package/css/layered/content/figure.css +15 -0
  25. package/css/layered/content/link.css +84 -0
  26. package/css/layered/content/misc.css +22 -0
  27. package/css/layered/content/table.css +33 -0
  28. package/css/layered/content/typography.css +159 -0
  29. package/css/layered/content.css +611 -0
  30. package/css/layered/forms/basics.css +338 -0
  31. package/css/layered/forms/checkbox-radio-switch.css +164 -0
  32. package/css/layered/forms/input-color.css +20 -0
  33. package/css/layered/forms/input-datetime.css +57 -0
  34. package/css/layered/forms/input-file.css +29 -0
  35. package/css/layered/forms/input-range.css +121 -0
  36. package/css/layered/forms/input-search.css +66 -0
  37. package/css/layered/forms.css +778 -0
  38. package/css/layered/layout/container.css +42 -0
  39. package/css/layered/layout/document.css +48 -0
  40. package/css/layered/layout/grid.css +22 -0
  41. package/css/layered/layout/landmarks.css +12 -0
  42. package/css/layered/layout/overflow-auto.css +9 -0
  43. package/css/layered/layout/section.css +9 -0
  44. package/css/layered/layout.css +119 -0
  45. package/css/layered/utilities.css +35 -0
  46. package/css/layered/variables.css +365 -0
  47. package/css/pico.conditional.css +16 -15
  48. package/css/pico.conditional.min.css +7 -7
  49. package/css/pico.css +16 -15
  50. package/css/pico.min.css +7 -7
  51. package/package.json +15 -11
  52. package/src/_compact.css +51 -0
  53. package/src/blades/_index.css +23 -0
  54. package/src/blades/float-label/_index.css +2 -0
  55. package/src/{standalone/forms/_float-label.theme.css → blades/float-label/_theme.css} +5 -1
  56. package/src/blades.css +3 -2
  57. package/src/blades.ninja.css +3 -0
  58. package/src/float-label.css +1 -0
  59. package/src/ninja/_index.css +19 -0
  60. package/src/{standalone → ninja}/_theme.css +0 -2
  61. package/src/{ninja.css → ninja/_utilities.css} +55 -6
  62. package/src/pico/_variables.css +6 -5
  63. package/src/pico/content/_button.css +1 -1
  64. package/src/pico/layout/_document.css +9 -0
  65. package/src/pico/layout/_index.css +0 -1
  66. package/src/pico/layout/_landmarks.css +1 -9
  67. package/src/pico.css +1 -0
  68. package/css/blades.standalone.css +0 -860
  69. package/css/blades.standalone.min.css +0 -37
  70. package/css/ninja.css +0 -83
  71. package/css/ninja.min.css +0 -5
  72. package/src/blades.standalone.css +0 -2
  73. package/src/standalone/_core.css +0 -32
  74. package/src/standalone/_utilities.css +0 -55
  75. package/src/standalone/forms/_float-label.css +0 -2
  76. /package/src/{standalone/content → blades}/_code.css +0 -0
  77. /package/src/{standalone/layout → blades}/_columns.css +0 -0
  78. /package/src/{standalone/components/_icon-helper.css → blades/_icon.css} +0 -0
  79. /package/src/{standalone/components → blades}/_timeline.css +0 -0
  80. /package/src/{standalone → blades}/_variables.css +0 -0
  81. /package/src/{standalone/forms/_float-label.core.css → blades/float-label/_core.css} +0 -0
  82. /package/src/{standalone/layout/_breakout.css → ninja/_container-breakout.css} +0 -0
  83. /package/src/{standalone/content/_typography.css → ninja/_heading-anchor.css} +0 -0
  84. /package/src/{standalone/content/_list.css → ninja/_list-helpers.css} +0 -0
  85. /package/src/{standalone/layout/_scroller.css → ninja/_page-anchors.css} +0 -0
  86. /package/src/{standalone/content/_table.css → ninja/_table-helpers.css} +0 -0
  87. /package/src/{standalone/content → ninja}/_table-responsive.css +0 -0
package/css/layered/forms/input-range.css ADDED
@@ -0,0 +1,121 @@
1
+ @layer blades {
2
+ /**
3
+ * Input type range
4
+ */
5
+ :where(:scope, [data-theme="light"], [data-theme="dark"]),
6
+ :host {
7
+ --pico-range-border-color: light-dark(#dfe3eb, #202632);
8
+ --pico-range-active-border-color: light-dark(#bfc7d9, #2a3140);
9
+ --pico-range-thumb-border-color: var(--pico-background-color);
10
+ --pico-range-thumb-color: var(--pico-secondary-background);
11
+ --pico-range-thumb-active-color: var(--pico-primary-background);
12
+ }
13
+
14
+ [type="range"] {
15
+ -webkit-appearance: none;
16
+ -moz-appearance: none;
17
+ appearance: none;
18
+ width: 100%;
19
+ height: 1.25rem;
20
+ background: none;
21
+ }
22
+ [type="range"]::-webkit-slider-runnable-track {
23
+ width: 100%;
24
+ height: 0.375rem;
25
+ border-radius: var(--pico-border-radius);
26
+ background-color: var(--pico-range-border-color);
27
+ -webkit-transition:
28
+ background-color var(--pico-transition),
29
+ box-shadow var(--pico-transition);
30
+ transition:
31
+ background-color var(--pico-transition),
32
+ box-shadow var(--pico-transition);
33
+ }
34
+ [type="range"]::-moz-range-track {
35
+ width: 100%;
36
+ height: 0.375rem;
37
+ border-radius: var(--pico-border-radius);
38
+ background-color: var(--pico-range-border-color);
39
+ -moz-transition:
40
+ background-color var(--pico-transition),
41
+ box-shadow var(--pico-transition);
42
+ transition:
43
+ background-color var(--pico-transition),
44
+ box-shadow var(--pico-transition);
45
+ }
46
+ [type="range"]::-ms-track {
47
+ width: 100%;
48
+ height: 0.375rem;
49
+ border-radius: var(--pico-border-radius);
50
+ background-color: var(--pico-range-border-color);
51
+ -ms-transition:
52
+ background-color var(--pico-transition),
53
+ box-shadow var(--pico-transition);
54
+ transition:
55
+ background-color var(--pico-transition),
56
+ box-shadow var(--pico-transition);
57
+ }
58
+ [type="range"]::-webkit-slider-thumb {
59
+ -webkit-appearance: none;
60
+ width: 1.25rem;
61
+ height: 1.25rem;
62
+ margin-top: -0.4375rem;
63
+ border: 2px solid var(--pico-range-thumb-border-color);
64
+ border-radius: 50%;
65
+ background-color: var(--pico-range-thumb-color);
66
+ cursor: pointer;
67
+ -webkit-transition:
68
+ background-color var(--pico-transition),
69
+ transform var(--pico-transition);
70
+ transition:
71
+ background-color var(--pico-transition),
72
+ transform var(--pico-transition);
73
+ }
74
+ [type="range"]::-moz-range-thumb {
75
+ -webkit-appearance: none;
76
+ width: 1.25rem;
77
+ height: 1.25rem;
78
+ margin-top: -0.4375rem;
79
+ border: 2px solid var(--pico-range-thumb-border-color);
80
+ border-radius: 50%;
81
+ background-color: var(--pico-range-thumb-color);
82
+ cursor: pointer;
83
+ -moz-transition:
84
+ background-color var(--pico-transition),
85
+ transform var(--pico-transition);
86
+ transition:
87
+ background-color var(--pico-transition),
88
+ transform var(--pico-transition);
89
+ }
90
+ [type="range"]::-ms-thumb {
91
+ -webkit-appearance: none;
92
+ width: 1.25rem;
93
+ height: 1.25rem;
94
+ margin-top: -0.4375rem;
95
+ border: 2px solid var(--pico-range-thumb-border-color);
96
+ border-radius: 50%;
97
+ background-color: var(--pico-range-thumb-color);
98
+ cursor: pointer;
99
+ -ms-transition:
100
+ background-color var(--pico-transition),
101
+ transform var(--pico-transition);
102
+ transition:
103
+ background-color var(--pico-transition),
104
+ transform var(--pico-transition);
105
+ }
106
+ [type="range"]:active,
107
+ [type="range"]:focus-within {
108
+ --pico-range-border-color: var(--pico-range-active-border-color);
109
+ --pico-range-thumb-color: var(--pico-range-thumb-active-color);
110
+ }
111
+ [type="range"]:active::-webkit-slider-thumb {
112
+ transform: scale(1.25);
113
+ }
114
+ [type="range"]:active::-moz-range-thumb {
115
+ transform: scale(1.25);
116
+ }
117
+ [type="range"]:active::-ms-thumb {
118
+ transform: scale(1.25);
119
+ }
120
+
121
+ }
package/css/layered/forms/input-search.css ADDED
@@ -0,0 +1,66 @@
1
+ @layer blades {
2
+ /**
3
+ * Input type search
4
+ */
5
+ :where(:scope),
6
+ :host {
7
+ --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
+ }
9
+
10
+ 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
+ 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;
15
+ background-repeat: no-repeat;
16
+ }
17
+ input:not(
18
+ [type="checkbox"],
19
+ [type="radio"],
20
+ [type="range"],
21
+ [type="file"]
22
+ )[type="search"][aria-invalid] {
23
+ 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
+ }
28
+ input:not(
29
+ [type="checkbox"],
30
+ [type="radio"],
31
+ [type="range"],
32
+ [type="file"]
33
+ )[type="search"][aria-invalid="false"] {
34
+ background-image: var(--pico-icon-search), var(--pico-icon-valid);
35
+ }
36
+ input:not(
37
+ [type="checkbox"],
38
+ [type="radio"],
39
+ [type="range"],
40
+ [type="file"]
41
+ )[type="search"][aria-invalid="true"] {
42
+ background-image: var(--pico-icon-search), var(--pico-icon-invalid);
43
+ }
44
+
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;
53
+ }
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;
64
+ }
65
+
66
+ }