javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

checkbox updates

Browse Source
This commit is contained in:
Adam Bradley
2015-12-05 21:48:47 -06:00
parent 84b21cfd98
commit 4025a01fe0
6 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/components/button/modes/ios.scss
View File

@ -1,8 +1,5 @@
@import "../../../globals.ios";
@import "../button";
@import "../button-fab";
@import "../button-icon";
@import "../button-size";
// iOS Button
// --------------------------------------------------
@ -156,3 +153,11 @@ $button-ios-border-radius: 4px !default;
@include ios-button-outline($color-name, $color-value);
@include ios-button-clear($color-name, $color-value);
}
// Core Button Overrides
// --------------------------------------------------
@import "../button-fab";
@import "../button-icon";
@import "../button-size";

11
ionic/components/button/modes/md.scss
View File

@ -1,8 +1,5 @@
@import "../../../globals.md";
@import "../button";
@import "../button-fab";
@import "../button-icon";
@import "../button-size";
// Material Design Button
// --------------------------------------------------
@ -250,3 +247,11 @@ $button-md-hover-opacity: 0.8 !default;
@include md-button-outline($color-name, $color-value);
@include md-button-clear($color-name, $color-value);
}
// Core Button Overrides
// --------------------------------------------------
@import "../button-fab";
@import "../button-icon";
@import "../button-size";

16
ionic/components/checkbox/checkbox.scss
View File

@ -1,16 +0,0 @@
@import "../../globals.core";
// Checkbox
// --------------------------------------------------
ion-checkbox {
cursor: pointer;
@include user-select-none();
}
ion-checkbox[aria-disabled=true] {
opacity: 0.5;
color: $subdued-text-color;
pointer-events: none;
}

6
ionic/components/checkbox/checkbox.ts
View File

@ -39,9 +39,9 @@ import {Form} from '../../util/form';
},
template:
'<div class="item-inner">' +
'<media-checkbox disable-activated>' +
'<checkbox-icon></checkbox-icon>' +
'</media-checkbox>' +
'<div class="media-checkbox" disable-activated>' +
'<div class="checkbox-icon"></div>' +
'</div>' +
'<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' +
'</ion-item-content>' +

29
ionic/components/checkbox/modes/ios.scss
View File

@ -1,5 +1,5 @@
@import "../../../globals.ios";
@import "../checkbox";
// iOS Checkbox Structure
// --------------------------------------------------
@ -13,13 +13,15 @@ $checkbox-ios-checkmark-color-on: $background-ios-color !default;
ion-checkbox {
cursor: pointer;
@include user-select-none();
&[aria-checked=true] checkbox-icon {
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-background-color-on;
border-color: $checkbox-ios-border-color-on;
}
&[aria-checked=true] checkbox-icon:after {
&[aria-checked=true] .checkbox-icon:after {
position: absolute;
border: 1px solid $checkbox-ios-checkmark-color-on;
top: 3px;
@ -38,12 +40,17 @@ ion-checkbox {
}
media-checkbox {
display: block;
ion-checkbox[aria-disabled=true] {
opacity: 0.5;
color: $subdued-text-ios-color;
pointer-events: none;
}
.media-checkbox {
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
}
checkbox-icon {
.checkbox-icon {
position: relative;
display: block;
width: $checkbox-ios-icon-size;
@ -59,7 +66,7 @@ checkbox-icon {
@mixin checkbox-theme-ios($color-name, $bg-on) {
ion-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;
}
@ -67,11 +74,9 @@ checkbox-icon {
}
// Generate iOS Checkbox Auxiliary Colors
// Generate iOS Checkbox Colors
// --------------------------------------------------
@each $color-name, $value in $colors-ios {
@include checkbox-theme-ios($color-name, $value);
@each $color-name, $color-value in $colors-ios {
@include checkbox-theme-ios($color-name, $color-value);
}

24
ionic/components/checkbox/modes/md.scss
View File

@ -1,5 +1,4 @@
@import "../../../globals.md";
@import "../checkbox";
// Material Design Checkbox
// --------------------------------------------------
@ -15,6 +14,9 @@ $checkbox-md-checkmark-color-on: $background-md-color !default;
ion-checkbox {
cursor: pointer;
@include user-select-none();
&.item .item-inner {
border: none;
padding-right: 0;
@ -26,12 +28,12 @@ ion-checkbox {
padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
}
&[aria-checked=true] checkbox-icon {
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-background-color-on;
border-color: $checkbox-md-border-color-on;
}
&[aria-checked=true] checkbox-icon:after {
&[aria-checked=true] .checkbox-icon:after {
position: absolute;
border: 2px solid $checkbox-md-checkmark-color-on;
top: 0;
@ -46,15 +48,19 @@ ion-checkbox {
}
media-checkbox {
display: block;
ion-checkbox[aria-disabled=true] {
opacity: 0.5;
color: $subdued-text-md-color;
pointer-events: none;
}
.media-checkbox {
// TODO convert these to sass variables
margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
}
checkbox-icon {
.checkbox-icon {
position: relative;
display: block;
width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size;
border-radius: $checkbox-md-border-radius;
@ -68,7 +74,7 @@ checkbox-icon {
@mixin checkbox-theme-md($color-name, $bg-on) {
ion-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;
}
@ -80,7 +86,5 @@ checkbox-icon {
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include checkbox-theme-md($color-name, $color-value);
}