@livenetworks/ashlar 2.2.2 → 2.2.3
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/package.json
CHANGED
|
@@ -4,8 +4,11 @@
|
|
|
4
4
|
@include dropdown;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
// The ln-dropdown coordinator marks its menu [data-ln-dropdown-menu] at
|
|
8
|
+
// init; .dropdown is the same panel + items as a class (visual hook in
|
|
9
|
+
// markup, or a menu the coordinator doesn't own).
|
|
7
10
|
[data-ln-dropdown-menu],
|
|
8
|
-
.
|
|
11
|
+
.dropdown {
|
|
9
12
|
@include dropdown-menu;
|
|
10
13
|
}
|
|
11
14
|
|
package/theme/config/_theme.scss
CHANGED
|
@@ -247,6 +247,7 @@
|
|
|
247
247
|
// because --border-block-start is read by ~10 other mixins
|
|
248
248
|
// (cards, tables, accordions) where the divider should NOT appear.
|
|
249
249
|
[data-ln-dropdown-menu],
|
|
250
|
+
.dropdown,
|
|
250
251
|
.menu-items {
|
|
251
252
|
--border-block-start: var(--border-width) solid var(--color-border);
|
|
252
253
|
}
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
//
|
|
14
14
|
// Usage:
|
|
15
15
|
// [data-ln-dropdown] { @include dropdown; }
|
|
16
|
-
// [data-ln-dropdown-menu] { @include dropdown-menu; }
|
|
16
|
+
// [data-ln-dropdown-menu], .dropdown { @include dropdown-menu; }
|
|
17
|
+
// (both global bindings in components/_dropdown.scss)
|
|
17
18
|
//
|
|
18
19
|
// Open/close state (display:none ↔ display:block + .open) is JS-driven
|
|
19
20
|
// and lives in the co-located JS SCSS, not here.
|
|
@@ -53,6 +54,16 @@
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
:is(li, form) > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"]) {
|
|
57
|
+
// One row recipe, whatever the element. <button> rebinds --padding-*
|
|
58
|
+
// and --gap on itself (base/_global.scss), and ancestor scopes rebind
|
|
59
|
+
// them for their own buttons (@mixin app-header zeroes --btn-padding-*
|
|
60
|
+
// and mutes --color-fg; a popover inside .app-header is still in its
|
|
61
|
+
// DOM). Taking these from the list keeps a <form> submit row on the
|
|
62
|
+
// same geometry and ink as an <a> row.
|
|
63
|
+
--padding-y: inherit;
|
|
64
|
+
--padding-x: inherit;
|
|
65
|
+
--gap: inherit;
|
|
66
|
+
--color-fg: inherit;
|
|
56
67
|
width: 100%;
|
|
57
68
|
box-sizing: border-box;
|
|
58
69
|
display: flex;
|
|
@@ -67,12 +78,21 @@
|
|
|
67
78
|
box-shadow: none;
|
|
68
79
|
text-align: left;
|
|
69
80
|
text-decoration: none;
|
|
81
|
+
white-space: normal; // button-base: nowrap
|
|
70
82
|
cursor: pointer;
|
|
71
83
|
font-family: inherit;
|
|
72
84
|
@include typography(body-sm);
|
|
85
|
+
@include font-normal; // button-base: medium
|
|
73
86
|
color: var(--color-fg);
|
|
74
87
|
transition: background-color 120ms ease, color 120ms ease;
|
|
75
88
|
|
|
89
|
+
// Semantic item (e.g. a destructive "Delete"): ink and wash both
|
|
90
|
+
// follow the status color. Same shape as btn-ghost / btn-outline.
|
|
91
|
+
&:is(.success, .error, .warning, .info) {
|
|
92
|
+
--color-accent: hsl(var(--color-primary));
|
|
93
|
+
--color-fg: var(--color-accent);
|
|
94
|
+
}
|
|
95
|
+
|
|
76
96
|
&:hover:not(:disabled) {
|
|
77
97
|
background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
|
|
78
98
|
color: var(--color-fg);
|
|
@@ -39,8 +39,14 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
// Menu popover caption (profile menu: <p> + <hr> + <nav><ul>) — sits on
|
|
42
|
-
// the item labels' inline grid instead of the bare panel inset.
|
|
43
|
-
|
|
42
|
+
// the item labels' inline grid instead of the bare panel inset. An item
|
|
43
|
+
// may sit in a <form> (POST/DELETE action), as @mixin menu-items allows.
|
|
44
|
+
&:has(
|
|
45
|
+
> ul > li > :is(a, button),
|
|
46
|
+
> ul > li > form > button,
|
|
47
|
+
> nav > ul > li > :is(a, button),
|
|
48
|
+
> nav > ul > li > form > button
|
|
49
|
+
) > p {
|
|
44
50
|
margin: 0;
|
|
45
51
|
padding: var(--padding-y) var(--padding-x);
|
|
46
52
|
@include typography(body-sm);
|
|
@@ -79,8 +85,12 @@
|
|
|
79
85
|
margin-top: var(--size-2xs);
|
|
80
86
|
}
|
|
81
87
|
|
|
82
|
-
// When containing interactive actions/buttons (menus, pickers)
|
|
83
|
-
|
|
88
|
+
// When containing interactive actions/buttons (menus, pickers),
|
|
89
|
+
// directly or inside a <form> (POST/DELETE action).
|
|
90
|
+
&:has(
|
|
91
|
+
> li > :is(a, button, input[type="submit"], input[type="reset"], input[type="button"]),
|
|
92
|
+
> li > form > :is(button, input[type="submit"], input[type="reset"], input[type="button"])
|
|
93
|
+
) {
|
|
84
94
|
@include menu-items;
|
|
85
95
|
}
|
|
86
96
|
|