@spectrum-web-components/action-group 0.4.16-lit-next.0 → 0.4.16
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/custom-elements.json +2 -2
- package/package.json +4 -4
- package/src/action-group.css.js +113 -13
- package/src/action-group.css.js.map +1 -1
- package/src/spectrum-action-group.css.js +101 -13
- package/src/spectrum-action-group.css.js.map +1 -1
- package/src/spectrum-config.js +1 -1
- package/stories/action-group-tooltip.stories.js +1 -1
- package/stories/action-group-tooltip.stories.js.map +1 -1
- package/stories/action-group.stories.js +5 -5
- package/stories/action-group.stories.js.map +1 -1
- package/test/action-group-tooltip.test-vrt.js +0 -15
- package/test/action-group-tooltip.test-vrt.js.map +0 -1
- package/test/action-group.test-vrt.js +0 -15
- package/test/action-group.test-vrt.js.map +0 -1
- package/test/action-group.test.js +0 -399
- package/test/action-group.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
{
|
|
295
295
|
"kind": "variable",
|
|
296
296
|
"name": "styles",
|
|
297
|
-
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(--spectrum-global-dimension-size-25);display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][vertical][vertical]){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical][vertical]){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical][vertical]){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){position:relative;border-radius:0;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:0}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-right:0;margin-left:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){display:flex;flex-direction:column;align-items:stretch}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-l-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-xl-border-radius:var(--spectrum-actionbutton-m-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
|
|
297
|
+
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-l-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-xl-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
|
|
298
298
|
}
|
|
299
299
|
],
|
|
300
300
|
"exports": [
|
|
@@ -330,7 +330,7 @@
|
|
|
330
330
|
{
|
|
331
331
|
"kind": "variable",
|
|
332
332
|
"name": "styles",
|
|
333
|
-
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(--spectrum-global-dimension-size-25)
|
|
333
|
+
"default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}\n`"
|
|
334
334
|
}
|
|
335
335
|
],
|
|
336
336
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-group",
|
|
3
|
-
"version": "0.4.16
|
|
3
|
+
"version": "0.4.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/action-button": "^0.5.8
|
|
48
|
-
"@spectrum-web-components/base": "^0.4.
|
|
47
|
+
"@spectrum-web-components/action-button": "^0.5.8",
|
|
48
|
+
"@spectrum-web-components/base": "^0.4.5",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"sideEffects": [
|
|
57
57
|
"./sp-*.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "d7f2ca747a902cf8b632cc8491fa675419297180"
|
|
60
60
|
}
|
package/src/action-group.css.js
CHANGED
|
@@ -11,19 +11,119 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
+
--spectrum-global-dimension-size-25
|
|
16
|
+
)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
|
|
17
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
18
|
+
)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
|
|
19
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
20
|
+
)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
|
|
21
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
22
|
+
)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
23
|
+
--spectrum-actiongroup-button-gap-reset
|
|
24
|
+
)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
25
|
+
--spectrum-actiongroup-button-gap-reset
|
|
26
|
+
)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
27
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
28
|
+
)}:host([dir=ltr][vertical][vertical]){margin-left:var(
|
|
29
|
+
--spectrum-actiongroup-button-gap-reset
|
|
30
|
+
)}:host([dir=rtl][vertical][vertical]){margin-right:var(
|
|
31
|
+
--spectrum-actiongroup-button-gap-reset
|
|
32
|
+
)}:host([vertical][vertical]){margin-top:var(
|
|
33
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
34
|
+
)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
|
|
35
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
36
|
+
)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
|
|
37
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
38
|
+
)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
|
|
39
|
+
--spectrum-actiongroup-button-gap-reset
|
|
40
|
+
)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
41
|
+
--spectrum-actiongroup-button-gap-reset
|
|
42
|
+
)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
43
|
+
--spectrum-actiongroup-button-gap-reset
|
|
44
|
+
)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
45
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
46
|
+
)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
47
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
48
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
49
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
50
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
|
|
51
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
52
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
|
|
53
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
54
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(
|
|
55
|
+
--spectrum-actionbutton-m-border-size,
|
|
56
|
+
var(--spectrum-alias-border-size-thin)
|
|
57
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(
|
|
58
|
+
--spectrum-actionbutton-m-border-size,
|
|
59
|
+
var(--spectrum-alias-border-size-thin)
|
|
60
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
|
|
61
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
62
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
|
|
63
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
64
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
65
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
66
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
67
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
68
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(
|
|
69
|
+
--spectrum-actionbutton-m-border-size,
|
|
70
|
+
var(--spectrum-alias-border-size-thin)
|
|
71
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(
|
|
72
|
+
--spectrum-actionbutton-m-border-size,
|
|
73
|
+
var(--spectrum-alias-border-size-thin)
|
|
74
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
|
|
75
|
+
--spectrum-actionbutton-m-border-size,
|
|
76
|
+
var(--spectrum-alias-border-size-thin)
|
|
77
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
78
|
+
--spectrum-actionbutton-m-border-size,
|
|
79
|
+
var(--spectrum-alias-border-size-thin)
|
|
80
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
81
|
+
--spectrum-actionbutton-m-border-size,
|
|
82
|
+
var(--spectrum-alias-border-size-thin)
|
|
83
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
|
|
84
|
+
--spectrum-actionbutton-m-border-size,
|
|
85
|
+
var(--spectrum-alias-border-size-thin)
|
|
86
|
+
)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(
|
|
87
|
+
--spectrum-actionbutton-m-border-size,
|
|
88
|
+
var(--spectrum-alias-border-size-thin)
|
|
89
|
+
)/2);margin-top:calc(-1*var(
|
|
90
|
+
--spectrum-actionbutton-m-border-size,
|
|
91
|
+
var(--spectrum-alias-border-size-thin)
|
|
92
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
93
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
94
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
95
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
96
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
97
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
98
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
99
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
100
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(
|
|
101
|
+
--spectrum-actionbutton-m-border-size,
|
|
102
|
+
var(--spectrum-alias-border-size-thin)
|
|
103
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
104
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
105
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
106
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
107
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
108
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
109
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
110
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
111
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(
|
|
112
|
+
--spectrum-actionbutton-m-border-size,
|
|
113
|
+
var(--spectrum-alias-border-size-thin)
|
|
114
|
+
)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(
|
|
115
|
+
--spectrum-actionbutton-m-border-radius
|
|
116
|
+
);--spectrum-actionbutton-l-border-radius:var(
|
|
117
|
+
--spectrum-actionbutton-m-border-radius
|
|
118
|
+
);--spectrum-actionbutton-xl-border-radius:var(
|
|
119
|
+
--spectrum-actionbutton-m-border-radius
|
|
120
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(
|
|
121
|
+
--spectrum-alias-border-radius-regular
|
|
122
|
+
) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(
|
|
123
|
+
--spectrum-alias-border-radius-regular
|
|
124
|
+
) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(
|
|
125
|
+
--spectrum-alias-border-radius-regular
|
|
126
|
+
) 0 0 var(--spectrum-alias-border-radius-regular)}
|
|
27
127
|
`;
|
|
28
128
|
export default styles;
|
|
29
129
|
//# sourceMappingURL=action-group.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(--spectrum-global-dimension-size-25);display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100))}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][vertical][vertical]){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][vertical][vertical]){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([vertical][vertical]){margin-top:var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100))}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(--spectrum-actiongroup-button-gap-reset)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(--spectrum-actiongroup-button-gap-reset)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(--spectrum-actiongroup-quiet-compact-button-gap)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){position:relative;border-radius:0;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular))}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-top:calc(-1*var(--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin))/2);margin-bottom:0}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-right:0;margin-left:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){display:flex;flex-direction:column;align-items:stretch}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-l-border-radius:var(--spectrum-actionbutton-m-border-radius);--spectrum-actionbutton-xl-border-radius:var(--spectrum-actionbutton-m-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--spectrum-actionbutton-m-border-radius:0;--spectrum-actionbutton-s-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-l-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n);--spectrum-actionbutton-xl-border-radius:var(\n--spectrum-actionbutton-m-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--spectrum-actionbutton-m-border-radius:var(\n--spectrum-alias-border-radius-regular\n) 0 0 var(--spectrum-alias-border-radius-regular)}\n`;\nexport default styles;"]}
|
|
@@ -11,19 +11,107 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
|
|
15
|
+
--spectrum-global-dimension-size-25
|
|
16
|
+
)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
|
|
17
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
18
|
+
)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
|
|
19
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
20
|
+
)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
|
|
21
|
+
--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
|
|
22
|
+
)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
23
|
+
--spectrum-actiongroup-button-gap-reset
|
|
24
|
+
)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
25
|
+
--spectrum-actiongroup-button-gap-reset
|
|
26
|
+
)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
27
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
28
|
+
)}:host([dir=ltr][vertical][vertical]){margin-left:var(
|
|
29
|
+
--spectrum-actiongroup-button-gap-reset
|
|
30
|
+
)}:host([dir=rtl][vertical][vertical]){margin-right:var(
|
|
31
|
+
--spectrum-actiongroup-button-gap-reset
|
|
32
|
+
)}:host([vertical][vertical]){margin-top:var(
|
|
33
|
+
--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
|
|
34
|
+
)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
|
|
35
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
36
|
+
)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
|
|
37
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
38
|
+
)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
|
|
39
|
+
--spectrum-actiongroup-button-gap-reset
|
|
40
|
+
)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
|
|
41
|
+
--spectrum-actiongroup-button-gap-reset
|
|
42
|
+
)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
|
|
43
|
+
--spectrum-actiongroup-button-gap-reset
|
|
44
|
+
)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
|
|
45
|
+
--spectrum-actiongroup-quiet-compact-button-gap
|
|
46
|
+
)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
47
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
48
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
49
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
50
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
|
|
51
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
52
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
|
|
53
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
54
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(
|
|
55
|
+
--spectrum-actionbutton-m-border-size,
|
|
56
|
+
var(--spectrum-alias-border-size-thin)
|
|
57
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(
|
|
58
|
+
--spectrum-actionbutton-m-border-size,
|
|
59
|
+
var(--spectrum-alias-border-size-thin)
|
|
60
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
|
|
61
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
62
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
|
|
63
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
64
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
65
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
66
|
+
)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
67
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
68
|
+
)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(
|
|
69
|
+
--spectrum-actionbutton-m-border-size,
|
|
70
|
+
var(--spectrum-alias-border-size-thin)
|
|
71
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(
|
|
72
|
+
--spectrum-actionbutton-m-border-size,
|
|
73
|
+
var(--spectrum-alias-border-size-thin)
|
|
74
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
|
|
75
|
+
--spectrum-actionbutton-m-border-size,
|
|
76
|
+
var(--spectrum-alias-border-size-thin)
|
|
77
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
78
|
+
--spectrum-actionbutton-m-border-size,
|
|
79
|
+
var(--spectrum-alias-border-size-thin)
|
|
80
|
+
)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
|
|
81
|
+
--spectrum-actionbutton-m-border-size,
|
|
82
|
+
var(--spectrum-alias-border-size-thin)
|
|
83
|
+
)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
|
|
84
|
+
--spectrum-actionbutton-m-border-size,
|
|
85
|
+
var(--spectrum-alias-border-size-thin)
|
|
86
|
+
)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(
|
|
87
|
+
--spectrum-actionbutton-m-border-size,
|
|
88
|
+
var(--spectrum-alias-border-size-thin)
|
|
89
|
+
)/2);margin-top:calc(-1*var(
|
|
90
|
+
--spectrum-actionbutton-m-border-size,
|
|
91
|
+
var(--spectrum-alias-border-size-thin)
|
|
92
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
93
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
94
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
95
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
96
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
|
|
97
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
98
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
|
|
99
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
100
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(
|
|
101
|
+
--spectrum-actionbutton-m-border-size,
|
|
102
|
+
var(--spectrum-alias-border-size-thin)
|
|
103
|
+
)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
104
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
105
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
106
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
107
|
+
)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
|
|
108
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
109
|
+
)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
|
|
110
|
+
--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)
|
|
111
|
+
)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(
|
|
112
|
+
--spectrum-actionbutton-m-border-size,
|
|
113
|
+
var(--spectrum-alias-border-size-thin)
|
|
114
|
+
)/2)}:host([justified]) ::slotted(*){flex:1}
|
|
27
115
|
`;
|
|
28
116
|
export default styles;
|
|
29
117
|
//# sourceMappingURL=spectrum-action-group.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2);margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-border-radius,var(--spectrum-alias-border-radius-regular)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(\n--spectrum-actionbutton-m-border-size,\nvar(--spectrum-alias-border-size-thin)\n)/2)}:host([justified]) ::slotted(*){flex:1}\n`;\nexport default styles;"]}
|
package/src/spectrum-config.js
CHANGED
|
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { html } from '@spectrum-web-components/base';
|
|
13
|
-
import { spreadProps } from '
|
|
13
|
+
import { spreadProps } from '@open-wc/lit-helpers';
|
|
14
14
|
import '../sp-action-group.js';
|
|
15
15
|
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
16
16
|
import '@spectrum-web-components/overlay/overlay-trigger.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,4DAA4D,CAAC;AACpE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,gDAAgD,CAAC;AACxD,OAAO,qEAAqE,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,wEAAwE,CAAC;AAGhF,eAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE;QACF,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,WAAW,EACP,mFAAmF;YACvF,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,SAAS,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,WAAW,EACP,4EAA4E;YAChF,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,KAAK,EAAE;gBACH,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACnC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,SAAS;aAClB;SACJ;QACD,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,WAAW,EACP,iFAAiF;YACrF,KAAK,EAAE;gBACH,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;aAChC;YACD,OAAO,EAAE;gBACL,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC;aAC1C;SACJ;KACJ;CACJ,CAAC;AAWF,MAAM,QAAQ,GAAG,CAAC,IAAgB,EAAkB,EAAE;IAClD,OAAO,IAAI,CAAA;;;kBAGG,WAAW,CAAC,IAAI,CAAC;sBACb,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAoC,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,IAAI,CAAC,SAAS,CAC1C,MAAM,CAAC,QAAQ,CAClB,EAAE,CAAC;IACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;UAyBH,IAAI,CAAC,OAAO,IAAI,MAAM;QACpB,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,CAAC,IAAI,CAAA;;eAEH;KACV,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAC9D,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnB,aAAa,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAChE,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnB,eAAe,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,UAAU;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9E,SAAS,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAgB,EAAkB,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7E,QAAQ,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,IAAI;CACjB,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '@open-wc/lit-helpers';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n}\n\nconst template = (args: Properties): TemplateResult => {\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${args.selects == 'none'\n ? html``\n : html`\n <div>Selected:</div>\n `}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n};\n"]}
|