@aurodesignsystem/auro-button
Advanced tools
Comparing version 7.2.9 to 7.2.10
# Semantic Release Automated Changelog | ||
## [7.2.10](https://github.com/AlaskaAirlines/auro-button/compare/v7.2.9...v7.2.10) (2024-07-08) | ||
### Bug Fixes | ||
* **hover:** remove disabled hover UI [#256](https://github.com/AlaskaAirlines/auro-button/issues/256) ([13fd26b](https://github.com/AlaskaAirlines/auro-button/commit/13fd26bdc068d6ee8bc35dba993bb8e400148d37)) | ||
## [7.2.9](https://github.com/AlaskaAirlines/auro-button/compare/v7.2.8...v7.2.9) (2024-02-23) | ||
@@ -4,0 +11,0 @@ |
@@ -49,3 +49,3 @@ /** | ||
var styleCss$1 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}: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 .15s ease;position:relative;padding:0 var(--ds-size-300, 1.5rem);color:var(--ds-color-text-primary-inverse, #ffffff);cursor:pointer;background-color:var(--ds-color-ui-default-default, #0074c8);border:1px solid var(--ds-color-ui-default-default, #0074c8);border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);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-image:linear-gradient(var(--ds-color-ui-hover-default, #054687), var(--ds-color-ui-hover-default, #054687));border:1px solid var(--ds-color-ui-hover-default, #054687)}}.auro-button:active{background-color:var(--ds-color-ui-active-default, #054687);border:1px solid var(--ds-color-ui-active-default, #054687);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:var(--ds-color-background-darkest, #00274a, #00274a)}.auro-button.loading.auro-buttonOndark auro-loader{color:var(--ds-color-text-primary-inverse, #ffffff)}@media screen and (min-width: 576px){.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[variant=secondary],.auro-button--secondary{background-color:var(--ds-color-background-lightest, #ffffff);border:1px solid var(--ds-color-ui-default-default, #0074c8);color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=secondary]:active,.auro-button[variant=secondary]:hover,.auro-button--secondary:active,.auro-button--secondary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)), var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)));border:1px solid var(--ds-color-ui-default-default, #0074c8)}}.auro-button[variant=secondary]:active,.auro-button--secondary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border:1px solid var(--ds-color-ui-default-default, #0074c8)}.auro-button[variant=secondary]:disabled,.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[variant=secondary]:disabled: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[variant=tertiary],.auro-button--tertiary{background-color:rgba(0, 0, 0, 0.03);border-color:transparent;color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=tertiary]:active,.auro-button[variant=tertiary]:hover,.auro-button--tertiary:active,.auro-button--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default));border-color:transparent}}.auro-button[variant=tertiary]:active,.auro-button--tertiary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border-color:transparent}.auro-button[variant=tertiary]:disabled,.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[variant=tertiary]:disabled:hover,.auro-button--tertiary:disabled:hover{background-color:rgba(0, 0, 0, 0.03);border:1px solid transparent}}.auro-buttonOndark{background-color:var(--ds-color-ui-default-inverse, #00cff0);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-text-primary-default)}@media(hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover{background-image:linear-gradient(var(--ds-color-ui-hover-inverse, #5de3f7), var(--ds-color-ui-hover-inverse, #5de3f7));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}}.auro-buttonOndark:active{background-color:var(--ds-color-ui-active-inverse, #5de3f7);border:1px solid var(--ds-color-ui-active-inverse, #5de3f7)}.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[variant=secondary],.auro-buttonOndark--secondary{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark[variant=secondary]:hover,.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover{background-image:linear-gradient(var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a))}}.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark--secondary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0)}}.auro-buttonOndark[variant=secondary]:disabled,.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=tertiary],.auro-buttonOndark--tertiary{background-color:rgba(255, 255, 255, 0.03);border:1px solid transparent;color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark[variant=tertiary]:hover,.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)), var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)));border:1px solid transparent;box-shadow:none}}.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark--tertiary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15));border:1px solid transparent;box-shadow:none}.auro-buttonOndark[variant=tertiary]:disabled,.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[variant=tertiary]:disabled: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:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; | ||
var styleCss$1 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}: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 .15s ease;position:relative;padding:0 var(--ds-size-300, 1.5rem);color:var(--ds-color-text-primary-inverse, #ffffff);cursor:pointer;background-color:var(--ds-color-ui-default-default, #0074c8);border:1px solid var(--ds-color-ui-default-default, #0074c8);border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}@media(hover: hover){.auro-button:active,.auro-button:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-hover-default, #054687), var(--ds-color-ui-hover-default, #054687));border:1px solid var(--ds-color-ui-hover-default, #054687)}}.auro-button:active{background-color:var(--ds-color-ui-active-default, #054687);border:1px solid var(--ds-color-ui-active-default, #054687);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:var(--ds-color-background-darkest, #00274a, #00274a)}.auro-button.loading.auro-buttonOndark auro-loader{color:var(--ds-color-text-primary-inverse, #ffffff)}@media screen and (min-width: 576px){.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)}.auro-button[variant=secondary],.auro-button--secondary{background-color:var(--ds-color-background-lightest, #ffffff);border:1px solid var(--ds-color-ui-default-default, #0074c8);color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=secondary]:active,.auro-button[variant=secondary]:hover:not(:disabled),.auro-button--secondary:active,.auro-button--secondary:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)), var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)));border:1px solid var(--ds-color-ui-default-default, #0074c8)}}.auro-button[variant=secondary]:active,.auro-button--secondary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border:1px solid var(--ds-color-ui-default-default, #0074c8)}.auro-button[variant=secondary]:disabled,.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)}.auro-button[variant=tertiary],.auro-button--tertiary{background-color:rgba(0, 0, 0, 0.03);border-color:transparent;color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=tertiary]:active,.auro-button[variant=tertiary]:hover:not(:disabled),.auro-button--tertiary:active,.auro-button--tertiary:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default));border-color:transparent}}.auro-button[variant=tertiary]:active,.auro-button--tertiary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border-color:transparent}.auro-button[variant=tertiary]:disabled,.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}.auro-buttonOndark{background-color:var(--ds-color-ui-default-inverse, #00cff0);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-text-primary-default)}@media(hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-hover-inverse, #5de3f7), var(--ds-color-ui-hover-inverse, #5de3f7));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}}.auro-buttonOndark:active{background-color:var(--ds-color-ui-active-inverse, #5de3f7);border:1px solid var(--ds-color-ui-active-inverse, #5de3f7)}.auro-buttonOndark:disabled{cursor:not-allowed;transform:unset;color:rgba(42, 42, 42, 0.4);background-color:rgba(0, 207, 240, 0.4);border:1px solid rgba(0, 207, 240, 0.4)}.auro-buttonOndark[variant=secondary],.auro-buttonOndark--secondary{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark[variant=secondary]:hover:not(:disabled),.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a))}}.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark--secondary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}.auro-buttonOndark[variant=secondary]:disabled,.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=tertiary],.auro-buttonOndark--tertiary{background-color:rgba(255, 255, 255, 0.03);border:1px solid transparent;color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark[variant=tertiary]:hover,.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)), var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)));border:1px solid transparent;box-shadow:none}}.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark--tertiary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15));border:1px solid transparent;box-shadow:none}.auro-buttonOndark[variant=tertiary]:disabled,.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[variant=tertiary]:disabled: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:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; | ||
@@ -52,0 +52,0 @@ var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0;color:currentcolor}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;background-color:currentcolor;border:0 solid currentcolor}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host([onlight]){color:var(--ds-color-ui-default-default, #0074c8)}:host([ondark]){color:var(--ds-color-brand-breeze-300, ds-color-brand-breeze-300)}:host([white]){color:var(--ds-color-base-white, #ffffff)}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{background:transparent;border-width:5px}:host([orbit])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`; |
@@ -10,3 +10,3 @@ { | ||
"name": "@aurodesignsystem/auro-button", | ||
"version": "7.2.9", | ||
"version": "7.2.10", | ||
"description": "Auro custom auro-button element", | ||
@@ -27,3 +27,3 @@ "author": "Product design and research", | ||
"chalk": "^5.3.0", | ||
"lit": "^3.1.2" | ||
"lit": "^3.1.4" | ||
}, | ||
@@ -35,15 +35,15 @@ "peerDependencies": { | ||
"devDependencies": { | ||
"@aurodesignsystem/auro-library": "^2.5.1", | ||
"@aurodesignsystem/design-tokens": "^4.3.1", | ||
"@aurodesignsystem/auro-library": "^2.6.0", | ||
"@aurodesignsystem/design-tokens": "^4.7.0", | ||
"@aurodesignsystem/eslint-config": "^1.3.1", | ||
"@aurodesignsystem/webcorestylesheets": "^5.0.8", | ||
"@commitlint/cli": "^18.6.1", | ||
"@commitlint/config-conventional": "^18.6.2", | ||
"@aurodesignsystem/webcorestylesheets": "^5.1.1", | ||
"@commitlint/cli": "^19.3.0", | ||
"@commitlint/config-conventional": "^19.2.2", | ||
"@open-wc/testing": "^4.0.0", | ||
"@semantic-release/changelog": "^6.0.3", | ||
"@semantic-release/git": "^10.0.1", | ||
"@semantic-release/npm": "^11.0.2", | ||
"@web/dev-server": "^0.4.3", | ||
"@web/test-runner": "^0.18.0", | ||
"autoprefixer": "^10.4.17", | ||
"@semantic-release/npm": "^12.0.1", | ||
"@web/dev-server": "^0.4.5", | ||
"@web/test-runner": "^0.18.2", | ||
"autoprefixer": "^10.4.19", | ||
"compression": "^1.7.4", | ||
@@ -53,24 +53,24 @@ "concat": "^1.0.3", | ||
"copyfiles": "^2.4.1", | ||
"core-js": "^3.36.0", | ||
"core-js": "^3.37.1", | ||
"eslint": "^8.57.0", | ||
"eslint-plugin-jsdoc": "^48.2.0", | ||
"eslint-plugin-lit": "^1.11.0", | ||
"eslint-plugin-jsdoc": "^48.2.12", | ||
"eslint-plugin-lit": "^1.14.0", | ||
"husky": "^9.0.11", | ||
"lodash": "^4.17.21", | ||
"markdown-magic": "^2.6.1", | ||
"nodemon": "^3.1.0", | ||
"nodemon": "^3.1.4", | ||
"npm-run-all": "^4.1.5", | ||
"postcss": "^8.4.35", | ||
"postcss-discard-comments": "^6.0.1", | ||
"postcss": "^8.4.38", | ||
"postcss-discard-comments": "^7.0.1", | ||
"postcss-selector-replace": "^1.0.2", | ||
"rollup": "^4.12.0", | ||
"rollup": "^4.18.0", | ||
"rollup-plugin-serve": "^2.0.2", | ||
"semantic-release": "^23.0.2", | ||
"sinon": "^17.0.1", | ||
"stylelint": "^16.2.1", | ||
"stylelint-config-standard": "^36.0.0", | ||
"stylelint-config-standard-scss": "^13.0.0", | ||
"semantic-release": "^24.0.0", | ||
"sinon": "^18.0.0", | ||
"stylelint": "^16.6.1", | ||
"stylelint-config-standard": "^36.0.1", | ||
"stylelint-config-standard-scss": "^13.1.0", | ||
"stylelint-order": "^6.0.4", | ||
"stylelint-scss": "^6.1.0", | ||
"typescript": "^5.3.3", | ||
"stylelint-scss": "^6.3.2", | ||
"typescript": "^5.5.2", | ||
"wc-sass-render": "^1.4.0", | ||
@@ -95,4 +95,6 @@ "web-component-analyzer": "^2.0.0", | ||
"scripts": { | ||
"build": "npm-run-all build:sass sass:render scssLint dist:js build:docs bundler postinstall build:api types", | ||
"build:ci": "npm-run-all sweep build", | ||
"build": "npm-run-all build:sass sass:render types", | ||
"build:test": "npm-run-all test linters", | ||
"build:release": "npm-run-all build build:test build:api build:docs bundler postinstall", | ||
"build:ci": "npm-run-all sweep build:release", | ||
"build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render", | ||
@@ -124,3 +126,11 @@ "build:api": "wca analyze 'src/auro-button.js' --outFiles docs/api.md", | ||
"release": { | ||
"branch": "master", | ||
"branches": [ | ||
{ | ||
"name": "master" | ||
}, | ||
{ | ||
"name": "beta", | ||
"prerelease": true | ||
} | ||
], | ||
"plugins": [ | ||
@@ -127,0 +137,0 @@ "@semantic-release/commit-analyzer", |
@@ -122,3 +122,3 @@ <!-- | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.8/dist/bundled/essentials.css" /> | ||
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@7.2.9/dist/auro-button__bundled.js" type="module"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@7.2.10/dist/auro-button__bundled.js" type="module"></script> | ||
``` | ||
@@ -125,0 +125,0 @@ |
@@ -7,2 +7,2 @@ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license | ||
import {css} from 'lit'; | ||
export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}: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 .15s ease;position:relative;padding:0 var(--ds-size-300, 1.5rem);color:var(--ds-color-text-primary-inverse, #ffffff);cursor:pointer;background-color:var(--ds-color-ui-default-default, #0074c8);border:1px solid var(--ds-color-ui-default-default, #0074c8);border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);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-image:linear-gradient(var(--ds-color-ui-hover-default, #054687), var(--ds-color-ui-hover-default, #054687));border:1px solid var(--ds-color-ui-hover-default, #054687)}}.auro-button:active{background-color:var(--ds-color-ui-active-default, #054687);border:1px solid var(--ds-color-ui-active-default, #054687);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:var(--ds-color-background-darkest, #00274a, #00274a)}.auro-button.loading.auro-buttonOndark auro-loader{color:var(--ds-color-text-primary-inverse, #ffffff)}@media screen and (min-width: 576px){.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[variant=secondary],.auro-button--secondary{background-color:var(--ds-color-background-lightest, #ffffff);border:1px solid var(--ds-color-ui-default-default, #0074c8);color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=secondary]:active,.auro-button[variant=secondary]:hover,.auro-button--secondary:active,.auro-button--secondary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)), var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)));border:1px solid var(--ds-color-ui-default-default, #0074c8)}}.auro-button[variant=secondary]:active,.auro-button--secondary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border:1px solid var(--ds-color-ui-default-default, #0074c8)}.auro-button[variant=secondary]:disabled,.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[variant=secondary]:disabled: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[variant=tertiary],.auro-button--tertiary{background-color:rgba(0, 0, 0, 0.03);border-color:transparent;color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=tertiary]:active,.auro-button[variant=tertiary]:hover,.auro-button--tertiary:active,.auro-button--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default));border-color:transparent}}.auro-button[variant=tertiary]:active,.auro-button--tertiary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border-color:transparent}.auro-button[variant=tertiary]:disabled,.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[variant=tertiary]:disabled:hover,.auro-button--tertiary:disabled:hover{background-color:rgba(0, 0, 0, 0.03);border:1px solid transparent}}.auro-buttonOndark{background-color:var(--ds-color-ui-default-inverse, #00cff0);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-text-primary-default)}@media(hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover{background-image:linear-gradient(var(--ds-color-ui-hover-inverse, #5de3f7), var(--ds-color-ui-hover-inverse, #5de3f7));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}}.auro-buttonOndark:active{background-color:var(--ds-color-ui-active-inverse, #5de3f7);border:1px solid var(--ds-color-ui-active-inverse, #5de3f7)}.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[variant=secondary],.auro-buttonOndark--secondary{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark[variant=secondary]:hover,.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover{background-image:linear-gradient(var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a))}}.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark--secondary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0)}}.auro-buttonOndark[variant=secondary]:disabled,.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=tertiary],.auro-buttonOndark--tertiary{background-color:rgba(255, 255, 255, 0.03);border:1px solid transparent;color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark[variant=tertiary]:hover,.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)), var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)));border:1px solid transparent;box-shadow:none}}.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark--tertiary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15));border:1px solid transparent;box-shadow:none}.auro-buttonOndark[variant=tertiary]:disabled,.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[variant=tertiary]:disabled: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:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; | ||
export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}: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 .15s ease;position:relative;padding:0 var(--ds-size-300, 1.5rem);color:var(--ds-color-text-primary-inverse, #ffffff);cursor:pointer;background-color:var(--ds-color-ui-default-default, #0074c8);border:1px solid var(--ds-color-ui-default-default, #0074c8);border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}@media(hover: hover){.auro-button:active,.auro-button:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-hover-default, #054687), var(--ds-color-ui-hover-default, #054687));border:1px solid var(--ds-color-ui-hover-default, #054687)}}.auro-button:active{background-color:var(--ds-color-ui-active-default, #054687);border:1px solid var(--ds-color-ui-active-default, #054687);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:var(--ds-color-background-darkest, #00274a, #00274a)}.auro-button.loading.auro-buttonOndark auro-loader{color:var(--ds-color-text-primary-inverse, #ffffff)}@media screen and (min-width: 576px){.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)}.auro-button[variant=secondary],.auro-button--secondary{background-color:var(--ds-color-background-lightest, #ffffff);border:1px solid var(--ds-color-ui-default-default, #0074c8);color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=secondary]:active,.auro-button[variant=secondary]:hover:not(:disabled),.auro-button--secondary:active,.auro-button--secondary:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)), var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)));border:1px solid var(--ds-color-ui-default-default, #0074c8)}}.auro-button[variant=secondary]:active,.auro-button--secondary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border:1px solid var(--ds-color-ui-default-default, #0074c8)}.auro-button[variant=secondary]:disabled,.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)}.auro-button[variant=tertiary],.auro-button--tertiary{background-color:rgba(0, 0, 0, 0.03);border-color:transparent;color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=tertiary]:active,.auro-button[variant=tertiary]:hover:not(:disabled),.auro-button--tertiary:active,.auro-button--tertiary:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default));border-color:transparent}}.auro-button[variant=tertiary]:active,.auro-button--tertiary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border-color:transparent}.auro-button[variant=tertiary]:disabled,.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}.auro-buttonOndark{background-color:var(--ds-color-ui-default-inverse, #00cff0);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-text-primary-default)}@media(hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-ui-hover-inverse, #5de3f7), var(--ds-color-ui-hover-inverse, #5de3f7));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}}.auro-buttonOndark:active{background-color:var(--ds-color-ui-active-inverse, #5de3f7);border:1px solid var(--ds-color-ui-active-inverse, #5de3f7)}.auro-buttonOndark:disabled{cursor:not-allowed;transform:unset;color:rgba(42, 42, 42, 0.4);background-color:rgba(0, 207, 240, 0.4);border:1px solid rgba(0, 207, 240, 0.4)}.auro-buttonOndark[variant=secondary],.auro-buttonOndark--secondary{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark[variant=secondary]:hover:not(:disabled),.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover:not(:disabled){background-image:linear-gradient(var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a))}}.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark--secondary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}.auro-buttonOndark[variant=secondary]:disabled,.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=tertiary],.auro-buttonOndark--tertiary{background-color:rgba(255, 255, 255, 0.03);border:1px solid transparent;color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark[variant=tertiary]:hover,.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)), var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)));border:1px solid transparent;box-shadow:none}}.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark--tertiary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15));border:1px solid transparent;box-shadow:none}.auro-buttonOndark[variant=tertiary]:disabled,.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[variant=tertiary]:disabled: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:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
154875
950
Updatedlit@^3.1.4