diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss index e2d174bdf..ead1218dc 100644 --- a/packages/theme-chalk/src/checkbox.scss +++ b/packages/theme-chalk/src/checkbox.scss @@ -17,6 +17,9 @@ padding: $--checkbox-bordered-padding; border-radius: $--border-radius-base; border: $--border-base; + box-sizing: border-box; + line-height: normal; + height: $--checkbox-bordered-height; &.is-checked { border-color: $--color-primary; @@ -34,6 +37,7 @@ &.el-checkbox--medium { padding: $--checkbox-bordered-medium-padding; border-radius: $--button-medium-border-radius; + height: $--checkbox-bordered-medium-height; .el-checkbox__label { line-height: 17px; @@ -49,6 +53,7 @@ &.el-checkbox--small { padding: $--checkbox-bordered-small-padding; border-radius: $--button-small-border-radius; + height: $--checkbox-bordered-small-height; .el-checkbox__label { line-height: 15px; @@ -69,6 +74,7 @@ &.el-checkbox--mini { padding: $--checkbox-bordered-mini-padding; border-radius: $--button-mini-border-radius; + height: $--checkbox-bordered-mini-height; .el-checkbox__label { line-height: 12px; diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index f6b550228..0bcc38131 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -137,16 +137,20 @@ $--checkbox-checked-icon-color: $--fill-base !default; $--checkbox-input-border-color-hover: $--color-primary !default; +$--checkbox-bordered-height: 40px !default; $--checkbox-bordered-padding: 9px 20px 9px 10px !default; $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; -$--checkbox-bordered-small-padding: 3px 15px 7px 10px !default; -$--checkbox-bordered-mini-padding: 1px 15px 5px 10px !default; +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; $--checkbox-bordered-medium-input-height: 14px !default; $--checkbox-bordered-medium-input-width: 14px !default; +$--checkbox-bordered-medium-height: 36px !default; $--checkbox-bordered-small-input-height: 12px !default; $--checkbox-bordered-small-input-width: 12px !default; +$--checkbox-bordered-small-height: 32px !default; $--checkbox-bordered-mini-input-height: 12px !default; $--checkbox-bordered-mini-input-width: 12px !default; +$--checkbox-bordered-mini-height: 28px !default; $--checkbox-button-font-size: $--font-size-base !default; $--checkbox-button-checked-fill: $--color-primary !default; @@ -183,16 +187,20 @@ $--radio-checked-icon-color: $--color-primary !default; $--radio-input-border-color-hover: $--color-primary !default; -$--radio-bordered-padding: 10px 20px 10px 10px !default; -$--radio-bordered-medium-padding: 8px 20px 8px 10px !default; -$--radio-bordered-small-padding: 6px 15px 6px 10px !default; -$--radio-bordered-mini-padding: 4px 15px 4px 10px !default; +$--radio-bordered-height: 40px !default; +$--radio-bordered-padding: 12px 20px 0 10px !default; +$--radio-bordered-medium-padding: 10px 20px 0 10px !default; +$--radio-bordered-small-padding: 8px 15px 0 10px !default; +$--radio-bordered-mini-padding: 6px 15px 0 10px !default; $--radio-bordered-medium-input-height: 14px !default; $--radio-bordered-medium-input-width: 14px !default; +$--radio-bordered-medium-height: 36px !default; $--radio-bordered-small-input-height: 12px !default; $--radio-bordered-small-input-width: 12px !default; +$--radio-bordered-small-height: 32px !default; $--radio-bordered-mini-input-height: 12px !default; $--radio-bordered-mini-input-width: 12px !default; +$--radio-bordered-mini-height: 28px !default; $--radio-button-font-size: $--font-size-base !default; $--radio-button-checked-fill: $--color-primary !default; diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss index a3d0791da..6332e9c06 100644 --- a/packages/theme-chalk/src/radio.scss +++ b/packages/theme-chalk/src/radio.scss @@ -19,6 +19,8 @@ padding: $--radio-bordered-padding; border-radius: $--border-radius-base; border: $--border-base; + box-sizing: border-box; + height: $--radio-bordered-height; &.is-checked { border-color: $--color-primary; @@ -38,6 +40,7 @@ &.is-bordered { padding: $--radio-bordered-medium-padding; border-radius: $--button-medium-border-radius; + height: $--radio-bordered-medium-height; .el-radio__label { font-size: $--button-medium-font-size; } @@ -51,6 +54,7 @@ &.is-bordered { padding: $--radio-bordered-small-padding; border-radius: $--button-small-border-radius; + height: $--radio-bordered-small-height; .el-radio__label { font-size: $--button-small-font-size; } @@ -64,6 +68,7 @@ &.is-bordered { padding: $--radio-bordered-mini-padding; border-radius: $--button-mini-border-radius; + height: $--radio-bordered-mini-height; .el-radio__label { font-size: $--button-mini-font-size; }