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

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 (93) hide show
  1. package/README.md +48 -23
  2. package/css/blades.css +301 -593
  3. package/css/blades.min.css +4 -148
  4. package/css/blades.ninja.css +4204 -0
  5. package/css/blades.ninja.min.css +12 -0
  6. package/css/float-label.css +207 -0
  7. package/css/float-label.min.css +6 -0
  8. package/css/{pico.layered.css → layered/blades.layered.css} +589 -17
  9. package/css/layered/blades.layered.min.css +14 -0
  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 +61 -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 +1099 -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 +34 -16
  48. package/css/pico.conditional.min.css +2 -111
  49. package/css/pico.css +34 -16
  50. package/css/pico.min.css +2 -111
  51. package/package.json +16 -12
  52. package/src/blades/_compact.css +51 -0
  53. package/src/blades/_dropdown-popover.css +107 -0
  54. package/src/blades/_index.css +28 -0
  55. package/src/blades/_modal.css +26 -0
  56. package/src/blades/float-label/_index.css +2 -0
  57. package/src/{standalone/forms/_float-label.theme.css → blades/float-label/_theme.css} +5 -1
  58. package/src/blades.css +2 -2
  59. package/src/blades.ninja.css +3 -0
  60. package/src/float-label.css +1 -0
  61. package/src/ninja/LICENSE +22 -0
  62. package/src/ninja/README.md +1 -0
  63. package/src/ninja/_index.css +19 -0
  64. package/src/{standalone → ninja}/_theme.css +0 -2
  65. package/src/{ninja.css → ninja/_utilities.css} +55 -6
  66. package/src/pico/_variables.css +6 -5
  67. package/src/pico/components/_loading.css +27 -1
  68. package/src/pico/content/_button.css +1 -1
  69. package/src/pico/layout/_document.css +9 -0
  70. package/src/pico/layout/_index.css +0 -1
  71. package/src/pico/layout/_landmarks.css +1 -9
  72. package/src/pico.css +1 -0
  73. package/css/blades.standalone.css +0 -860
  74. package/css/blades.standalone.min.css +0 -37
  75. package/css/ninja.css +0 -83
  76. package/css/ninja.min.css +0 -5
  77. package/css/pico.layered.min.css +0 -118
  78. package/src/blades.standalone.css +0 -2
  79. package/src/standalone/_core.css +0 -32
  80. package/src/standalone/_utilities.css +0 -55
  81. package/src/standalone/forms/_float-label.css +0 -2
  82. /package/src/{standalone/content → blades}/_code.css +0 -0
  83. /package/src/{standalone/layout → blades}/_columns.css +0 -0
  84. /package/src/{standalone/components/_icon-helper.css → blades/_icon.css} +0 -0
  85. /package/src/{standalone/components → blades}/_timeline.css +0 -0
  86. /package/src/{standalone → blades}/_variables.css +0 -0
  87. /package/src/{standalone/forms/_float-label.core.css → blades/float-label/_core.css} +0 -0
  88. /package/src/{standalone/layout/_breakout.css → ninja/_container-breakout.css} +0 -0
  89. /package/src/{standalone/content/_typography.css → ninja/_heading-anchor.css} +0 -0
  90. /package/src/{standalone/content/_list.css → ninja/_list-helpers.css} +0 -0
  91. /package/src/{standalone/layout/_scroller.css → ninja/_page-anchors.css} +0 -0
  92. /package/src/{standalone/content/_table.css → ninja/_table-helpers.css} +0 -0
  93. /package/src/{standalone/content → ninja}/_table-responsive.css +0 -0
