javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(radio): .radio-checked only applied once

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-27 00:52:31 +02:00
committed by Manu MA
parent cbf163279b
commit 19e5df941c
3 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/radio/radio.ios.scss
View File

@ -21,7 +21,7 @@
// iOS Radio Checkmark: Checked // iOS Radio Checkmark: Checked
// ----------------------------------------- // -----------------------------------------
.radio-ios .radio-checked .radio-inner { .radio-ios.radio-checked .radio-inner {
@include position(4px, null, null, 7px); @include position(4px, null, null, 7px);
position: absolute; position: absolute;
@ -108,11 +108,11 @@
color: $color-base; color: $color-base;
} }
.radio-ios-#{$color-name} .radio-checked { .radio-ios-#{$color-name}.radio-checked {
color: $color-base; color: $color-base;
} }
.radio-ios-#{$color-name} .radio-checked .radio-inner { .radio-ios-#{$color-name}.radio-checked .radio-inner {
border-color: $color-base; border-color: $color-base;
} }
} }

6
core/src/components/radio/radio.md.scss
View File

@ -47,7 +47,7 @@
// Material Design Radio Outer Circle: Checked // Material Design Radio Outer Circle: Checked
// ----------------------------------------- // -----------------------------------------
.radio-md .radio-checked { .radio-md.radio-checked .radio-icon {
border-color: $radio-md-color-on; border-color: $radio-md-color-on;
} }
@ -55,7 +55,7 @@
// Material Design Radio Inner Circle: Checked // Material Design Radio Inner Circle: Checked
// ----------------------------------------- // -----------------------------------------
.radio-md .radio-checked .radio-inner { .radio-md.radio-checked .radio-inner {
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
@ -130,7 +130,7 @@
color: $color-base; color: $color-base;
} }
.radio-md-#{$color-name} .radio-checked { .radio-md-#{$color-name}.radio-checked .radio-icon {
border-color: $color-base; border-color: $color-base;
} }

8
core/src/components/radio/radio.tsx
View File

@ -1,5 +1,5 @@
import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core'; import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { CheckedInputChangeEvent, CssClassMap, Mode, RadioButtonInput, StyleEvent } from '../../interface'; import { CheckedInputChangeEvent, Mode, RadioButtonInput, StyleEvent } from '../../interface';
import { deferEvent } from '../../utils/helpers'; import { deferEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme'; import { createThemedClasses } from '../../utils/theme';
@ -182,12 +182,8 @@ export class Radio implements RadioButtonInput {
} }
render() { render() {
const radioClasses: CssClassMap = {
'radio-icon': true,
'radio-checked': this.checked
};
return [ return [
<div class={radioClasses}> <div class="radio-icon">
<div class="radio-inner"/> <div class="radio-inner"/>
</div>, </div>,
<input <input