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

refactor(checkbox): added tons of vars and modified some, flattened markup, renamed elements

Browse Source 
changed color of checkmark so lighters backgrounds would be visible &
added the light example, references #689
This commit is contained in:
Brandy Carney
2015-12-07 18:17:15 -05:00
parent 4cf6abec06
commit 46d129ce24
5 changed files with 87 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/checkbox/checkbox.ts
View File

@ -39,7 +39,7 @@ import {Form} from '../../util/form';
}, },
template: template:
'<div class="item-inner">' + '<div class="item-inner">' +
'<div class="media-checkbox" disable-activated>' + '<div class="checkbox-media" disable-activated>' +
'<div class="checkbox-icon"></div>' + '<div class="checkbox-icon"></div>' +
'</div>' + '</div>' +
'<ion-item-content id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +

52
ionic/components/checkbox/modes/ios.scss
View File

@ -1,15 +1,27 @@
@import "../../../globals.ios"; @import "../../../globals.ios";
// iOS Checkbox Structure // iOS Checkbox Structure
// -------------------------------------------------- // --------------------------------------------------
$checkbox-ios-icon-size: 21px !default;
$checkbox-ios-background-color-off: $list-ios-background-color !default; $checkbox-ios-background-color-off: $list-ios-background-color !default;
$checkbox-ios-border-color-off: $list-ios-border-color !default; $checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-border-color-on: map-get($colors-ios, primary) !default; $checkbox-ios-icon-size: 21px !default;
$checkbox-ios-checkmark-color-on: $background-ios-color !default; $checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
$checkbox-ios-icon-border-width: 1px !default;
$checkbox-ios-icon-border-style: solid !default;
$checkbox-ios-icon-border-radius: 50% !default;
$checkbox-ios-icon-checkmark-width: 1px !default;
$checkbox-ios-icon-checkmark-style: solid !default;
$checkbox-ios-icon-checkmark-color: $background-ios-color !default;
$checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
$checkbox-ios-disabled-opacity: 0.5 !default;
$checkbox-ios-disabled-text-color: $subdued-text-ios-color !default;
ion-checkbox { ion-checkbox {
@ -18,12 +30,14 @@ ion-checkbox {
&[aria-checked=true] .checkbox-icon { &[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-background-color-on; background-color: $checkbox-ios-background-color-on;
border-color: $checkbox-ios-border-color-on; border-color: $checkbox-ios-icon-border-color-on;
} }
&[aria-checked=true] .checkbox-icon:after { &[aria-checked=true] .checkbox-icon:after {
position: absolute; position: absolute;
border: 1px solid $checkbox-ios-checkmark-color-on; border-width: $checkbox-ios-icon-checkmark-width;
border-style: $checkbox-ios-icon-checkmark-style;
border-color: $checkbox-ios-icon-checkmark-color;
top: 3px; top: 3px;
left: 7px; left: 7px;
width: 4px; width: 4px;
@ -35,19 +49,19 @@ ion-checkbox {
} }
&.item.activated { &.item.activated {
background-color: $list-ios-background-color; background-color: $checkbox-ios-background-color-off;
} }
} }
ion-checkbox[aria-disabled=true] { ion-checkbox[aria-disabled=true] {
opacity: 0.5; opacity: $checkbox-ios-disabled-opacity;
color: $subdued-text-ios-color; color: $checkbox-ios-disabled-text-color;
pointer-events: none; pointer-events: none;
} }
.media-checkbox { .checkbox-media {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px; margin: $checkbox-ios-media-margin;
} }
.checkbox-icon { .checkbox-icon {
@ -55,8 +69,10 @@ ion-checkbox[aria-disabled=true] {
display: block; display: block;
width: $checkbox-ios-icon-size; width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size; height: $checkbox-ios-icon-size;
border-radius: 50%; border-radius: $checkbox-ios-icon-border-radius;
border: 1px solid $checkbox-ios-border-color-off; border-width: $checkbox-ios-icon-border-width;
border-style: $checkbox-ios-icon-border-style;
border-color: $checkbox-ios-icon-border-color-off;
background-color: $checkbox-ios-background-color-off; background-color: $checkbox-ios-background-color-off;
} }
@ -69,6 +85,10 @@ ion-checkbox[aria-disabled=true] {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon { ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
background-color: $bg-on; background-color: $bg-on;
border-color: $bg-on; border-color: $bg-on;
&:after {
border-color: inverse($bg-on);
}
} }
} }

67
ionic/components/checkbox/modes/md.scss
View File

@ -3,14 +3,28 @@
// Material Design Checkbox // Material Design Checkbox
// -------------------------------------------------- // --------------------------------------------------
$checkbox-md-icon-size: 16px !default; $checkbox-md-border-bottom-width: 1px !default;
$checkbox-md-background-color-off: $list-md-background-color !default; $checkbox-md-border-bottom-style: solid !default;
$checkbox-md-border-width: 2px !default; $checkbox-md-border-bottom-color: $list-md-border-color !default;
$checkbox-md-border-radius: 2px !default; $checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
$checkbox-md-border-color-off: darken($list-md-border-color, 40%) !default; $checkbox-md-margin: 0 !default;
$checkbox-md-background-color-on: map-get($colors-md, primary) !default; $checkbox-md-media-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
$checkbox-md-border-color-on: map-get($colors-md, primary) !default; $checkbox-md-disabled-opacity: 0.5 !default;
$checkbox-md-checkmark-color-on: $background-md-color !default; $checkbox-md-disabled-text-color: $subdued-text-md-color !default;
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
$checkbox-md-icon-background-color-on: map-get($colors-md, primary) !default;
$checkbox-md-icon-size: 16px !default;
$checkbox-md-icon-checkmark-width: 2px !default;
$checkbox-md-icon-checkmark-style: solid !default;
$checkbox-md-icon-checkmark-color: $background-md-color !default;
$checkbox-md-icon-border-width: 2px !default;
$checkbox-md-icon-border-style: solid !default;
$checkbox-md-icon-border-radius: 2px !default;
$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default;
$checkbox-md-icon-border-color-on: map-get($colors-md, primary) !default;
ion-checkbox { ion-checkbox {
@ -23,19 +37,23 @@ ion-checkbox {
} }
ion-item-content { ion-item-content {
border-bottom: 1px solid $list-md-border-color; border-bottom-width: $checkbox-md-border-bottom-width;
margin: 0; border-bottom-style: $checkbox-md-border-bottom-style;
padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0; border-bottom-color: $checkbox-md-border-bottom-color;
margin: $checkbox-md-margin;
padding: $checkbox-md-padding;
} }
&[aria-checked=true] .checkbox-icon { &[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-background-color-on; background-color: $checkbox-md-icon-background-color-on;
border-color: $checkbox-md-border-color-on; border-color: $checkbox-md-icon-border-color-on;
} }
&[aria-checked=true] .checkbox-icon:after { &[aria-checked=true] .checkbox-icon:after {
position: absolute; position: absolute;
border: 2px solid $checkbox-md-checkmark-color-on; border-width: $checkbox-md-icon-checkmark-width;
border-style: $checkbox-md-icon-checkmark-style;
border-color: $checkbox-md-icon-checkmark-color;
top: 0; top: 0;
left: 3px; left: 3px;
width: 4px; width: 4px;
@ -49,23 +67,24 @@ ion-checkbox {
} }
ion-checkbox[aria-disabled=true] { ion-checkbox[aria-disabled=true] {
opacity: 0.5; opacity: $checkbox-md-disabled-opacity;
color: $subdued-text-md-color; color: $checkbox-md-disabled-text-color;
pointer-events: none; pointer-events: none;
} }
.media-checkbox { .checkbox-media {
// TODO convert these to sass variables margin: $checkbox-md-media-margin;
margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
} }
.checkbox-icon { .checkbox-icon {
position: relative; position: relative;
width: $checkbox-md-icon-size; width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size; height: $checkbox-md-icon-size;
border-radius: $checkbox-md-border-radius; border-radius: $checkbox-md-icon-border-radius;
border: $checkbox-md-border-width solid $checkbox-md-border-color-off; border-width: $checkbox-md-icon-border-width;
background-color: $checkbox-md-background-color-off; border-style: $checkbox-md-icon-border-style;
border-color: $checkbox-md-icon-border-color-off;
background-color: $checkbox-md-icon-background-color-off;
} }
@ -77,6 +96,10 @@ ion-checkbox[aria-disabled=true] {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon { ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
background-color: $bg-on; background-color: $bg-on;
border-color: $bg-on; border-color: $bg-on;
&:after {
border-color: inverse($bg-on);
}
} }
} }

2
ionic/components/checkbox/test/basic/e2e.ts
View File

@ -1,6 +1,6 @@
it('should check apple, enable/check grape, submit form', function() { it('should check apple, enable/check grape, submit form', function() {
element(by.css('[ng-control=appleCtrl] media-checkbox')).click(); element(by.css('[ng-control=appleCtrl] .checkbox-media')).click();
element(by.css('.e2eGrapeDisabled')).click(); element(by.css('.e2eGrapeDisabled')).click();
element(by.css('.e2eGrapeChecked')).click(); element(by.css('.e2eGrapeChecked')).click();
element(by.css('.e2eSubmit')).click(); element(by.css('.e2eSubmit')).click();

4
ionic/components/checkbox/test/basic/main.html
View File

@ -28,6 +28,10 @@
secondary color secondary color
</ion-checkbox> </ion-checkbox>
<ion-checkbox light checked="true">
light color
</ion-checkbox>
</ion-list> </ion-list>
</form> </form>