package/css/layered/components/tooltip.css ADDED
@@ -0,0 +1,176 @@
1
+ @layer blades {
2
+ /**
3
+ * Tooltip ([data-tooltip])
4
+ */
5
+ :where(:scope, [data-theme="light"], [data-theme="dark"]),
6
+ :host {
7
+ --pico-tooltip-background-color: var(--pico-contrast-background);
8
+ --pico-tooltip-color: var(--pico-contrast-inverse);
9
+ }
10
+
11
+ [data-tooltip] {
12
+ position: relative;
13
+ }
14
+ [data-tooltip]:not(a, button, input, [role="button"]) {
15
+ border-bottom: 1px dotted;
16
+ text-decoration: none;
17
+ cursor: help;
18
+ }
19
+ [data-tooltip][data-placement="top"]::before,
20
+ [data-tooltip][data-placement="top"]::after,
21
+ [data-tooltip]::before,
22
+ [data-tooltip]::after {
23
+ display: block;
24
+ z-index: 99;
25
+ position: absolute;
26
+ bottom: 100%;
27
+ left: 50%;
28
+ padding: 0.25rem 0.5rem;
29
+ overflow: hidden;
30
+ transform: translate(-50%, -0.25rem);
31
+ border-radius: var(--pico-border-radius);
32
+ background: var(--pico-tooltip-background-color);
33
+ content: attr(data-tooltip);
34
+ color: var(--pico-tooltip-color);
35
+ font-style: normal;
36
+ font-weight: var(--pico-font-weight);
37
+ font-size: 0.875rem;
38
+ text-decoration: none;
39
+ text-overflow: ellipsis;
40
+ white-space: nowrap;
41
+ opacity: 0;
42
+ pointer-events: none;
43
+ }
44
+ [data-tooltip][data-placement="top"]::after,
45
+ [data-tooltip]::after {
46
+ padding: 0;
47
+ transform: translate(-50%, 0rem);
48
+ border-top: 0.3rem solid;
49
+ border-right: 0.3rem solid transparent;
50
+ border-left: 0.3rem solid transparent;
51
+ border-radius: 0;
52
+ background-color: transparent;
53
+ content: "";
54
+ color: var(--pico-tooltip-background-color);
55
+ }
56
+ [data-tooltip][data-placement="bottom"]::before,
57
+ [data-tooltip][data-placement="bottom"]::after {
58
+ top: 100%;
59
+ bottom: auto;
60
+ transform: translate(-50%, 0.25rem);
61
+ }
62
+ [data-tooltip][data-placement="bottom"]:after {
63
+ transform: translate(-50%, -0.3rem);
64
+ border: 0.3rem solid transparent;
65
+ border-bottom: 0.3rem solid;
66
+ }
67
+ [data-tooltip][data-placement="left"]::before,
68
+ [data-tooltip][data-placement="left"]::after {
69
+ top: 50%;
70
+ right: 100%;
71
+ bottom: auto;
72
+ left: auto;
73
+ transform: translate(-0.25rem, -50%);
74
+ }
75
+ [data-tooltip][data-placement="left"]:after {
76
+ transform: translate(0.3rem, -50%);
77
+ border: 0.3rem solid transparent;
78
+ border-left: 0.3rem solid;
79
+ }
80
+ [data-tooltip][data-placement="right"]::before,
81
+ [data-tooltip][data-placement="right"]::after {
82
+ top: 50%;
83
+ right: auto;
84
+ bottom: auto;
85
+ left: 100%;
86
+ transform: translate(0.25rem, -50%);
87
+ }
88
+ [data-tooltip][data-placement="right"]:after {
89
+ transform: translate(-0.3rem, -50%);
90
+ border: 0.3rem solid transparent;
91
+ border-right: 0.3rem solid;
92
+ }
93
+ [data-tooltip]:focus::before,
94
+ [data-tooltip]:focus::after,
95
+ [data-tooltip]:hover::before,
96
+ [data-tooltip]:hover::after {
97
+ opacity: 1;
98
+ }
99
+ @media (hover: hover) and (pointer: fine) {
100
+ [data-tooltip]:focus::before,
101
+ [data-tooltip]:focus::after,
102
+ [data-tooltip]:hover::before,
103
+ [data-tooltip]:hover::after {
104
+ --pico-tooltip-slide-to: translate(-50%, -0.25rem);
105
+ transform: translate(-50%, 0.75rem);
106
+ animation-duration: 0.2s;
107
+ animation-fill-mode: forwards;
108
+ animation-name: tooltip-slide;
109
+ opacity: 0;
110
+ }
111
+ [data-tooltip]:focus::after,
112
+ [data-tooltip]:hover::after {
113
+ --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
114
+ transform: translate(-50%, -0.25rem);
115
+ animation-name: tooltip-caret-slide;
116
+ }
117
+ [data-tooltip][data-placement="bottom"]:focus::before,
118
+ [data-tooltip][data-placement="bottom"]:focus::after,
119
+ [data-tooltip][data-placement="bottom"]:hover::before,
120
+ [data-tooltip][data-placement="bottom"]:hover::after {
121
+ --pico-tooltip-slide-to: translate(-50%, 0.25rem);
122
+ transform: translate(-50%, -0.75rem);
123
+ animation-name: tooltip-slide;
124
+ }
125
+ [data-tooltip][data-placement="bottom"]:focus::after,
126
+ [data-tooltip][data-placement="bottom"]:hover::after {
127
+ --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
128
+ transform: translate(-50%, -0.5rem);
129
+ animation-name: tooltip-caret-slide;
130
+ }
131
+ [data-tooltip][data-placement="left"]:focus::before,
132
+ [data-tooltip][data-placement="left"]:focus::after,
133
+ [data-tooltip][data-placement="left"]:hover::before,
134
+ [data-tooltip][data-placement="left"]:hover::after {
135
+ --pico-tooltip-slide-to: translate(-0.25rem, -50%);
136
+ transform: translate(0.75rem, -50%);
137
+ animation-name: tooltip-slide;
138
+ }
139
+ [data-tooltip][data-placement="left"]:focus::after,
140
+ [data-tooltip][data-placement="left"]:hover::after {
141
+ --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
142
+ transform: translate(0.05rem, -50%);
143
+ animation-name: tooltip-caret-slide;
144
+ }
145
+ [data-tooltip][data-placement="right"]:focus::before,
146
+ [data-tooltip][data-placement="right"]:focus::after,
147
+ [data-tooltip][data-placement="right"]:hover::before,
148
+ [data-tooltip][data-placement="right"]:hover::after {
149
+ --pico-tooltip-slide-to: translate(0.25rem, -50%);
150
+ transform: translate(-0.75rem, -50%);
151
+ animation-name: tooltip-slide;
152
+ }
153
+ [data-tooltip][data-placement="right"]:focus::after,
154
+ [data-tooltip][data-placement="right"]:hover::after {
155
+ --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
156
+ transform: translate(-0.05rem, -50%);
157
+ animation-name: tooltip-caret-slide;
158
+ }
159
+ }
160
+ @keyframes tooltip-slide {
161
+ to {
162
+ transform: var(--pico-tooltip-slide-to);
163
+ opacity: 1;
164
+ }
165
+ }
166
+ @keyframes tooltip-caret-slide {
167
+ 50% {
168
+ opacity: 0;
169
+ }
170
+ to {
171
+ transform: var(--pico-tooltip-caret-slide-to);
172
+ opacity: 1;
173
+ }
174
+ }
175
+
176
+ }