@unicef-polymer/etools-unicef/src/etools-button/styles/button-styles.d.ts

eTools UNICEF library of reusable components

export declare const buttonsStylesContent = "\n  :host(.default.left-icon:not(variant=[\"text\"]))::part(base),\n  :host(.primary.left-icon:not(variant=[\"text\"]))::part(base),\n  :host(.info.left-icon:not(variant=[\"text\"]))::part(base),\n  :host(.success.left-icon:not(variant=[\"text\"]))::part(base),\n  :host(.error.left-icon:not(variant=[\"text\"]))::part(base) {\n    padding-inline-end: 12px;\n  }\n\n  :host(.default.right-icon:not(variant=[\"text\"]))::part(base),\n  :host(.primary.right-icon:not(variant=[\"text\"]))::part(base),\n  :host(.info.right-icon:not(variant=[\"text\"]))::part(base),\n  :host(.success.right-icon:not(variant=[\"text\"]))::part(base),\n  :host(.error.right-icon:not(variant=[\"text\"]))::part(base) {\n    padding-inline-start: 12px;\n  }\n\n  :host(.default.left-icon) etools-icon,\n  :host(.primary.left-icon) etools-icon,\n  :host(.success.left-icon) etools-icon,\n  :host(.error.left-icon) etools-icon {\n    margin-inline-end: 10px;\n  }\n\n  :host(.info.left-icon etools-icon) {\n    margin-inline-end: 4px;\n  }\n\n  :host(.default.right-icon) etools-icon,\n  :host(.primary.right-icon) etools-icon,\n  :host(.info.right-icon) etools-icon,\n  :host(.success.right-icon) etools-icon,\n  :host(.error.right-icon) etools-icon {\n    margin-inline-start: 10px;\n  }\n\n  :host .btn-label {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n  }\n\n  :host::part(label) {\n    text-transform: uppercase;\n  }\n  :host {\n    --sl-button-font-size-medium: var(--etools-font-size-16, 16px);\n    --sl-input-height-medium: 36px;\n    --sl-spacing-medium: 12px;\n    margin-inline-start: 5px;\n    margin-inline-end: 5px;\n    min-width: 82px;\n    border-radius: var(--sl-input-border-radius-medium);\n  }\n  sl-dropdown sl-menu-item:focus-visible::part(base) {\n    background-color: rgba(0, 0, 0, 0.1);\n    color: var(--sl-color-neutral-1000);\n  }\n  :host::part(base) {\n    border: none !important;\n    align-items: center;\n  }\n\n  :host::part(caret) {\n    height: 1em !important;\n  }\n\n  :host([variant='text']) {\n    --sl-button-font-size-medium: var(--etools-font-size-16, 16px);\n  }\n\n  :host([variant='text'])::part(label) {\n    font-weight: 700;\n  }\n\n  :host(.no-pad) {\n    --sl-spacing-medium: 0;\n  }\n  :host(.no-marg) {\n    margin:0;\n  }\n\n  :host([variant='text'].neutral)::part(base) {\n    color: var(--sl-color-neutral-600);\n  }\n\n  :host([variant='text'].neutral)::part(base):hover {\n    color: var(--sl-color-neutral-500);\n  }\n\n  :host([variant='text'].danger)::part(base) {\n    color: var(--sl-color-danger-600);\n  }\n\n  :host([variant='text'].danger)::part(base):hover {\n    color: var(--sl-color-danger-500);\n  }\n\n  :host([variant='text'].primary)::part(base) {\n    color: var(--sl-color-primary-600);\n  }\n\n  :host([variant='text'].primary)::part(base):hover {\n    color: var(--sl-color-primary-500);\n  }\n\n  :host([variant='text'].font-14) {\n    --sl-button-font-size-medium: var(--etools-font-size-14, 14px);\n  }\n";
export declare const buttonsStyles: import("lit").CSSResult;