xt-element-ui 1.1.0 → 1.1.1

package/src/components/button/style/index.scss

@@ -1,136 +1,789 @@
 @import '../../../styles/variables.scss';
 
+.xt-button-group>.xt-button+.xt-button {
+    margin-left: 0
+}
+
+.xt-button-group>.xt-button:first-child:last-child {
+    border-top-right-radius: var(--xt-border-radius-base);
+    border-bottom-right-radius: var(--xt-border-radius-base);
+    border-top-left-radius: var(--xt-border-radius-base);
+    border-bottom-left-radius: var(--xt-border-radius-base)
+}
+
+.xt-button-group>.xt-button:first-child:last-child.is-round {
+    border-radius: var(--xt-border-radius-round)
+}
+
+.xt-button-group>.xt-button:first-child:last-child.is-circle {
+    border-radius: 50%
+}
+
+.xt-button-group>.xt-button:not(:first-child):not(:last-child) {
+    border-radius: 0
+}
+
+.xt-button-group>.xt-button:hover,.xt-button-group>.xt-button:focus,.xt-button-group>.xt-button:active {
+    z-index: 1
+}
+
+.xt-button-group>.xt-button.is-active {
+    z-index: 1
+}
+
+.xt-button-group--horizontal {
+    display: inline-block;
+    vertical-align: middle
+}
+
+.xt-button-group--horizontal:before,.xt-button-group--horizontal:after {
+    display: table;
+    content: ""
+}
+
+.xt-button-group--horizontal:after {
+    clear: both
+}
+
+.xt-button-group--horizontal>.xt-button {
+    float: left;
+    position: relative
+}
+
+.xt-button-group--horizontal>.xt-button:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.xt-button-group--horizontal>.xt-button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.xt-button-group--horizontal>.xt-button:not(:last-child) {
+    margin-right: -1px
+}
+
+.xt-button-group--horizontal .xt-button--primary:first-child {
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--primary:last-child {
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--primary:not(:first-child):not(:last-child) {
+    border-left-color: var(--xt-button-divide-border-color);
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--success:first-child {
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--success:last-child {
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--success:not(:first-child):not(:last-child) {
+    border-left-color: var(--xt-button-divide-border-color);
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--warning:first-child {
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--warning:last-child {
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--warning:not(:first-child):not(:last-child) {
+    border-left-color: var(--xt-button-divide-border-color);
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--danger:first-child {
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--danger:last-child {
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--danger:not(:first-child):not(:last-child) {
+    border-left-color: var(--xt-button-divide-border-color);
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--info:first-child {
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--info:last-child {
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal .xt-button--info:not(:first-child):not(:last-child) {
+    border-left-color: var(--xt-button-divide-border-color);
+    border-right-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--horizontal>.el-dropdown>.xt-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: stretch
+}
+
+.xt-button-group--vertical>.xt-button {
+    margin-top: -1px
+}
+
+.xt-button-group--vertical>.xt-button:first-child {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0
+}
+
+.xt-button-group--vertical>.xt-button:last-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0
+}
+
+.xt-button-group--vertical>.el-dropdown {
+    margin-top: -1px
+}
+
+.xt-button-group--vertical>.el-dropdown>.xt-button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-left-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--primary:first-child {
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--primary:last-child {
+    border-top-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--primary:not(:first-child):not(:last-child) {
+    border-top-color: var(--xt-button-divide-border-color);
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--success:first-child {
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--success:last-child {
+    border-top-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--success:not(:first-child):not(:last-child) {
+    border-top-color: var(--xt-button-divide-border-color);
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--warning:first-child {
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--warning:last-child {
+    border-top-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--warning:not(:first-child):not(:last-child) {
+    border-top-color: var(--xt-button-divide-border-color);
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--danger:first-child {
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--danger:last-child {
+    border-top-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--danger:not(:first-child):not(:last-child) {
+    border-top-color: var(--xt-button-divide-border-color);
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--info:first-child {
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--info:last-child {
+    border-top-color: var(--xt-button-divide-border-color)
+}
+
+.xt-button-group--vertical .xt-button--info:not(:first-child):not(:last-child) {
+    border-top-color: var(--xt-button-divide-border-color);
+    border-bottom-color: var(--xt-button-divide-border-color)
+}
+
 .xt-button {
-  --xt-button-bg-color: transparent;
-  --xt-button-border-color: var(--xt-color-border, #DCDFE6);
-  --xt-button-text-color: var(--xt-color-text-regular, #606266);
-  
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 1;
-  height: var(--xt-button-height, 32px);
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--xt-button-text-color);
-  text-align: center;
-  box-sizing: border-box;
-  outline: none;
-  transition: var(--xt-button-transition, 0.1s);
-  font-weight: var(--xt-button-font-weight, 500);
-  -webkit-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -webkit-appearance: none;
-  background-color: var(--xt-button-bg-color);
-  border: var(--xt-button-border-width, 1px) solid var(--xt-button-border-color);
-  border-radius: var(--xt-border-radius-base, 4px);
-  padding: var(--xt-button-padding-y, 8px) var(--xt-button-padding-x, 15px);
-  font-size: var(--xt-font-size-base, 14px);
-  
-  &:hover {
-    --xt-button-bg-color: var(--xt-color-bg-hover, #f5f5f5);
-  }
-  
-  &:active {
-    --xt-button-bg-color: var(--xt-color-bg-secondary, #f5f7fa);
-  }
-  
-  &:disabled {
-    --xt-button-bg-color: transparent;
-    --xt-button-border-color: var(--xt-color-border-light, #E4E7ED);
-    --xt-button-text-color: var(--xt-color-text-disabled, #C0C4CC);
+    --xt-button-font-weight: var(--xt-font-weight-primary);
+    --xt-button-border-color: var(--xt-border-color);
+    --xt-button-bg-color: var(--xt-fill-color-blank);
+    --xt-button-text-color: var(--xt-text-color-regular);
+    --xt-button-disabled-text-color: var(--xt-disabled-text-color);
+    --xt-button-disabled-bg-color: var(--xt-fill-color-blank);
+    --xt-button-disabled-border-color: var(--xt-border-color-light);
+    --xt-button-divide-border-color: rgba(255, 255, 255, .5);
+    --xt-button-hover-text-color: var(--xt-color-primary);
+    --xt-button-hover-bg-color: var(--xt-color-primary-light-9);
+    --xt-button-hover-border-color: var(--xt-color-primary-light-7);
+    --xt-button-active-text-color: var(--xt-button-hover-text-color);
+    --xt-button-active-border-color: var(--xt-color-primary);
+    --xt-button-active-bg-color: var(--xt-button-hover-bg-color);
+    --xt-button-outline-color: var(--xt-color-primary-light-5);
+    --xt-button-hover-link-text-color: var(--xt-text-color-secondary);
+    --xt-button-active-color: var(--xt-text-color-primary)
+}
+
+.xt-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    height: 32px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: var(--xt-button-text-color);
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    transition: .1s;
+    font-weight: var(--xt-button-font-weight);
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    -webkit-appearance: none;
+    background-color: var(--xt-button-bg-color);
+    border: var(--xt-border);
+    border-color: var(--xt-button-border-color)
+}
+
+
+
+
+.xt-button:hover {
+    color: var(--xt-button-hover-text-color);
+    border-color: var(--xt-button-hover-border-color);
+    background-color: var(--xt-button-hover-bg-color);
+    outline: none
+}
+
+.xt-button:active {
+    color: var(--xt-button-active-text-color);
+    border-color: var(--xt-button-active-border-color);
+    background-color: var(--xt-button-active-bg-color);
+    outline: none
+}
+
+.xt-button:focus-visible {
+    outline: 2px solid var(--xt-button-outline-color);
+    outline-offset: 1px;
+    transition: outline-offset 0s,outline 0s
+}
+
+.xt-button>span {
+    display: inline-flex;
+    align-items: center
+}
+
+.xt-button+.xt-button {
+    margin-left: 12px
+}
+
+.xt-button {
+    padding: 8px 15px;
+    font-size: var(--xt-font-size-base);
+    border-radius: var(--xt-border-radius-base)
+}
+
+.xt-button.is-round {
+    padding: 8px 15px
+}
+
+.xt-button::-moz-focus-inner {
+    border: 0
+}
+
+.xt-button [class*=el-icon]+span {
+    margin-left: 6px
+}
+
+.xt-button [class*=el-icon] svg {
+    vertical-align: bottom
+}
+
+.xt-button.is-plain {
+    --xt-button-hover-text-color: var(--xt-color-primary);
+    --xt-button-hover-bg-color: var(--xt-fill-color-blank);
+    --xt-button-hover-border-color: var(--xt-color-primary)
+}
+
+.xt-button.is-active {
+    color: var(--xt-button-active-text-color);
+    border-color: var(--xt-button-active-border-color);
+    background-color: var(--xt-button-active-bg-color);
+    outline: none
+}
+
+.xt-button.is-disabled,.xt-button.is-disabled:hover {
+    color: var(--xt-button-disabled-text-color);
     cursor: not-allowed;
-  }
+    background-image: none;
+    background-color: var(--xt-button-disabled-bg-color);
+    border-color: var(--xt-button-disabled-border-color)
+}
+
+.xt-button.is-loading {
+    position: relative;
+    pointer-events: none
+}
+
+.xt-button.is-loading:before {
+    z-index: 1;
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    left: -1px;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    border-radius: inherit;
+    background-color: var(--xt-mask-color-extra-light)
+}
+
+.xt-button.is-round {
+    border-radius: var(--xt-border-radius-round)
+}
+
+.xt-button.is-dashed {
+    border-style: dashed;
+    --xt-button-hover-text-color: var(--xt-color-primary);
+    --xt-button-hover-bg-color: var(--xt-fill-color-blank);
+    --xt-button-hover-border-color: var(--xt-color-primary)
+}
+
+.xt-button.is-circle {
+    width: 32px;
+    border-radius: 50%;
+    padding: 8px
+}
+
+.xt-button.is-text {
+    color: var(--xt-button-text-color);
+    border: 0 solid transparent;
+    background-color: transparent
+}
+
+.xt-button.is-text.is-disabled {
+    color: var(--xt-button-disabled-text-color);
+    background-color: transparent!important
+}
+
+.xt-button.is-text:not(.is-disabled):hover {
+    background-color: var(--xt-fill-color-light)
+}
+
+.xt-button.is-text:not(.is-disabled):focus-visible {
+    outline: 2px solid var(--xt-button-outline-color);
+    outline-offset: 1px;
+    transition: outline-offset 0s,outline 0s
+}
+
+.xt-button.is-text:not(.is-disabled):active {
+    background-color: var(--xt-fill-color)
+}
+
+.xt-button.is-text:not(.is-disabled).is-has-bg {
+    background-color: var(--xt-fill-color-light)
+}
+
+.xt-button.is-text:not(.is-disabled).is-has-bg:hover {
+    background-color: var(--xt-fill-color)
+}
+
+.xt-button.is-text:not(.is-disabled).is-has-bg:active {
+    background-color: var(--xt-fill-color-dark)
+}
+
+.xt-button__text--expand {
+    letter-spacing: .3em;
+    margin-right: -.3em
+}
+
+.xt-button.is-link {
+    border-color: transparent;
+    color: var(--xt-button-text-color);
+    background: transparent;
+    padding: 2px;
+    height: auto
+}
+
+.xt-button.is-link:hover {
+    color: var(--xt-button-hover-link-text-color)
+}
+
+.xt-button.is-link.is-disabled {
+    color: var(--xt-button-disabled-text-color);
+    background-color: transparent!important;
+    border-color: transparent!important
+}
+
+.xt-button.is-link:not(.is-disabled):hover {
+    border-color: transparent;
+    background-color: transparent
+}
+
+.xt-button.is-link:not(.is-disabled):active {
+    color: var(--xt-button-active-color);
+    border-color: transparent;
+    background-color: transparent
+}
+
+.xt-button--text {
+    border-color: transparent;
+    background: transparent;
+    color: var(--xt-color-primary);
+    padding-left: 0;
+    padding-right: 0
+}
+
+.xt-button--text.is-disabled {
+    color: var(--xt-button-disabled-text-color);
+    background-color: transparent!important;
+    border-color: transparent!important
+}
+
+.xt-button--text:not(.is-disabled):hover {
+    color: var(--xt-color-primary-light-3);
+    border-color: transparent;
+    background-color: transparent
+}
+
+.xt-button--text:not(.is-disabled):active {
+    color: var(--xt-color-primary-dark-2);
+    border-color: transparent;
+    background-color: transparent
+}
+
+.xt-button__link--expand {
+    letter-spacing: .3em;
+    margin-right: -.3em
 }
 
 .xt-button--primary {
-  --xt-button-bg-color: var(--xt-color-primary, #1890ff);
-  --xt-button-border-color: var(--xt-color-primary, #1890ff);
-  --xt-button-text-color: #fff;
+    --xt-button-text-color: var(--xt-color-white);
+    --xt-button-bg-color: var(--xt-color-primary);
+    --xt-button-border-color: var(--xt-color-primary);
+    --xt-button-outline-color: var(--xt-color-primary-light-5);
+    --xt-button-active-color: var(--xt-color-primary-dark-2);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-link-text-color: var(--xt-color-primary-light-5);
+    --xt-button-hover-bg-color: var(--xt-color-primary-light-3);
+    --xt-button-hover-border-color: var(--xt-color-primary-light-3);
+    --xt-button-active-bg-color: var(--xt-color-primary-dark-2);
+    --xt-button-active-border-color: var(--xt-color-primary-dark-2);
+    --xt-button-disabled-text-color: var(--xt-color-white);
+    --xt-button-disabled-bg-color: var(--xt-color-primary-light-5);
+    --xt-button-disabled-border-color: var(--xt-color-primary-light-5)
+}
+
+.xt-button--primary.is-plain,.xt-button--primary.is-text,.xt-button--primary.is-link {
+    --xt-button-text-color: var(--xt-color-primary);
+    --xt-button-bg-color: var(--xt-color-primary-light-9);
+    --xt-button-border-color: var(--xt-color-primary-light-5);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-bg-color: var(--xt-color-primary);
+    --xt-button-hover-border-color: var(--xt-color-primary);
+    --xt-button-active-text-color: var(--xt-color-white)
+}
+
+.xt-button--primary.is-plain.is-disabled,.xt-button--primary.is-plain.is-disabled:hover,.xt-button--primary.is-plain.is-disabled:focus,.xt-button--primary.is-plain.is-disabled:active,.xt-button--primary.is-text.is-disabled,.xt-button--primary.is-text.is-disabled:hover,.xt-button--primary.is-text.is-disabled:focus,.xt-button--primary.is-text.is-disabled:active,.xt-button--primary.is-link.is-disabled,.xt-button--primary.is-link.is-disabled:hover,.xt-button--primary.is-link.is-disabled:focus,.xt-button--primary.is-link.is-disabled:active {
+    color: var(--xt-color-primary-light-5);
+    background-color: var(--xt-color-primary-light-9);
+    border-color: var(--xt-color-primary-light-8)
+}
+
+.xt-button--primary.is-dashed {
+    --xt-button-text-color: var(--xt-color-primary);
+    --xt-button-bg-color: var(--xt-color-primary-light-9);
+    --xt-button-border-color: var(--xt-color-primary-light-5);
+    --xt-button-hover-text-color: var(--xt-color-primary);
+    --xt-button-hover-bg-color: var(--xt-color-primary-light-9);
+    --xt-button-hover-border-color: var(--xt-color-primary-light-3);
+    --xt-button-active-text-color: var(--xt-color-primary-dark-2);
+    --xt-button-active-bg-color: var(--xt-color-primary-light-9);
+    --xt-button-active-border-color: var(--xt-color-primary-dark-2)
+}
+
+.xt-button--primary.is-dashed.is-disabled,.xt-button--primary.is-dashed.is-disabled:hover,.xt-button--primary.is-dashed.is-disabled:focus,.xt-button--primary.is-dashed.is-disabled:active {
+    color: var(--xt-color-primary-light-5);
+    background-color: var(--xt-color-primary-light-9);
+    border-color: var(--xt-color-primary-light-8)
 }
 
 .xt-button--success {
-  --xt-button-bg-color: var(--xt-color-success, #37c3a4);
-  --xt-button-border-color: var(--xt-color-success, #37c3a4);
-  --xt-button-text-color: #fff;
+    --xt-button-text-color: var(--xt-color-white);
+    --xt-button-bg-color: var(--xt-color-success);
+    --xt-button-border-color: var(--xt-color-success);
+    --xt-button-outline-color: var(--xt-color-success-light-5);
+    --xt-button-active-color: var(--xt-color-success-dark-2);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-link-text-color: var(--xt-color-success-light-5);
+    --xt-button-hover-bg-color: var(--xt-color-success-light-3);
+    --xt-button-hover-border-color: var(--xt-color-success-light-3);
+    --xt-button-active-bg-color: var(--xt-color-success-dark-2);
+    --xt-button-active-border-color: var(--xt-color-success-dark-2);
+    --xt-button-disabled-text-color: var(--xt-color-white);
+    --xt-button-disabled-bg-color: var(--xt-color-success-light-5);
+    --xt-button-disabled-border-color: var(--xt-color-success-light-5)
+}
+
+.xt-button--success.is-plain,.xt-button--success.is-text,.xt-button--success.is-link {
+    --xt-button-text-color: var(--xt-color-success);
+    --xt-button-bg-color: var(--xt-color-success-light-9);
+    --xt-button-border-color: var(--xt-color-success-light-5);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-bg-color: var(--xt-color-success);
+    --xt-button-hover-border-color: var(--xt-color-success);
+    --xt-button-active-text-color: var(--xt-color-white)
+}
+
+.xt-button--success.is-plain.is-disabled,.xt-button--success.is-plain.is-disabled:hover,.xt-button--success.is-plain.is-disabled:focus,.xt-button--success.is-plain.is-disabled:active,.xt-button--success.is-text.is-disabled,.xt-button--success.is-text.is-disabled:hover,.xt-button--success.is-text.is-disabled:focus,.xt-button--success.is-text.is-disabled:active,.xt-button--success.is-link.is-disabled,.xt-button--success.is-link.is-disabled:hover,.xt-button--success.is-link.is-disabled:focus,.xt-button--success.is-link.is-disabled:active {
+    color: var(--xt-color-success-light-5);
+    background-color: var(--xt-color-success-light-9);
+    border-color: var(--xt-color-success-light-8)
+}
+
+.xt-button--success.is-dashed {
+    --xt-button-text-color: var(--xt-color-success);
+    --xt-button-bg-color: var(--xt-color-success-light-9);
+    --xt-button-border-color: var(--xt-color-success-light-5);
+    --xt-button-hover-text-color: var(--xt-color-success);
+    --xt-button-hover-bg-color: var(--xt-color-success-light-9);
+    --xt-button-hover-border-color: var(--xt-color-success-light-3);
+    --xt-button-active-text-color: var(--xt-color-success-dark-2);
+    --xt-button-active-bg-color: var(--xt-color-success-light-9);
+    --xt-button-active-border-color: var(--xt-color-success-dark-2)
+}
+
+.xt-button--success.is-dashed.is-disabled,.xt-button--success.is-dashed.is-disabled:hover,.xt-button--success.is-dashed.is-disabled:focus,.xt-button--success.is-dashed.is-disabled:active {
+    color: var(--xt-color-success-light-5);
+    background-color: var(--xt-color-success-light-9);
+    border-color: var(--xt-color-success-light-8)
 }
 
 .xt-button--warning {
-  --xt-button-bg-color: var(--xt-color-warning, #FFB74D);
-  --xt-button-border-color: var(--xt-color-warning, #FFB74D);
-  --xt-button-text-color: #fff;
+    --xt-button-text-color: var(--xt-color-white);
+    --xt-button-bg-color: var(--xt-color-warning);
+    --xt-button-border-color: var(--xt-color-warning);
+    --xt-button-outline-color: var(--xt-color-warning-light-5);
+    --xt-button-active-color: var(--xt-color-warning-dark-2);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-link-text-color: var(--xt-color-warning-light-5);
+    --xt-button-hover-bg-color: var(--xt-color-warning-light-3);
+    --xt-button-hover-border-color: var(--xt-color-warning-light-3);
+    --xt-button-active-bg-color: var(--xt-color-warning-dark-2);
+    --xt-button-active-border-color: var(--xt-color-warning-dark-2);
+    --xt-button-disabled-text-color: var(--xt-color-white);
+    --xt-button-disabled-bg-color: var(--xt-color-warning-light-5);
+    --xt-button-disabled-border-color: var(--xt-color-warning-light-5)
+}
+
+.xt-button--warning.is-plain,.xt-button--warning.is-text,.xt-button--warning.is-link {
+    --xt-button-text-color: var(--xt-color-warning);
+    --xt-button-bg-color: var(--xt-color-warning-light-9);
+    --xt-button-border-color: var(--xt-color-warning-light-5);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-bg-color: var(--xt-color-warning);
+    --xt-button-hover-border-color: var(--xt-color-warning);
+    --xt-button-active-text-color: var(--xt-color-white)
+}
+
+.xt-button--warning.is-plain.is-disabled,.xt-button--warning.is-plain.is-disabled:hover,.xt-button--warning.is-plain.is-disabled:focus,.xt-button--warning.is-plain.is-disabled:active,.xt-button--warning.is-text.is-disabled,.xt-button--warning.is-text.is-disabled:hover,.xt-button--warning.is-text.is-disabled:focus,.xt-button--warning.is-text.is-disabled:active,.xt-button--warning.is-link.is-disabled,.xt-button--warning.is-link.is-disabled:hover,.xt-button--warning.is-link.is-disabled:focus,.xt-button--warning.is-link.is-disabled:active {
+    color: var(--xt-color-warning-light-5);
+    background-color: var(--xt-color-warning-light-9);
+    border-color: var(--xt-color-warning-light-8)
+}
+
+.xt-button--warning.is-dashed {
+    --xt-button-text-color: var(--xt-color-warning);
+    --xt-button-bg-color: var(--xt-color-warning-light-9);
+    --xt-button-border-color: var(--xt-color-warning-light-5);
+    --xt-button-hover-text-color: var(--xt-color-warning);
+    --xt-button-hover-bg-color: var(--xt-color-warning-light-9);
+    --xt-button-hover-border-color: var(--xt-color-warning-light-3);
+    --xt-button-active-text-color: var(--xt-color-warning-dark-2);
+    --xt-button-active-bg-color: var(--xt-color-warning-light-9);
+    --xt-button-active-border-color: var(--xt-color-warning-dark-2)
+}
+
+.xt-button--warning.is-dashed.is-disabled,.xt-button--warning.is-dashed.is-disabled:hover,.xt-button--warning.is-dashed.is-disabled:focus,.xt-button--warning.is-dashed.is-disabled:active {
+    color: var(--xt-color-warning-light-5);
+    background-color: var(--xt-color-warning-light-9);
+    border-color: var(--xt-color-warning-light-8)
 }
 
 .xt-button--danger {
-  --xt-button-bg-color: var(--xt-color-danger, #EA1D34);
-  --xt-button-border-color: var(--xt-color-danger, #EA1D34);
-  --xt-button-text-color: #fff;
+    --xt-button-text-color: var(--xt-color-white);
+    --xt-button-bg-color: var(--xt-color-danger);
+    --xt-button-border-color: var(--xt-color-danger);
+    --xt-button-outline-color: var(--xt-color-danger-light-5);
+    --xt-button-active-color: var(--xt-color-danger-dark-2);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-link-text-color: var(--xt-color-danger-light-5);
+    --xt-button-hover-bg-color: var(--xt-color-danger-light-3);
+    --xt-button-hover-border-color: var(--xt-color-danger-light-3);
+    --xt-button-active-bg-color: var(--xt-color-danger-dark-2);
+    --xt-button-active-border-color: var(--xt-color-danger-dark-2);
+    --xt-button-disabled-text-color: var(--xt-color-white);
+    --xt-button-disabled-bg-color: var(--xt-color-danger-light-5);
+    --xt-button-disabled-border-color: var(--xt-color-danger-light-5)
+}
+
+.xt-button--danger.is-plain,.xt-button--danger.is-text,.xt-button--danger.is-link {
+    --xt-button-text-color: var(--xt-color-danger);
+    --xt-button-bg-color: var(--xt-color-danger-light-9);
+    --xt-button-border-color: var(--xt-color-danger-light-5);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-bg-color: var(--xt-color-danger);
+    --xt-button-hover-border-color: var(--xt-color-danger);
+    --xt-button-active-text-color: var(--xt-color-white)
+}
+
+.xt-button--danger.is-plain.is-disabled,.xt-button--danger.is-plain.is-disabled:hover,.xt-button--danger.is-plain.is-disabled:focus,.xt-button--danger.is-plain.is-disabled:active,.xt-button--danger.is-text.is-disabled,.xt-button--danger.is-text.is-disabled:hover,.xt-button--danger.is-text.is-disabled:focus,.xt-button--danger.is-text.is-disabled:active,.xt-button--danger.is-link.is-disabled,.xt-button--danger.is-link.is-disabled:hover,.xt-button--danger.is-link.is-disabled:focus,.xt-button--danger.is-link.is-disabled:active {
+    color: var(--xt-color-danger-light-5);
+    background-color: var(--xt-color-danger-light-9);
+    border-color: var(--xt-color-danger-light-8)
+}
+
+.xt-button--danger.is-dashed {
+    --xt-button-text-color: var(--xt-color-danger);
+    --xt-button-bg-color: var(--xt-color-danger-light-9);
+    --xt-button-border-color: var(--xt-color-danger-light-5);
+    --xt-button-hover-text-color: var(--xt-color-danger);
+    --xt-button-hover-bg-color: var(--xt-color-danger-light-9);
+    --xt-button-hover-border-color: var(--xt-color-danger-light-3);
+    --xt-button-active-text-color: var(--xt-color-danger-dark-2);
+    --xt-button-active-bg-color: var(--xt-color-danger-light-9);
+    --xt-button-active-border-color: var(--xt-color-danger-dark-2)
+}
+
+.xt-button--danger.is-dashed.is-disabled,.xt-button--danger.is-dashed.is-disabled:hover,.xt-button--danger.is-dashed.is-disabled:focus,.xt-button--danger.is-dashed.is-disabled:active {
+    color: var(--xt-color-danger-light-5);
+    background-color: var(--xt-color-danger-light-9);
+    border-color: var(--xt-color-danger-light-8)
 }
 
 .xt-button--info {
-  --xt-button-bg-color: var(--xt-color-info, #909399);
-  --xt-button-border-color: var(--xt-color-info, #909399);
-  --xt-button-text-color: #fff;
+    --xt-button-text-color: var(--xt-color-white);
+    --xt-button-bg-color: var(--xt-color-info);
+    --xt-button-border-color: var(--xt-color-info);
+    --xt-button-outline-color: var(--xt-color-info-light-5);
+    --xt-button-active-color: var(--xt-color-info-dark-2);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-link-text-color: var(--xt-color-info-light-5);
+    --xt-button-hover-bg-color: var(--xt-color-info-light-3);
+    --xt-button-hover-border-color: var(--xt-color-info-light-3);
+    --xt-button-active-bg-color: var(--xt-color-info-dark-2);
+    --xt-button-active-border-color: var(--xt-color-info-dark-2);
+    --xt-button-disabled-text-color: var(--xt-color-white);
+    --xt-button-disabled-bg-color: var(--xt-color-info-light-5);
+    --xt-button-disabled-border-color: var(--xt-color-info-light-5)
+}
+
+.xt-button--info.is-plain,.xt-button--info.is-text,.xt-button--info.is-link {
+    --xt-button-text-color: var(--xt-color-info);
+    --xt-button-bg-color: var(--xt-color-info-light-9);
+    --xt-button-border-color: var(--xt-color-info-light-5);
+    --xt-button-hover-text-color: var(--xt-color-white);
+    --xt-button-hover-bg-color: var(--xt-color-info);
+    --xt-button-hover-border-color: var(--xt-color-info);
+    --xt-button-active-text-color: var(--xt-color-white)
 }
 
-html.dark .xt-button--success {
-  --xt-button-bg-color: var(--xt-dark-button-success-bg, #166534);
-  --xt-button-border-color: var(--xt-dark-button-success-bg, #166534);
+.xt-button--info.is-plain.is-disabled,.xt-button--info.is-plain.is-disabled:hover,.xt-button--info.is-plain.is-disabled:focus,.xt-button--info.is-plain.is-disabled:active,.xt-button--info.is-text.is-disabled,.xt-button--info.is-text.is-disabled:hover,.xt-button--info.is-text.is-disabled:focus,.xt-button--info.is-text.is-disabled:active,.xt-button--info.is-link.is-disabled,.xt-button--info.is-link.is-disabled:hover,.xt-button--info.is-link.is-disabled:focus,.xt-button--info.is-link.is-disabled:active {
+    color: var(--xt-color-info-light-5);
+    background-color: var(--xt-color-info-light-9);
+    border-color: var(--xt-color-info-light-8)
 }
 
-html.dark .xt-button--warning {
-  --xt-button-bg-color: var(--xt-dark-button-warning-bg, #78350f);
-  --xt-button-border-color: var(--xt-dark-button-warning-bg, #78350f);
+.xt-button--info.is-dashed {
+    --xt-button-text-color: var(--xt-color-info);
+    --xt-button-bg-color: var(--xt-color-info-light-9);
+    --xt-button-border-color: var(--xt-color-info-light-5);
+    --xt-button-hover-text-color: var(--xt-color-info);
+    --xt-button-hover-bg-color: var(--xt-color-info-light-9);
+    --xt-button-hover-border-color: var(--xt-color-info-light-3);
+    --xt-button-active-text-color: var(--xt-color-info-dark-2);
+    --xt-button-active-bg-color: var(--xt-color-info-light-9);
+    --xt-button-active-border-color: var(--xt-color-info-dark-2)
 }
 
-html.dark .xt-button--danger {
-  --xt-button-bg-color: var(--xt-dark-button-danger-bg, #991b1b);
-  --xt-button-border-color: var(--xt-dark-button-danger-bg, #991b1b);
+.xt-button--info.is-dashed.is-disabled,.xt-button--info.is-dashed.is-disabled:hover,.xt-button--info.is-dashed.is-disabled:focus,.xt-button--info.is-dashed.is-disabled:active {
+    color: var(--xt-color-info-light-5);
+    background-color: var(--xt-color-info-light-9);
+    border-color: var(--xt-color-info-light-8)
 }
 
-html.dark .xt-button--info {
-  --xt-button-bg-color: var(--xt-dark-button-info-bg, #374151);
-  --xt-button-border-color: var(--xt-dark-button-info-bg, #374151);
+.xt-button--large {
+    --xt-button-size: 40px;
+    height: var(--xt-button-size)
 }
 
-.xt-button--primary[plain],
-.xt-button--success[plain],
-.xt-button--warning[plain],
-.xt-button--danger[plain],
-.xt-button--info[plain] {
-  --xt-button-bg-color: var(--xt-color-bg-primary, #fff);
-  --xt-button-text-color: var(--xt-color-primary, #1890ff);
+.xt-button--large [class*=el-icon]+span {
+    margin-left: 8px
 }
 
-.xt-button--success[plain] {
-  --xt-button-text-color: var(--xt-color-success, #37c3a4);
+.xt-button--large {
+    padding: 12px 19px;
+    font-size: var(--xt-font-size-base);
+    border-radius: var(--xt-border-radius-base)
 }
 
-.xt-button--warning[plain] {
-  --xt-button-text-color: var(--xt-color-warning, #FFB74D);
+.xt-button--large.is-round {
+    padding: 12px 19px
 }
 
-.xt-button--danger[plain] {
-  --xt-button-text-color: var(--xt-color-danger, #EA1D34);
+.xt-button--large.is-circle {
+    width: var(--xt-button-size);
+    padding: 12px
 }
 
-.xt-button--info[plain] {
-  --xt-button-text-color: var(--xt-color-info, #999999);
+.xt-button--small {
+    --xt-button-size: 24px;
+    height: var(--xt-button-size)
 }
 
-html.dark .xt-button--success[plain] {
-  --xt-button-text-color: var(--xt-dark-color-success, #1dac4c);
+.xt-button--small [class*=el-icon]+span {
+    margin-left: 4px
 }
 
-html.dark .xt-button--warning[plain] {
-  --xt-button-text-color: var(--xt-dark-color-warning, #8d5e18);
+.xt-button--small {
+    padding: 5px 11px;
+    font-size: 12px;
+    border-radius: calc(var(--xt-border-radius-base) - 1px)
 }
 
-html.dark .xt-button--danger[plain] {
-  --xt-button-text-color: var(--xt-dark-color-danger, #a02727);
+.xt-button--small.is-round {
+    padding: 5px 11px
 }
 
-html.dark .xt-button--info[plain] {
-  --xt-button-text-color: var(--xt-dark-color-info, #3f4249);
+.xt-button--small.is-circle {
+    width: var(--xt-button-size);
+    padding: 5px
 }