various-ui/styles/button.css

This is a test version of the Vue 3 component library

.ui-button{--uioption-button-size:var(--uisize-size);--uioption-button-width:auto;--uioption-button-color:var(--uicolor-main-color);--uioption-button-radius:var(--uisize-radius);--uioption-button-spacing-x:var(--uisize-spacing-x);--uioption-button-font-color:var(--uicolor-font-6);--uioption-button-active-color:var(--uicolor-main-active-color);--uioption-button-disabled-color:var(--uicolor-main-color-05);--uioption-button-readonly-color:var(--uicolor-font-4-02)}.ui-button{display:inline-block;position:relative;border-radius:var(--uioption-button-radius);vertical-align:top}.ui-button .ui-button-main{color:var(--uioption-button-font-color);cursor:pointer;border:1px solid var(--uioption-button-color);height:var(--uioption-button-size);display:flex;padding:0 var(--uioption-button-spacing-x);font-size:var(--uisize-font-size);min-width:var(--uioption-button-width);transition:all .2s;align-items:center;justify-content:center;border-radius:var(--uioption-button-radius);background-color:var(--uioption-button-color)}.ui-button .ui-button-main:hover{background-color:var(--uioption-button-active-color)}.ui-button .ui-mask{font-size:24px}.ui-button.ui-button-simple .ui-button-main{background-color:#fff;color:var(--uioption-button-color)}.ui-button.ui-button-simple .ui-button-main:focus,.ui-button.ui-button-simple .ui-button-main:hover{background-color:var(--uioption-button-color);color:var(--uioption-button-font-color)}.ui-button.ui-middle{--uioption-button-width:128px}.ui-button.ui-large{--uioption-button-width:152px}.ui-button.ui-error-type{--uioption-button-color:var(--uicolor-error);--uioption-button-active-color:var(--uicolor-error-active);--uioption-button-disabled-color:var(--uicolor-error-05)}.ui-button.ui-warning-type{--uioption-button-color:var(--uicolor-warning);--uioption-button-active-color:var(--uicolor-warning-active);--uioption-button-disabled-color:var(--uicolor-warning-05)}.ui-button.ui-success-type{--uioption-button-color:var(--uicolor-success);--uioption-button-active-color:var(--uicolor-success-active);--uioption-button-disabled-color:var(--uicolor-success-05)}.ui-button.ui-disabled-status{--uioption-button-color:var(--uioption-button-disabled-color);--uioption-button-active-color:var(--uioption-button-disabled-color)}.ui-button.ui-disabled-status .ui-button-main{cursor:auto}.ui-button.ui-readonly-status{--uioption-button-color:var(--uioption-button-readonly-color);--uioption-button-font-color:var(--uicolor-font-3);--uioption-button-active-color:var(--uioption-button-readonly-color)}.ui-button.ui-readonly-status .ui-button-main{cursor:auto}.ui-button.ui-button-simple.ui-disabled-status{--uioption-button-color:var(--uioption-button-readonly-color);--uioption-button-font-color:var(--uicolor-font-3)}.ui-button.ui-button-simple.ui-disabled-status .ui-button-main,.ui-button.ui-button-simple.ui-readonly-status .ui-button-main{background-color:var(--uioption-button-color);border-color:var(--uioption-button-color);color:var(--uioption-button-font-color)}