mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 17:09:46 +08:00
372 lines
8.5 KiB
Plaintext
372 lines
8.5 KiB
Plaintext
// @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';
|
|
// }
|
|
|
|
// &&-in-form-item {
|
|
// input[type='radio'] {
|
|
// width: 14px;
|
|
// height: 14px;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .@{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;
|
|
// }
|
|
|
|
// &&-disabled {
|
|
// .@{radio-inner-prefix-cls} {
|
|
// border-color: @border-color-base;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// // 选中状态
|
|
// .@{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;
|
|
// 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';
|