UNPKG

@spectrum-web-components/split-button

Version:

An `sp-split-button` surfaces an immediately envokable action via it's main button, as well as a list of alternative actions in its toggleable menu overlay. By default, any actions envoked from the overlay will replace the main action button. When leverag

8 lines (7 loc) 7.8 kB
"use strict"; import { css } from "@spectrum-web-components/base"; const styles = css` :host{--spectrum-splitbutton-trigger-border-left:0;--spectrum-splitbutton-trigger-min-width:0;--spectrum-spltibutton-margin-left:0;--spectrum-splitbutton-icon-gap:var(--spectrum-global-dimension-size-150);--spectrum-splitbutton-border-radius-edge:var(--spectrum-alias-border-radius-small)}:host([dir=rtl]),:host([dir=rtl]){--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}.trigger{--spectrum-splitbutton-trigger-round-edge-padding:var(--spectrum-global-dimension-size-125);--spectrum-splitbutton-trigger-flat-edge-padding:var(--spectrum-global-dimension-size-100);--spectrum-splitbutton-cta-trigger-flat-edge-padding:calc(var(--spectrum-splitbutton-trigger-flat-edge-padding) - var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick)))}#button{--spectrum-splitbutton-flat-edge-padding:calc(var(--spectrum-button-m-primary-outline-texticon-padding-left) - var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick))*2);--spectrum-splitbutton-round-edge-padding:var(--spectrum-button-m-primary-outline-texticon-padding-right,var(--spectrum-global-dimension-size-200));--spectrum-splitbutton-cta-flat-edge-padding:calc(var(--spectrum-button-m-primary-outline-texticon-padding-left) - var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick))*3)}:host{vertical-align:top;flex-direction:row;display:inline-flex;position:relative}#button{border-start-start-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));margin-inline-start:0;padding-inline-start:var(--spectrum-splitbutton-round-edge-padding);padding-inline-end:var(--spectrum-splitbutton-flat-edge-padding)}#button[variant=accent]{margin-inline-end:var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick));padding-inline-end:var(--spectrum-splitbutton-cta-flat-edge-padding)}#button:after{border-start-end-radius:var(--spectrum-splitbutton-border-radius-edge);border-end-end-radius:var(--spectrum-splitbutton-border-radius-edge)}.trigger{border-inline-start-width:var(--spectrum-splitbutton-trigger-border-left);min-inline-size:var(--spectrum-splitbutton-trigger-min-width);border-start-start-radius:0;border-start-end-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-end-end-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-end-start-radius:0;margin-inline-start:0;padding-inline-start:var(--spectrum-splitbutton-trigger-flat-edge-padding);padding-inline-end:var(--spectrum-splitbutton-trigger-round-edge-padding)}.trigger[variant=accent]{border-inline-start-width:var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick));padding-inline-start:var(--spectrum-splitbutton-cta-trigger-flat-edge-padding)}.trigger:focus-visible{box-shadow:none}.trigger:after{border-start-start-radius:var(--spectrum-splitbutton-border-radius-edge);border-end-start-radius:var(--spectrum-splitbutton-border-radius-edge)}.icon{margin-block-start:1px;display:block}#button,.trigger{position:relative}#button:focus-visible,.trigger:focus-visible{z-index:1;outline:none}#button.spectrum-Pagination-prevButton .spectrum-Icon,.trigger.spectrum-Pagination-prevButton .spectrum-Icon{transform:var(--spectrum-logical-rotation,)rotate(180deg)}#button.spectrum-Pagination-nextButton .spectrum-Icon,.trigger.spectrum-Pagination-nextButton .spectrum-Icon{transform:var(--spectrum-logical-rotation)}#button .label+.spectrum-Icon{margin-inline-start:var(--spectrum-splitbutton-icon-gap)}:host([left]) #button{border-start-start-radius:0;border-start-end-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-end-end-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-end-start-radius:0;margin-inline-start:var(--spectrum-spltibutton-margin-left);margin-inline-end:0;padding-inline-start:var(--spectrum-splitbutton-flat-edge-padding);padding-inline-end:var(--spectrum-splitbutton-round-edge-padding)}:host([left]) #button:after{border-start-start-radius:var(--spectrum-splitbutton-border-radius-edge);border-start-end-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-end-end-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-end-start-radius:var(--spectrum-splitbutton-border-radius-edge)}:host([left]) #button[variant=accent]{margin-inline-start:var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick));padding-inline-start:var(--spectrum-splitbutton-cta-flat-edge-padding)}:host([left]) .trigger{border-inline-start-width:var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick));border-inline-end-width:var(--spectrum-splitbutton-trigger-border-left);border-start-start-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));margin-inline-end:0;padding-inline-start:var(--spectrum-splitbutton-trigger-round-edge-padding);padding-inline-end:var(--spectrum-splitbutton-trigger-flat-edge-padding)}:host([left]) .trigger:after{border-start-start-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200));border-start-end-radius:var(--spectrum-splitbutton-border-radius-edge);border-end-end-radius:var(--spectrum-splitbutton-border-radius-edge);border-end-start-radius:var(--spectrum-button-m-primary-outline-texticon-border-radius,var(--spectrum-global-dimension-size-200))}:host([left]) .trigger[variant=accent]{border-inline-end-width:var(--spectrum-button-m-primary-outline-texticon-border-size,var(--spectrum-alias-border-size-thick));padding-inline-end:var(--spectrum-splitbutton-cta-trigger-flat-edge-padding)}:host>sp-menu{display:none}#button{--spectrum-splitbutton-flat-edge-padding:calc(var(--spectrum-button-edge-to-text) - var(--spectrum-button-border-width,var(--spectrum-alias-border-size-thick))*2);--spectrum-splitbutton-round-edge-padding:var(--spectrum-button-edge-to-visual,var(--spectrum-global-dimension-size-200));--spectrum-splitbutton-cta-flat-edge-padding:calc(var(--spectrum-button-edge-to-text) - var(--spectrum-button-border-width,var(--spectrum-alias-border-size-thick))*3)}.trigger{--spectrum-splitbutton-trigger-flat-edge-padding:calc(var(--spectrum-button-edge-to-text) - var(--spectrum-button-border-width,var(--spectrum-alias-border-size-thick))*2);--spectrum-splitbutton-trigger-round-edge-padding:var(--spectrum-button-edge-to-visual,var(--spectrum-global-dimension-size-200));--spectrum-splitbutton-cta-trigger-flat-edge-padding:calc(var(--spectrum-button-edge-to-text) - var(--spectrum-button-border-width,var(--spectrum-alias-border-size-thick))*3)}sp-button{--spectrum-button-m-primary-outline-texticon-border-radius:var(--spectrum-button-border-radius)}sp-overlay:not(:defined){display:none}.icon{align-self:center} `; export default styles; //# sourceMappingURL=split-button.css.dev.js.map