@nycds/button 0.4.0

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.
@@ -0,0 +1 @@
1
+ .cmp-button,.cmp-button:link,.cmp-button:visited,.cmp-form-button,.nyc-button,.nyc-button:link,.nyc-button:visited{--_background:var(--nyc-cmp-button-background,#103fef);--_background-hover:var(--nyc-cmp-button-background-hover,#050560);--_border-color:var(--nyc-cmp-button-border-color,#103fef);--_border-color-hover:var(--nyc-cmp-button-border-color-hover,#050560);--_border-width:var(--nyc-cmp-button-border-width,2px);--_border-radius:var(--nyc-cmp-button-border-radius,0);--_color:var(--nyc-cmp-button-color,#fff);--_color-hover:var(--nyc-cmp-button-color-hover,#fff);--_font-weight:var(--nyc-cmp-button-font-weight,600);--_font-size:var(--nyc-cmp-button-font-size,1rem);--_shadow:var(--nyc-cmp-button-shadow,none);--_padding-block:var(--nyc-cmp-button-padding-block,0.75rem);--_padding-inline:var(--nyc-cmp-button-padding-inline,0.75rem);--_outline-color:var(--nyc-cmp-button-outline-color,inherit);--_gap:var(--nyc-cmp-button-gap,0.5rem);--_size-icon:var(--_font-size);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--_background);border-color:var(--_border-color);border-radius:var(--_border-radius);border-style:solid;border-width:var(--_border-width);box-shadow:var(--_shadow);color:var(--_color);cursor:pointer;display:inline-flex;font-size:var(--_font-size);font-weight:var(--_font-weight);gap:calc(var(--_gap)*.8);justify-content:center;line-height:1.2;padding:var(--_padding-block) var(--_padding-inline);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:all .3s ease}.cmp-button:link:hover,.cmp-button:not(.does-not-exist):hover,.cmp-button:visited:hover,.cmp-form-button:not(.does-not-exist):hover,.nyc-button:link:hover,.nyc-button:not(.does-not-exist):hover,.nyc-button:visited:hover{background:var(--_background-hover);border-color:var(--_border-color-hover);color:var(--_color-hover);-webkit-text-decoration:none;text-decoration:none}.nyc-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-form-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:link:disabled,.cmp-button:not(.does-not-exist):disabled,.cmp-button:visited:disabled,.cmp-button[disabled]:link,.cmp-button[disabled]:not(.does-not-exist),.cmp-button[disabled]:visited,.cmp-form-button:not(.does-not-exist):disabled,.cmp-form-button[disabled]:not(.does-not-exist),.disabled.cmp-button:link,.disabled.cmp-button:not(.does-not-exist),.disabled.cmp-button:visited,.disabled.cmp-form-button:not(.does-not-exist),.disabled.nyc-button:link,.disabled.nyc-button:not(.does-not-exist),.disabled.nyc-button:visited,.nyc-button:link:disabled,.nyc-button:not(.does-not-exist):disabled,.nyc-button:visited:disabled,.nyc-button[disabled]:link,.nyc-button[disabled]:not(.does-not-exist),.nyc-button[disabled]:visited{--nyc-cmp-button-color:var(--nyc-sys-color-on-disabled)!important;--nyc-cmp-button-background:var(--nyc-sys-color-disabled)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-on-disabled)!important}.cmp-button:link *,.cmp-button:not(.does-not-exist) *,.cmp-button:visited *,.cmp-form-button:not(.does-not-exist) *,.nyc-button:link *,.nyc-button:not(.does-not-exist) *,.nyc-button:visited *{pointer-events:none}.active.cmp-button:link,.active.cmp-button:not(.does-not-exist),.active.cmp-button:visited,.active.cmp-form-button:not(.does-not-exist),.active.nyc-button:link,.active.nyc-button:not(.does-not-exist),.active.nyc-button:visited{background:var(--_color-hover);color:#fff}.size--xs.cmp-button:link,.size--xs.cmp-button:not(.does-not-exist),.size--xs.cmp-button:visited,.size--xs.cmp-form-button:not(.does-not-exist),.size--xs.nyc-button:link,.size--xs.nyc-button:not(.does-not-exist),.size--xs.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.68);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.58);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.4)}.size--s.cmp-button:link,.size--s.cmp-button:not(.does-not-exist),.size--s.cmp-button:visited,.size--s.cmp-form-button:not(.does-not-exist),.size--s.nyc-button:link,.size--s.nyc-button:not(.does-not-exist),.size--s.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.84);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.66);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.54)}.size--nm.cmp-button:link,.size--nm.cmp-button:not(.does-not-exist),.size--nm.cmp-button:visited,.size--nm.cmp-form-button:not(.does-not-exist),.size--nm.nyc-button:link,.size--nm.nyc-button:not(.does-not-exist),.size--nm.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.92);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.8);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.62)}.cmp-button:link .rim-color--blue,.cmp-button:not(.does-not-exist) .rim-color--blue,.cmp-button:visited .rim-color--blue,.cmp-form-button:not(.does-not-exist) .rim-color--blue,.nyc-button:link .rim-color--blue,.nyc-button:not(.does-not-exist) .rim-color--blue,.nyc-button:visited .rim-color--blue,.rim-color--blue.cmp-button:link,.rim-color--blue.cmp-button:not(.does-not-exist),.rim-color--blue.cmp-button:visited,.rim-color--blue.cmp-form-button:not(.does-not-exist),.rim-color--blue.nyc-button:link,.rim-color--blue.nyc-button:not(.does-not-exist),.rim-color--blue.nyc-button:visited{--_border-color:var(--nyc-sys-color-primary)}.cmp-button:link .rim-color--blue:hover,.cmp-button:not(.does-not-exist) .rim-color--blue:hover,.cmp-button:visited .rim-color--blue:hover,.cmp-form-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:link .rim-color--blue:hover,.nyc-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:visited .rim-color--blue:hover,.rim-color--blue.cmp-button:link:hover,.rim-color--blue.cmp-button:not(.does-not-exist):hover,.rim-color--blue.cmp-button:visited:hover,.rim-color--blue.cmp-form-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:link:hover,.rim-color--blue.nyc-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:visited:hover{--_border-color-hover:var(--nyc-sys-color-primary)}.cmp-button:link .shape--square,.cmp-button:not(.does-not-exist) .shape--square,.cmp-button:visited .shape--square,.cmp-form-button:not(.does-not-exist) .shape--square,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--square,.shape--square.cmp-button:link,.shape--square.cmp-button:not(.does-not-exist),.shape--square.cmp-button:visited,.shape--square.cmp-form-button:not(.does-not-exist),.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{border-radius:0}.cmp-button:link .shape--rounded,.cmp-button:not(.does-not-exist) .shape--rounded,.cmp-button:visited .shape--rounded,.cmp-form-button:not(.does-not-exist) .shape--rounded,.nyc-button:link .shape--rounded,.nyc-button:not(.does-not-exist) .shape--rounded,.nyc-button:visited .shape--rounded,.shape--rounded.cmp-button:link,.shape--rounded.cmp-button:not(.does-not-exist),.shape--rounded.cmp-button:visited,.shape--rounded.cmp-form-button:not(.does-not-exist),.shape--rounded.nyc-button:link,.shape--rounded.nyc-button:not(.does-not-exist),.shape--rounded.nyc-button:visited{border-radius:calc(var(--_border-radius)*.15)}.cmp-button:link .shape--circle,.cmp-button:not(.does-not-exist) .shape--circle,.cmp-button:visited .shape--circle,.cmp-form-button:not(.does-not-exist) .shape--circle,.nyc-button:link .shape--circle,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:visited .shape--circle,.shape--circle.cmp-button:link,.shape--circle.cmp-button:not(.does-not-exist),.shape--circle.cmp-button:visited,.shape--circle.cmp-form-button:not(.does-not-exist),.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited{border-radius:50%}.cmp-button:link .shape--circle,.cmp-button:link .shape--square,.cmp-button:not(.does-not-exist) .shape--circle,.cmp-button:not(.does-not-exist) .shape--square,.cmp-button:visited .shape--circle,.cmp-button:visited .shape--square,.cmp-form-button:not(.does-not-exist) .shape--circle,.cmp-form-button:not(.does-not-exist) .shape--square,.nyc-button:link .shape--circle,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--circle,.nyc-button:visited .shape--square,.shape--circle.cmp-button:link,.shape--circle.cmp-button:not(.does-not-exist),.shape--circle.cmp-button:visited,.shape--circle.cmp-form-button:not(.does-not-exist),.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited,.shape--square.cmp-button:link,.shape--square.cmp-button:not(.does-not-exist),.shape--square.cmp-button:visited,.shape--square.cmp-form-button:not(.does-not-exist),.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{height:calc(var(--_padding-block)*2 + var(--_font-size)*1.15);width:calc(var(--_padding-block)*2 + var(--_font-size)*1.15)}.has-count.cmp-button:link,.has-count.cmp-button:not(.does-not-exist),.has-count.cmp-button:visited,.has-count.cmp-form-button:not(.does-not-exist),.has-count.nyc-button:link,.has-count.nyc-button:not(.does-not-exist),.has-count.nyc-button:visited{--nyc-cmp-button-background:var(--nyc-ref-color-blue-90)!important;--nyc-cmp-button-color:var(--nyc-sys-color-primary)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-primary)!important}.cmp-button:link .icon,.cmp-button:not(.does-not-exist) .icon,.cmp-button:visited .icon,.cmp-form-button:not(.does-not-exist) .icon,.nyc-button:link .icon,.nyc-button:not(.does-not-exist) .icon,.nyc-button:visited .icon{align-items:center;display:flex;font-size:calc(var(--_size-icon)*.75);font-style:normal;font-weight:300;height:var(--_size-icon);justify-content:center;pointer-events:none;position:relative;text-align:center;width:var(--_size-icon);z-index:20}.cmp-button:link .icon svg,.cmp-button:not(.does-not-exist) .icon svg,.cmp-button:visited .icon svg,.cmp-form-button:not(.does-not-exist) .icon svg,.nyc-button:link .icon svg,.nyc-button:not(.does-not-exist) .icon svg,.nyc-button:visited .icon svg{fill:var(--nyc-cmp-button-color)}.cmp-button:link .icon.i--count,.cmp-button:not(.does-not-exist) .icon.i--count,.cmp-button:visited .icon.i--count,.cmp-form-button:not(.does-not-exist) .icon.i--count,.nyc-button:link .icon.i--count,.nyc-button:not(.does-not-exist) .icon.i--count,.nyc-button:visited .icon.i--count{background-color:var(--nyc-cmp-button-color);color:#fff;font-weight:600;height:22px;line-height:0;width:22px}.cmp-button--primary .cmp-button,.cmp-form-button[type=SUBMIT],.nyc-button[data-variant=primary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color:var(--nyc-sys-color-primary);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-primary-hover)}.cmp-button--secondary .cmp-button,.cmp-form-button[type=RESET],.nyc-button[data-variant=secondary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}@media (max-width:767.98px){.cmp-button--primary .cmp-button:first-child,.cmp-button--secondary .cmp-button:first-child{width:100%}}.cmp-button--filter,.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.25rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-medium);--nyc-cmp-button-background:var(--nyc-sys-color-surface-base);--nyc-cmp-button-background-hover:var(--nyc-sys-color-surface-low);--nyc-cmp-button-color:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-font-weight:700;line-height:1.5}.cmp-button--filter[data-selected]:not(.does-not-exist),.nyc-button[data-selected][data-variant=filter]{--nyc-cmp-button-background:var(--nyc-sys-color-surface-input-highlight);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-selected);--nyc-cmp-button-color:var(--nyc-sys-color-primary)}@media (min-width:768px){.cmp-button--filter,.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.5rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base)}}.cmp-button--icon .cmp-button,.nyc-button[data-variant=icon]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-padding-inline:var(--nyc-cmp-button-padding-block);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-primary);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.cmp-button--icon .cmp-button:hover,.nyc-button[data-variant=icon]:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.2)}.cmp-button--sm .cmp-button,.cmp-button--sm.cmp-button{--nyc-cmp-button-border-radius:var(--nyc-sys-radius-lg);--nyc-cmp-button-padding-block:var(--nyc-sys-space-2xs);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-2xs);--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600}.cmp-button.format--link{--nyc-cmp-button-color:var(--nyc-sys-color-primary);--nyc-cmp-button-background:transparent;--_padding-inline:5px;border:none;-webkit-text-decoration:underline;text-decoration:underline}.cmp-button.format--link:hover{--nyc-cmp-button-color:var(--nyc-sys-color-link-hover)}.cmp-button.format--link.has-icon{--_padding-block:0.75rem;--_padding-inline:0.75rem}.flex-col:has(.button) .button{display:flex}.flex-col:has(.button) .cmp-button{flex:1}@media (max-width:767.98px){.cmp-button--full-width .cmp-button:first-child,.cmp-button--full-width.cmp-button:first-child{width:100%}}.nyc-back-to-top{display:contents}nyc-back-to-top{display:block;margin:var(--nyc-sys-space-3xl) var(--nyc-sys-space-fluid-base-5xl) var(--nyc-sys-space-5xl);transition:opacity .3s ease}@media (min-width:768px){nyc-back-to-top{bottom:var(--nyc-sys-space-5xl);display:inline-block;left:var(--nyc-sys-space-fluid-base-5xl);margin:initial;position:sticky;z-index:150}nyc-back-to-top.enabled{opacity:1;pointer-events:all;visibility:visible}nyc-back-to-top:not(.enabled){opacity:0;pointer-events:none;visibility:hidden}}.button--back-to-top .cmp-button{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color:var(--nyc-cmp-button-color);--nyc-cmp-button-border-width:2px;--nyc-cmp-button-gap:0;--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600;--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);width:100%}@media (min-width:768px){.button--back-to-top .cmp-button{--nyc-cmp-button-border-width:3px;--nyc-cmp-button-font-size:var(--nyc-sys-space-base);--nyc-cmp-button-padding-block:var(--nyc-sys-space-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base);width:auto}}.button--back-to-top .cmp-button:before{--icon-size:calc(1em - var(--nyc-cmp-button-border-width)*2);--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath stroke='currentColor' d='M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");background-color:currentcolor;content:"";display:inline-block;font-size:var(--nyc-sys-space-lg);height:var(--icon-size);-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;width:var(--icon-size)}@media (min-width:768px){.button--back-to-top .cmp-button:before{font-size:var(--nyc-sys-space-2xl)}}.button--back-to-top .cmp-button span{--space-btwn:var(--nyc-sys-space-base);line-height:1.1;opacity:1;padding-left:var(--space-btwn);text-align:left;transition:padding .3s ease,max-width .3s ease,opacity .3s ease .3s}@media (min-width:768px){.button--back-to-top .cmp-button span{max-height:2.2em;max-width:calc(3.5em + var(--space-btwn));overflow:hidden;padding-left:var(--space-btwn)}}.button--back-to-top .cmp-button:hover{border-color:var(--nyc-sys-color-primary);color:var(--nyc-sys-color-primary)}.button--back-to-top .cmp-button:not(:hover) span{transition:padding .3s ease .2s,max-width .3s ease .2s,opacity .3s ease}@media (min-width:768px){.button--back-to-top .cmp-button:not(:hover) span{max-width:0;opacity:0;padding-left:0;visibility:hidden}}