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

checkbox updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-27 22:36:32 -05:00
parent 64b53cdc7d
commit 0808785234
10 changed files with 129 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/app/structure.scss
View File

@ -27,10 +27,7 @@ body {
text-size-adjust: none; text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none; @include user-select-none();
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
ion-app, ion-app,

2
ionic/components/button/button.scss
View File

@ -52,7 +52,7 @@ button,
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
user-select: none; @include user-select-none();
border: 1px solid #ccc; border: 1px solid #ccc;
padding: $button-padding; padding: $button-padding;

17
ionic/components/checkbox/checkbox.scss
View File

@ -4,21 +4,24 @@
.checkbox { .checkbox {
position: relative;
display: block; display: block;
cursor: pointer; cursor: pointer;
user-select: none; @include user-select-none();
} }
.checkbox input { .checkbox input {
position: relative; position: absolute;
left: -9999px; width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
border: none;
@include appearance(none);
} }
.checkbox[aria-disabled=true] { .checkbox[aria-disabled=true] {
opacity: 0.5; opacity: 0.5;
color: gray; color: gray;
.media-checkbox {
color: inherit;
}
} }

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

@ -21,15 +21,11 @@ import {Icon} from '../icon/icon';
'[class.item]': 'item', '[class.item]': 'item',
'[attr.aria-checked]': 'input.checked' '[attr.aria-checked]': 'input.checked'
} }
// defaultProperties: {
// 'iconOff': 'ion-ios-circle-outline',
// 'iconOn': 'ion-ios-checkmark'
// }
}) })
@IonicView({ @IonicView({
template: template:
'<div class="item-media media-checkbox">' + '<div class="item-media media-checkbox">' +
'<div class="media-checkbox-outline"></div>' + '<div class="checkbox-icon"></div>' +
'</div>' + '</div>' +
'<div class="item-content">' + '<div class="item-content">' +
'<content></content>' + '<content></content>' +

37
ionic/components/checkbox/extensions/ios.scss
View File

@ -2,20 +2,41 @@
// iOS Checkbox // iOS Checkbox
// -------------------------------------------------- // --------------------------------------------------
$checkbox-ios-color: #007aff; $checkbox-ios-icon-size: 24px !default;
$checkbox-ios-background-color: get-color(primary, base) !default;
$checkbox-ios-foreground-color: get-color(primary, inverse) !default;
.checkbox[mode="ios"] { .checkbox[mode="ios"] {
.media-checkbox { .checkbox-icon {
height: 20px; position: relative;
min-width: 20px; width: $checkbox-ios-icon-size;
color: $checkbox-ios-color; height: $checkbox-ios-icon-size;
background-color: $checkbox-ios-color; border-radius: $checkbox-ios-icon-size / 2;
background-color: $checkbox-ios-foreground-color;
border: 1px solid $checkbox-ios-background-color;
} }
&[aria-checked=false] .media-checkbox { &[aria-checked=true] .checkbox-icon {
background-color: red; background-color: $checkbox-ios-background-color;
&::after {
position: absolute;
border: 1px solid $checkbox-ios-foreground-color;
top: 3px;
left: 8px;
width: 5px;
height: 12px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
} }
} }
.hairlines .checkbox[mode="ios"] .checkbox-icon {
border-width: 0.5px;
}

57
ionic/components/checkbox/extensions/material.scss
View File

@ -1,43 +1,38 @@
// iOS Checkbox // Material Design Checkbox
// -------------------------------------------------- // --------------------------------------------------
$checkbox-md-color: #007aff; $checkbox-md-icon-size: 24px !default;
$checkbox-md-background-color: get-color(primary, base) !default;
$checkbox-md-foreground-color: get-color(primary, inverse) !default;
.checkbox[mode="md"] { .checkbox[mode="md"] {
.checkbox-icon {
position: relative; position: relative;
z-index: 1; width: $checkbox-md-icon-size;
vertical-align: middle; height: $checkbox-md-icon-size;
display: inline-block; border-radius: $checkbox-md-icon-size / 2;
box-sizing: border-box; background-color: $checkbox-md-foreground-color;
width: 100%; border: 1px solid $checkbox-md-background-color;
height: 24px;
margin: 0;
padding: 0;
.media-checkbox-outline {
min-width: 20px;
color: $checkbox-md-color;
background-color: $checkbox-md-color;
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid rgba(0,0,0,.54);
border-radius: 2px;
z-index: 2;
} }
&[aria-checked=false] .media-checkbox-outline { &[aria-checked=true] .checkbox-icon {
background-color: red; background-color: $checkbox-md-background-color;
&::after {
position: absolute;
border: 1px solid $checkbox-md-foreground-color;
top: 3px;
left: 8px;
width: 5px;
height: 12px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
} }
} }

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

@ -1,29 +1,50 @@
<ion-toolbar><ion-title>Checkboxes</ion-title></ion-toolbar>
<ion-content> <ion-content>
<form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm"> <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
<ion-list> <ion-list>
<ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label id="appleLabel">Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
<ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox> <ion-checkbox ng-control="appleCtrl">
<ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox> <label id="appleLabel">Apple</label>
<ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox> <input checked type="checkbox">
</ion-checkbox>
<ion-checkbox ng-control="bananaCtrl">
<label>Banana</label>
<input value="test" type="checkbox">
</ion-checkbox>
<ion-checkbox ng-control="cherryCtrl">
<label>Cherry</label>
<input type="checkbox">
</ion-checkbox>
<ion-checkbox ng-control="grapeCtrl">
<label>Grape</label>
<input value="test" checked="checked" type="checkbox">
</ion-checkbox>
<ion-list> <ion-list>
<button type="submit">Submit</button>
<br>
</form> </form>
appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}<br>
appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}<br> <p>
appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}<br> <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}<br> <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}</code><br>
bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}<br> <code>appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}</code><br>
bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}<br> <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}<br> <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}</code><br>
cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}<br> <code>bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}</code><br>
cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}<br> <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}<br> <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}</code><br>
grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}<br> <code>cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}</code><br>
grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}<br> <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
<!-- <input type="checkbox" value="test" ng-control="appleCtrl"> <code>grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}</code><br>
<input type="checkbox" value="hello" ng-control="bananaCtrl"> <code>grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}</code><br>
<button type="submit">Submit</button> </p>
</form> -->
</ion-content> </ion-content>

5
ionic/components/form/input.scss
View File

@ -29,6 +29,11 @@ focus-holder input {
padding-top: 9px; padding-top: 9px;
} }
.item .item-content label.input-label {
margin: 0;
padding: 0;
}
/*ion-input { /*ion-input {
display: block; display: block;

2
ionic/components/tabs/tabs.scss
View File

@ -72,7 +72,7 @@ button.tab-button {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
user-select: none; @include user-select-none();
color: $tab-button-text-inactive; color: $tab-button-text-inactive;
border: 0; border: 0;

12
ionic/util/mixins.scss
View File

@ -35,6 +35,18 @@
// User Select None
// --------------------------------------------------
@mixin user-select-none() {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// Input Placeholder // Input Placeholder
// -------------------------------------------------- // --------------------------------------------------