falcon-ui/src/packages/button/button.less

ui components for falcon

@import "../../styles/base.less";

@button-mini-height: 24px;
@button-mini-font-size: @font-size-xs;
@button-small-height: 32px;
@button-small-font-size: @font-size-sm;
@button-medium-height: 44px;
@button-medium-font-size: @font-size-md;
@button-large-height: 50px;
@button-large-font-size: @font-size-lg;

@button-default-color: #606266;
@button-default-background-color: @white;
@button-default-border-color: #dcdfe6;
@button-default-plain-color: #606266;
@button-default-plain-background-color: @white;
@button-default-plain-border-color: #dcdfe6;
@button-default-active-color: #3a8ee6;
@button-default-active-background-color: #ecf5ff;
@button-default-active-border-color: #3a8ee6;
@button-default-disabled-color: #c0c4cc;
@button-default-disabled-background-color: @white;
@button-default-disabled-border-color: #ebeef5;
@button-default-plain-disabled-color: #c0c4cc;
@button-default-plain-disabled-background-color: @white;
@button-default-plain-disabled-border-color: #ebeef5;

@button-primary-color: @white;
@button-primary-background-color: #409eff;
@button-primary-border-color: #409eff;
@button-primary-plain-color: #409eff;
@button-primary-plain-background-color: #ecf5ff;
@button-primary-plain-border-color: #b3d8ff;
@button-primary-active-color: @white;
@button-primary-active-background-color: #3a8ee6;
@button-primary-active-border-color: #3a8ee6;
@button-primary-disabled-color: @white;
@button-primary-disabled-background-color: #a0cfff;
@button-primary-disabled-border-color: #a0cfff;
@button-primary-plain-disabled-color: #8cc5ff;
@button-primary-plain-disabled-background-color: #ecf5ff;
@button-primary-plain-disabled-border-color: #d9ecff;

@button-success-color: @white;
@button-success-background-color: #67c23a;
@button-success-border-color: #67c23a;
@button-success-plain-color: #67c23a;
@button-success-plain-background-color: #f0f9eb;
@button-success-plain-border-color: #c2e7b0;
@button-success-active-color: @white;
@button-success-active-background-color: #5daf34;
@button-success-active-border-color: #5daf34;
@button-success-disabled-color: @white;
@button-success-disabled-background-color: #b3e19d;
@button-success-disabled-border-color: #b3e19d;
@button-success-plain-disabled-color: #a4da89;
@button-success-plain-disabled-background-color: #f0f9eb;
@button-success-plain-disabled-border-color: #e1f3d8;

@button-warning-color: @white;
@button-warning-background-color: #e6a23c;
@button-warning-border-color: #e6a23c;
@button-warning-plain-color: #e6a23c;
@button-warning-plain-background-color: #fdf6ec;
@button-warning-plain-border-color: #f5dab1;
@button-warning-active-color: @white;
@button-warning-active-background-color: #cf9236;
@button-warning-active-border-color: #cf9236;
@button-warning-disabled-color: @white;
@button-warning-disabled-background-color: #f3d19e;
@button-warning-disabled-border-color: #f3d19e;
@button-warning-plain-disabled-color: #f0c78a;
@button-warning-plain-disabled-background-color: #fdf6ec;
@button-warning-plain-disabled-border-color: #faecd8;

@button-danger-color: @white;
@button-danger-background-color: #f56c6c;
@button-danger-border-color: #f56c6c;
@button-danger-plain-color: #f56c6c;
@button-danger-plain-background-color: #fef0f0;
@button-danger-plain-border-color: #fbc4c4;
@button-danger-active-color: @white;
@button-danger-active-background-color: #dd6161;
@button-danger-active-border-color: #dd6161;
@button-danger-disabled-color: @white;
@button-danger-disabled-background-color: #fab6b6;
@button-danger-disabled-border-color: #fab6b6;
@button-danger-plain-disabled-color: #f9a7a7;
@button-danger-plain-disabled-background-color: #fef0f0;
@button-danger-plain-disabled-border-color: #fde2e2;

@button-info-color: @white;
@button-info-background-color: #909399;
@button-info-border-color: #909399;
@button-info-plain-color: #909399;
@button-info-plain-background-color: #f4f4f5;
@button-info-plain-border-color: #d3d4d6;
@button-info-active-color: @white;
@button-info-active-background-color: #82848a;
@button-info-active-border-color: #82848a;
@button-info-disabled-color: @white;
@button-info-disabled-background-color: #c8c9cc;
@button-info-disabled-border-color: #c8c9cc;
@button-info-plain-disabled-color: #bcbec2;
@button-info-plain-disabled-background-color: #f4f4f5;
@button-info-plain-disabled-border-color: #e9e9eb;

@button-border-width: @border-width-base;
@button-border-radius: @border-radius-sm;
@button-round-border-radius: @border-radius-max;
@button-plain-background-color: @white;
@button-disabled-opacity: @disabled-opacity;
@button-icon-text-spacing: 4px;