From 79fb1e494151360d5925de036ae20464aa2a09b3 Mon Sep 17 00:00:00 2001 From: Perry Govier Date: Thu, 10 Jul 2014 17:01:24 -0500 Subject: [PATCH] feat(checkbox): add disabled and emotion styles to ion-checkbox. Closes #1683 and #1509 --- scss/_checkbox.scss | 66 +++++++++++++++++++++--------------- test/css/input-checkbox.html | 29 ++++++++++++++-- 2 files changed, 65 insertions(+), 30 deletions(-) diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss index 3154d3e4ce..c1117c626c 100644 --- a/scss/_checkbox.scss +++ b/scss/_checkbox.scss @@ -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; diff --git a/test/css/input-checkbox.html b/test/css/input-checkbox.html index 4ae7366f78..b439ce6794 100644 --- a/test/css/input-checkbox.html +++ b/test/css/input-checkbox.html @@ -1,5 +1,5 @@ - + @@ -20,7 +20,7 @@
-
+