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

feat(checkbox): add disabled and emotion styles to ion-checkbox. Closes #1683 and #1509

Browse Source
This commit is contained in:
Perry Govier
2014-07-10 17:01:24 -05:00
parent fd75abd7f3
commit 79fb1e4941
2 changed files with 65 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
scss/_checkbox.scss
View File

@@ -12,35 +12,45 @@
display: inline-block;
padding: ($checkbox-height / 4) ($checkbox-width / 4);
cursor: pointer;
&.checkbox-light {
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
}
&.checkbox-stable {
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
}
&.checkbox-positive {
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
}
&.checkbox-calm {
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
}
&.checkbox-assertive {
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
}
&.checkbox-balanced {
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
}
&.checkbox-energized {
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
}
&.checkbox-royal {
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
}
&.checkbox-dark {
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
}
}
.checkbox-light {
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
}
.checkbox-stable {
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
}
.checkbox-positive {
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
}
.checkbox-calm {
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
}
.checkbox-assertive {
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
}
.checkbox-balanced {
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
}
.checkbox-energized{
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
}
.checkbox-royal {
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
}
.checkbox-dark {
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
}
.checkbox input:disabled:before,
.checkbox input:disabled + .checkbox-icon:before {
border-color: $checkbox-off-border-light;
}
.checkbox input:disabled:checked:before,
.checkbox input:disabled:checked + .checkbox-icon:before {
background: $checkbox-on-bg-light;
}
.checkbox.checkbox-input-hidden input {
display: none !important;

29
test/css/input-checkbox.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html ng-app="ionic">
<html ng-app="ionicApp">
<head>
<script src="../../dist/js/ionic.bundle.js"></script>
<meta charset="utf-8">
@@ -20,7 +20,7 @@
<main class="content has-header">
<ul class="list">
<ul class="list" ng-controller="MainCtrl">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checked>
@@ -51,9 +51,34 @@
</label>
Right side checkbox
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" disabled="disabled">
</label>
Disabled Checkbox
</li>
<li class="item-divider">Directives</li>
<ion-checkbox ng-model="test" ng-checked="test" ng-disabled="test">Disabled Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-light">Light Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-stable">Stable Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-positive">Positive Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-calm">Calm Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-assertive">Assertive Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-balanced">Balanced Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-energized">Energized Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-royal">Royal Directive</ion-checkbox>
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-dark">Dark Directive</ion-checkbox>
</ul>
</main>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.test = true;
});
</script>
</body>
</html>