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

checkbox updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-27 22:36:32 -05:00
parent 64b53cdc7d
commit 0808785234
10 changed files with 129 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ionic/components/checkbox/extensions/ios.scss
View File

@ -2,20 +2,41 @@
// iOS Checkbox
// --------------------------------------------------
$checkbox-ios-color: #007aff;
$checkbox-ios-icon-size: 24px !default;
$checkbox-ios-background-color: get-color(primary, base) !default;
$checkbox-ios-foreground-color: get-color(primary, inverse) !default;
.checkbox[mode="ios"] {
.media-checkbox {
height: 20px;
min-width: 20px;
color: $checkbox-ios-color;
background-color: $checkbox-ios-color;
.checkbox-icon {
position: relative;
width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size;
border-radius: $checkbox-ios-icon-size / 2;
background-color: $checkbox-ios-foreground-color;
border: 1px solid $checkbox-ios-background-color;
}
&[aria-checked=false] .media-checkbox {
background-color: red;
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-background-color;
&::after {
position: absolute;
border: 1px solid $checkbox-ios-foreground-color;
top: 3px;
left: 8px;
width: 5px;
height: 12px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
}
}
.hairlines .checkbox[mode="ios"] .checkbox-icon {
border-width: 0.5px;
}

57
ionic/components/checkbox/extensions/material.scss
View File

@ -1,43 +1,38 @@
// iOS Checkbox
// Material Design Checkbox
// --------------------------------------------------
$checkbox-md-color: #007aff;
$checkbox-md-icon-size: 24px !default;
$checkbox-md-background-color: get-color(primary, base) !default;
$checkbox-md-foreground-color: get-color(primary, inverse) !default;
.checkbox[mode="md"] {
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 24px;
margin: 0;
padding: 0;
.media-checkbox-outline {
min-width: 20px;
color: $checkbox-md-color;
background-color: $checkbox-md-color;
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid rgba(0,0,0,.54);
border-radius: 2px;
z-index: 2;
.checkbox-icon {
position: relative;
width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size;
border-radius: $checkbox-md-icon-size / 2;
background-color: $checkbox-md-foreground-color;
border: 1px solid $checkbox-md-background-color;
}
&[aria-checked=false] .media-checkbox-outline {
background-color: red;
&[aria-checked=true] .checkbox-icon {
background-color: $checkbox-md-background-color;
&::after {
position: absolute;
border: 1px solid $checkbox-md-foreground-color;
top: 3px;
left: 8px;
width: 5px;
height: 12px;
border-left: none;
border-top: none;
content: '';
transform: rotate(45deg);
}
}
}