@xunsworld/element 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- :root{--vk-color-white: #ffffff;--vk-color-black: #000000;--colors: ( primary: #409eff, success: #67c23a, warning: #e6a23c, danger: #f56c6c, info: #909399 );--vk-bg-color: #ffffff;--vk-bg-color-page: #f2f3f5;--vk-bg-color-overlay: #ffffff;--vk-text-color-primary: #303133;--vk-text-color-regular: #606266;--vk-text-color-secondary: #909399;--vk-text-color-placeholder: #a8abb2;--vk-text-color-disabled: #c0c4cc;--vk-border-color: #dcdfe6;--vk-border-color-light: #e4e7ed;--vk-border-color-lighter: #ebeef5;--vk-border-color-extra-light: #f2f6fc;--vk-border-color-dark: #d4d7de;--vk-border-color-darker: #cdd0d6;--vk-fill-color: #f0f2f5;--vk-fill-color-light: #f5f7fa;--vk-fill-color-lighter: #fafafa;--vk-fill-color-extra-light: #fafcff;--vk-fill-color-dark: #ebedf0;--vk-fill-color-darker: #e6e8eb;--vk-fill-color-blank: #ffffff;--vk-border-width: 1px;--vk-border-style: solid;--vk-border-color-hover: var(--vk-text-color-disabled);--vk-border: var(--vk-border-width) var(--vk-border-style) var(--vk-border-color);--vk-border-radius-base: 4px;--vk-border-radius-small: 2px;--vk-border-radius-round: 20px;--vk-border-radius-circle: 100%;--vk-font-size-extra-large: 20px;--vk-font-size-large: 18px;--vk-font-size-medium: 16px;--vk-font-size-base: 14px;--vk-font-size-small: 13px;--vk-font-size-extra-small: 12px;--vk-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;--vk-font-weight-primary: 500;--vk-disabled-bg-color: var(--vk-fill-color-light);--vk-disabled-text-color: var(--vk-text-color-placeholder);--vk-disabled-border-color: var(--vk-border-color-light);--vk-transition-duration: .3s;--vk-transition-duration-fast: .2s;--vk-color-primary: #409eff ;--vk-color-primary-light-3: #79BBFF;--vk-color-primary-light-5: #A0CFFF;--vk-color-primary-light-7: #C6E2FF;--vk-color-primary-light-9: #ECF5FF;--vk-color-primary-light-8: #D9ECFF;--vk-color-primary-dark-2: #337ECC;--vk-color-success: #67c23a ;--vk-color-success-light-3: #95D475;--vk-color-success-light-5: #B3E19D;--vk-color-success-light-7: #D1EDC4;--vk-color-success-light-9: #F0F9EB;--vk-color-success-light-8: #E1F3D8;--vk-color-success-dark-2: #529B2E;--vk-color-warning: #e6a23c ;--vk-color-warning-light-3: #EEBE77;--vk-color-warning-light-5: #F3D19E;--vk-color-warning-light-7: #F8E3C5;--vk-color-warning-light-9: #FDF6EC;--vk-color-warning-light-8: #FAECD8;--vk-color-warning-dark-2: #B88230;--vk-color-danger: #f56c6c ;--vk-color-danger-light-3: #F89898;--vk-color-danger-light-5: #FAB6B6;--vk-color-danger-light-7: #FCD3D3;--vk-color-danger-light-9: #FEF0F0;--vk-color-danger-light-8: #FDE2E2;--vk-color-danger-dark-2: #C45656;--vk-color-info: #909399 ;--vk-color-info-light-3: #B1B3B8;--vk-color-info-light-5: #C8C9CC;--vk-color-info-light-7: #DEDFE0;--vk-color-info-light-9: #F4F4F5;--vk-color-info-light-8: #E9E9EB;--vk-color-info-dark-2: #73767A }body{font-family:var(--vk-font-family);font-weight:400;font-size:var(--vk-font-size-base);color:var(--vk-text-color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}a{color:var(--vk-color-primary);text-decoration:none}a:hover,a:focus{color:var(--vk-color-primary-light-3)}a:active{color:var(--vk-color-primary-dark-2)}h1,h2,h3,h4,h5,h6{color:var(--vk-text-color-regular);font-weight:inherit}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:calc(var(--vk-font-size-base) + 6px)}h2{font-size:calc(var(--vk-font-size-base) + 4px)}h3{font-size:calc(var(--vk-font-size-base) + 2px)}h4,h5,h6,p{font-size:inherit}p{line-height:1.8}p:first-child{margin-top:0}p:last-child{margin-bottom:0}sup,sub{font-size:calc(var(--vk-font-size-base) - 1px)}small{font-size:calc(var(--vk-font-size-base) - 2px)}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid var(--vk-border-color-lighter)}.vk-button{--vk-button-font-weight: var(--vk-font-weight-primary);--vk-button-border-color: var(--vk-border-color);--vk-button-bg-color: var(--vk-fill-color-blank);--vk-button-text-color: var(--vk-text-color-regular);--vk-button-disabled-text-color: var(--vk-disabled-text-color);--vk-button-disabled-bg-color: var(--vk-fill-color-blank);--vk-button-disabled-border-color: var(--vk-border-color-light);--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-color-primary-light-9);--vk-button-hover-border-color: var(--vk-color-primary-light-7);--vk-button-active-text-color: var(--vk-button-hover-text-color);--vk-button-active-border-color: var(--vk-color-primary);--vk-button-active-bg-color: var(--vk-button-hover-bg-color);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-text-color-primary)}.vk-button{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:var(--vk-button-text-color);text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:var(--vk-button-font-weight);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:var(--vk-button-bg-color);border:var(--vk-border);border-color:var(--vk-button-border-color);padding:8px 15px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button+.vk-button{margin-left:12px}.vk-button:hover,.vk-button:focus{color:var(--vk-button-hover-text-color);border-color:var(--vk-button-hover-border-color);background-color:var(--vk-button-hover-bg-color);outline:none}.vk-button:active{color:var(--vk-button-active-text-color);border-color:var(--vk-button-active-border-color);background-color:var(--vk-button-active-bg-color);outline:none}.vk-button.is-plain{--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-fill-color-blank);--vk-button-hover-border-color: var(--vk-color-primary)}.vk-button.is-round{border-radius:var(--vk-border-radius-round)}.vk-button.is-circle{border-radius:50%;padding:8px}.vk-button.is-disabled,.vk-button.is-disabled:hover,.vk-button.is-disabled:focus,.vk-button[disabled],.vk-button[disabled]:hover,.vk-button[disabled]:focus{color:var(--vk-button-disabled-text-color);cursor:not-allowed;background-image:none;background-color:var(--vk-button-disabled-bg-color);border-color:var(--vk-button-disabled-border-color)}.vk-button [class*=vk-icon]+span{margin-left:6px}.vk-button--primary{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-primary);--vk-button-border-color: var(--vk-color-primary);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-color-primary-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary-light-3);--vk-button-hover-border-color: var(--vk-color-primary-light-3);--vk-button-active-bg-color: var(--vk-color-primary-dark-2);--vk-button-active-border-color: var(--vk-color-primary-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-primary-light-5);--vk-button-disabled-border-color: var(--vk-color-primary-light-5)}.vk-button--primary.is-plain{--vk-button-text-color: var(--vk-color-primary);--vk-button-bg-color: var(--vk-color-primary-light-9);--vk-button-border-color: var(--vk-color-primary-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary);--vk-button-hover-border-color: var(--vk-color-primary);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--success{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-success);--vk-button-border-color: var(--vk-color-success);--vk-button-outline-color: var(--vk-color-success-light-5);--vk-button-active-color: var(--vk-color-success-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success-light-3);--vk-button-hover-border-color: var(--vk-color-success-light-3);--vk-button-active-bg-color: var(--vk-color-success-dark-2);--vk-button-active-border-color: var(--vk-color-success-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-success-light-5);--vk-button-disabled-border-color: var(--vk-color-success-light-5)}.vk-button--success.is-plain{--vk-button-text-color: var(--vk-color-success);--vk-button-bg-color: var(--vk-color-success-light-9);--vk-button-border-color: var(--vk-color-success-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success);--vk-button-hover-border-color: var(--vk-color-success);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--warning{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-warning);--vk-button-border-color: var(--vk-color-warning);--vk-button-outline-color: var(--vk-color-warning-light-5);--vk-button-active-color: var(--vk-color-warning-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning-light-3);--vk-button-hover-border-color: var(--vk-color-warning-light-3);--vk-button-active-bg-color: var(--vk-color-warning-dark-2);--vk-button-active-border-color: var(--vk-color-warning-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-warning-light-5);--vk-button-disabled-border-color: var(--vk-color-warning-light-5)}.vk-button--warning.is-plain{--vk-button-text-color: var(--vk-color-warning);--vk-button-bg-color: var(--vk-color-warning-light-9);--vk-button-border-color: var(--vk-color-warning-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning);--vk-button-hover-border-color: var(--vk-color-warning);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--info{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-info);--vk-button-border-color: var(--vk-color-info);--vk-button-outline-color: var(--vk-color-info-light-5);--vk-button-active-color: var(--vk-color-info-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info-light-3);--vk-button-hover-border-color: var(--vk-color-info-light-3);--vk-button-active-bg-color: var(--vk-color-info-dark-2);--vk-button-active-border-color: var(--vk-color-info-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-info-light-5);--vk-button-disabled-border-color: var(--vk-color-info-light-5)}.vk-button--info.is-plain{--vk-button-text-color: var(--vk-color-info);--vk-button-bg-color: var(--vk-color-info-light-9);--vk-button-border-color: var(--vk-color-info-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info);--vk-button-hover-border-color: var(--vk-color-info);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--danger{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-danger);--vk-button-border-color: var(--vk-color-danger);--vk-button-outline-color: var(--vk-color-danger-light-5);--vk-button-active-color: var(--vk-color-danger-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger-light-3);--vk-button-hover-border-color: var(--vk-color-danger-light-3);--vk-button-active-bg-color: var(--vk-color-danger-dark-2);--vk-button-active-border-color: var(--vk-color-danger-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-danger-light-5);--vk-button-disabled-border-color: var(--vk-color-danger-light-5)}.vk-button--danger.is-plain{--vk-button-text-color: var(--vk-color-danger);--vk-button-bg-color: var(--vk-color-danger-light-9);--vk-button-border-color: var(--vk-color-danger-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger);--vk-button-hover-border-color: var(--vk-color-danger);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--large{--vk-button-size: 40px;height:var(--vk-button-size);padding:12px 19px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button--small{--vk-button-size: 24px;height:var(--vk-button-size);padding:5px 11px;font-size:12px;border-radius:calc(var(--vk-border-radius-base) - 1px)}
1
+ :root{--vk-color-white: #ffffff;--vk-color-black: #000000;--colors: ( primary: #409eff, success: #67c23a, warning: #e6a23c, danger: #f56c6c, info: #909399 );--vk-bg-color: #ffffff;--vk-bg-color-page: #f2f3f5;--vk-bg-color-overlay: #ffffff;--vk-text-color-primary: #303133;--vk-text-color-regular: #606266;--vk-text-color-secondary: #909399;--vk-text-color-placeholder: #a8abb2;--vk-text-color-disabled: #c0c4cc;--vk-border-color: #dcdfe6;--vk-border-color-light: #e4e7ed;--vk-border-color-lighter: #ebeef5;--vk-border-color-extra-light: #f2f6fc;--vk-border-color-dark: #d4d7de;--vk-border-color-darker: #cdd0d6;--vk-fill-color: #f0f2f5;--vk-fill-color-light: #f5f7fa;--vk-fill-color-lighter: #fafafa;--vk-fill-color-extra-light: #fafcff;--vk-fill-color-dark: #ebedf0;--vk-fill-color-darker: #e6e8eb;--vk-fill-color-blank: #ffffff;--vk-border-width: 1px;--vk-border-style: solid;--vk-border-color-hover: var(--vk-text-color-disabled);--vk-border: var(--vk-border-width) var(--vk-border-style) var(--vk-border-color);--vk-border-radius-base: 4px;--vk-border-radius-small: 2px;--vk-border-radius-round: 20px;--vk-border-radius-circle: 100%;--vk-font-size-extra-large: 20px;--vk-font-size-large: 18px;--vk-font-size-medium: 16px;--vk-font-size-base: 14px;--vk-font-size-small: 13px;--vk-font-size-extra-small: 12px;--vk-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;--vk-font-weight-primary: 500;--vk-disabled-bg-color: var(--vk-fill-color-light);--vk-disabled-text-color: var(--vk-text-color-placeholder);--vk-disabled-border-color: var(--vk-border-color-light);--vk-transition-duration: .3s;--vk-transition-duration-fast: .2s;--vk-color-primary: #409eff ;--vk-color-primary-light-3: #79BBFF;--vk-color-primary-light-5: #A0CFFF;--vk-color-primary-light-7: #C6E2FF;--vk-color-primary-light-9: #ECF5FF;--vk-color-primary-light-8: #D9ECFF;--vk-color-primary-dark-2: #337ECC;--vk-color-success: #67c23a ;--vk-color-success-light-3: #95D475;--vk-color-success-light-5: #B3E19D;--vk-color-success-light-7: #D1EDC4;--vk-color-success-light-9: #F0F9EB;--vk-color-success-light-8: #E1F3D8;--vk-color-success-dark-2: #529B2E;--vk-color-warning: #e6a23c ;--vk-color-warning-light-3: #EEBE77;--vk-color-warning-light-5: #F3D19E;--vk-color-warning-light-7: #F8E3C5;--vk-color-warning-light-9: #FDF6EC;--vk-color-warning-light-8: #FAECD8;--vk-color-warning-dark-2: #B88230;--vk-color-danger: #f56c6c ;--vk-color-danger-light-3: #F89898;--vk-color-danger-light-5: #FAB6B6;--vk-color-danger-light-7: #FCD3D3;--vk-color-danger-light-9: #FEF0F0;--vk-color-danger-light-8: #FDE2E2;--vk-color-danger-dark-2: #C45656;--vk-color-info: #909399 ;--vk-color-info-light-3: #B1B3B8;--vk-color-info-light-5: #C8C9CC;--vk-color-info-light-7: #DEDFE0;--vk-color-info-light-9: #F4F4F5;--vk-color-info-light-8: #E9E9EB;--vk-color-info-dark-2: #73767A }body{font-family:var(--vk-font-family);font-weight:400;font-size:var(--vk-font-size-base);color:var(--vk-text-color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}a{color:var(--vk-color-primary);text-decoration:none}a:hover,a:focus{color:var(--vk-color-primary-light-3)}a:active{color:var(--vk-color-primary-dark-2)}h1,h2,h3,h4,h5,h6{color:var(--vk-text-color-regular);font-weight:inherit}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:calc(var(--vk-font-size-base) + 6px)}h2{font-size:calc(var(--vk-font-size-base) + 4px)}h3{font-size:calc(var(--vk-font-size-base) + 2px)}h4,h5,h6,p{font-size:inherit}p{line-height:1.8}p:first-child{margin-top:0}p:last-child{margin-bottom:0}sup,sub{font-size:calc(var(--vk-font-size-base) - 1px)}small{font-size:calc(var(--vk-font-size-base) - 2px)}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid var(--vk-border-color-lighter)}.vk-button{--vk-button-font-weight: var(--vk-font-weight-primary);--vk-button-border-color: var(--vk-border-color);--vk-button-bg-color: var(--vk-fill-color-blank);--vk-button-text-color: var(--vk-text-color-regular);--vk-button-disabled-text-color: var(--vk-disabled-text-color);--vk-button-disabled-bg-color: var(--vk-fill-color-blank);--vk-button-disabled-border-color: var(--vk-border-color-light);--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-color-primary-light-9);--vk-button-hover-border-color: var(--vk-color-primary-light-7);--vk-button-active-text-color: var(--vk-button-hover-text-color);--vk-button-active-border-color: var(--vk-color-primary);--vk-button-active-bg-color: var(--vk-button-hover-bg-color);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-text-color-primary)}.vk-button{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:var(--vk-button-text-color);text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:var(--vk-button-font-weight);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:var(--vk-button-bg-color);border:var(--vk-border);border-color:var(--vk-button-border-color);padding:8px 15px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button+.vk-button{margin-left:12px}.vk-button:hover,.vk-button:focus{color:var(--vk-button-hover-text-color);border-color:var(--vk-button-hover-border-color);background-color:var(--vk-button-hover-bg-color);outline:none}.vk-button:active{color:var(--vk-button-active-text-color);border-color:var(--vk-button-active-border-color);background-color:var(--vk-button-active-bg-color);outline:none}.vk-button.is-plain{--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-fill-color-blank);--vk-button-hover-border-color: var(--vk-color-primary)}.vk-button.is-round{border-radius:var(--vk-border-radius-round)}.vk-button.is-circle{border-radius:50%;padding:8px}.vk-button.is-disabled,.vk-button.is-disabled:hover,.vk-button.is-disabled:focus,.vk-button[disabled],.vk-button[disabled]:hover,.vk-button[disabled]:focus{color:var(--vk-button-disabled-text-color);cursor:not-allowed;background-image:none;background-color:var(--vk-button-disabled-bg-color);border-color:var(--vk-button-disabled-border-color)}.vk-button [class*=vk-icon]+span{margin-left:6px}.vk-button--primary{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-primary);--vk-button-border-color: var(--vk-color-primary);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-color-primary-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary-light-3);--vk-button-hover-border-color: var(--vk-color-primary-light-3);--vk-button-active-bg-color: var(--vk-color-primary-dark-2);--vk-button-active-border-color: var(--vk-color-primary-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-primary-light-5);--vk-button-disabled-border-color: var(--vk-color-primary-light-5)}.vk-button--primary.is-plain{--vk-button-text-color: var(--vk-color-primary);--vk-button-bg-color: var(--vk-color-primary-light-9);--vk-button-border-color: var(--vk-color-primary-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary);--vk-button-hover-border-color: var(--vk-color-primary);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--success{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-success);--vk-button-border-color: var(--vk-color-success);--vk-button-outline-color: var(--vk-color-success-light-5);--vk-button-active-color: var(--vk-color-success-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success-light-3);--vk-button-hover-border-color: var(--vk-color-success-light-3);--vk-button-active-bg-color: var(--vk-color-success-dark-2);--vk-button-active-border-color: var(--vk-color-success-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-success-light-5);--vk-button-disabled-border-color: var(--vk-color-success-light-5)}.vk-button--success.is-plain{--vk-button-text-color: var(--vk-color-success);--vk-button-bg-color: var(--vk-color-success-light-9);--vk-button-border-color: var(--vk-color-success-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success);--vk-button-hover-border-color: var(--vk-color-success);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--warning{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-warning);--vk-button-border-color: var(--vk-color-warning);--vk-button-outline-color: var(--vk-color-warning-light-5);--vk-button-active-color: var(--vk-color-warning-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning-light-3);--vk-button-hover-border-color: var(--vk-color-warning-light-3);--vk-button-active-bg-color: var(--vk-color-warning-dark-2);--vk-button-active-border-color: var(--vk-color-warning-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-warning-light-5);--vk-button-disabled-border-color: var(--vk-color-warning-light-5)}.vk-button--warning.is-plain{--vk-button-text-color: var(--vk-color-warning);--vk-button-bg-color: var(--vk-color-warning-light-9);--vk-button-border-color: var(--vk-color-warning-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning);--vk-button-hover-border-color: var(--vk-color-warning);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--info{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-info);--vk-button-border-color: var(--vk-color-info);--vk-button-outline-color: var(--vk-color-info-light-5);--vk-button-active-color: var(--vk-color-info-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info-light-3);--vk-button-hover-border-color: var(--vk-color-info-light-3);--vk-button-active-bg-color: var(--vk-color-info-dark-2);--vk-button-active-border-color: var(--vk-color-info-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-info-light-5);--vk-button-disabled-border-color: var(--vk-color-info-light-5)}.vk-button--info.is-plain{--vk-button-text-color: var(--vk-color-info);--vk-button-bg-color: var(--vk-color-info-light-9);--vk-button-border-color: var(--vk-color-info-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info);--vk-button-hover-border-color: var(--vk-color-info);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--danger{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-danger);--vk-button-border-color: var(--vk-color-danger);--vk-button-outline-color: var(--vk-color-danger-light-5);--vk-button-active-color: var(--vk-color-danger-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger-light-3);--vk-button-hover-border-color: var(--vk-color-danger-light-3);--vk-button-active-bg-color: var(--vk-color-danger-dark-2);--vk-button-active-border-color: var(--vk-color-danger-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-danger-light-5);--vk-button-disabled-border-color: var(--vk-color-danger-light-5)}.vk-button--danger.is-plain{--vk-button-text-color: var(--vk-color-danger);--vk-button-bg-color: var(--vk-color-danger-light-9);--vk-button-border-color: var(--vk-color-danger-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger);--vk-button-hover-border-color: var(--vk-color-danger);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--large{--vk-button-size: 40px;height:var(--vk-button-size);padding:12px 19px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button--small{--vk-button-size: 24px;height:var(--vk-button-size);padding:5px 11px;font-size:12px;border-radius:calc(var(--vk-border-radius-base) - 1px)}.vk-input{--vk-input-text-color: var(--vk-text-color-regular);--vk-input-border: var(--vk-border);--vk-input-hover-border: var(--vk-border-color-hover);--vk-input-focus-border: var(--vk-color-primary);--vk-input-transparent-border: 0 0 0 1px transparent inset;--vk-input-border-color: var(--vk-border-color);--vk-input-border-radius: var(--vk-border-radius-base);--vk-input-bg-color: var(--vk-fill-color-blank);--vk-input-icon-color: var(--vk-text-color-placeholder);--vk-input-placeholder-color: var(--vk-text-color-placeholder);--vk-input-hover-border-color: var(--vk-border-color-hover);--vk-input-clear-hover-color: var(--vk-text-color-secondary);--vk-input-focus-border-color: var(--vk-color-primary)}.vk-input{--vk-input-height: var(--vk-component-size);position:relative;font-size:var(--vk-font-size-base);display:inline-flex;width:100%;line-height:var(--vk-input-height);box-sizing:border-box;vertical-align:middle}.vk-input.is-disabled{cursor:not-allowed}.vk-input.is-disabled .vk-input__wrapper{background-color:var(--vk-disabled-bg-color);box-shadow:0 0 0 1px var(--vk-disabled-border-color) inset}.vk-input.is-disabled .vk-input__inner{color:var(--vk-disabled-text-color);-webkit-text-fill-color:var(--vk-disabled-text-color);cursor:not-allowed}.vk-input.is-disabled .vk-textarea__inner{background-color:var(--vk-disabled-bg-color);box-shadow:0 0 0 1px var(--vk-disabled-border-color) inset;color:var(--vk-disabled-text-color);-webkit-text-fill-color:var(--vk-disabled-text-color);cursor:not-allowed}.vk-input.is-prepend>.vk-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vk-input.is-append>.vk-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.vk-input--large{--vk-input-height: var(--vk-component-size-large);font-size:14px}.vk-input--large .vk-input__wrapper{padding:1px 15px}.vk-input--large .vk-input__wrapper .vk-input__inner{--vk-input-inner-height: calc(var(--vk-input-height, 40px) - 2px)}.vk-input--small{--vk-input-height: var(--vk-component-size-small);font-size:12px}.vk-input--small .vk-input__wrapper{padding:1px 7px}.vk-input--small .vk-input__wrapper .vk-input__inner{--vk-input-inner-height: calc(var(--vk-input-height, 24px) - 2px)}.vk-input__prefix,.vk-input__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;height:100%;text-align:center;color:var(--vk-input-icon-color, var(--vk-text-color-placeholder));transition:all var(--vk-transition-duration)}.vk-input__prefix>:first-child{margin-left:0!important}.vk-input__prefix>:last-child{margin-right:8px!important}.vk-input__suffix>:first-child{margin-left:8px!important}.vk-input__suffix>:last-child{margin-right:0!important}.vk-input__prepend,.vk-input__append{background-color:var(--vk-fill-color-light);color:var(--vk-color-info);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;border-radius:var(--vk-input-border-radius);padding:0 20px;white-space:nowrap}.vk-input__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:1px 0 0 0 var(--vk-input-border-color) inset,0 1px 0 0 var(--vk-input-border-color) inset,0 -1px 0 0 var(--vk-input-border-color) inset}.vk-input__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:0 1px 0 0 var(--vk-input-border-color) inset,0 -1px 0 0 var(--vk-input-border-color) inset,-1px 0 0 0 var(--vk-input-border-color) inset}.vk-input__append>.vk-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vk-input--textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:var(--vk-font-size-base)}.vk-textarea__wrapper{position:relative;display:block;resize:vertical;padding:5px 11px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;font-family:inherit;color:var(--vk-input-text-color, var(--vk-text-color-regular));background-color:var(--vk-input-bg-color, var(--vk-fill-color-blank));background-image:none;-webkit-appearance:none;box-shadow:0 0 0 1px var(--vk-input-border-color, var(--vk-border-color)) inset;border-radius:var(--vk-input-border-radius, var(--vk-border-radius-base));transition:var(--vk-transition-box-shadow);border:none}.vk-textarea__wrapper:focus{outline:none;box-shadow:0 0 0 1px var(--vk-input-focus-border-color) inset}.vk-textarea__wrapper::placeholder{color:var(--vk-input-placeholder-color)}.vk-input__wrapper{display:inline-flex;flex-grow:1;align-items:center;justify-content:center;padding:1px 11px;background-color:var(--vk-input-bg-color, var(--vk-fill-color-blank));background-image:none;border-radius:var(--vk-input-border-radius, var(--vk-border-radius-base));transition:var(--vk-transition-box-shadow);box-shadow:0 0 0 1px var(--vk-input-border-color, var(--vk-border-color)) inset}.vk-input__wrapper:hover{box-shadow:0 0 0 1px var(--vk-input-hover-border-color) inset}.vk-input__wrapper.is-focus{box-shadow:0 0 0 1px var(--vk-input-focus-border-color) inset}.vk-input__wrapper .vk-input__inner{--vk-input-inner-height: calc(var(--vk-input-height, 32px) - 2px);width:100%;flex-grow:1;-webkit-appearance:none;color:var(--vk-input-text-color, var(--vk-text-color-regular));font-size:inherit;height:var(--vk-input-inner-height);line-height:var(--vk-input-inner-height);padding:0;outline:none;border:none;background:none;box-sizing:border-box}.vk-input__wrapper .vk-input__inner::placeholder{color:var(--vk-input-placeholder-color)}.vk-input__wrapper .vk-icon{height:inherit;line-height:inherit;display:flex;justify-content:center;align-items:center;transition:all var(--vk-transition-duration);margin-left:8px}.vk-input__wrapper .vk-input__clear,.vk-input__wrapper .vk-input__password{color:var(--vk-input-icon-color);font-size:14px;cursor:pointer}.vk-input__wrapper .vk-input__clear:hover,.vk-input__wrapper .vk-input__password:hover{color:var(--vk-input-clear-hover-color)}.vk-icon{--vk-icon-color: inherit;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor;color:var(--vk-icon-color);font-size:inherit}.vk-icon--primary{--vk-icon-color: var(--vk-color-primary )}.vk-icon--info{--vk-icon-color: var(--vk-color-info )}.vk-icon--success{--vk-icon-color: var(--vk-color-success )}.vk-icon--warning{--vk-icon-color: var(--vk-color-warning )}.vk-icon--danger{--vk-icon-color: var(--vk-color-danger )}.vk-form{--vk-form-label-font-size: var(--vk-font-size-base);--vk-form-content-font-size: var(--vk-font-size-base)}.vk-form-item{display:flex;margin-bottom:18px}.vk-form-item .vk-form-item__label{width:150px;height:32px;line-height:32px;padding:0 12px 0 0;box-sizing:border-box;display:inline-flex;justify-content:flex-end;font-size:var(--vk-form-label-font-size);color:var(--vk-text-color-regular)}.vk-form-item .vk-form-item__content{display:flex;flex-wrap:wrap;align-items:center;flex:1;line-height:32px;font-size:var(--vk-form-content-font-size);min-width:0;position:relative}.vk-form-item .vk-form-item__error-msg{position:absolute;top:100%;left:0;padding-top:2px;color:var(--vk-color-danger);font-size:12px;line-height:1}.vk-form-item.is-error .vk-input__wrapper{box-shadow:0 0 0 1px var(--vk-color-danger) inset}.vk-form-item.is-success .vk-input__wrapper{box-shadow:0 0 0 1px var(--vk-color-success) inset}.vk-form-item.is-required>.vk-form-item__label:before{content:"*";color:var(--vk-color-danger);margin-right:4px}
@@ -0,0 +1,22 @@
1
+ import { FormProps } from './type';
2
+ declare function __VLS_template(): {
3
+ attrs: Partial<{}>;
4
+ slots: {
5
+ default?(_: {}): any;
6
+ };
7
+ refs: {};
8
+ rootEl: HTMLFormElement;
9
+ };
10
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
11
+ declare const __VLS_component: import('vue').DefineComponent<FormProps, {
12
+ validate: () => Promise<any>;
13
+ resetFields: () => void;
14
+ clearValidate: () => void;
15
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FormProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
16
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
17
+ export default _default;
18
+ type __VLS_WithTemplateSlots<T, S> = T & {
19
+ new (): {
20
+ $slots: S;
21
+ };
22
+ };
@@ -0,0 +1,28 @@
1
+ import { FormItemProps, ValidateStatusProp } from './type';
2
+ declare function __VLS_template(): {
3
+ attrs: Partial<{}>;
4
+ slots: {
5
+ label?(_: {
6
+ label: string;
7
+ }): any;
8
+ default?(_: {
9
+ validate: (trigger?: string) => Promise<true | void>;
10
+ }): any;
11
+ };
12
+ refs: {};
13
+ rootEl: HTMLDivElement;
14
+ };
15
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
16
+ declare const __VLS_component: import('vue').DefineComponent<FormItemProps, {
17
+ validateStatus: ValidateStatusProp;
18
+ validate: (trigger?: string) => Promise<any>;
19
+ resetField: () => void;
20
+ clearValidate: () => void;
21
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FormItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
22
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
23
+ export default _default;
24
+ type __VLS_WithTemplateSlots<T, S> = T & {
25
+ new (): {
26
+ $slots: S;
27
+ };
28
+ };
@@ -0,0 +1,4 @@
1
+ import { default as Form } from './Form.vue';
2
+ import { default as FormItem } from './FormItem.vue';
3
+ export { Form, FormItem };
4
+ export * from './type';
@@ -0,0 +1,46 @@
1
+ import { InjectionKey } from 'vue';
2
+ import { RuleItem, ValidateError, ValidateFieldsError } from 'async-validator';
3
+ export interface FormItemProps {
4
+ label: string;
5
+ prop?: string;
6
+ }
7
+ export interface FormItemRules extends RuleItem {
8
+ trigger?: string;
9
+ }
10
+ export type FormRules = Record<string, FormItemRules[]>;
11
+ export interface FormProps {
12
+ model: Record<string, any>;
13
+ rules: FormRules;
14
+ }
15
+ export interface FormItemContext {
16
+ prop: string;
17
+ validate: (trigger?: string) => Promise<any>;
18
+ resetField: () => void;
19
+ clearValidate: () => void;
20
+ }
21
+ export interface FormContext extends FormProps {
22
+ addField: (field: FormItemContext) => void;
23
+ removeField: (field: FormItemContext) => void;
24
+ }
25
+ export interface FormValidateFailure {
26
+ errors: ValidateError[] | null;
27
+ fields: ValidateFieldsError;
28
+ }
29
+ export interface FormInstance {
30
+ validate: () => Promise<any>;
31
+ resetFields: () => void;
32
+ clearValidate: () => void;
33
+ }
34
+ export interface ValidateStatusProp {
35
+ state: 'init' | 'success' | 'error';
36
+ errorMsg: string;
37
+ loading: boolean;
38
+ }
39
+ export interface FormItemInstance {
40
+ validateStatus: ValidateStatusProp;
41
+ validate: (trigger?: string) => Promise<any>;
42
+ resetField: () => void;
43
+ clearValidate: () => void;
44
+ }
45
+ export declare const formContextKey: InjectionKey<FormContext>;
46
+ export declare const formItemContextKey: InjectionKey<FormItemContext>;
@@ -0,0 +1,3 @@
1
+ import { IconProps } from './type';
2
+ declare const _default: import('vue').DefineComponent<IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
3
+ export default _default;
@@ -0,0 +1,3 @@
1
+ import { default as Icon } from './Icon.vue';
2
+ export default Icon;
3
+ export * from './type';
@@ -0,0 +1,28 @@
1
+ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
2
+ export interface IconProps {
3
+ border?: boolean;
4
+ fixedWidth?: boolean;
5
+ flip?: 'horizontal' | 'vertical' | 'both';
6
+ icon: object | Array<string> | string | IconDefinition;
7
+ mask?: object | Array<string> | string;
8
+ listItem?: boolean;
9
+ pull?: 'right' | 'left';
10
+ pulse?: boolean;
11
+ rotation?: 90 | 180 | 270 | '90' | '180' | '270';
12
+ swapOpacity?: boolean;
13
+ size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
14
+ spin?: boolean;
15
+ transform?: object | string;
16
+ symbol?: boolean | string;
17
+ title?: string;
18
+ inverse?: boolean;
19
+ bounce?: boolean;
20
+ shake?: boolean;
21
+ beat?: boolean;
22
+ fade?: boolean;
23
+ beatFade?: boolean;
24
+ spinPulse?: boolean;
25
+ spinReverse?: boolean;
26
+ type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
27
+ color?: string;
28
+ }
@@ -0,0 +1,47 @@
1
+ import { InputProps } from './type';
2
+ type __VLS_Props = InputProps;
3
+ type __VLS_PublicProps = {
4
+ modelValue?: string;
5
+ } & __VLS_Props;
6
+ declare function __VLS_template(): {
7
+ attrs: Partial<{}>;
8
+ slots: {
9
+ prepend?(_: {}): any;
10
+ prefix?(_: {}): any;
11
+ suffix?(_: {}): any;
12
+ append?(_: {}): any;
13
+ };
14
+ refs: {
15
+ inputRef: HTMLTextAreaElement;
16
+ };
17
+ rootEl: any;
18
+ };
19
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
20
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
21
+ ref: import('vue').Ref<HTMLInputElement | HTMLTextAreaElement | null, HTMLInputElement | HTMLTextAreaElement | null>;
22
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
23
+ input: (value: InputEvent) => any;
24
+ clear: () => any;
25
+ change: (value: Event) => any;
26
+ focus: (value: FocusEvent) => any;
27
+ blur: (value: FocusEvent) => any;
28
+ "update:modelValue": (value: string) => any;
29
+ }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
30
+ onInput?: ((value: InputEvent) => any) | undefined;
31
+ onClear?: (() => any) | undefined;
32
+ onChange?: ((value: Event) => any) | undefined;
33
+ onFocus?: ((value: FocusEvent) => any) | undefined;
34
+ onBlur?: ((value: FocusEvent) => any) | undefined;
35
+ "onUpdate:modelValue"?: ((value: string) => any) | undefined;
36
+ }>, {
37
+ type: string;
38
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
39
+ inputRef: HTMLTextAreaElement;
40
+ }, any>;
41
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
42
+ export default _default;
43
+ type __VLS_WithTemplateSlots<T, S> = T & {
44
+ new (): {
45
+ $slots: S;
46
+ };
47
+ };
@@ -0,0 +1,3 @@
1
+ import { default as Input } from './Input.vue';
2
+ export default Input;
3
+ export * from './type';
@@ -0,0 +1,23 @@
1
+ export interface InputProps {
2
+ type?: string;
3
+ modelValue: string;
4
+ size?: 'large' | 'small';
5
+ disabled?: boolean;
6
+ clearable?: boolean;
7
+ showPassword?: boolean;
8
+ placeholder?: string;
9
+ readonly?: boolean;
10
+ autocomplete?: string;
11
+ autofocus?: boolean;
12
+ form?: string;
13
+ }
14
+ export interface InputEmits {
15
+ input: [value: InputEvent];
16
+ change: [value: Event];
17
+ focus: [value: FocusEvent];
18
+ blur: [value: FocusEvent];
19
+ clear: [];
20
+ }
21
+ export interface InputInstance {
22
+ ref: HTMLInputElement | HTMLTextAreaElement;
23
+ }
@@ -1,7 +1,10 @@
1
1
  import { App } from 'vue';
2
2
  import { default as Button } from './components/Button';
3
+ import { default as Input } from './components/Input';
4
+ import { default as Icon } from './components/Icon';
5
+ import { Form, FormItem } from './components/Form';
3
6
  declare const install: (app: App) => void;
4
- export { install, Button };
7
+ export { install, Button, Input, Icon, Form, FormItem };
5
8
  declare const _default: {
6
9
  install: (app: App) => void;
7
10
  };
@@ -1 +1 @@
1
- :root{--vk-color-white: #ffffff;--vk-color-black: #000000;--colors: ( primary: #409eff, success: #67c23a, warning: #e6a23c, danger: #f56c6c, info: #909399 );--vk-bg-color: #ffffff;--vk-bg-color-page: #f2f3f5;--vk-bg-color-overlay: #ffffff;--vk-text-color-primary: #303133;--vk-text-color-regular: #606266;--vk-text-color-secondary: #909399;--vk-text-color-placeholder: #a8abb2;--vk-text-color-disabled: #c0c4cc;--vk-border-color: #dcdfe6;--vk-border-color-light: #e4e7ed;--vk-border-color-lighter: #ebeef5;--vk-border-color-extra-light: #f2f6fc;--vk-border-color-dark: #d4d7de;--vk-border-color-darker: #cdd0d6;--vk-fill-color: #f0f2f5;--vk-fill-color-light: #f5f7fa;--vk-fill-color-lighter: #fafafa;--vk-fill-color-extra-light: #fafcff;--vk-fill-color-dark: #ebedf0;--vk-fill-color-darker: #e6e8eb;--vk-fill-color-blank: #ffffff;--vk-border-width: 1px;--vk-border-style: solid;--vk-border-color-hover: var(--vk-text-color-disabled);--vk-border: var(--vk-border-width) var(--vk-border-style) var(--vk-border-color);--vk-border-radius-base: 4px;--vk-border-radius-small: 2px;--vk-border-radius-round: 20px;--vk-border-radius-circle: 100%;--vk-font-size-extra-large: 20px;--vk-font-size-large: 18px;--vk-font-size-medium: 16px;--vk-font-size-base: 14px;--vk-font-size-small: 13px;--vk-font-size-extra-small: 12px;--vk-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;--vk-font-weight-primary: 500;--vk-disabled-bg-color: var(--vk-fill-color-light);--vk-disabled-text-color: var(--vk-text-color-placeholder);--vk-disabled-border-color: var(--vk-border-color-light);--vk-transition-duration: .3s;--vk-transition-duration-fast: .2s;--vk-color-primary: #409eff ;--vk-color-primary-light-3: #79BBFF;--vk-color-primary-light-5: #A0CFFF;--vk-color-primary-light-7: #C6E2FF;--vk-color-primary-light-9: #ECF5FF;--vk-color-primary-light-8: #D9ECFF;--vk-color-primary-dark-2: #337ECC;--vk-color-success: #67c23a ;--vk-color-success-light-3: #95D475;--vk-color-success-light-5: #B3E19D;--vk-color-success-light-7: #D1EDC4;--vk-color-success-light-9: #F0F9EB;--vk-color-success-light-8: #E1F3D8;--vk-color-success-dark-2: #529B2E;--vk-color-warning: #e6a23c ;--vk-color-warning-light-3: #EEBE77;--vk-color-warning-light-5: #F3D19E;--vk-color-warning-light-7: #F8E3C5;--vk-color-warning-light-9: #FDF6EC;--vk-color-warning-light-8: #FAECD8;--vk-color-warning-dark-2: #B88230;--vk-color-danger: #f56c6c ;--vk-color-danger-light-3: #F89898;--vk-color-danger-light-5: #FAB6B6;--vk-color-danger-light-7: #FCD3D3;--vk-color-danger-light-9: #FEF0F0;--vk-color-danger-light-8: #FDE2E2;--vk-color-danger-dark-2: #C45656;--vk-color-info: #909399 ;--vk-color-info-light-3: #B1B3B8;--vk-color-info-light-5: #C8C9CC;--vk-color-info-light-7: #DEDFE0;--vk-color-info-light-9: #F4F4F5;--vk-color-info-light-8: #E9E9EB;--vk-color-info-dark-2: #73767A }body{font-family:var(--vk-font-family);font-weight:400;font-size:var(--vk-font-size-base);color:var(--vk-text-color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}a{color:var(--vk-color-primary);text-decoration:none}a:hover,a:focus{color:var(--vk-color-primary-light-3)}a:active{color:var(--vk-color-primary-dark-2)}h1,h2,h3,h4,h5,h6{color:var(--vk-text-color-regular);font-weight:inherit}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:calc(var(--vk-font-size-base) + 6px)}h2{font-size:calc(var(--vk-font-size-base) + 4px)}h3{font-size:calc(var(--vk-font-size-base) + 2px)}h4,h5,h6,p{font-size:inherit}p{line-height:1.8}p:first-child{margin-top:0}p:last-child{margin-bottom:0}sup,sub{font-size:calc(var(--vk-font-size-base) - 1px)}small{font-size:calc(var(--vk-font-size-base) - 2px)}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid var(--vk-border-color-lighter)}.vk-button{--vk-button-font-weight: var(--vk-font-weight-primary);--vk-button-border-color: var(--vk-border-color);--vk-button-bg-color: var(--vk-fill-color-blank);--vk-button-text-color: var(--vk-text-color-regular);--vk-button-disabled-text-color: var(--vk-disabled-text-color);--vk-button-disabled-bg-color: var(--vk-fill-color-blank);--vk-button-disabled-border-color: var(--vk-border-color-light);--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-color-primary-light-9);--vk-button-hover-border-color: var(--vk-color-primary-light-7);--vk-button-active-text-color: var(--vk-button-hover-text-color);--vk-button-active-border-color: var(--vk-color-primary);--vk-button-active-bg-color: var(--vk-button-hover-bg-color);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-text-color-primary)}.vk-button{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:var(--vk-button-text-color);text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:var(--vk-button-font-weight);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:var(--vk-button-bg-color);border:var(--vk-border);border-color:var(--vk-button-border-color);padding:8px 15px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button+.vk-button{margin-left:12px}.vk-button:hover,.vk-button:focus{color:var(--vk-button-hover-text-color);border-color:var(--vk-button-hover-border-color);background-color:var(--vk-button-hover-bg-color);outline:none}.vk-button:active{color:var(--vk-button-active-text-color);border-color:var(--vk-button-active-border-color);background-color:var(--vk-button-active-bg-color);outline:none}.vk-button.is-plain{--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-fill-color-blank);--vk-button-hover-border-color: var(--vk-color-primary)}.vk-button.is-round{border-radius:var(--vk-border-radius-round)}.vk-button.is-circle{border-radius:50%;padding:8px}.vk-button.is-disabled,.vk-button.is-disabled:hover,.vk-button.is-disabled:focus,.vk-button[disabled],.vk-button[disabled]:hover,.vk-button[disabled]:focus{color:var(--vk-button-disabled-text-color);cursor:not-allowed;background-image:none;background-color:var(--vk-button-disabled-bg-color);border-color:var(--vk-button-disabled-border-color)}.vk-button [class*=vk-icon]+span{margin-left:6px}.vk-button--primary{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-primary);--vk-button-border-color: var(--vk-color-primary);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-color-primary-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary-light-3);--vk-button-hover-border-color: var(--vk-color-primary-light-3);--vk-button-active-bg-color: var(--vk-color-primary-dark-2);--vk-button-active-border-color: var(--vk-color-primary-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-primary-light-5);--vk-button-disabled-border-color: var(--vk-color-primary-light-5)}.vk-button--primary.is-plain{--vk-button-text-color: var(--vk-color-primary);--vk-button-bg-color: var(--vk-color-primary-light-9);--vk-button-border-color: var(--vk-color-primary-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary);--vk-button-hover-border-color: var(--vk-color-primary);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--success{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-success);--vk-button-border-color: var(--vk-color-success);--vk-button-outline-color: var(--vk-color-success-light-5);--vk-button-active-color: var(--vk-color-success-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success-light-3);--vk-button-hover-border-color: var(--vk-color-success-light-3);--vk-button-active-bg-color: var(--vk-color-success-dark-2);--vk-button-active-border-color: var(--vk-color-success-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-success-light-5);--vk-button-disabled-border-color: var(--vk-color-success-light-5)}.vk-button--success.is-plain{--vk-button-text-color: var(--vk-color-success);--vk-button-bg-color: var(--vk-color-success-light-9);--vk-button-border-color: var(--vk-color-success-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success);--vk-button-hover-border-color: var(--vk-color-success);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--warning{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-warning);--vk-button-border-color: var(--vk-color-warning);--vk-button-outline-color: var(--vk-color-warning-light-5);--vk-button-active-color: var(--vk-color-warning-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning-light-3);--vk-button-hover-border-color: var(--vk-color-warning-light-3);--vk-button-active-bg-color: var(--vk-color-warning-dark-2);--vk-button-active-border-color: var(--vk-color-warning-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-warning-light-5);--vk-button-disabled-border-color: var(--vk-color-warning-light-5)}.vk-button--warning.is-plain{--vk-button-text-color: var(--vk-color-warning);--vk-button-bg-color: var(--vk-color-warning-light-9);--vk-button-border-color: var(--vk-color-warning-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning);--vk-button-hover-border-color: var(--vk-color-warning);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--info{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-info);--vk-button-border-color: var(--vk-color-info);--vk-button-outline-color: var(--vk-color-info-light-5);--vk-button-active-color: var(--vk-color-info-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info-light-3);--vk-button-hover-border-color: var(--vk-color-info-light-3);--vk-button-active-bg-color: var(--vk-color-info-dark-2);--vk-button-active-border-color: var(--vk-color-info-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-info-light-5);--vk-button-disabled-border-color: var(--vk-color-info-light-5)}.vk-button--info.is-plain{--vk-button-text-color: var(--vk-color-info);--vk-button-bg-color: var(--vk-color-info-light-9);--vk-button-border-color: var(--vk-color-info-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info);--vk-button-hover-border-color: var(--vk-color-info);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--danger{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-danger);--vk-button-border-color: var(--vk-color-danger);--vk-button-outline-color: var(--vk-color-danger-light-5);--vk-button-active-color: var(--vk-color-danger-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger-light-3);--vk-button-hover-border-color: var(--vk-color-danger-light-3);--vk-button-active-bg-color: var(--vk-color-danger-dark-2);--vk-button-active-border-color: var(--vk-color-danger-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-danger-light-5);--vk-button-disabled-border-color: var(--vk-color-danger-light-5)}.vk-button--danger.is-plain{--vk-button-text-color: var(--vk-color-danger);--vk-button-bg-color: var(--vk-color-danger-light-9);--vk-button-border-color: var(--vk-color-danger-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger);--vk-button-hover-border-color: var(--vk-color-danger);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--large{--vk-button-size: 40px;height:var(--vk-button-size);padding:12px 19px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button--small{--vk-button-size: 24px;height:var(--vk-button-size);padding:5px 11px;font-size:12px;border-radius:calc(var(--vk-border-radius-base) - 1px)}
1
+ :root{--vk-color-white: #ffffff;--vk-color-black: #000000;--colors: ( primary: #409eff, success: #67c23a, warning: #e6a23c, danger: #f56c6c, info: #909399 );--vk-bg-color: #ffffff;--vk-bg-color-page: #f2f3f5;--vk-bg-color-overlay: #ffffff;--vk-text-color-primary: #303133;--vk-text-color-regular: #606266;--vk-text-color-secondary: #909399;--vk-text-color-placeholder: #a8abb2;--vk-text-color-disabled: #c0c4cc;--vk-border-color: #dcdfe6;--vk-border-color-light: #e4e7ed;--vk-border-color-lighter: #ebeef5;--vk-border-color-extra-light: #f2f6fc;--vk-border-color-dark: #d4d7de;--vk-border-color-darker: #cdd0d6;--vk-fill-color: #f0f2f5;--vk-fill-color-light: #f5f7fa;--vk-fill-color-lighter: #fafafa;--vk-fill-color-extra-light: #fafcff;--vk-fill-color-dark: #ebedf0;--vk-fill-color-darker: #e6e8eb;--vk-fill-color-blank: #ffffff;--vk-border-width: 1px;--vk-border-style: solid;--vk-border-color-hover: var(--vk-text-color-disabled);--vk-border: var(--vk-border-width) var(--vk-border-style) var(--vk-border-color);--vk-border-radius-base: 4px;--vk-border-radius-small: 2px;--vk-border-radius-round: 20px;--vk-border-radius-circle: 100%;--vk-font-size-extra-large: 20px;--vk-font-size-large: 18px;--vk-font-size-medium: 16px;--vk-font-size-base: 14px;--vk-font-size-small: 13px;--vk-font-size-extra-small: 12px;--vk-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;--vk-font-weight-primary: 500;--vk-disabled-bg-color: var(--vk-fill-color-light);--vk-disabled-text-color: var(--vk-text-color-placeholder);--vk-disabled-border-color: var(--vk-border-color-light);--vk-transition-duration: .3s;--vk-transition-duration-fast: .2s;--vk-color-primary: #409eff ;--vk-color-primary-light-3: #79BBFF;--vk-color-primary-light-5: #A0CFFF;--vk-color-primary-light-7: #C6E2FF;--vk-color-primary-light-9: #ECF5FF;--vk-color-primary-light-8: #D9ECFF;--vk-color-primary-dark-2: #337ECC;--vk-color-success: #67c23a ;--vk-color-success-light-3: #95D475;--vk-color-success-light-5: #B3E19D;--vk-color-success-light-7: #D1EDC4;--vk-color-success-light-9: #F0F9EB;--vk-color-success-light-8: #E1F3D8;--vk-color-success-dark-2: #529B2E;--vk-color-warning: #e6a23c ;--vk-color-warning-light-3: #EEBE77;--vk-color-warning-light-5: #F3D19E;--vk-color-warning-light-7: #F8E3C5;--vk-color-warning-light-9: #FDF6EC;--vk-color-warning-light-8: #FAECD8;--vk-color-warning-dark-2: #B88230;--vk-color-danger: #f56c6c ;--vk-color-danger-light-3: #F89898;--vk-color-danger-light-5: #FAB6B6;--vk-color-danger-light-7: #FCD3D3;--vk-color-danger-light-9: #FEF0F0;--vk-color-danger-light-8: #FDE2E2;--vk-color-danger-dark-2: #C45656;--vk-color-info: #909399 ;--vk-color-info-light-3: #B1B3B8;--vk-color-info-light-5: #C8C9CC;--vk-color-info-light-7: #DEDFE0;--vk-color-info-light-9: #F4F4F5;--vk-color-info-light-8: #E9E9EB;--vk-color-info-dark-2: #73767A }body{font-family:var(--vk-font-family);font-weight:400;font-size:var(--vk-font-size-base);color:var(--vk-text-color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}a{color:var(--vk-color-primary);text-decoration:none}a:hover,a:focus{color:var(--vk-color-primary-light-3)}a:active{color:var(--vk-color-primary-dark-2)}h1,h2,h3,h4,h5,h6{color:var(--vk-text-color-regular);font-weight:inherit}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:calc(var(--vk-font-size-base) + 6px)}h2{font-size:calc(var(--vk-font-size-base) + 4px)}h3{font-size:calc(var(--vk-font-size-base) + 2px)}h4,h5,h6,p{font-size:inherit}p{line-height:1.8}p:first-child{margin-top:0}p:last-child{margin-bottom:0}sup,sub{font-size:calc(var(--vk-font-size-base) - 1px)}small{font-size:calc(var(--vk-font-size-base) - 2px)}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid var(--vk-border-color-lighter)}.vk-button{--vk-button-font-weight: var(--vk-font-weight-primary);--vk-button-border-color: var(--vk-border-color);--vk-button-bg-color: var(--vk-fill-color-blank);--vk-button-text-color: var(--vk-text-color-regular);--vk-button-disabled-text-color: var(--vk-disabled-text-color);--vk-button-disabled-bg-color: var(--vk-fill-color-blank);--vk-button-disabled-border-color: var(--vk-border-color-light);--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-color-primary-light-9);--vk-button-hover-border-color: var(--vk-color-primary-light-7);--vk-button-active-text-color: var(--vk-button-hover-text-color);--vk-button-active-border-color: var(--vk-color-primary);--vk-button-active-bg-color: var(--vk-button-hover-bg-color);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-text-color-primary)}.vk-button{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:var(--vk-button-text-color);text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:var(--vk-button-font-weight);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:var(--vk-button-bg-color);border:var(--vk-border);border-color:var(--vk-button-border-color);padding:8px 15px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button+.vk-button{margin-left:12px}.vk-button:hover,.vk-button:focus{color:var(--vk-button-hover-text-color);border-color:var(--vk-button-hover-border-color);background-color:var(--vk-button-hover-bg-color);outline:none}.vk-button:active{color:var(--vk-button-active-text-color);border-color:var(--vk-button-active-border-color);background-color:var(--vk-button-active-bg-color);outline:none}.vk-button.is-plain{--vk-button-hover-text-color: var(--vk-color-primary);--vk-button-hover-bg-color: var(--vk-fill-color-blank);--vk-button-hover-border-color: var(--vk-color-primary)}.vk-button.is-round{border-radius:var(--vk-border-radius-round)}.vk-button.is-circle{border-radius:50%;padding:8px}.vk-button.is-disabled,.vk-button.is-disabled:hover,.vk-button.is-disabled:focus,.vk-button[disabled],.vk-button[disabled]:hover,.vk-button[disabled]:focus{color:var(--vk-button-disabled-text-color);cursor:not-allowed;background-image:none;background-color:var(--vk-button-disabled-bg-color);border-color:var(--vk-button-disabled-border-color)}.vk-button [class*=vk-icon]+span{margin-left:6px}.vk-button--primary{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-primary);--vk-button-border-color: var(--vk-color-primary);--vk-button-outline-color: var(--vk-color-primary-light-5);--vk-button-active-color: var(--vk-color-primary-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary-light-3);--vk-button-hover-border-color: var(--vk-color-primary-light-3);--vk-button-active-bg-color: var(--vk-color-primary-dark-2);--vk-button-active-border-color: var(--vk-color-primary-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-primary-light-5);--vk-button-disabled-border-color: var(--vk-color-primary-light-5)}.vk-button--primary.is-plain{--vk-button-text-color: var(--vk-color-primary);--vk-button-bg-color: var(--vk-color-primary-light-9);--vk-button-border-color: var(--vk-color-primary-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-primary);--vk-button-hover-border-color: var(--vk-color-primary);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--success{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-success);--vk-button-border-color: var(--vk-color-success);--vk-button-outline-color: var(--vk-color-success-light-5);--vk-button-active-color: var(--vk-color-success-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success-light-3);--vk-button-hover-border-color: var(--vk-color-success-light-3);--vk-button-active-bg-color: var(--vk-color-success-dark-2);--vk-button-active-border-color: var(--vk-color-success-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-success-light-5);--vk-button-disabled-border-color: var(--vk-color-success-light-5)}.vk-button--success.is-plain{--vk-button-text-color: var(--vk-color-success);--vk-button-bg-color: var(--vk-color-success-light-9);--vk-button-border-color: var(--vk-color-success-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-success);--vk-button-hover-border-color: var(--vk-color-success);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--warning{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-warning);--vk-button-border-color: var(--vk-color-warning);--vk-button-outline-color: var(--vk-color-warning-light-5);--vk-button-active-color: var(--vk-color-warning-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning-light-3);--vk-button-hover-border-color: var(--vk-color-warning-light-3);--vk-button-active-bg-color: var(--vk-color-warning-dark-2);--vk-button-active-border-color: var(--vk-color-warning-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-warning-light-5);--vk-button-disabled-border-color: var(--vk-color-warning-light-5)}.vk-button--warning.is-plain{--vk-button-text-color: var(--vk-color-warning);--vk-button-bg-color: var(--vk-color-warning-light-9);--vk-button-border-color: var(--vk-color-warning-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-warning);--vk-button-hover-border-color: var(--vk-color-warning);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--info{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-info);--vk-button-border-color: var(--vk-color-info);--vk-button-outline-color: var(--vk-color-info-light-5);--vk-button-active-color: var(--vk-color-info-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info-light-3);--vk-button-hover-border-color: var(--vk-color-info-light-3);--vk-button-active-bg-color: var(--vk-color-info-dark-2);--vk-button-active-border-color: var(--vk-color-info-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-info-light-5);--vk-button-disabled-border-color: var(--vk-color-info-light-5)}.vk-button--info.is-plain{--vk-button-text-color: var(--vk-color-info);--vk-button-bg-color: var(--vk-color-info-light-9);--vk-button-border-color: var(--vk-color-info-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-info);--vk-button-hover-border-color: var(--vk-color-info);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--danger{--vk-button-text-color: var(--vk-color-white);--vk-button-bg-color: var(--vk-color-danger);--vk-button-border-color: var(--vk-color-danger);--vk-button-outline-color: var(--vk-color-danger-light-5);--vk-button-active-color: var(--vk-color-danger-dark-2);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger-light-3);--vk-button-hover-border-color: var(--vk-color-danger-light-3);--vk-button-active-bg-color: var(--vk-color-danger-dark-2);--vk-button-active-border-color: var(--vk-color-danger-dark-2);--vk-button-disabled-text-color: var(--vk-color-white);--vk-button-disabled-bg-color: var(--vk-color-danger-light-5);--vk-button-disabled-border-color: var(--vk-color-danger-light-5)}.vk-button--danger.is-plain{--vk-button-text-color: var(--vk-color-danger);--vk-button-bg-color: var(--vk-color-danger-light-9);--vk-button-border-color: var(--vk-color-danger-light-5);--vk-button-hover-text-color: var(--vk-color-white);--vk-button-hover-bg-color: var(--vk-color-danger);--vk-button-hover-border-color: var(--vk-color-danger);--vk-button-active-text-color: var(--vk-color-white)}.vk-button--large{--vk-button-size: 40px;height:var(--vk-button-size);padding:12px 19px;font-size:var(--vk-font-size-base);border-radius:var(--vk-border-radius-base)}.vk-button--small{--vk-button-size: 24px;height:var(--vk-button-size);padding:5px 11px;font-size:12px;border-radius:calc(var(--vk-border-radius-base) - 1px)}.vk-input{--vk-input-text-color: var(--vk-text-color-regular);--vk-input-border: var(--vk-border);--vk-input-hover-border: var(--vk-border-color-hover);--vk-input-focus-border: var(--vk-color-primary);--vk-input-transparent-border: 0 0 0 1px transparent inset;--vk-input-border-color: var(--vk-border-color);--vk-input-border-radius: var(--vk-border-radius-base);--vk-input-bg-color: var(--vk-fill-color-blank);--vk-input-icon-color: var(--vk-text-color-placeholder);--vk-input-placeholder-color: var(--vk-text-color-placeholder);--vk-input-hover-border-color: var(--vk-border-color-hover);--vk-input-clear-hover-color: var(--vk-text-color-secondary);--vk-input-focus-border-color: var(--vk-color-primary)}.vk-input{--vk-input-height: var(--vk-component-size);position:relative;font-size:var(--vk-font-size-base);display:inline-flex;width:100%;line-height:var(--vk-input-height);box-sizing:border-box;vertical-align:middle}.vk-input.is-disabled{cursor:not-allowed}.vk-input.is-disabled .vk-input__wrapper{background-color:var(--vk-disabled-bg-color);box-shadow:0 0 0 1px var(--vk-disabled-border-color) inset}.vk-input.is-disabled .vk-input__inner{color:var(--vk-disabled-text-color);-webkit-text-fill-color:var(--vk-disabled-text-color);cursor:not-allowed}.vk-input.is-disabled .vk-textarea__inner{background-color:var(--vk-disabled-bg-color);box-shadow:0 0 0 1px var(--vk-disabled-border-color) inset;color:var(--vk-disabled-text-color);-webkit-text-fill-color:var(--vk-disabled-text-color);cursor:not-allowed}.vk-input.is-prepend>.vk-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vk-input.is-append>.vk-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.vk-input--large{--vk-input-height: var(--vk-component-size-large);font-size:14px}.vk-input--large .vk-input__wrapper{padding:1px 15px}.vk-input--large .vk-input__wrapper .vk-input__inner{--vk-input-inner-height: calc(var(--vk-input-height, 40px) - 2px)}.vk-input--small{--vk-input-height: var(--vk-component-size-small);font-size:12px}.vk-input--small .vk-input__wrapper{padding:1px 7px}.vk-input--small .vk-input__wrapper .vk-input__inner{--vk-input-inner-height: calc(var(--vk-input-height, 24px) - 2px)}.vk-input__prefix,.vk-input__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;height:100%;text-align:center;color:var(--vk-input-icon-color, var(--vk-text-color-placeholder));transition:all var(--vk-transition-duration)}.vk-input__prefix>:first-child{margin-left:0!important}.vk-input__prefix>:last-child{margin-right:8px!important}.vk-input__suffix>:first-child{margin-left:8px!important}.vk-input__suffix>:last-child{margin-right:0!important}.vk-input__prepend,.vk-input__append{background-color:var(--vk-fill-color-light);color:var(--vk-color-info);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;border-radius:var(--vk-input-border-radius);padding:0 20px;white-space:nowrap}.vk-input__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:1px 0 0 0 var(--vk-input-border-color) inset,0 1px 0 0 var(--vk-input-border-color) inset,0 -1px 0 0 var(--vk-input-border-color) inset}.vk-input__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:0 1px 0 0 var(--vk-input-border-color) inset,0 -1px 0 0 var(--vk-input-border-color) inset,-1px 0 0 0 var(--vk-input-border-color) inset}.vk-input__append>.vk-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.vk-input--textarea{position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:var(--vk-font-size-base)}.vk-textarea__wrapper{position:relative;display:block;resize:vertical;padding:5px 11px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;font-family:inherit;color:var(--vk-input-text-color, var(--vk-text-color-regular));background-color:var(--vk-input-bg-color, var(--vk-fill-color-blank));background-image:none;-webkit-appearance:none;box-shadow:0 0 0 1px var(--vk-input-border-color, var(--vk-border-color)) inset;border-radius:var(--vk-input-border-radius, var(--vk-border-radius-base));transition:var(--vk-transition-box-shadow);border:none}.vk-textarea__wrapper:focus{outline:none;box-shadow:0 0 0 1px var(--vk-input-focus-border-color) inset}.vk-textarea__wrapper::placeholder{color:var(--vk-input-placeholder-color)}.vk-input__wrapper{display:inline-flex;flex-grow:1;align-items:center;justify-content:center;padding:1px 11px;background-color:var(--vk-input-bg-color, var(--vk-fill-color-blank));background-image:none;border-radius:var(--vk-input-border-radius, var(--vk-border-radius-base));transition:var(--vk-transition-box-shadow);box-shadow:0 0 0 1px var(--vk-input-border-color, var(--vk-border-color)) inset}.vk-input__wrapper:hover{box-shadow:0 0 0 1px var(--vk-input-hover-border-color) inset}.vk-input__wrapper.is-focus{box-shadow:0 0 0 1px var(--vk-input-focus-border-color) inset}.vk-input__wrapper .vk-input__inner{--vk-input-inner-height: calc(var(--vk-input-height, 32px) - 2px);width:100%;flex-grow:1;-webkit-appearance:none;color:var(--vk-input-text-color, var(--vk-text-color-regular));font-size:inherit;height:var(--vk-input-inner-height);line-height:var(--vk-input-inner-height);padding:0;outline:none;border:none;background:none;box-sizing:border-box}.vk-input__wrapper .vk-input__inner::placeholder{color:var(--vk-input-placeholder-color)}.vk-input__wrapper .vk-icon{height:inherit;line-height:inherit;display:flex;justify-content:center;align-items:center;transition:all var(--vk-transition-duration);margin-left:8px}.vk-input__wrapper .vk-input__clear,.vk-input__wrapper .vk-input__password{color:var(--vk-input-icon-color);font-size:14px;cursor:pointer}.vk-input__wrapper .vk-input__clear:hover,.vk-input__wrapper .vk-input__password:hover{color:var(--vk-input-clear-hover-color)}.vk-icon{--vk-icon-color: inherit;display:inline-flex;justify-content:center;align-items:center;position:relative;fill:currentColor;color:var(--vk-icon-color);font-size:inherit}.vk-icon--primary{--vk-icon-color: var(--vk-color-primary )}.vk-icon--info{--vk-icon-color: var(--vk-color-info )}.vk-icon--success{--vk-icon-color: var(--vk-color-success )}.vk-icon--warning{--vk-icon-color: var(--vk-color-warning )}.vk-icon--danger{--vk-icon-color: var(--vk-color-danger )}.vk-form{--vk-form-label-font-size: var(--vk-font-size-base);--vk-form-content-font-size: var(--vk-font-size-base)}.vk-form-item{display:flex;margin-bottom:18px}.vk-form-item .vk-form-item__label{width:150px;height:32px;line-height:32px;padding:0 12px 0 0;box-sizing:border-box;display:inline-flex;justify-content:flex-end;font-size:var(--vk-form-label-font-size);color:var(--vk-text-color-regular)}.vk-form-item .vk-form-item__content{display:flex;flex-wrap:wrap;align-items:center;flex:1;line-height:32px;font-size:var(--vk-form-content-font-size);min-width:0;position:relative}.vk-form-item .vk-form-item__error-msg{position:absolute;top:100%;left:0;padding-top:2px;color:var(--vk-color-danger);font-size:12px;line-height:1}.vk-form-item.is-error .vk-input__wrapper{box-shadow:0 0 0 1px var(--vk-color-danger) inset}.vk-form-item.is-success .vk-input__wrapper{box-shadow:0 0 0 1px var(--vk-color-success) inset}.vk-form-item.is-required>.vk-form-item__label:before{content:"*";color:var(--vk-color-danger);margin-right:4px}