@zeit-ui/vue/lib/button.css

A popular UI framework for Vue

.expand-enter-active,.expand-leave-active{transition:height .2s ease;overflow:hidden}.expand-enter,.expand-leave-to{height:0}.button-drip_drip_-12JB{position:absolute;transform:translate(-50%,-50%);top:-100%;left:-100%;width:20px;height:20px;border-radius:50%;background-color:#ddd;transition-property:opacity,transform;transition-duration:.3s;transition-timing-function:ease-in}.zi-btn{-webkit-box-align:center;-webkit-align-items:center;box-sizing:border-box;display:inline-block;padding:0 1.375rem;border-radius:5px;font-weight:400;font-size:.875rem;cursor:pointer;user-select:none;outline:none;justify-content:center;text-transform:capitalize;text-align:center;height:2.5rem;line-height:2.5rem;width:auto;min-width:12.5rem;white-space:nowrap;transition:border .2s,background .2s,color .2s ease-out;position:relative;overflow:hidden;background:var(--geist-background);border:1px solid var(--accents-2);color:var(--accents-5)}.zi-btn:not(.loading):not(.shadow):hover{color:var(--geist-foreground);background:var(--geist-background);border-color:var(--geist-foreground)}.zi-btn.mini{height:1.375rem;line-height:1.375rem;padding:0 1.875rem;width:auto;min-width:6.25rem;font-size:.75rem}.zi-btn.small{height:1.875rem;line-height:1.875rem;padding:0 1.25rem;width:auto;min-width:9.375rem}.zi-btn.small .zi-btn-icon svg{width:.875rem;height:.875rem}.zi-btn.small .zi-btn-icon.default{left:1.25rem}.zi-btn.small .zi-btn-icon.right{right:1.25rem}.zi-btn.big,.zi-btn.huge{height:2.625rem;line-height:2.625rem;padding:0 1.875rem;width:auto;min-width:15.625rem;font-size:1rem}.zi-btn.big .zi-btn-icon svg,.zi-btn.huge .zi-btn-icon svg{width:1.25rem;height:1.25rem}.zi-btn.big .zi-btn-icon.default,.zi-btn.huge .zi-btn-icon.default{left:1.875rem}.zi-btn.big .zi-btn-icon.right,.zi-btn.huge .zi-btn-icon.right{right:1.875rem}.zi-btn.primary{background-color:var(--geist-foreground);border:1px solid var(--geist-foreground);color:var(--geist-background)}.zi-btn.primary:not(.loading):not(.shadow):hover{background:var(--geist-background);color:var(--geist-foreground);border:1px solid var(--geist-foreground)}.zi-btn.warning{border-color:var(--geist-warning);background-color:var(--geist-warning);color:#fff}.zi-btn.warning:not(.loading):not(.shadow):hover{color:var(--geist-warning);background:var(--geist-background);border-color:var(--geist-warning)}.zi-btn.danger,.zi-btn.error{border-color:var(--geist-error);background-color:var(--geist-error);color:#fff}.zi-btn.danger:not(.loading):not(.shadow):hover,.zi-btn.error:not(.loading):not(.shadow):hover{color:var(--geist-error);background:var(--geist-background);border-color:var(--geist-error)}.zi-btn.success{border-color:var(--geist-success);background-color:var(--geist-success);color:#fff}.zi-btn.success:not(.loading):not(.shadow):hover{color:var(--geist-success);background:var(--geist-background);border-color:var(--geist-success)}.zi-btn.abort,.zi-btn.abort:not(.loading):not(.shadow):hover{background-color:transparent;border-color:transparent;color:var(--accents-5)}.zi-btn.shadow{box-shadow:0 3px 10px rgba(0,0,0,.12)}.zi-btn.shadow:not(.loading):hover{box-shadow:0 7px 20px rgba(0,0,0,.16);transform:translateY(-1px)}.zi-btn.disabled{pointer-events:none}.zi-btn.disabled,.zi-btn.disabled:hover{background:var(--accents-1)!important;border-color:var(--accents-2)!important;color:#ccc!important;cursor:not-allowed!important}.zi-btn.disabled .zi-btn-icon svg{opacity:.5}.zi-btn.loading{cursor:default;pointer-events:none}.zi-btn.loading:hover{color:transparent}.zi-loading-shim{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--accents-1)}.zi-loading-shim i{width:4px;height:4px;border-radius:50%;background-color:var(--accents-6);margin:0 1px;display:inline-block;animation:zi-loading-blink 1.4s infinite both}.zi-loading-shim i:nth-child(2){animation-delay:.2s}.zi-loading-shim i:nth-child(3){animation-delay:.4s}.zi-btn .prefix,.zi-btn .suffix{position:absolute;top:50%;transform:translateY(-50%);font-size:1.5625rem;pointer-events:none}.zi-btn.circular{border-radius:6.25rem;box-shadow:0 4px 4px rgba(0,0,0,.06);text-transform:uppercase;background-color:var(--geist-background);height:1.75rem;line-height:1.75rem;border:none}.zi-btn.circular:not(.loading):not(.shadow):hover{border:none;color:var(--geist-foreground);box-shadow:0 5px 9px rgba(0,0,0,.08)}.zi-btn.auto{min-width:min-content;padding:0 1.25rem}.zi-btn.auto .mini{padding:0 .625rem}.zi-btn.auto .small{padding:0 .9375rem}.zi-btn.auto .big,.zi-btn.auto .huge{padding:0 1.5625rem}.zi-btn.ghost.primary{background-color:var(--geist-background);border:1px solid var(--geist-foreground);color:var(--geist-foreground)}.zi-btn.ghost.primary:not(.loading):not(.shadow):hover{background:var(--geist-foreground);color:var(--geist-background);border:1px solid var(--geist-background)}.zi-btn.ghost.warning{border-color:var(--geist-warning);background-color:var(--geist-background);color:var(--geist-warning)}.zi-btn.ghost.warning:not(.loading):not(.shadow):hover{color:#fff;background:var(--geist-warning);border-color:var(--geist-background)}.zi-btn.ghost.danger,.zi-btn.ghost.error{border-color:var(--geist-error);background-color:var(--geist-background);color:var(--geist-error)}.zi-btn.ghost.danger:not(.loading):not(.shadow):hover,.zi-btn.ghost.error:not(.loading):not(.shadow):hover{color:#fff;background:var(--geist-error);border-color:var(--geist-background)}.zi-btn.ghost.success{border-color:var(--geist-success);background-color:var(--geist-background);color:var(--geist-success)}.zi-btn.ghost.success:not(.loading):not(.shadow):hover{color:#fff;background:var(--geist-success);border-color:var(--geist-background)}.zi-dark-theme .zi-btn:not(.warning):not(.danger):not(.error):not(.success):not(.abort):not(.ghost){background:#000;border:1px solid #eaeaea;color:#666}.zi-dark-theme .zi-btn:not(.warning):not(.danger):not(.error):not(.success):not(.abort):not(.ghost):not(.loading):not(.shadow):hover{color:var(--geist-background);background:#000;border-color:#000}.zi-dark-theme .zi-btn:not(.warning):not(.danger):not(.error):not(.success):not(.abort):not(.ghost).primary{background-color:#fff;border:1px solid #fff;color:#000}.zi-dark-theme .zi-btn:not(.warning):not(.danger):not(.error):not(.success):not(.abort):not(.ghost).primary:not(.loading):not(.shadow):hover{background:#000;color:#fff;border:1px solid #fff}.zi-dark-theme .zi-btn:not(.ghost).abort:not(.loading):not(.shadow):hover,.zi-dark-theme .zi-btn:not(.ghost).danger:not(.loading):not(.shadow):hover,.zi-dark-theme .zi-btn:not(.ghost).error:not(.loading):not(.shadow):hover,.zi-dark-theme .zi-btn:not(.ghost).success:not(.loading):not(.shadow):hover,.zi-dark-theme .zi-btn:not(.ghost).warning:not(.loading):not(.shadow):hover{background:#000}.zi-dark-theme .zi-btn:not(.ghost).abort{color:#888}.zi-dark-theme .zi-btn:not(.ghost).shadow{box-shadow:0 3px 10px rgba(0,0,0,.12)}.zi-dark-theme .zi-btn:not(.ghost).shadow:not(.loading):hover{box-shadow:0 7px 20px rgba(0,0,0,.16);transform:translateY(-1px)}.zi-dark-theme .zi-btn:not(.ghost).disabled{pointer-events:none}.zi-dark-theme .zi-btn:not(.ghost).disabled,.zi-dark-theme .zi-btn:not(.ghost).disabled:hover{background:#111!important;border-color:#333!important;color:#666!important;cursor:not-allowed!important}.zi-dark-theme .zi-btn:not(.ghost).loading{border:1px solid #333!important;background-color:#000;pointer-events:none}.zi-dark-theme .zi-btn:not(.ghost).loading .zi-loading-shim{background-color:#000}.zi-btn-icon{position:absolute;display:flex;align-items:center;top:0;bottom:0}.zi-btn-icon svg{height:1.0625rem;width:1.0625rem}.zi-btn-icon.default{left:1.375rem}.zi-btn-icon.right{right:1.375rem}.tab-selected{outline:2px dashed -webkit-focus-ring-color;outline-offset:2px}@-moz-keyframes zi-loading-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}@-webkit-keyframes zi-loading-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}@-o-keyframes zi-loading-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}@keyframes zi-loading-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}