@charset "UTF-8"; @import '../core/index-noreset'; @import "scss/variable"; @import './rtl.scss'; #{$radio-prefix}-wrapper { outline: 0; display: inline-block; #{$radio-prefix} { @include box-sizing; display: inline-block; vertical-align: middle; position: relative; line-height: 1; input[type="radio"] { opacity: 0; position: absolute; vertical-align: middle; top: 0; left: 0; width: $radio-width; height: $radio-width; margin: 0; cursor: pointer; } } #{$radio-prefix}-inner { /* 动画待定 */ /* &.mouseDown { */ /* transform: scale3d(.7, .7, .7); */ /* transition: transform .2s linear; */ /* } */ /* &.mouseUp { */ /* transform: scale3d(1, 1, 1); */ /* transition: transform .2s linear; */ /* } */ display: block; width: $radio-width; height: $radio-width; background: $radio-bg-color; border-radius: $radio-radius-size; border: $radio-circle-border-width solid $radio-border-color; transition: all $motion-duration-immediately $motion-linear; box-shadow: $radio-shadow; &:after { transform: scale(0); position: absolute; border-radius: $radio-radius-size; top: 50%; margin-top: calc(0px - (#{$radio-circle-size} / 2)); left: 50%; margin-left: calc(0px - (#{$radio-circle-size} / 2)); background: $color-white; content: ''; transition: all $motion-duration-immediately $motion-linear; } } &.checked { #{$radio-prefix}-inner { border-color: $radio-checked-border-color; background: $radio-checked-bg-color; &:after { width: $radio-circle-size; height: $radio-circle-size; font-weight: bold; background: $radio-checked-circle-color; transform: scale(1); } } &:hover, &.hovered { #{$radio-prefix}-inner { border-color: $radio-checked-hovered-border-color; } } } &.disabled { input[type="radio"] { cursor: not-allowed; } #{$radio-prefix}-inner { border-color: $radio-disabled-border-color; background: $radio-disabled-bg-color; &:after { background: $radio-disabled-circle-color; } &:hover, &.hovered { border-color: $radio-disabled-border-color; } } &.checked { #{$radio-prefix}-inner { border-color: $radio-checked-disabled-border-color; background: $radio-checked-disabled-bg-color; &:after { background: $radio-checked-disabled-circle-color; } } } #{$radio-prefix}-label { color: $radio-normal-font-color-disabled; } } &:not(.disabled):hover, &:not(.disabled).hovered { #{$radio-prefix}-inner { border-color: $radio-hovered-border-color; background-color: $radio-hovered-bg-color; } #{$radio-prefix}-label { cursor: pointer; } } &.checked:not(.disabled):hover, &.checked:not(.disabled).hovered { #{$radio-prefix}-inner { border-color: $radio-checked-hovered-border-color; background: $radio-checked-hovered-bg-color; &:after { background: $radio-checked-hovered-circle-color; } } } } #{$radio-prefix} { &-button { #{$radio-prefix} { width: 0; height: 0; } input[type="radio"] { width: 0; height: 0; } > label { display: inline-block; box-sizing: border-box; position: relative; z-index: 1; margin: 0 0 0 -1px; border: 1px solid $radio-button-border-color; background-color: $radio-button-bg-color; transition: all $motion-duration-immediately $motion-linear; vertical-align: middle; #{$radio-prefix}-label { display: block; color: $radio-button-font-color; margin: 0; transition: all $motion-duration-immediately $motion-linear; } &:hover, &.hovered { z-index: 10; border-color: $radio-button-border-color-hovered; background-color: $radio-button-bg-color-hovered; #{$radio-prefix}-label { color: $radio-button-font-color-hovered; } } &.checked { z-index: 11; border-color: $radio-button-border-color-checked; background-color: $radio-button-bg-color-checked; #{$radio-prefix}-label { color: $radio-button-font-color-checked; } } &.disabled { z-index: 0; cursor: not-allowed; border-color: $radio-button-border-color-disabled; background-color: $radio-button-bg-color-disabled; #{$radio-prefix}-label { color: $radio-button-font-color-disabled; } } &.checked.disabled { z-index: 0; border-color: $radio-button-border-color-checked-disabled; background-color: $radio-button-bg-color-checked-disabled; #{$radio-prefix}-label { color: $radio-button-font-color-checked-disabled; } } } &-large { > label { padding: 0 $radio-button-padding-large; height: $radio-button-height-large; line-height: $radio-button-height-large; &:first-child { margin-left: 0; border-top-left-radius: $radio-button-corner-large; border-bottom-left-radius: $radio-button-corner-large; } &:last-child { border-top-right-radius: $radio-button-corner-large; border-bottom-right-radius: $radio-button-corner-large; } } #{$radio-prefix}-label { height: calc(#{$radio-button-height-large} - 2px); line-height: calc(#{$radio-button-height-large} - 2px); font-size: $radio-button-font-size-large; } } &-medium { > label { padding: 0 $radio-button-padding-medium; height: $radio-button-height-medium; line-height: $radio-button-height-medium; &:first-child { margin-left: 0; border-top-left-radius: $radio-button-corner-medium; border-bottom-left-radius: $radio-button-corner-medium; } &:last-child { border-top-right-radius: $radio-button-corner-medium; border-bottom-right-radius: $radio-button-corner-medium; } } #{$radio-prefix}-label { height: calc(#{$radio-button-height-medium} - 2px); line-height: calc(#{$radio-button-height-medium} - 2px); font-size: $radio-button-font-size-medium; } } &-small { > label { padding: 0 $radio-button-padding-small; height: $radio-button-height-small; line-height: $radio-button-height-small; &:first-child { margin-left: 0; border-top-left-radius: $radio-button-corner-small; border-bottom-left-radius: $radio-button-corner-small; } &:last-child { border-top-right-radius: $radio-button-corner-small; border-bottom-right-radius: $radio-button-corner-small; } } #{$radio-prefix}-label { height: calc(#{$radio-button-height-small} - 2px); line-height: calc(#{$radio-button-height-small} - 2px); font-size: $radio-button-font-size-small; } } } &-single-input { input[type="radio"] { opacity: 0; position: absolute; top: 0; left: 0; margin: 0; } } &-group { display: inline-block; #{$radio-prefix}-wrapper { /* 表现为radio整体之间多一份间隔,checkbox表现一致 */ margin-right: 12px; } #{$radio-prefix}-wrapper:last-child { margin-right: 0; } #{$radio-prefix}-label { color: $radio-normal-font-color; } &.disabled #{$radio-prefix}-label { color: $radio-normal-font-color-disabled; } } &-group#{$radio-prefix}-button { #{$radio-prefix}-wrapper { margin-right: 0; } } &-group-ver { #{$radio-prefix}-wrapper { display: block; margin-bottom: 8px; } } } #{$radio-prefix}-label { margin: 0; margin-left: $radio-font-margin-left; /* 使用已有变量$radio-font-margin-left,配左即两边都有间隔 */ margin-right: $radio-font-margin-left; font-size: $radio-font-size; vertical-align: middle; line-height: 1; color: $radio-normal-font-color; } @-moz-document url-prefix() { #{$radio-prefix} { margin-top: -1px; } @supports (animation: calc(0s)) { /* firefox 57+ */ #{$radio-prefix} { margin-top: -3px; } } }