Commit e0f097e65274028045fc84b5fd3be1774dd509e6
1 parent
5a3fe3ec
Initial WIP
Showing
2 changed files
with
23 additions
and
4 deletions
Show diff stats
src/components/radio/radio.vue
| 1 | <template> | 1 | <template> |
| 2 | - <label :class="wrapClasses"> | 2 | + <label :class="wrapClasses" :tabindex="disabled ? -1 : 0"> |
| 3 | <span :class="radioClasses"> | 3 | <span :class="radioClasses"> |
| 4 | <span :class="innerClasses"></span> | 4 | <span :class="innerClasses"></span> |
| 5 | <input | 5 | <input |
| 6 | type="radio" | 6 | type="radio" |
| 7 | + tabindex="-1" | ||
| 7 | :class="inputClasses" | 8 | :class="inputClasses" |
| 8 | :disabled="disabled" | 9 | :disabled="disabled" |
| 9 | :checked="currentValue" | 10 | :checked="currentValue" |
src/styles/components/radio.less
| @@ -16,7 +16,7 @@ | @@ -16,7 +16,7 @@ | ||
| 16 | } | 16 | } |
| 17 | } | 17 | } |
| 18 | 18 | ||
| 19 | -// 普通状态 | 19 | +// 普通状态 - Normal state |
| 20 | .@{radio-prefix-cls}-wrapper { | 20 | .@{radio-prefix-cls}-wrapper { |
| 21 | font-size: @font-size-small; | 21 | font-size: @font-size-small; |
| 22 | vertical-align: middle; | 22 | vertical-align: middle; |
| @@ -28,6 +28,12 @@ | @@ -28,6 +28,12 @@ | ||
| 28 | &-disabled{ | 28 | &-disabled{ |
| 29 | cursor: @cursor-disabled; | 29 | cursor: @cursor-disabled; |
| 30 | } | 30 | } |
| 31 | + outline: 0; | ||
| 32 | + &:focus { | ||
| 33 | + & .@{radio-inner-prefix-cls} { | ||
| 34 | + box-shadow: 0 0 0 2px fade(@primary-color, 20%); | ||
| 35 | + } | ||
| 36 | + } | ||
| 31 | } | 37 | } |
| 32 | 38 | ||
| 33 | .@{radio-prefix-cls} { | 39 | .@{radio-prefix-cls} { |
| @@ -110,7 +116,7 @@ | @@ -110,7 +116,7 @@ | ||
| 110 | } | 116 | } |
| 111 | } | 117 | } |
| 112 | 118 | ||
| 113 | -// 选中状态 | 119 | +// 选中状态 - Selected state |
| 114 | .@{radio-prefix-cls}-checked { | 120 | .@{radio-prefix-cls}-checked { |
| 115 | .@{radio-inner-prefix-cls} { | 121 | .@{radio-inner-prefix-cls} { |
| 116 | border-color: @primary-color; | 122 | border-color: @primary-color; |
| @@ -156,7 +162,7 @@ span.@{radio-prefix-cls} + * { | @@ -156,7 +162,7 @@ span.@{radio-prefix-cls} + * { | ||
| 156 | margin-right: 2px; | 162 | margin-right: 2px; |
| 157 | } | 163 | } |
| 158 | 164 | ||
| 159 | -// 按钮样式 | 165 | +// 按钮样式 - Button style |
| 160 | .@{radio-group-button-prefix-cls} { | 166 | .@{radio-group-button-prefix-cls} { |
| 161 | font-size: 0; | 167 | font-size: 0; |
| 162 | -webkit-text-size-adjust:none; | 168 | -webkit-text-size-adjust:none; |
| @@ -214,6 +220,13 @@ span.@{radio-prefix-cls} + * { | @@ -214,6 +220,13 @@ span.@{radio-prefix-cls} + * { | ||
| 214 | &:hover { | 220 | &:hover { |
| 215 | position: relative; | 221 | position: relative; |
| 216 | color: @primary-color; | 222 | color: @primary-color; |
| 223 | + & .@{radio-prefix-cls} { | ||
| 224 | + background-color: black; | ||
| 225 | + } | ||
| 226 | + } | ||
| 227 | + | ||
| 228 | + &:focus { | ||
| 229 | + box-shadow: 0 0 0 2px fade(@primary-color, 20%); | ||
| 217 | } | 230 | } |
| 218 | 231 | ||
| 219 | .@{radio-prefix-cls}-inner, | 232 | .@{radio-prefix-cls}-inner, |
| @@ -240,6 +253,10 @@ span.@{radio-prefix-cls} + * { | @@ -240,6 +253,10 @@ span.@{radio-prefix-cls} + * { | ||
| 240 | color: tint(@primary-color, 20%); | 253 | color: tint(@primary-color, 20%); |
| 241 | } | 254 | } |
| 242 | 255 | ||
| 256 | + &:focus { | ||
| 257 | + box-shadow: 0 0 0 2px fade(@primary-color, 20%)!important; | ||
| 258 | + } | ||
| 259 | + | ||
| 243 | &:active { | 260 | &:active { |
| 244 | border-color: shade(@primary-color, 5%); | 261 | border-color: shade(@primary-color, 5%); |
| 245 | box-shadow: -1px 0 0 0 shade(@primary-color, 5%); | 262 | box-shadow: -1px 0 0 0 shade(@primary-color, 5%); |
| @@ -291,3 +308,4 @@ span.@{radio-prefix-cls} + * { | @@ -291,3 +308,4 @@ span.@{radio-prefix-cls} + * { | ||
| 291 | border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0; | 308 | border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0; |
| 292 | } | 309 | } |
| 293 | } | 310 | } |
| 311 | + |