javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(radio): add styling for radio when item-left/item-right is added

Browse Source 
references #5925
This commit is contained in:
Brandy Carney
2016-05-03 14:51:17 -04:00
parent 5dddce3898
commit 4c5dd0b505
4 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ionic/components/radio/radio.ios.scss
View File

@@ -12,6 +12,9 @@ $radio-ios-icon-border-style: solid !default;
$radio-ios-disabled-opacity: .3 !default;
$radio-ios-item-left-margin: 8px 21px 8px 3px !default;
$radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default;
ion-radio {
position: relative;
@@ -69,7 +72,11 @@ ion-radio {
position: static;
display: block;
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
margin: $radio-ios-item-right-margin;
&[item-left] {
margin: $radio-ios-item-left-margin;
}
}
.item-radio ion-label {

8
ionic/components/radio/radio.md.scss
View File

@@ -17,6 +17,8 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
$radio-md-disabled-opacity: .3 !default;
$radio-md-item-left-margin: 11px 36px 10px 4px !default;
$radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default;
ion-radio {
position: relative;
@@ -97,7 +99,11 @@ ion-radio {
position: static;
display: block;
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
margin: $radio-md-item-right-margin;
&[item-left] {
margin: $radio-md-item-left-margin;
}
}
.item-radio ion-label {

10
ionic/components/radio/radio.wp.scss
View File

@@ -17,6 +17,9 @@ $radio-wp-icon-border-radius: 50% !default;
$radio-wp-disabled-opacity: .3 !default;
$radio-wp-item-left-margin: 9px 20px 9px 4px !default;
$radio-wp-item-right-margin: 11px 10px 10px 0 !default;
ion-radio {
position: relative;
@@ -99,7 +102,12 @@ ion-radio {
order: $radio-wp-order;
margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 0;
margin: $radio-wp-item-left-margin;
&[item-right] {
order: 0;
margin: $radio-wp-item-right-margin;
}
}
.item-radio ion-label {

17
ionic/components/radio/test/basic/main.html
View File

@@ -14,9 +14,14 @@
Fruits
</ion-list-header>
<ion-item>
Button w/ left side default icon, really long text that should ellipsis
<ion-icon name="information-circle" item-left></ion-icon>
</ion-item>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio value="apple"></ion-radio>
<ion-radio item-left value="apple"></ion-radio>
</ion-item>
<ion-item>
@@ -34,6 +39,16 @@
<ion-radio value="disabled" disabled="true"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Radio right side</ion-label>
<ion-radio item-right checked></ion-radio>
</ion-item>
<ion-item>
Button w/ right side default icon, really long text that should ellipsis
<ion-icon name="information-circle" item-right></ion-icon>
</ion-item>
</ion-list>
</form>