@alaskaairux/auro-button/dist/style-css.js

Auro custom auro-button element

// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

import {css} from 'lit-element';
export default css`*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none !important;animation:none !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.js-focus-visible :focus:not(.focus-visible){outline:3px solid transparent}.util_insetLg--squish{padding:calc(1.5rem / 2) 1.5rem}:focus-visible.auro-button{outline:3px solid transparent;box-shadow:inset 0 0 0 1px #ffffff, inset 0 0 0 3px #ffffff;box-shadow:inset 0 0 0 1px var(--auro-color-border-focus-on-dark),inset 0 0 0 3px var(--auro-color-background-lightest)}:focus-visible.auro-button--secondary{background-color:#f8f8f8;background-color:var(--auro-color-background-lighter);box-shadow:inset 0 0 0 3px #0074c8;box-shadow:inset 0 0 0 3px var(--auro-color-ui-default-on-light)}:focus-visible.auro-button--tertiary{background-color:#f8f8f8;background-color:var(--auro-color-background-lighter);border-color:#0074c8;border-color:var(--auro-color-ui-default-on-light);box-shadow:inset 0 0 0 3px #0074c8;box-shadow:inset 0 0 0 3px var(--auro-color-ui-default-on-light)}:focus-visible.auro-buttonOndark{background-color:#00cff0;background-color:var(--auro-color-ui-default-on-dark);box-shadow:inset 0 0 0 3px #ffffff;box-shadow:inset 0 0 0 3px var(--auro-color-border-focus-on-dark)}:focus-visible.auro-buttonOndark--secondary{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);box-shadow:inset 0 0 0 3px #5de3f7;box-shadow:inset 0 0 0 3px var(--auro-color-ui-active-on-dark);border:1px solid #5de3f7;border:1px solid var(--auro-color-ui-active-on-dark)}:focus-visible.auro-buttonOndark--tertiary{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);border-color:#5de3f7;border-color:var(--auro-color-ui-active-on-dark);box-shadow:inset 0 0 0 3px #5de3f7;box-shadow:inset 0 0 0 3px var(--auro-color-ui-active-on-dark)}.focus-visible.auro-button{outline:3px solid transparent;box-shadow:inset 0 0 0 1px #ffffff, inset 0 0 0 3px #ffffff;box-shadow:inset 0 0 0 1px var(--auro-color-border-focus-on-dark),inset 0 0 0 3px var(--auro-color-background-lightest)}.focus-visible.auro-button--secondary{background-color:#f8f8f8;background-color:var(--auro-color-background-lighter);box-shadow:inset 0 0 0 3px #0074c8;box-shadow:inset 0 0 0 3px var(--auro-color-ui-default-on-light)}.focus-visible.auro-button--tertiary{background-color:#f8f8f8;background-color:var(--auro-color-background-lighter);border-color:#0074c8;border-color:var(--auro-color-ui-default-on-light);box-shadow:inset 0 0 0 3px #0074c8;box-shadow:inset 0 0 0 3px var(--auro-color-ui-default-on-light)}.focus-visible.auro-buttonOndark{background-color:#00cff0;background-color:var(--auro-color-ui-default-on-dark);box-shadow:inset 0 0 0 3px #ffffff;box-shadow:inset 0 0 0 3px var(--auro-color-border-focus-on-dark)}.focus-visible.auro-buttonOndark--secondary{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);box-shadow:inset 0 0 0 3px #5de3f7;box-shadow:inset 0 0 0 3px var(--auro-color-ui-active-on-dark);border:1px solid #5de3f7;border:1px solid var(--auro-color-ui-active-on-dark)}.focus-visible.auro-buttonOndark--tertiary{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);border-color:#5de3f7;border-color:var(--auro-color-ui-active-on-dark);box-shadow:inset 0 0 0 3px #5de3f7;box-shadow:inset 0 0 0 3px var(--auro-color-ui-active-on-dark)}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{transition:all 0.15s ease;position:relative;padding:0 1.5rem;padding:0 var(--auro-size-lg);color:#ffffff;color:var(--auro-color-text-primary-on-dark);cursor:pointer;background-color:#0074c8;background-color:var(--auro-color-ui-default-on-light);border:1px solid #0074c8;border:1px solid var(--auro-color-ui-default-on-light);border-radius:0.375rem;border-radius:var(--auro-border-radius);font-family:'AS Circular', Helvetica Neue, Arial, sans-serif;font-family:var(--auro-font-family-default);font-size:1rem;font-size:var(--auro-text-body-size-default);font-weight:500;font-weight:var(--auro-text-body-default-weight);overflow:hidden;text-overflow:ellipsis;-ms-user-select:none;user-select:none;white-space:nowrap;min-height:3rem;min-height:var(--auro-size-xxl);max-height:3rem;max-height:var(--auro-size-xxl);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:0.25rem;gap:var(--auro-size-xxs);margin:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}@media (hover: hover){.auro-button:active,.auro-button:hover{background-color:#054687;background-color:var(--auro-color-ui-hover-on-light);border:1px solid #054687;border:1px solid var(--auro-color-ui-hover-on-light)}}.auro-button:active{background-color:#054687;background-color:var(--auro-color-ui-active-on-light);border:1px solid #054687;border:1px solid var(--auro-color-ui-active-on-light);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:#00274a;color:var(--auro-color-background-darkest)}.auro-button.loading.auro-buttonOndark auro-loader{color:#ffffff;color:var(--auro-color-text-primary-on-dark)}@media screen and (min-width: 660px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset;background-color:rgba(0,116,200,0.4);border:1px solid rgba(0,116,200,0)}@media (hover: hover){.auro-button:disabled:hover{background-color:rgba(0,116,200,0.4);border:1px solid rgba(0,116,200,0)}}.auro-button--secondary{background-color:#ffffff;background-color:var(--auro-color-background-lightest);border:1px solid #0074c8;border:1px solid var(--auro-color-ui-default-on-light);color:#0074c8;color:var(--auro-color-text-link-on-light)}@media (hover: hover){.auro-button--secondary:active,.auro-button--secondary:hover{background-color:rgba(0,0,0,0.06);background-color:var(--auro-color-ui-bkg-hover-on-light);border:1px solid #0074c8;border:1px solid var(--auro-color-ui-default-on-light)}}.auro-button--secondary:active{background-color:rgba(0,0,0,0.06);background-color:var(--auro-color-ui-bkg-hover-on-light);border:1px solid #0074c8;border:1px solid var(--auro-color-ui-default-on-light)}.auro-button--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0,116,200,0.4);background-color:rgba(255,255,255,0.4);border:1px solid rgba(0,116,200,0.4)}@media (hover: hover){.auro-button--secondary:disabled:hover{color:rgba(0,116,200,0.4);background-color:rgba(255,255,255,0.4);border:1px solid rgba(0,116,200,0.4)}}.auro-button--tertiary{background-color:rgba(0,0,0,0.03);border-color:transparent;color:#0074c8;color:var(--auro-color-text-link-on-light)}@media (hover: hover){.auro-button--tertiary:active,.auro-button--tertiary:hover{background-color:rgba(0,0,0,0.06);background-color:var(--auro-color-ui-bkg-hover-on-light);border-color:transparent}}.auro-button--tertiary:active{background-color:rgba(0,0,0,0.06);background-color:var(--auro-color-ui-bkg-hover-on-light);border-color:transparent}.auro-button--tertiary:disabled{cursor:not-allowed;transform:unset;color:rgba(0,116,200,0.4);background-color:rgba(0,0,0,0.03);border:1px solid transparent}@media (hover: hover){.auro-button--tertiary:disabled:hover{background-color:rgba(0,0,0,0.03);border:1px solid transparent}}.auro-buttonOndark{background-color:#00cff0;background-color:var(--auro-color-ui-default-on-dark);border:1px solid #00cff0;border:1px solid var(--auro-color-ui-default-on-dark);color:#222222;color:var(--auro-color-text-primary-on-light)}@media (hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover{background-color:#5de3f7;background-color:var(--auro-color-ui-hover-on-dark);border:1px solid #5de3f7;border:1px solid var(--auro-color-ui-hover-on-dark)}}.auro-buttonOndark:active{background-color:#5de3f7;background-color:var(--auro-color-ui-active-on-dark);border:1px solid #5de3f7;border:1px solid var(--auro-color-ui-active-on-dark)}.auro-buttonOndark:disabled{cursor:not-allowed;transform:unset;color:rgba(34,34,34,0.4);background-color:rgba(0,207,240,0.4);border:1px solid rgba(0,207,240,0.4)}@media (hover: hover){.auro-buttonOndark:disabled:hover{color:rgba(34,34,34,0.4);background-color:rgba(0,207,240,0.4);border:1px solid rgba(0,207,240,0.4)}}.auro-buttonOndark--secondary{background-color:transparent;border:1px solid #00cff0;border:1px solid var(--auro-color-ui-default-on-dark);color:#00cff0;color:var(--auro-color-ui-default-on-dark)}@media (hover: hover){.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15)}}.auro-buttonOndark--secondary:active{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);border:1px solid #5de3f7;border:1px solid var(--auro-color-ui-hover-on-dark)}@media (hover: hover){.auro-buttonOndark--secondary:disabled:hover{background-color:transparent;border:1px solid #00cff0;border:1px solid var(--auro-color-ui-default-on-dark)}}.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0,207,240,0.4);background-color:transparent;border:1px solid rgba(0,207,240,0.4)}@media (hover: hover){.auro-buttonOndark--secondary:disabled:hover{color:rgba(0,207,240,0.4);background-color:transparent;border:1px solid rgba(0,207,240,0.4)}}.auro-buttonOndark--tertiary{background-color:rgba(255,255,255,0.03);border:1px solid transparent;color:#00cff0;color:var(--auro-color-ui-default-on-dark)}@media (hover: hover){.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);border:1px solid transparent;box-shadow:none}}.auro-buttonOndark--tertiary:active{background-color:rgba(0,0,0,0.15);background-color:var(--auro-color-base-black-opacity-15);border:1px solid transparent;box-shadow:none}.auro-buttonOndark--tertiary:disabled{cursor:not-allowed;transform:unset;background-color:rgba(255,255,255,0.03);border:transparent;color:rgba(0,207,240,0.4)}@media (hover: hover){.auro-buttonOndark--tertiary:disabled:hover{background-color:rgba(255,255,255,0.03);color:rgba(0,207,240,0.4);border:transparent}}.auro-button--slim{padding:0.5rem 1rem;padding:var(--auro-size-xs) var(--auro-size-md);font-size:0.875rem;font-size:var(--auro-text-body-size-sm);min-width:unset;min-height:2.25rem;max-height:2.25rem}.icon svg{vertical-align:middle}.icon slot{vertical-align:middle}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}
`;