maverick-wave 3.6.0 → 3.6.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.
- package/.claude/skills/maverick-wave/SKILL.md +17 -4
- package/.claude/skills/maverick-wave/examples/static-landing-page.md +5 -5
- package/.claude/skills/maverick-wave/references/components.md +15 -9
- package/.claude/skills/maverick-wave/references/layout.md +48 -2
- package/.claude/skills/maverick-wave/references/theming.md +1 -0
- package/CHANGELOG.md +12 -0
- package/maverick-wave.min.css +1 -1
- package/package.json +1 -1
- package/src/partials/cards-container.html +24 -19
- package/src/partials/timelines-container.html +4 -4
- package/src/partials/utilities-container.html +35 -0
- package/src/scss/components/_buttons.scss +1 -1
- package/src/scss/components/_cards.scss +89 -93
- package/src/scss/components/_gallery.scss +1 -1
- package/src/scss/components/_info.scss +1 -1
- package/src/scss/layout/_header.scss +10 -4
- package/src/scss/layout/_main.scss +33 -25
- package/src/scss/utilities/_display.scss +6 -0
|
@@ -59,7 +59,13 @@
|
|
|
59
59
|
justify-content: center;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
// tooltip - use it everywhere you want
|
|
62
|
+
// tooltip - use it everywhere you want: put data-tooltip="..." on any element.
|
|
63
|
+
// Pure CSS, no script needed. The flip side of that: it is a pseudo element on
|
|
64
|
+
// the trigger, so an ancestor with `overflow: hidden` (a card, a scroll
|
|
65
|
+
// container) cuts it off.
|
|
66
|
+
$_mw-tooltip-arrow: 6px;
|
|
67
|
+
$_mw-tooltip-gap: 8px;
|
|
68
|
+
|
|
63
69
|
[data-tooltip] {
|
|
64
70
|
position: relative;
|
|
65
71
|
|
|
@@ -68,49 +74,51 @@
|
|
|
68
74
|
position: absolute;
|
|
69
75
|
bottom: 100%;
|
|
70
76
|
left: 50%;
|
|
71
|
-
transform: translateX(-50%)
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
transform: translateX(-50%);
|
|
78
|
+
margin-bottom: $_mw-tooltip-gap + $_mw-tooltip-arrow;
|
|
79
|
+
max-width: min(280px, 90vw);
|
|
80
|
+
width: max-content;
|
|
74
81
|
padding: spacing('1') spacing('2');
|
|
82
|
+
background: var(--mw-gray-color);
|
|
83
|
+
color: #efefef;
|
|
75
84
|
font-size: font-size('xs');
|
|
76
85
|
border-radius: radius('xs');
|
|
77
|
-
|
|
86
|
+
box-shadow: 0 2px 5px var(--mw-shadow);
|
|
78
87
|
pointer-events: none;
|
|
79
88
|
opacity: 0;
|
|
80
89
|
visibility: hidden;
|
|
81
|
-
transition:
|
|
82
|
-
opacity 0.2s,
|
|
83
|
-
transform 0.2s;
|
|
84
|
-
margin-bottom: spacing('2');
|
|
90
|
+
transition: opacity 0.2s ease;
|
|
85
91
|
z-index: z-index('tooltip');
|
|
86
|
-
box-shadow: 0 2px 5px var(--mw-shadow);
|
|
87
92
|
}
|
|
88
93
|
|
|
89
|
-
// small triangle on the bottom
|
|
90
94
|
&::after {
|
|
91
95
|
content: '';
|
|
92
96
|
position: absolute;
|
|
93
97
|
bottom: 100%;
|
|
94
98
|
left: 50%;
|
|
95
|
-
transform: translateX(-50%)
|
|
96
|
-
|
|
99
|
+
transform: translateX(-50%);
|
|
100
|
+
margin-bottom: $_mw-tooltip-gap;
|
|
101
|
+
border: $_mw-tooltip-arrow solid transparent;
|
|
102
|
+
border-bottom-width: 0;
|
|
97
103
|
border-top-color: var(--mw-gray-color);
|
|
98
104
|
opacity: 0;
|
|
99
105
|
visibility: hidden;
|
|
100
|
-
transition:
|
|
101
|
-
opacity 0.2s,
|
|
102
|
-
transform 0.2s;
|
|
103
|
-
margin-bottom: -4px;
|
|
106
|
+
transition: opacity 0.2s ease;
|
|
104
107
|
z-index: z-index('tooltip');
|
|
105
108
|
}
|
|
106
109
|
|
|
107
|
-
|
|
108
|
-
&:hover
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
110
|
+
&:hover::before,
|
|
111
|
+
&:hover::after,
|
|
112
|
+
&:focus-visible::before,
|
|
113
|
+
&:focus-visible::after {
|
|
114
|
+
opacity: 1;
|
|
115
|
+
visibility: visible;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@media (prefers-reduced-motion: reduce) {
|
|
120
|
+
[data-tooltip]::before,
|
|
121
|
+
[data-tooltip]::after {
|
|
122
|
+
transition: none;
|
|
115
123
|
}
|
|
116
124
|
}
|
|
@@ -29,6 +29,12 @@
|
|
|
29
29
|
&-none {
|
|
30
30
|
display: none;
|
|
31
31
|
}
|
|
32
|
+
|
|
33
|
+
// For a wrapper that must not become a flex/grid item itself - the element
|
|
34
|
+
// generates no box, so its children take over the item role
|
|
35
|
+
&-contents {
|
|
36
|
+
display: contents;
|
|
37
|
+
}
|
|
32
38
|
}
|
|
33
39
|
|
|
34
40
|
// Border radius
|