@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.6

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