123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- @import "mixins/mixins";
- @import "mixins/_button";
- @import "common/var";
- @include b(radio-button) {
- position: relative;
- display: inline-block;
- outline: none;
- @include e(inner) {
- display: inline-block;
- line-height: 1;
- white-space: nowrap;
- vertical-align: middle;
- background: $--button-default-background-color;
- border: $--border-base;
- font-weight: $--button-font-weight;
- border-left: 0;
- color: $--button-default-font-color;
- -webkit-appearance: none;
- text-align: center;
- box-sizing: border-box;
- outline: none;
- margin: 0;
- position: relative;
- cursor: pointer;
- transition: $--all-transition;
- @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
- &:hover {
- color: $--color-primary;
- }
- & [class*="el-icon-"] {
- line-height: 0.9;
- & + span {
- margin-left: 5px;
- }
- }
- }
- &:first-child {
- .el-radio-button__inner {
- border-left: $--border-base;
- border-radius: $--border-radius-base 0 0 $--border-radius-base;
- box-shadow: none !important;
- }
- }
- @include e(orig-radio) {
- opacity: 0;
- outline: none;
- position: absolute;
- z-index: -1;
- &:checked {
- & + .el-radio-button__inner {
- color: $--radio-button-checked-font-color;
- background-color: $--radio-button-checked-background-color;
- border-color: $--radio-button-checked-border-color;
- box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
- }
- }
- &:disabled {
- & + .el-radio-button__inner {
- color: $--button-disabled-font-color;
- cursor: not-allowed;
- background-image: none;
- background-color: $--button-disabled-background-color;
- border-color: $--button-disabled-border-color;
- box-shadow: none;
- }
- &:checked + .el-radio-button__inner {
- background-color: $--radio-button-disabled-checked-fill;
- }
- }
- }
- &:last-child {
- .el-radio-button__inner {
- border-radius: 0 $--border-radius-base $--border-radius-base 0;
- }
- }
- &:first-child:last-child {
- .el-radio-button__inner {
- border-radius: $--border-radius-base;
- }
- }
- @include m(medium) {
- & .el-radio-button__inner {
- @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
- }
- }
- @include m(small) {
- & .el-radio-button__inner {
- @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
- }
- }
- @include m(mini) {
- & .el-radio-button__inner {
- @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
- }
- }
- &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
- box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
- }
- }
|