ant-design/components/radio/style/index.less

360 lines
8.4 KiB
Plaintext
Raw Normal View History

// @import '../../style/themes/index';
// @import '../../style/mixins/index';
// @radio-prefix-cls: ~'@{ant-prefix}-radio';
// @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
// @radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
// @radio-duration: 0.3s;
// @radio-focus-shadow: 0 0 0 3px @primary-1;
// @radio-button-focus-shadow: @radio-focus-shadow;
// .@{radio-group-prefix-cls} {
// .reset-component();
// display: inline-block;
// font-size: 0;
// .@{ant-prefix}-badge-count {
// z-index: 1;
// }
// > .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
// border-left: none;
// }
// }
// // 一般状态
// .@{radio-prefix-cls}-wrapper {
// .reset-component();
// position: relative;
// display: inline-flex;
// align-items: baseline;
// margin-right: @radio-wrapper-margin-right;
// cursor: pointer;
// &-disabled {
// cursor: not-allowed;
// }
// &::after {
// display: inline-block;
// width: 0;
// overflow: hidden;
// content: '\a0';
// }
// }
// .@{radio-prefix-cls} {
// .reset-component();
// position: relative;
// top: @radio-top;
// display: inline-block;
// outline: none;
// cursor: pointer;
// .@{radio-prefix-cls}-wrapper:hover &,
// &:hover .@{radio-inner-prefix-cls},
// &-input:focus + .@{radio-inner-prefix-cls} {
// border-color: @radio-dot-color;
// }
// &-input:focus + .@{radio-inner-prefix-cls} {
// box-shadow: @radio-focus-shadow;
// }
// &-checked::after {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// border: 1px solid @radio-dot-color;
// border-radius: 50%;
// visibility: hidden;
// animation: antRadioEffect 0.36s ease-in-out;
// animation-fill-mode: both;
// content: '';
// }
// &:hover::after,
// .@{radio-prefix-cls}-wrapper:hover &::after {
// visibility: visible;
// }
// &-inner {
// &::after {
// position: absolute;
// top: 50%;
// left: 50%;
// display: block;
// width: @radio-size;
// height: @radio-size;
// margin-top: -(@radio-size / 2);
// margin-left: -(@radio-size / 2);
// background-color: @radio-dot-color;
// border-top: 0;
// border-left: 0;
// border-radius: @radio-size;
// transform: scale(0);
// opacity: 0;
// transition: all @radio-duration @ease-in-out-circ;
// content: ' ';
// }
// position: relative;
// top: 0;
// left: 0;
// display: block;
// width: @radio-size;
// height: @radio-size;
// background-color: @radio-button-bg;
// border-color: @border-color-base;
// border-style: solid;
// border-width: @radio-border-width;
// border-radius: 50%;
// transition: all @radio-duration;
// }
// &-input {
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// z-index: 1;
// cursor: pointer;
// opacity: 0;
// }
// }
// // 选中状态
// .@{radio-prefix-cls}-checked {
// .@{radio-inner-prefix-cls} {
// border-color: @radio-dot-color;
// &::after {
// transform: scale((unit(@radio-dot-size) / unit(@radio-size)));
// opacity: 1;
// transition: all @radio-duration @ease-in-out-circ;
// }
// }
// }
// .@{radio-prefix-cls}-disabled {
// cursor: not-allowed;
// .@{radio-inner-prefix-cls} {
// background-color: @input-disabled-bg;
// border-color: @border-color-base !important;
// cursor: not-allowed;
// &::after {
// background-color: @radio-dot-disabled-color;
// }
// }
// .@{radio-prefix-cls}-input {
// cursor: not-allowed;
// }
// & + span {
// color: @disabled-color;
// cursor: not-allowed;
// }
// }
// span.@{radio-prefix-cls} + * {
// padding-right: 8px;
// padding-left: 8px;
// }
// .@{radio-prefix-cls}-button-wrapper {
// position: relative;
// display: inline-block;
// height: @btn-height-base;
// margin: 0;
// padding: 0 @radio-button-padding-horizontal;
// color: @radio-button-color;
// font-size: @font-size-base;
// line-height: @btn-height-base - 2px;
// background: @radio-button-bg;
// border: @border-width-base @border-style-base @border-color-base;
// // strange align fix for chrome but works
// // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
// border-top-width: @border-width-base + 0.02px;
// border-left-width: 0;
// cursor: pointer;
// transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
// a {
// color: @radio-button-color;
// }
// > .@{radio-prefix-cls}-button {
// position: absolute;
// top: 0;
// left: 0;
// z-index: -1;
// width: 100%;
// height: 100%;
// }
// .@{radio-group-prefix-cls}-large & {
// height: @input-height-lg;
// font-size: @font-size-lg;
// line-height: @input-height-lg - 2px;
// }
// .@{radio-group-prefix-cls}-small & {
// height: @input-height-sm;
// padding: 0 @control-padding-horizontal-sm - 1px;
// line-height: @input-height-sm - 2px;
// }
// &:not(:first-child) {
// &::before {
// position: absolute;
// top: @border-width-base * -1;
// left: -1px;
// display: block;
// box-sizing: content-box;
// width: 1px;
// height: 100%;
// padding: @border-width-base 0;
// background-color: @border-color-base;
// transition: background-color 0.3s;
// content: '';
// }
// }
// &:first-child {
// border-left: @border-width-base @border-style-base @border-color-base;
// border-radius: @border-radius-base 0 0 @border-radius-base;
// }
// &:last-child {
// border-radius: 0 @border-radius-base @border-radius-base 0;
// }
// &:first-child:last-child {
// border-radius: @border-radius-base;
// }
// &:hover {
// position: relative;
// color: @radio-dot-color;
// }
// &:focus-within {
// box-shadow: @radio-button-focus-shadow;
// }
// .@{radio-prefix-cls}-inner,
// input[type='checkbox'],
// input[type='radio'] {
// width: 0;
// height: 0;
// opacity: 0;
// pointer-events: none;
// }
// &-checked:not(&-disabled) {
// z-index: 1;
// color: @radio-dot-color;
// background: @radio-button-checked-bg;
// border-color: @radio-dot-color;
// &::before {
// background-color: @radio-dot-color;
// }
// &:first-child {
// border-color: @radio-dot-color;
// }
// &:hover {
// color: @radio-button-hover-color;
// border-color: @radio-button-hover-color;
// &::before {
// background-color: @radio-button-hover-color;
// }
// }
// &:active {
// color: @radio-button-active-color;
// border-color: @radio-button-active-color;
// &::before {
// background-color: @radio-button-active-color;
// }
// }
// &:focus-within {
// box-shadow: @radio-button-focus-shadow;
// }
// }
// .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
// color: @radio-solid-checked-color;
// background: @radio-dot-color;
// border-color: @radio-dot-color;
// &:hover {
// color: @radio-solid-checked-color;
// background: @radio-button-hover-color;
// border-color: @radio-button-hover-color;
// }
// &:active {
// color: @radio-solid-checked-color;
// background: @radio-button-active-color;
// border-color: @radio-button-active-color;
// }
// &:focus-within {
// box-shadow: @radio-button-focus-shadow;
// }
// }
// &-disabled {
// color: @disabled-color;
// background-color: @input-disabled-bg;
// border-color: @border-color-base;
// cursor: not-allowed;
// &:first-child,
// &:hover {
// color: @disabled-color;
// background-color: @input-disabled-bg;
// border-color: @border-color-base;
// }
// &:first-child {
// border-left-color: @border-color-base;
// }
// }
// &-disabled&-checked {
// color: @radio-disabled-button-checked-color;
// background-color: @radio-disabled-button-checked-bg;
// border-color: @border-color-base;
// box-shadow: none;
// }
// }
// @keyframes antRadioEffect {
// 0% {
// transform: scale(1);
// opacity: 0.5;
// }
// 100% {
// transform: scale(1.6);
// opacity: 0;
// }
// }
// @import './rtl';