-
-
- +
- Flux Capacitor -
- +
- 1.21 Gigawatts -
- +
-
@@ -70,7 +70,7 @@
Dark Directive
diff --git a/js/angular/directive/checkbox.js b/js/angular/directive/checkbox.js index 95130aa96a..b81432ae1b 100644 --- a/js/angular/directive/checkbox.js +++ b/js/angular/directive/checkbox.js @@ -17,7 +17,7 @@ */ IonicModule -.directive('ionCheckbox', function() { +.directive('ionCheckbox', ['$ionicConfig', function($ionicConfig) { return { restrict: 'E', replace: true, @@ -47,7 +47,8 @@ IonicModule input.attr(name, value); } }); + var checkboxWrapper = element[0].querySelector('.checkbox'); + checkboxWrapper.classList.add('checkbox-' + $ionicConfig.form.checkbox()); } - }; -}); +}]); diff --git a/js/angular/service/ionicConfig.js b/js/angular/service/ionicConfig.js index 72ae7ff60a..5dc149d407 100644 --- a/js/angular/service/ionicConfig.js +++ b/js/angular/service/ionicConfig.js @@ -220,6 +220,9 @@ IonicModule text: PLATFORM, previousTitleText: PLATFORM }, + form: { + checkbox: PLATFORM + }, tabs: { style: PLATFORM, position: PLATFORM @@ -255,6 +258,10 @@ IonicModule previousTitleText: true }, + form: { + checkbox: 'circle' + }, + tabs: { style: 'standard', position: 'bottom' @@ -294,6 +301,10 @@ IonicModule previousTitleText: false }, + form: { + checkbox: 'square' + }, + tabs: { style: 'striped', position: 'top' diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss index c1117c626c..eb903ad0e8 100644 --- a/scss/_checkbox.scss +++ b/scss/_checkbox.scss @@ -6,7 +6,7 @@ .checkbox { // set the color defaults - @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default); + @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default); position: relative; display: inline-block; @@ -14,31 +14,31 @@ cursor: pointer; } .checkbox-light { - @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light); + @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light); } .checkbox-stable { - @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable); + @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable); } .checkbox-positive { - @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive); + @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive); } .checkbox-calm { - @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm); + @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm); } .checkbox-assertive { - @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive); + @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive); } .checkbox-balanced { - @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced); + @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced); } .checkbox-energized{ - @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized); + @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized); } .checkbox-royal { - @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal); + @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal); } .checkbox-dark { - @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark); + @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark); } .checkbox input:disabled:before, @@ -77,7 +77,7 @@ border-radius: $checkbox-border-radius; background: $checkbox-off-bg-color; content: ' '; - transition: background-color 20ms ease-in-out; + @include transition(background-color 20ms ease-in-out); } } @@ -92,11 +92,11 @@ input:checked + .checkbox-icon:before { @include transition(opacity .05s ease-in-out); @include rotate(-45deg); position: absolute; - top: 30%; - left: 26%; + top: 33%; + left: 25%; display: table; - width: ($checkbox-width / 2) + 1; - height: ($checkbox-width / 3) + 1; + width: ($checkbox-width / 2); + height: ($checkbox-width / 4) - 1; border: $checkbox-check-width solid $checkbox-check-color; border-top: 0; border-right: 0; @@ -104,6 +104,29 @@ input:checked + .checkbox-icon:before { opacity: 0; } +.platform-android .checkbox-platform input:before, +.platform-android .checkbox-platform .checkbox-icon:before, +.checkbox-square input:before, +.checkbox-square .checkbox-icon:before { + border-radius: 2px; + width: 72%; + height: 72%; + margin-top: 14%; + margin-left: 14%; + border-width: 2px; +} + +.platform-android .checkbox-platform input:after, +.platform-android .checkbox-platform .checkbox-icon:after, +.checkbox-square input:after, +.checkbox-square .checkbox-icon:after { + border-width: 2px; + top: 19%; + left: 25%; + width: ($checkbox-width / 2) - 1; + height: 7px; +} + .grade-c .checkbox input:after, .grade-c .checkbox-icon:after { @include rotate(0); @@ -150,4 +173,4 @@ input:checked + .checkbox-icon:after { .item-checkbox-right .checkbox input, .item-checkbox-right .checkbox-icon { float: right; -} \ No newline at end of file +} diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 85397d3ced..01b7d80fb2 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -125,7 +125,7 @@ // Checkbox Mixins // -------------------------------------------------- -@mixin checkbox-style($off-border-color, $on-bg-color) { +@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) { & input:before, & .checkbox-icon:before { border-color: $off-border-color; @@ -135,6 +135,7 @@ & input:checked:before, & input:checked + .checkbox-icon:before { background: $on-bg-color; + border-color: $on-border-color; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index d0cb7056db..f6d92013e3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -505,10 +505,11 @@ $checkbox-off-border-royal: $royal !default; $checkbox-on-bg-royal: $royal !default; $checkbox-off-border-dark: $dark !default; $checkbox-on-bg-dark: $dark !default; -$checkbox-off-border-default: $positive !default; +$checkbox-off-border-default: $button-light-border !default; $checkbox-on-bg-default: $positive !default; +$checkbox-on-border-default: $positive !default; -$checkbox-check-width: 3px !default; +$checkbox-check-width: 1px !default; $checkbox-check-color: #fff !default; diff --git a/test/css/input-checkbox.html b/test/css/input-checkbox.html index b439ce6794..78daf00990 100644 --- a/test/css/input-checkbox.html +++ b/test/css/input-checkbox.html @@ -18,22 +18,22 @@