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

iOS checkboxes

Browse Source
This commit is contained in:
Adam Bradley
2015-07-28 08:23:47 -05:00
parent 0808785234
commit 2318af981e
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
// iOS Checkbox // iOS Checkbox
// -------------------------------------------------- // --------------------------------------------------
$checkbox-ios-icon-size: 24px !default; $checkbox-ios-icon-size: 21px !default;
$checkbox-ios-background-color: get-color(primary, base) !default; $checkbox-ios-background-color: get-color(primary, base) !default;
$checkbox-ios-foreground-color: get-color(primary, inverse) !default; $checkbox-ios-foreground-color: get-color(primary, inverse) !default;
@ -13,21 +13,22 @@ $checkbox-ios-foreground-color: get-color(primary, inverse) !default;
position: relative; position: relative;
width: $checkbox-ios-icon-size; width: $checkbox-ios-icon-size;
height: $checkbox-ios-icon-size; height: $checkbox-ios-icon-size;
border-radius: $checkbox-ios-icon-size / 2; border-radius: 50%;
background-color: $checkbox-ios-foreground-color; background-color: $checkbox-ios-foreground-color;
border: 1px solid $checkbox-ios-background-color; border: 1px solid #c4c4c4;
} }
&[aria-checked=true] .checkbox-icon { &[aria-checked=true] .checkbox-icon {
background-color: $checkbox-ios-background-color; background-color: $checkbox-ios-background-color;
border-color: $checkbox-ios-background-color;
&::after { &::after {
position: absolute; position: absolute;
border: 1px solid $checkbox-ios-foreground-color; border: 1px solid $checkbox-ios-foreground-color;
top: 3px; top: 3px;
left: 8px; left: 7px;
width: 5px; width: 4px;
height: 12px; height: 9px;
border-left: none; border-left: none;
border-top: none; border-top: none;
content: ''; content: '';
@ -35,8 +36,8 @@ $checkbox-ios-foreground-color: get-color(primary, inverse) !default;
} }
} }
} .input-label {
color: inherit;
}
.hairlines .checkbox[mode="ios"] .checkbox-icon {
border-width: 0.5px;
} }