chore(): checkbox use ion-checkbox scss

This commit is contained in:
Adam Bradley
2015-09-21 21:00:14 -05:00
parent 03d3899bce
commit 0f41aec2b6
5 changed files with 8 additions and 12 deletions

View File

@ -3,12 +3,12 @@
// --------------------------------------------------
.checkbox {
ion-checkbox {
cursor: pointer;
@include user-select-none();
}
.checkbox[aria-disabled=true] {
ion-checkbox[aria-disabled=true] {
pointer-events: none;
opacity: 0.5;
color: $subdued-text-color;

View File

@ -34,7 +34,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
'id'
],
host: {
'class': 'item',
'class': 'item no-activated',
'role': 'checkbox',
'tappable': 'true',
'[attr.tab-index]': 'tabIndex',

View File

@ -10,7 +10,7 @@ $checkbox-ios-border-color-on: color(primary) !default;
$checkbox-ios-checkmark-color-on: $background-color !default;
.checkbox {
ion-checkbox {
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-background-color-on;
@ -30,10 +30,6 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
transform: rotate(45deg);
}
&.item.activated {
background-color: inherit;
}
}
.checkbox-icon {
@ -51,7 +47,7 @@ $checkbox-ios-checkmark-color-on: $background-color !default;
@mixin checkbox-theme-ios($color-name, $bg-on) {
.checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
background-color: $bg-on;
border-color: $bg-on;
}

View File

@ -12,7 +12,7 @@ $checkbox-md-border-color-on: color(primary) !default;
$checkbox-md-checkmark-color-on: $background-color !default;
.checkbox {
ion-checkbox {
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-background-color-on;
@ -49,7 +49,7 @@ $checkbox-md-checkmark-color-on: $background-color !default;
@mixin checkbox-theme-md($color-name, $bg-on) {
.checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
background-color: $bg-on;
border-color: $bg-on;
}

View File

@ -56,7 +56,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
left: 0;
}
&.activated {
&.activated:not(.no-activated) {
background-color: $item-ios-activated-background-color;
}
}