ivue-material-plus/dist/unplugin-vue-components/styles/ivue-button.css

A high quality UI components Library with Vue.js

:root{--ivue-button-min-width:88px;--ivue-button-padding:0 15px;--ivue-button-height:36px;--ivue-button-radius:5px;--ivue-button-font-size:14px;--ivue-button-dense-height:32px;--ivue-button-icon-size:36px;--ivue-button-set-radius:18px;--ivue-button-disabled-color:rgba(0, 0, 0, 0.26);--ivue-button-loading-size:16px;--ivue-button-loading-right:5px;--ivue-button-raised-disabled:#f8f9fd;--ivue-button-readonly-color:rgba(0, 0, 0, 0.12);--ivue-button-mask-color:rgba(255, 255, 255, 0.5);--ivue-button-primary-shadow-2:rgba(79, 135, 255, 0.2);--ivue-button-primary-shadow-14:rgba(78, 134, 255, 0.14);--ivue-button-primary-shadow-12:rgba(78, 134, 255, 0.14);--ivue-button-light-primary-lg:linear-gradient(
    135deg,
    #71cdff 0%,
    #5ab2ff 100%
  );--ivue-button-light-primary-color:#71cdff;--ivue-button-light-primary-shadow-2:rgba(90, 178, 255, 0.2);--ivue-button-light-primary-shadow-14:rgba(90, 178, 255, 0.14);--ivue-button-light-primary-shadow-12:rgba(90, 178, 255, 0.12);--ivue-button-dark-primary-lg:linear-gradient(135deg, #3a9ff6 0%, #5b8eff 100%);--ivue-button-dark-primary-color:#3a9ff6;--ivue-button-dark-primary-shadow-2:rgba(58, 159, 246, 0.2);--ivue-button-dark-primary-shadow-14:rgba(58, 159, 246, 0.14);--ivue-button-dark-primary-shadow-12:rgba(58, 159, 246, 0.12);--ivue-button-success-lg:linear-gradient(135deg, #27e2b2 0%, #0ddece 100%);--ivue-button-success-color:#27e2b2;--ivue-button-success-shadow-2:rgba(35, 222, 174, 0.2);--ivue-button-success-shadow-14:rgba(35, 222, 174, 0.14);--ivue-button-success-shadow-12:rgba(35, 222, 174, 0.12);--ivue-button-warning-lg:linear-gradient(135deg, #ffbd3c 0%, #ffa82d 100%);--ivue-button-warning-color:#ffbd3c;--ivue-button-warning-shadow-2:rgba(255, 182, 41, 0.2);--ivue-button-warning-shadow-14:rgba(255, 182, 41, 0.14);--ivue-button-warning-shadow-12:rgba(255, 182, 41, 0.12);--ivue-button-error-lg:linear-gradient(135deg, #ff617f 0%, #ff4772 100%);--ivue-button-error-color:#ff617f;--ivue-button-error-shadow-2:rgba(255, 86, 118, 0.2);--ivue-button-error-shadow-14:rgba(255, 86, 118, 0.14);--ivue-button-error-shadow-12:rgba(255, 86, 118, 0.12)}.ivue-button,.ivue-button-clean{margin:0;padding:0;display:inline-block;position:relative;outline:0;background:0 0;border:0;border-radius:0;-webkit-transition:.3s cubic-bezier(.4,0,.2,1),color 1ms;transition:.3s cubic-bezier(.4,0,.2,1),color 1ms;font-family:inherit;line-height:normal;text-decoration:none;vertical-align:top;white-space:nowrap}.isMobile:before{opacity:0!important}.ivue-button{min-width:var(--ivue-button-min-width);height:var(--ivue-button-height);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:var(--ivue-button-radius);font-size:var(--ivue-button-font-size);font-weight:500;color:currentColor;cursor:pointer;padding:var(--ivue-button-padding)}.ivue-button-content{position:relative;z-index:2;color:currentColor;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.ivue-button-ripple{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;position:relative;z-index:10;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.ivue-button-loading{position:relative;width:var(--ivue-button-loading-size);height:var(--ivue-button-loading-size)}.ivue-button-loading--wrapper{position:relative;margin-right:var(--ivue-button-loading-right)}.ivue-button-loading .ivue-loading-mask{background:0 0}.ivue-button-loading .ivue-loading-spinner{color:var(--ivue-white-color)}.ivue-button-loading .ivue-loading-spinner .circular{width:100%;height:100%}.ivue-button:active{outline:0}.ivue-button[disabled]{color:var(--ivue-button-disabled-color);pointer-events:none}@media screen and (min-width:800px){.ivue-button:not([disabled]){cursor:pointer;-webkit-tap-highlight-color:transparent}.ivue-button:not([disabled]):active:before,.ivue-button:not([disabled]):hover:before{background-color:currentColor;opacity:.12}.ivue-button:not([disabled]):active:before{opacity:.2}}@media screen and (max-width:800px){.ivue-button:not([disabled]):hover:before{background-color:transparent;opacity:.12}}.ivue-button::-moz-focus-inner{padding:0;border:0}.ivue-button:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;opacity:0;border-radius:inherit;-webkit-transition:.3s cubic-bezier(.4,0,.2,1);transition:.3s cubic-bezier(.4,0,.2,1);will-change:background-color,opacity}.ivue-button.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){will-change:box-shadow;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.ivue-button.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.ivue-button.ivue-button--raised[disabled]{background-color:var(--ivue-button-raised-disabled);color:var(--ivue-text-color)}.ivue-button+.ivue-button{margin-left:0}.ivue-button .ivue-ripple{padding:0 8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ivue-button--selected{color:var(--ivue-white-color)!important;background:currentColor}.ivue-button--current{border:1px solid;border-color:currentColor!important}.ivue-button--outline{border:1px solid currentColor;background:0 0!important;-webkit-box-shadow:none;box-shadow:none}.ivue-button--outline .ivue-button-content{color:currentColor}.ivue-button--readonly{border-color:transparent!important;background-color:var(--ivue-button-readonly-color)!important}.ivue-button--radius{border-radius:var(--ivue-button-set-radius)}.ivue-button--mask::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;opacity:1!important;pointer-events:none;background:var(--ivue-button-mask-color)!important}.ivue-button--primary{background:var(--ivue-primary-color);color:var(--ivue-white-color)}.ivue-button--primary__color{color:var(--ivue-primary-color)}.ivue-button--primary.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){-webkit-box-shadow:0 10px 10px -5px var(--ivue-button-primary-shadow-2);box-shadow:0 10px 10px -5px var(--ivue-button-primary-shadow-2)}.ivue-button--primary.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px var(--ivue-button-primary-shadow-2),0 8px 10px 1px var(--ivue-button-primary-shadow-14),0 3px 14px 2px var(--ivue-button-primary-shadow-12);box-shadow:0 5px 5px -3px var(--ivue-button-primary-shadow-2),0 8px 10px 1px var(--ivue-button-primary-shadow-14),0 3px 14px 2px var(--ivue-button-primary-shadow-12)}.ivue-button--light-primary{background:var(--ivue-button-light-primary-lg);color:var(--ivue-white-color)}.ivue-button--light-primary__color{color:var(--ivue-button-light-primary-color)}.ivue-button--light-primary.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){-webkit-box-shadow:0 10px 10px -5px var(--ivue-button-light-primary-shadow-2);box-shadow:0 10px 10px -5px var(--ivue-button-light-primary-shadow-2)}.ivue-button--light-primary.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px var(--ivue-button-light-primary-shadow-2),0 8px 10px 1px var(--ivue-button-light-primary-shadow-14),0 3px 14px 2px var(--ivue-button-light-primary-shadow-12);box-shadow:0 5px 5px -3px var(--ivue-button-light-primary-shadow-2),0 8px 10px 1px var(--ivue-button-light-primary-shadow-14),0 3px 14px 2px var(--ivue-button-light-primary-shadow-12)}.ivue-button--dark-primary{background:var(--ivue-button-dark-primary-lg);color:var(--ivue-white-color)}.ivue-button--dark-primary__color{color:var(--ivue-button-dark-primary-color)}.ivue-button--dark-primary.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){-webkit-box-shadow:0 10px 10px -5px var(--ivue-button-dark-primary-shadow-2);box-shadow:0 10px 10px -5px var(--ivue-button-dark-primary-shadow-2)}.ivue-button--dark-primary.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px var(--ivue-button-dark-primary-shadow-2),0 8px 10px 1px var(--ivue-button-dark-primary-shadow-14),0 3px 14px 2px var(--ivue-button-dark-primary-shadow-12);box-shadow:0 5px 5px -3px var(--ivue-button-dark-primary-shadow-2),0 8px 10px 1px var(--ivue-button-dark-primary-shadow-14),0 3px 14px 2px var(--ivue-button-dark-primary-shadow-12)}.ivue-button--success{background:var(--ivue-button-success-lg);color:var(--ivue-white-color)}.ivue-button--success__color{color:var(--ivue-button-success-color)}.ivue-button--success.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){-webkit-box-shadow:0 10px 10px -5px var(--ivue-button-success-shadow-2);box-shadow:0 10px 10px -5px var(--ivue-button-success-shadow-2)}.ivue-button--success.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px var(--ivue-button-success-shadow-2),0 8px 10px 1px var(--ivue-button-success-shadow-14),0 3px 14px 2px var(--ivue-button-success-shadow-12);box-shadow:0 5px 5px -3px var(--ivue-button-success-shadow-2),0 8px 10px 1px var(--ivue-button-success-shadow-14),0 3px 14px 2px var(--ivue-button-success-shadow-12)}.ivue-button--warning{background:var(--ivue-button-warning-lg);color:var(--ivue-white-color)}.ivue-button--warning__color{color:var(--ivue-button-warning-color)}.ivue-button--warning.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){-webkit-box-shadow:0 10px 10px -5px var(--ivue-button-warning-shadow-2);box-shadow:0 10px 10px -5px var(--ivue-button-warning-shadow-2)}.ivue-button--warning.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px var(--ivue-button-warning-shadow-2),0 8px 10px 1px var(--ivue-button-warning-shadow-14),0 3px 14px 2px var(--ivue-button-warning-shadow-12);box-shadow:0 5px 5px -3px var(--ivue-button-warning-shadow-2),0 8px 10px 1px var(--ivue-button-warning-shadow-14),0 3px 14px 2px var(--ivue-button-warning-shadow-12)}.ivue-button--error{background:var(--ivue-button-error-lg);color:var(--ivue-white-color)}.ivue-button--error__color{color:var(--ivue-button-error-color)}.ivue-button--error.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]){-webkit-box-shadow:0 10px 10px -5px var(--ivue-button-error-shadow-2);box-shadow:0 10px 10px -5px var(--ivue-button-error-shadow-2)}.ivue-button--error.ivue-button--raised:not(.ivue-button--depressed):not(.ivue-button--flat):not([disabled]):not(.ivue-button--mask):active{-webkit-box-shadow:0 5px 5px -3px var(--ivue-button-error-shadow-2),0 8px 10px 1px var(--ivue-button-error-shadow-14),0 3px 14px 2px var(--ivue-button-error-shadow-12);box-shadow:0 5px 5px -3px var(--ivue-button-error-shadow-2),0 8px 10px 1px var(--ivue-button-error-shadow-14),0 3px 14px 2px var(--ivue-button-error-shadow-12)}.ivue-button-spaced .ivue-ripple{padding:0 16px}.ivue-button--icon{width:var(--ivue-button-icon-size);min-width:var(--ivue-button-icon-size);height:var(--ivue-button-icon-size);margin:0 6px;border-radius:50%;padding:0}.ivue-button--icon::before{border-radius:50%}.ivue-button--icon .ivue-ripple{border-radius:50%}.ivue-button--icon .ivue-ripple-enter-active{-webkit-transition-duration:1.2s;transition-duration:1.2s}.ivue-button--icon .ivue-ripple-wave{top:0!important;right:0!important;bottom:0!important;left:0!important}.ivue-button--icon .ivue-icon{font-size:var(--ivue-button-font-size)}