github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

RadioButton: move radio-button css to radio-button.css file, fixed #3276 (#3723)

pull/3731/head
cinwell.li 2017-03-24 00:46:47 +08:00 committed by baiyaaaaa
parent bf3f43b467
commit 233cdc28e9
3 changed files with 116 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
packages/theme-default/src/radio-button.css
View File

@ -0,0 +1,100 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b radio-button {
position: relative;
display: inline-block;
@e inner {
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: var(--button-default-fill);
border: var(--border-base);
border-left: 0;
color: var(--button-default-color);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
position: relative;
cursor: pointer;
transition: var(--all-transition);
@utils-user-select none;
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
&:hover {
color: var(--color-primary);
}
& [class*="el-icon-"] {
line-height: 0.9;
& + span {
margin-left: 5px;
}
}
}
@e orig-radio {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
left: -999px;
&:checked {
& + .el-radio-button__inner {
color: var(--radio-button-checked-color);
background-color: var(--radio-button-checked-fill);
border-color: var(--radio-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color);
}
}
&:disabled {
& + .el-radio-button__inner {
color: var(--button-disabled-color);
cursor: not-allowed;
background-image: none;
background-color: var(--button-disabled-fill);
border-color: var(--button-disabled-border);
box-shadow: none;
}
}
}
&:first-child {
.el-radio-button__inner {
border-left: var(--border-base);
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
box-shadow: none !important;
}
}
&:last-child {
.el-radio-button__inner {
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
}
@m large {
& .el-radio-button__inner {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
}
}
@m small {
& .el-radio-button__inner {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
}
}
@m mini {
& .el-radio-button__inner {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
}
}
}
}

15
packages/theme-default/src/radio-group.css
View File

@ -0,0 +1,15 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b radio-group {
display: inline-block;
font-size: 0;
line-height: 1;
& .el-radio {
font-size: var(--radio-font-size);
}
}
}

109
packages/theme-default/src/radio.css
View File

@ -3,7 +3,6 @@
@import './mixins/button';
@component-namespace el {
@b radio {
color: var(--radio-color);
position: relative;
@ -15,7 +14,7 @@
& + .el-radio {
margin-left: 15px;
}
@e input {
white-space: nowrap;
cursor: pointer;
@ -114,110 +113,4 @@
padding-left: 5px;
}
}
@b radio-group {
display: inline-block;
font-size: 0;
line-height: 1;
& .el-radio {
font-size: var(--radio-font-size);
}
}
@b radio-button {
position: relative;
display: inline-block;
@e inner {
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: var(--button-default-fill);
border: var(--border-base);
border-left: 0;
color: var(--button-default-color);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
position: relative;
cursor: pointer;
transition: var(--all-transition);
@utils-user-select none;
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
&:hover {
color: var(--color-primary);
}
& [class*="el-icon-"] {
line-height: 0.9;
& + span {
margin-left: 5px;
}
}
}
@e orig-radio {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
left: -999px;
&:checked {
& + .el-radio-button__inner {
color: var(--radio-button-checked-color);
background-color: var(--radio-button-checked-fill);
border-color: var(--radio-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color);
}
}
&:disabled {
& + .el-radio-button__inner {
color: var(--button-disabled-color);
cursor: not-allowed;
background-image: none;
background-color: var(--button-disabled-fill);
border-color: var(--button-disabled-border);
box-shadow: none;
}
}
}
&:first-child {
.el-radio-button__inner {
border-left: var(--border-base);
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
box-shadow: none !important;
}
}
&:last-child {
.el-radio-button__inner {
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
}
@m large {
& .el-radio-button__inner {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
}
}
@m small {
& .el-radio-button__inner {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
}
}
@m mini {
& .el-radio-button__inner {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
}
}
}
}