u
This commit is contained in:
oneao committed
1 parent
97b88528a5
commit
5834738700
10 files changed
+864
-119
No files matched your search
@@ -3,14 +3,13 @@
|
||||
$radio-prefix: '#{$prefix}-radio';
|
||||
$radio-group-prefix: '#{$prefix}-radio-group';
|
||||
|
||||
.#{$radio-prefix} {
|
||||
.#{$radio-prefix}-default {
|
||||
color: $text-color-base;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
line-height: 20px;
|
||||
&.#{$radio-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
@@ -34,8 +33,6 @@ $radio-group-prefix: '#{$prefix}-radio-group';
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
outline: 0;
|
||||
margin-top: 2px;
|
||||
vertical-align: sub;
|
||||
.#{$radio-prefix}-input {
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
@@ -79,9 +76,459 @@ $radio-group-prefix: '#{$prefix}-radio-group';
|
||||
.#{$radio-prefix}-content {
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
flex-direction: column;
|
||||
|
||||
.#{$radio-prefix}-label {
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-color-base;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-extra {
|
||||
font-size: 12px;
|
||||
color: $text-color-secondary;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-group-prefix} {
|
||||
.#{$radio-group-prefix}-filled {
|
||||
background-color: $bg-color-component;
|
||||
border-radius: $border-radius;
|
||||
padding: 1.5px;
|
||||
line-height: 26px;
|
||||
|
||||
&.#{$radio-group-prefix}-small {
|
||||
line-height: 18px;
|
||||
|
||||
.#{$radio-prefix}-filled {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$radio-group-prefix}-medium {
|
||||
line-height: 22px;
|
||||
.#{$radio-prefix}-filled {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$radio-group-prefix}-large {
|
||||
line-height: 26px;
|
||||
.#{$radio-prefix}-filled {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-filled {
|
||||
margin: 1.5px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
background-color: transparent;
|
||||
border-right: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-checked {
|
||||
color: $text-color-base;
|
||||
background-color: $bg-color-container-select;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(.#{$radio-prefix}-disabled):not(.#{$radio-prefix}-checked):hover {
|
||||
color: $text-color-base;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background-color: $border-color-component;
|
||||
transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-group-prefix}-primaryFilled {
|
||||
background-color: $bg-color-component;
|
||||
border-radius: $border-radius;
|
||||
padding: 1.5px;
|
||||
line-height: 26px;
|
||||
|
||||
&.#{$radio-group-prefix}-small {
|
||||
line-height: 18px;
|
||||
|
||||
.#{$radio-prefix}-primaryFilled {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$radio-group-prefix}-medium {
|
||||
line-height: 22px;
|
||||
.#{$radio-prefix}-primaryFilled {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$radio-group-prefix}-large {
|
||||
line-height: 26px;
|
||||
.#{$radio-prefix}-primaryFilled {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-primaryFilled {
|
||||
margin: 1.5px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
background-color: transparent;
|
||||
border-right: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-checked {
|
||||
color: $text-color-anti;
|
||||
background-color: $primary-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(.#{$radio-prefix}-disabled):not(.#{$radio-prefix}-checked):hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background-color: $border-color-component;
|
||||
transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-group-prefix}-outline {
|
||||
padding: 1.5px;
|
||||
line-height: 26px;
|
||||
background-color: transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&.#{$radio-group-prefix}-small {
|
||||
line-height: 18px;
|
||||
|
||||
.#{$radio-prefix}-outline {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$radio-group-prefix}-medium {
|
||||
line-height: 22px;
|
||||
.#{$radio-prefix}-outline {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$radio-group-prefix}-large {
|
||||
line-height: 26px;
|
||||
.#{$radio-prefix}-outline {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-outline:last-child {
|
||||
border-right-color: $border-color;
|
||||
}
|
||||
.#{$radio-prefix}-outline.#{$radio-prefix}-checked.#{$radio-prefix}-outline:last-child {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
.#{$radio-prefix}-outline.#{$radio-prefix}-checked + .#{$radio-prefix}-outline {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-outline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
background-color: transparent;
|
||||
border: 1px solid $border-color;
|
||||
border-right-color: transparent;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.#{$radio-prefix}-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.#{$radio-prefix}-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 12px;
|
||||
}
|
||||
&:not(.#{$radio-prefix}-disabled):hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
&.#{$radio-prefix}-checked {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-card {
|
||||
color: $text-color-base;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 8px 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover,
|
||||
&:hover .#{$radio-prefix}-main {
|
||||
background-color: $bg-color-component;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-checked {
|
||||
border-color: $primary-color;
|
||||
background-color: $status-info-bg-color;
|
||||
}
|
||||
|
||||
&:hover .#{$radio-prefix}-main .#{$radio-prefix}-inner {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-checked .#{$radio-prefix}-main .#{$radio-prefix}-inner {
|
||||
border-color: $primary-color;
|
||||
&::after {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-main {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
outline: 0;
|
||||
|
||||
.#{$radio-prefix}-input {
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-inner {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 100%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: $bg-color-container;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition:
|
||||
transform 0.1s ease-in,
|
||||
background-color 0.1s ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-content {
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
flex-direction: column;
|
||||
|
||||
.#{$radio-prefix}-label {
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-color-base;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-extra {
|
||||
font-size: 12px;
|
||||
color: $text-color-secondary;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-pureCard {
|
||||
color: $text-color-base;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 8px 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-color-component;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.#{$radio-prefix}-checked {
|
||||
border-color: $primary-color;
|
||||
background-color: $status-info-bg-color;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-content {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
flex-direction: column;
|
||||
|
||||
.#{$radio-prefix}-label {
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-color-base;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.#{$radio-prefix}-extra {
|
||||
font-size: 12px;
|
||||
color: $text-color-secondary;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user