song-ui-u/theme/button.css

vue3 + js的PC前端组件库

@charset "UTF-8";:root{--x-button-padding-small:8px;--x-button-padding-default:14px;--x-button-padding-large:16px;--x-button-space-small:4px;--x-button-space-default:6px;--x-button-space-large:6px}.x-button{--x-button-border-color:var(--x-border-color-default);--x-button-text-color:var(--x-text-color-primary);--x-button-bg-color:var(--x-color-white);--x-button-is-link-color:var(--x-text-color-primary);--x-button-is-text-color:var(--x-text-color-primary);--x-button-is-text-bg-color:var(--x-color-white);--x-button-hover-text-color:var(--x-color-primary);--x-button-hover-bg-color:var(--x-color-primary-light-9);--x-button-hover-border-color:var(--x-color-primary-light-7);--x-button-hover-is-link-color:var(--x-text-color-secondary);--x-button-hover-is-text-color:var(--x-text-color-primary);--x-button-hover-is-text-bg-color:var(--x-text-color-light-8);--x-button-disabled-text-color:var(--x-text-color-disabled);--x-button-disabled-bg-color:var(--x-color-disabled-bg);--x-button-disabled-border-color:var(--x-border-color-disabled);--x-button-disabled-is-link-color:var(--x-text-color-disabled);--x-button-disabled-is-text-color:var(--x-text-color-disabled);--x-button-disabled-is-text-bg-color:var(--x-color-white);--x-button-size:var(--x-component-size-default);--x-button-font-size:var(--x-font-size-default);--x-button-radius:var(--x-component-round-default);--x-button-padding:var(--x-button-padding-default);--x-button-space:var(--x-button-space-default)}.x-button{display:inline-flex;align-items:center;justify-content:center;height:var(--x-button-size);min-width:80px;padding:0 var(--x-button-padding);background-color:var(--x-button-bg-color);border-radius:var(--x-button-radius);border:2px solid var(--x-button-border-color);box-sizing:border-box;line-height:1;color:var(--x-button-text-color);text-align:center;font-size:var(--x-button-font-size);white-space:nowrap;transition:var(--x-transition);outline:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;gap:0 var(--x-button-space)}.x-button span{line-height:1;display:inline-flex;align-items:center;gap:0 var(--x-button-space)}.x-button:hover{color:var(--x-button-hover-text-color);background-color:var(--x-button-hover-bg-color);border-color:var(--x-button-hover-border-color)}.x-button.is-disabled,.x-button.is-loading{color:var(--x-button-disabled-text-color);background-color:var(--x-button-disabled-bg-color);border-color:var(--x-button-disabled-border-color);cursor:not-allowed}.x-button+.x-button{margin-left:16px}.x-button.is-round{border-radius:var(--x-component-round-round)}.x-button.is-text{color:var(--x-button-is-text-color);background-color:transparent;border-color:transparent}.x-button.is-text:hover{background-color:var(--x-button-hover-is-text-bg-color);border-color:var(--x-button-hover-is-text-bg-color)}.x-button.is-text.is-disabled,.x-button.is-text.is-loading{color:var(--x-button-disabled-is-text-color);background-color:var(--x-button-disabled-is-text-bg-color);border-color:var(--x-button-disabled-is-text-bg-color)}.x-button.is-border{color:var(--x-button-is-text-color)}.x-button.is-border,.x-button.is-border:hover{background-color:#fff}.x-button.is-dashed{border-style:dashed}.x-button.is-block{display:block;width:100%;margin-left:0}.x-button .x-icon{font-size:var(--x-button-font-size)}.x-button--size_small{min-width:auto}.x-button--size_small.is-button-group:first-child{border-radius:10px 0 0 10px}.x-button--size_small.is-button-group:last-child{border-radius:0 10px 10px 0}.x-button.x-button--size_default .x-icon{font-size:14px}.x-button.x-button--size_large{font-size:16px}.x-button.x-button--size_large .x-icon{font-size:16px}.x-button.is-link{color:var(--x-button-is-link-color)}.x-button.is-link:hover{color:var(--x-button-hover-is-link-color)}.x-button.is-link.is-disabled,.x-button.is-link.is-loading{color:var(--x-button-disabled-is-link-color)}.x-button.is-link,.x-button.is-link:hover{padding:0;height:auto;min-width:auto;background-color:transparent;border-color:transparent;text-decoration:underline}.x-button.is-circle{border-radius:100px;padding:0;min-width:auto;width:var(--x-button-size)}.x-button.is-button-group{border-radius:0}.x-button.is-button-group+.is-button-group{margin-left:-2px}.x-button.is-button-group:first-child{border-radius:12px 0 0 12px}.x-button.is-button-group:last-child{border-radius:0 12px 12px 0}.x-button--size_small{--x-button-space:var(--x-button-space-small);--x-button-padding:var(--x-button-padding-small);--x-button-radius:var(--x-component-round-small);--x-button-font-size:var(--x-font-size-small);--x-button-size:var(--x-component-size-small)}.x-button--size_default{--x-button-space:var(--x-button-space-default);--x-button-padding:var(--x-button-padding-default);--x-button-radius:var(--x-component-round-default);--x-button-font-size:var(--x-font-size-default);--x-button-size:var(--x-component-size-default)}.x-button--size_large{--x-button-space:var(--x-button-space-large);--x-button-padding:var(--x-button-padding-large);--x-button-radius:var(--x-component-round-large);--x-button-font-size:var(--x-font-size-large);--x-button-size:var(--x-component-size-large)}.x-button--primary{--x-button-border-color:var(--x-color-primary);--x-button-text-color:var(--x-color-white);--x-button-bg-color:var(--x-color-primary);--x-button-is-link-color:var(--x-color-primary);--x-button-is-text-color:var(--x-color-primary);--x-button-is-text-bg-color:var(--x-color-white);--x-button-hover-text-color:var(--x-color-white);--x-button-hover-bg-color:var(--x-color-primary-light-3);--x-button-hover-border-color:var(--x-color-primary-light-3);--x-button-hover-is-link-color:var(--x-color-primary-light-4);--x-button-hover-is-text-color:var(--x-color-primary);--x-button-hover-is-text-bg-color:var(--x-color-primary-light-9);--x-button-disabled-text-color:var(--x-color-white);--x-button-disabled-bg-color:var(--x-color-primary-light-5);--x-button-disabled-border-color:var(--x-color-primary-light-5);--x-button-disabled-is-link-color:var(--x-color-primary-light-5);--x-button-disabled-is-text-color:var(--x-color-primary-light-5);--x-button-disabled-is-text-bg-color:var(--x-color-white)}.x-button--success{--x-button-border-color:var(--x-color-success);--x-button-text-color:var(--x-color-white);--x-button-bg-color:var(--x-color-success);--x-button-is-link-color:var(--x-color-success);--x-button-is-text-color:var(--x-color-success);--x-button-is-text-bg-color:var(--x-color-white);--x-button-hover-text-color:var(--x-color-white);--x-button-hover-bg-color:var(--x-color-success-light-3);--x-button-hover-border-color:var(--x-color-success-light-3);--x-button-hover-is-link-color:var(--x-color-success-light-4);--x-button-hover-is-text-color:var(--x-color-success);--x-button-hover-is-text-bg-color:var(--x-color-success-light-9);--x-button-disabled-text-color:var(--x-color-white);--x-button-disabled-bg-color:var(--x-color-success-light-5);--x-button-disabled-border-color:var(--x-color-success-light-5);--x-button-disabled-is-link-color:var(--x-color-success-light-5);--x-button-disabled-is-text-color:var(--x-color-success-light-5);--x-button-disabled-is-text-bg-color:var(--x-color-white)}.x-button--warning{--x-button-border-color:var(--x-color-warning);--x-button-text-color:var(--x-color-white);--x-button-bg-color:var(--x-color-warning);--x-button-is-link-color:var(--x-color-warning);--x-button-is-text-color:var(--x-color-warning);--x-button-is-text-bg-color:var(--x-color-white);--x-button-hover-text-color:var(--x-color-white);--x-button-hover-bg-color:var(--x-color-warning-light-3);--x-button-hover-border-color:var(--x-color-warning-light-3);--x-button-hover-is-link-color:var(--x-color-warning-light-4);--x-button-hover-is-text-color:var(--x-color-warning);--x-button-hover-is-text-bg-color:var(--x-color-warning-light-9);--x-button-disabled-text-color:var(--x-color-white);--x-button-disabled-bg-color:var(--x-color-warning-light-5);--x-button-disabled-border-color:var(--x-color-warning-light-5);--x-button-disabled-is-link-color:var(--x-color-warning-light-5);--x-button-disabled-is-text-color:var(--x-color-warning-light-5);--x-button-disabled-is-text-bg-color:var(--x-color-white)}.x-button--error{--x-button-border-color:var(--x-color-error);--x-button-text-color:var(--x-color-white);--x-button-bg-color:var(--x-color-error);--x-button-is-link-color:var(--x-color-error);--x-button-is-text-color:var(--x-color-error);--x-button-is-text-bg-color:var(--x-color-white);--x-button-hover-text-color:var(--x-color-white);--x-button-hover-bg-color:var(--x-color-error-light-3);--x-button-hover-border-color:var(--x-color-error-light-3);--x-button-hover-is-link-color:var(--x-color-error-light-4);--x-button-hover-is-text-color:var(--x-color-error);--x-button-hover-is-text-bg-color:var(--x-color-error-light-9);--x-button-disabled-text-color:var(--x-color-white);--x-button-disabled-bg-color:var(--x-color-error-light-5);--x-button-disabled-border-color:var(--x-color-error-light-5);--x-button-disabled-is-link-color:var(--x-color-error-light-5);--x-button-disabled-is-text-color:var(--x-color-error-light-5);--x-button-disabled-is-text-bg-color:var(--x-color-white)}