tu-view-plus
Version:
222 lines (201 loc) • 5.32 kB
CSS
.tu-radio {
position: relative;
cursor: pointer;
display: inline-flex;
align-items: center;
white-space: nowrap;
height: 32px;
line-height: 32px;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-size: var(--tu-font-size-medium, 14px);
font-weight: var(--tu-font-content-weight, normal);
color: var(--tu-color-text, #71757f);
}
.tu-radio + .tu-radio {
margin-left: 24px;
}
.tu-radio__input {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-flex;
position: relative;
vertical-align: middle;
}
.tu-radio__inner {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 18px;
height: 18px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
border-radius: 50%;
border: 1px solid transparent;
transition: box-shadow var(--tu-transition-duration-2, 0.2s);
}
.tu-radio__inner::after {
content: "";
position: absolute;
width: 45%;
height: 45%;
border-radius: 50%;
box-sizing: border-box;
background-color: var(--tu-color-text-placeholder, #9b9fa8);
transition: background-color var(--tu-transition-duration-2, 0.2s) ease;
}
.tu-radio__original {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
.tu-radio__label {
font-size: var(--tu-font-size-medium, 14px);
padding-left: 6px;
transition: color var(--tu-transition-duration-2, 0.2s);
line-height: 1;
}
.tu-radio.is-checked .tu-radio__inner {
box-shadow: inset 2px 2px 5px var(--tu-color-shadow-dark, #babbc0), inset -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
border: none;
}
.tu-radio.is-checked .tu-radio__inner::after {
background-color: var(--tu-color-primary, #5e7ce0);
}
.tu-radio.is-checked .tu-radio__label {
color: var(--tu-color-primary, #5e7ce0);
}
.tu-radio.is-disabled {
cursor: not-allowed;
opacity: 0.7;
}
.tu-radio.is-disabled .tu-radio__inner {
cursor: not-allowed;
box-shadow: none;
background: var(--tu-color-base-bg, rgba(128, 128, 128, 0.22));
}
.tu-radio--button {
margin: 0 ;
}
.tu-radio--button:hover {
color: var(--tu-color-primary, #5e7ce0);
}
.tu-radio--button:not(:first-child)::after {
content: "";
display: block;
height: 100%;
width: 1px;
position: absolute;
top: 0;
left: 0;
box-shadow: inset 1px 1px 2px var(--tu-color-shadow-dark, #babbc0), inset -1px -1px 2px var(--tu-color-shadow-light, #ffffff), 1px 1px 3px var(--tu-color-shadow-dark, #babbc0), -1px -1px 2px var(--tu-color-shadow-light, #ffffff);
opacity: 0.3;
}
.tu-radio--button .tu-radio__input {
display: none;
}
.tu-radio--button .tu-radio__label {
padding: 0 12px;
}
.tu-radio--button.is-checked {
box-shadow: inset 2px 2px 5px var(--tu-color-shadow-dark, #babbc0), inset -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.tu-radio--border {
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0), -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
padding: 0 12px 0 4px;
box-sizing: border-box;
transition: box-shadow var(--tu-transition-duration-2, 0.2s);
}
.tu-radio--border + .tu-radio--border {
margin-left: 12px;
}
.tu-radio--border::after {
content: "";
position: absolute;
box-sizing: content-box;
width: calc(100% - 2px);
height: calc(100% - 2px);
top: 0;
left: 0;
border: 1px solid transparent;
border-radius: var(--tu-border-radius, 2px);
transition: border var(--tu-transition-duration-2, 0.2s);
}
.tu-radio--border .tu-radio__inner {
box-shadow: none;
border: none;
}
.tu-radio--border.is-checked {
box-shadow: inset 2px 2px 5px var(--tu-color-shadow-dark, #babbc0), inset -2px -2px 5px var(--tu-color-shadow-light, #ffffff);
border: none;
}
.tu-radio--border.is-checked .tu-radio__inner {
box-shadow: none;
}
.tu-radio--mini {
font-size: var(--tu-font-size-mini, 10px);
height: 24px;
line-height: 24px;
}
.tu-radio--mini .tu-radio__inner {
width: 14px;
height: 14px;
}
.tu-radio--mini .tu-radio__label {
font-size: var(--tu-font-size-mini, 10px);
}
.tu-radio--small {
font-size: var(--tu-font-size-small, 12px);
height: 28px;
line-height: 28px;
}
.tu-radio--small .tu-radio__inner {
width: 16px;
height: 16px;
}
.tu-radio--small .tu-radio__label {
font-size: var(--tu-font-size-small, 12px);
}
.tu-radio--medium {
font-size: var(--tu-font-size-medium, 14px);
height: 32px;
line-height: 32px;
}
.tu-radio--medium .tu-radio__inner {
width: 18px;
height: 18px;
}
.tu-radio--medium .tu-radio__label {
font-size: var(--tu-font-size-medium, 14px);
}
.tu-radio--large {
font-size: var(--tu-font-size-large, 14px);
height: 36px;
line-height: 36px;
}
.tu-radio--large .tu-radio__inner {
width: 20px;
height: 20px;
}
.tu-radio--large .tu-radio__label {
font-size: var(--tu-font-size-large, 14px);
}
.tu-radio:hover:not(.is-disabled, .is-checked) .tu-radio__inner {
border-color: var(--tu-color-shadow-light, #ffffff);
box-shadow: none;
}
.tu-radio:hover:not(.is-disabled, .is-checked).tu-radio--border {
box-shadow: none;
}
.tu-radio:hover:not(.is-disabled, .is-checked).tu-radio--border::after {
border-color: var(--tu-color-shadow-light, #ffffff);
}