Skip to content

Commit

Permalink
radio black
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZhaoYuLing
ZhaoYuLing committed Oct 31, 2017
1 parent 8109034 commit eee42f9
Show file tree
Hide file tree
Showing 5 changed files with 299 additions and 3 deletions.
2 changes: 1 addition & 1 deletion examples/routers/radio.vue
View file
Expand Up @@ -9,7 +9,7 @@
<Icon type="social-apple"></Icon>
<span>Apple</span>
</Radio>
<Radio label="android">
<Radio label="android" disabled>
<Icon type="social-android"></Icon>
<span>Android</span>
</Radio>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/components/index-dark.less
View file
Expand Up @@ -9,7 +9,7 @@
@import "card";
@import "message";
@import "notice";
@import "radio";
@import "radio-dark";
@import "checkbox";
@import "switch";
@import "input-number";
Expand Down
294 changes: 294 additions & 0 deletions src/styles/components/radio-dark.less
View file
@@ -0,0 +1,294 @@
@radio-prefix-cls: ~"@{css-prefix}radio";
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button";

.@{radio-group-prefix-cls} {
display: inline-block;
font-size: @font-size-small;
vertical-align: middle;
&-vertical{
.@{radio-prefix-cls}-wrapper {
display: block;
height: 30px;
line-height: 30px;
}
}
}

// 普通状态
.@{radio-prefix-cls}-wrapper {
font-size: @font-size-small;
vertical-align: middle;
display: inline-block;
position: relative;
white-space: nowrap;
margin-right: 8px;
cursor: pointer;
&-disabled{
cursor: @cursor-disabled;
}
}

.@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap;
outline: none;
position: relative;
line-height: 1;
vertical-align: middle;
border-color: @border-color-base;
cursor: pointer;
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @input-hover-border-color;
}
}
&-inner {
display: inline-block;
width: 14px;
height: 14px;
position: relative;
top: 0;
left: 0;
background-color: transparent;
border: 1px solid @border-color-base;
border-radius: 50%;
transition: all @transition-time @ease-in-out;

&:after {
position: absolute;
width: 8px;
height: 8px;
left: 2px;
top: 2px;
border-radius: @border-radius-base;
display: table;
border-top: 0;
border-left: 0;
content: ' ';
background-color: @input-hover-border-color;
opacity: 0;
transition: all @transition-time @ease-in-out;
transform: scale(0);
}
}
&-large{
font-size: @font-size-base;
& .@{radio-inner-prefix-cls}{
width: 16px;
height: 16px;
&:after{
width: 10px;
height: 10px;
}
}
&.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{
font-size: @font-size-base;
}
}
&-small{
& .@{radio-inner-prefix-cls}{
width: 12px;
height: 12px;
&:after{
width: 6px;
height: 6px;
}
}
}

&-input {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
}

// 选中状态
.@{radio-prefix-cls}-checked {
.@{radio-inner-prefix-cls} {
border-color: @input-hover-border-color;
&:after {
opacity: 1;
transform: scale(1);
transition: all @transition-time @ease-in-out;
}
}
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @input-hover-border-color;
}
}
}

.@{radio-prefix-cls}-disabled {
cursor: @cursor-disabled;
.@{radio-prefix-cls}-input {
cursor: @cursor-disabled;
}

&:hover {
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
background-color: @disabled-bg;
&:after {
background-color: @disabled-bg;
}
}

.@{radio-prefix-cls}-disabled + span {
color: @disabled-text-color;
}
}

span.@{radio-prefix-cls} + * {
margin-left: 2px;
margin-right: 2px;
}

// 按钮样式
.@{radio-group-button-prefix-cls} {
font-size: 0;
-webkit-text-size-adjust:none;

.@{radio-prefix-cls}{
width: 0;
margin-right: 0;
}

.@{radio-prefix-cls}-wrapper {
display: inline-block;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 16px;
font-size: @font-size-small;
color: @btn-default-color;
transition: all @transition-time ease-in-out;
cursor: pointer;
border: 1px solid @border-color-base;
border-left: 0;
background: transparent;

> span {
margin-left: 0;
}

&:before {
content: '';
position: absolute;
width: 1px;
height: 100%;
left: -1px;
background: @border-color-base;
visibility: hidden;
transition: all @transition-time ease-in-out;
}

&:first-child {
border-radius: @btn-border-radius 0 0 @btn-border-radius;
border-left: 1px solid @border-color-base;
&:before {
display: none;
}
}

&:last-child {
border-radius: 0 @btn-border-radius @btn-border-radius 0;
}

&:first-child:last-child {
border-radius: @btn-border-radius;
}

&:hover {
position: relative;
color: @input-hover-border-color;
}

.@{radio-prefix-cls}-inner,
input {
opacity: 0;
width: 0;
height: 0;
}

&-checked {
background: transparent;
border-color: @input-hover-border-color;
color: @input-hover-border-color;
box-shadow: -1px 0 0 0 @input-hover-border-color;

&:first-child {
border-color: @input-hover-border-color;
box-shadow: none!important;
}

&:hover {
border-color: tint(@input-hover-border-color, 20%);
box-shadow: -1px 0 0 0 tint(@input-hover-border-color, 20%);
color: tint(@input-hover-border-color, 20%);
}

&:active {
border-color: shade(@input-hover-border-color, 5%);
box-shadow: -1px 0 0 0 shade(@input-hover-border-color, 5%);
color: shade(@input-hover-border-color, 5%);
}
}

&-disabled {
border-color: @border-color-base;
background-color: @disabled-bg;
cursor: @cursor-disabled;
color: #ccc;

&:first-child,
&:hover {
border-color: @border-color-base;
background-color: @disabled-bg;
color: @disabled-text-color;
}
&:first-child {
border-left-color: @border-color-base;
}
}

&-disabled.@{radio-prefix-cls}-wrapper-checked {
color: @disabled-text-color;
background-color: @disabled-bg;
border-color: @border-color-base;
box-shadow: none!important;
}
}
}

.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base;
}

.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
padding: 0 12px;
font-size: @font-size-small;
&:first-child {
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
}
&:last-child {
border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
}
}
2 changes: 2 additions & 0 deletions src/styles/custom-dark.less
View file
Expand Up @@ -30,6 +30,8 @@
@border-radius-base : 6px;
@border-radius-small : 4px;
@cursor-disabled : not-allowed;
@disabled-bg : #414d56;
@disabled-text-color : #71818d;

// Border color
@border-color-base : #52626d; // outside
Expand Down
2 changes: 1 addition & 1 deletion src/styles/mixins/input-dark.less
View file
Expand Up @@ -20,7 +20,7 @@
background-color: @input-disabled-bg;
opacity: 1;
cursor: @cursor-disabled;
color: #71818d;
color: @disabled-text-color;
&:hover {
.hover(@input-border-color);
}
Expand Down

0 comments on commit eee42f9

Please sign in to comment.