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

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:
'<div class="item-inner">' +
'<div class="media-checkbox" disable-activated>' +
'<div class="checkbox-media" disable-activated>' +
'<div class="checkbox-icon"></div>' +
'</div>' +
'<ion-item-content id="{{labelId}}">' +

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

@@ -1,15 +1,27 @@
@import "../../../globals.ios";
// iOS Checkbox Structure
// --------------------------------------------------
$checkbox-ios-icon-size: 21px !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-border-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-checkmark-color-on: $background-ios-color !default;
$checkbox-ios-background-color-off: $list-ios-background-color !default;
$checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
$checkbox-ios-icon-size: 21px !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 {
@@ -18,12 +30,14 @@ ion-checkbox {
&[aria-checked=true] .checkbox-icon {
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 {
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;
left: 7px;
width: 4px;
@@ -35,19 +49,19 @@ ion-checkbox {
}
&.item.activated {
background-color: $list-ios-background-color;
background-color: $checkbox-ios-background-color-off;
}
}
ion-checkbox[aria-disabled=true] {
opacity: 0.5;
color: $subdued-text-ios-color;
opacity: $checkbox-ios-disabled-opacity;
color: $checkbox-ios-disabled-text-color;
pointer-events: none;
}
.media-checkbox {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
.checkbox-media {
margin: $checkbox-ios-media-margin;
}
.checkbox-icon {
@@ -55,8 +69,10 @@ ion-checkbox[aria-disabled=true] {
display: block;
width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size;
border-radius: 50%;
border: 1px solid $checkbox-ios-border-color-off;
border-radius: $checkbox-ios-icon-border-radius;
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;
}
@@ -69,6 +85,10 @@ ion-checkbox[aria-disabled=true] {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
background-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
// --------------------------------------------------
$checkbox-md-icon-size: 16px !default;
$checkbox-md-background-color-off: $list-md-background-color !default;
$checkbox-md-border-width: 2px !default;
$checkbox-md-border-radius: 2px !default;
$checkbox-md-border-color-off: darken($list-md-border-color, 40%) !default;
$checkbox-md-background-color-on: map-get($colors-md, primary) !default;
$checkbox-md-border-color-on: map-get($colors-md, primary) !default;
$checkbox-md-checkmark-color-on: $background-md-color !default;
$checkbox-md-border-bottom-width: 1px !default;
$checkbox-md-border-bottom-style: solid !default;
$checkbox-md-border-bottom-color: $list-md-border-color !default;
$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
$checkbox-md-margin: 0 !default;
$checkbox-md-media-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
$checkbox-md-disabled-opacity: 0.5 !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 {
@@ -23,19 +37,23 @@ ion-checkbox {
}
ion-item-content {
border-bottom: 1px solid $list-md-border-color;
margin: 0;
padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
border-bottom-width: $checkbox-md-border-bottom-width;
border-bottom-style: $checkbox-md-border-bottom-style;
border-bottom-color: $checkbox-md-border-bottom-color;
margin: $checkbox-md-margin;
padding: $checkbox-md-padding;
}
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-background-color-on;
border-color: $checkbox-md-border-color-on;
background-color: $checkbox-md-icon-background-color-on;
border-color: $checkbox-md-icon-border-color-on;
}
&[aria-checked=true] .checkbox-icon:after {
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;
left: 3px;
width: 4px;
@@ -49,23 +67,24 @@ ion-checkbox {
}
ion-checkbox[aria-disabled=true] {
opacity: 0.5;
color: $subdued-text-md-color;
opacity: $checkbox-md-disabled-opacity;
color: $checkbox-md-disabled-text-color;
pointer-events: none;
}
.media-checkbox {
// TODO convert these to sass variables
margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
.checkbox-media {
margin: $checkbox-md-media-margin;
}
.checkbox-icon {
position: relative;
width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size;
border-radius: $checkbox-md-border-radius;
border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
background-color: $checkbox-md-background-color-off;
border-radius: $checkbox-md-icon-border-radius;
border-width: $checkbox-md-icon-border-width;
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 {
background-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() {
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('.e2eGrapeChecked')).click();
element(by.css('.e2eSubmit')).click();

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

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