Browse Source

KERNEL-13158 feat: radio和半选图标支持等比缩放

es6
zsmj 2 years ago
parent
commit
0a1f19347f
  1. 9
      src/less/base/single/button/button.half.less
  2. 13
      src/less/base/single/input/radio.less

9
src/less/base/single/button/button.half.less

@ -6,10 +6,11 @@
&:after { &:after {
position: absolute; position: absolute;
left: 2px; left: 50%;
top: 2px; top: 50%;
width: 8px; width: 50%;
height: 8px; height: 50%;
.transform(translate(-50%, -50%));
background-color: @color-bi-background-half-button-content; background-color: @color-bi-background-half-button-content;
content: ''; content: '';
} }

13
src/less/base/single/input/radio.less

@ -2,13 +2,15 @@
.bi-radio { .bi-radio {
& .radio-content, &.radio-content { & .radio-content, &.radio-content {
.border-radius(8px); .border-radius(50%);
border: 1px solid @color-bi-border-radio; border: 1px solid @color-bi-border-radio;
.box-sizing(border-box); .box-sizing(border-box);
.transition(all .1s); .transition(all .1s);
&:after { &:after {
content: ""; content: "";
} }
&.hover, &:hover { &.hover, &:hover {
border-color: @color-bi-border-hover-active-radio; border-color: @color-bi-border-hover-active-radio;
} }
@ -18,16 +20,15 @@
border-color: @color-bi-border-hover-active-radio; border-color: @color-bi-border-hover-active-radio;
background-color: @color-bi-background-active-radio; background-color: @color-bi-background-active-radio;
&:after { &:after {
width: 8px; width: 50%;
height: 8px; height: 50%;
display: table;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
.border-radius(4px); .border-radius(50%);
background-color: @color-bi-background-active-radio-content; background-color: @color-bi-background-active-radio-content;
.transform(translate(-50%, -50%)); .transform(translate(-50%, -50%));
@transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s; @transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
.transition(@transition); .transition(@transition);
} }
} }

Loading…
Cancel
Save