fine-true/lib/button/index.css

A small and beautiful Vue3 version of the UI Library

@keyframes button-shadow-opacity{0%{opacity:1}to{opacity:0}}@keyframes button-shadow-default{0%{box-shadow:0 0 .5px 0 var(--fine-button-type-primary-color)}to{box-shadow:0 0 .5px 5.5px var(--fine-button-type-primary-color)}}@keyframes button-shadow-primary{0%{box-shadow:0 0 .5px 0 var(--fine-button-type-primary-color)}to{box-shadow:0 0 .5px 5.5px var(--fine-button-type-primary-color)}}@keyframes button-shadow-success{0%{box-shadow:0 0 .5px 0 var(--fine-button-type-success-color)}to{box-shadow:0 0 .5px 5.5px var(--fine-button-type-success-color)}}@keyframes button-shadow-info{0%{box-shadow:0 0 .5px 0 var(--fine-button-type-info-color)}to{box-shadow:0 0 .5px 5.5px var(--fine-button-type-info-color)}}@keyframes button-shadow-warning{0%{box-shadow:0 0 .5px 0 var(--fine-button-type-warning-color)}to{box-shadow:0 0 .5px 5.5px var(--fine-button-type-warning-color)}}@keyframes button-shadow-danger{0%{box-shadow:0 0 .5px 0 var(--fine-button-type-danger-color)}to{box-shadow:0 0 .5px 5.5px var(--fine-button-type-danger-color)}}.fine-button{position:relative;display:inline-block;box-sizing:border-box;margin:0;padding:0;text-align:center;border-radius:var(--fine-button-border-radius);-webkit-appearance:none;-webkit-text-size-adjust:100%;cursor:pointer;color:var(--fine-white);white-space:nowrap}.fine-button a{color:inherit}.fine-button>:not([data-shadow]){position:relative}.fine-button-type-default{color:var(--fine-button-type-default-color);background-color:var(--fine-button-type-default-background-color);border:var(--fine-button-border-width) solid var(--fine-button-type-default-border-color)}.fine-button-type-default [data-shadow=active]{animation-name:button-shadow-default,button-shadow-opacity}.fine-button-type-primary{background-color:var(--fine-button-type-primary-background-color);border:var(--fine-button-border-width) solid var(--fine-button-type-primary-border-color)}.fine-button-type-primary [data-shadow=active]{animation-name:button-shadow-primary,button-shadow-opacity}.fine-button-type-success{background-color:var(--fine-button-type-success-background-color);border:var(--fine-button-border-width) solid var(--fine-button-type-success-border-color)}.fine-button-type-success [data-shadow=active]{animation-name:button-shadow-success,button-shadow-opacity}.fine-button-type-info{background-color:var(--fine-button-type-info-background-color);border:var(--fine-button-border-width) solid var(--fine-button-type-info-border-color)}.fine-button-type-info [data-shadow=active]{animation-name:button-shadow-info,button-shadow-opacity}.fine-button-type-danger{background-color:var(--fine-button-type-danger-background-color);border:var(--fine-button-border-width) solid var(--fine-button-type-danger-border-color)}.fine-button-type-danger [data-shadow=active]{animation-name:button-shadow-danger,button-shadow-opacity}.fine-button-type-warning{background-color:var(--fine-button-type-warning-background-color);border:var(--fine-button-border-width) solid var(--fine-button-type-warning-border-color)}.fine-button-type-warning [data-shadow=active]{animation-name:button-shadow-warning,button-shadow-opacity}.fine-button-size-block{width:var(--fine-button-size-block-width);height:var(--fine-button-size-block-height);padding:var(--fine-button-padding-size-block-y) var(--fine-button-padding-size-block-x);line-height:var(--fine-button-size-block-line-height)}.fine-button-size-block,.fine-button-size-block .fine-icon{font-size:var(--fine-button-size-block-font-size)}.fine-button-size-large{min-width:var(--fine-button-size-large-min-width);height:var(--fine-button-size-large-height);padding:var(--fine-button-padding-size-large-y) var(--fine-button-padding-size-large-x);line-height:var(--fine-button-size-large-line-height)}.fine-button-size-large,.fine-button-size-large .fine-icon{font-size:var(--fine-button-size-large-font-size)}.fine-button-size-default{height:var(--fine-button-size-default-height);min-width:var(--fine-button-size-default-min-width);padding:var(--fine-button-padding-size-default-y) var(--fine-button-padding-size-default-x);line-height:var(--fine-button-size-default-line-height)}.fine-button-size-default,.fine-button-size-default .fine-icon{font-size:var(--fine-button-size-default-font-size)}.fine-button-size-small{min-width:var(--fine-button-size-small-min-width);height:var(--fine-button-size-small-height);padding:var(--fine-button-padding-size-small-y) var(--fine-button-padding-size-small-x);line-height:var(--fine-button-size-small-line-height)}.fine-button-size-small,.fine-button-size-small .fine-icon{font-size:var(--fine-button-size-small-font-size)}.fine-button-disabled{opacity:var(--fine-button-disabled-opacity);cursor:not-allowed}.fine-button-disabled .fine-icon{cursor:not-allowed}.fine-button-plain{background-color:var(--fine-button-plain-background-color)}.fine-button-plain.fine-button-type-primary{color:var(--fine-button-type-primary-background-color)}.fine-button-plain.fine-button-type-success{color:var(--fine-button-type-success-background-color)}.fine-button-plain.fine-button-type-info{color:var(--fine-button-type-info-background-color)}.fine-button-plain.fine-button-type-danger{color:var(--fine-button-type-danger-background-color)}.fine-button-plain.fine-button-type-warning{color:var(--fine-button-type-warning-background-color)}.fine-button-hairline{border-width:0}.fine-button-hairline::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border-width:1px;border-style:solid;border-color:inherit;transform:scale(.5);border-radius:calc(var(--fine-button-border-radius)*2)}.fine-button-hairline.fine-button-round::after{border-radius:var(--fine-button-round-border-radius)}.fine-button-hairline.fine-button-square::after{border-radius:0}.fine-button-dashed{border-style:dashed}.fine-button-round{border-radius:var(--fine-button-round-border-radius)}.fine-button-square{border-radius:0}