mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(): checkbox use ion-checkbox scss
This commit is contained in:
@ -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;
|
||||
|
@ -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',
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user