| | |
| | | @import "../../common/sassMixin"; |
| | | |
| | | .c-switch { |
| | | &.read-only { |
| | | pointer-events: none; |
| | | background-color: #f6f6f6; |
| | | .at-switch { |
| | | background-color: transparent; |
| | | } |
| | | .at-switch__container { |
| | | background-color: transparent; |
| | | } |
| | | .at-switch__title { |
| | | &::before { |
| | | display: block; |
| | | position: absolute; |
| | | top: 50%; |
| | | left: -23px; |
| | | width: 12px; |
| | | height: 12px; |
| | | content: " "; |
| | | border: #777 1PX solid; |
| | | border-radius: 50%; |
| | | transform: translateY(-50%); |
| | | } |
| | | &::after { |
| | | display: block; |
| | | position: absolute; |
| | | top: 50%; |
| | | left: -23px; |
| | | width: 14px; |
| | | height: 0px; |
| | | margin-top: 0px; |
| | | content: " "; |
| | | border-bottom: #777 1PX solid; |
| | | transform: rotate(-45deg); |
| | | } |
| | | } |
| | | } |
| | | .at-switch__title { |
| | | font-size: 36px; |
| | | } |
| | | &.c-switch-required { |
| | | .at-switch__title { |
| | | &::before { |
| | | display: block; |
| | | position: absolute; |
| | | top: 50%; |
| | | left: -0.5rem; |
| | | margin-right: 0.17067rem; |
| | | left: -23px; |
| | | margin-right: 8px; |
| | | color: #FF4949; |
| | | font-size: 0.59733rem; |
| | | font-size: 28px; |
| | | font-family: SimSun, sans-serif; |
| | | line-height: 1; |
| | | content: "*"; |
| | |
| | | color: #FF4949; |
| | | } |
| | | } |
| | | &.c-switch-radio { |
| | | position: relative; |
| | | .at-switch { |
| | | padding-top: 18px; |
| | | padding-bottom: 18px; |
| | | } |
| | | .at-switch__title { |
| | | flex: unset; |
| | | width: 162px; |
| | | margin-right: 20px; |
| | | } |
| | | .at-switch__container { |
| | | display: none; |
| | | } |
| | | .c-switch-radio-group { |
| | | @include flexbox(flex, flex-end center, n wrap); |
| | | flex: 1; |
| | | } |
| | | .c-switch-radio-item { |
| | | @include flexbox(flex, flex-start center); |
| | | padding: 6px 0 6px 26px; |
| | | } |
| | | .c-switch-radio-icon { |
| | | @include flexbox(inline, center center); |
| | | width: 48px; |
| | | min-width: 48px; |
| | | height: 48px; |
| | | vertical-align: middle; |
| | | color: transparent; |
| | | font-size: 32px; |
| | | line-height: 1; |
| | | border: 1PX solid #c9c9c9; |
| | | border-radius: 50%; |
| | | background-color: #fff; |
| | | box-sizing: border-box; |
| | | transition: all .2s; |
| | | &.checked { |
| | | color: #fff; |
| | | border: none; |
| | | background-color: #2093df; |
| | | } |
| | | } |
| | | .c-switch-radio-label { |
| | | display: inline-block; |
| | | padding-left: 6px; |
| | | vertical-align: middle; |
| | | white-space: pre-wrap; |
| | | } |
| | | } |
| | | &.c-switch-radio-left { |
| | | .c-switch-radio-group { |
| | | @include flexbox(flex, flex-start center, n wrap); |
| | | padding-right: 0; |
| | | .c-switch-radio-item { |
| | | padding-left: 0; |
| | | padding-right: 24px; |
| | | } |
| | | } |
| | | } |
| | | } |