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

fix(checkbox): update ios checkbox to be closer to native

Browse Source 
this also updates the Sass variables so updating the checkbox width
will resize the inner checkmark
This commit is contained in:
Brandy Carney
2018-03-22 10:59:50 -04:00
parent eae6869012
commit b29fce1b8f
3 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/alert/alert.ios.vars.scss
View File

@ -240,10 +240,10 @@ $alert-ios-checkbox-margin-bottom: 10px !default;
$alert-ios-checkbox-margin-start: 16px !default;
/// @prop - Size of the checkbox in the alert
$alert-ios-checkbox-size: 21px !default;
$alert-ios-checkbox-size: 24px !default;
/// @prop - Border width of the checkbox in the alert
$alert-ios-checkbox-border-width: $hairlines-width !default;
$alert-ios-checkbox-border-width: 1px !default;
/// @prop - Border style of the checkbox in the alert
$alert-ios-checkbox-border-style: solid !default;
@ -264,16 +264,16 @@ $alert-ios-checkbox-background-color-off: $item-ios-background-color !defa
$alert-ios-checkbox-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Top of the icon in the checkbox alert
$alert-ios-checkbox-icon-top: 4px !default;
$alert-ios-checkbox-icon-top: $alert-ios-checkbox-size / 6 !default;
/// @prop - Start of the icon in the checkbox alert
$alert-ios-checkbox-icon-start: 8px !default;
$alert-ios-checkbox-icon-start: ($alert-ios-checkbox-size / 3) + 1px !default;
/// @prop - Width of the icon in the checkbox alert
$alert-ios-checkbox-icon-width: 4px !default;
$alert-ios-checkbox-icon-width: ($alert-ios-checkbox-size / 6) + 1px !default;
/// @prop - Height of the icon in the checkbox alert
$alert-ios-checkbox-icon-height: 9px !default;
$alert-ios-checkbox-icon-height: $alert-ios-checkbox-size / 2 !default;
/// @prop - Border width of the icon in the checkbox alert
$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default;

12
core/src/components/checkbox/checkbox.ios.scss
View File

@ -37,18 +37,18 @@
// -----------------------------------------
.checkbox-ios .checkbox-checked .checkbox-inner {
@include position(4px, null, null, 7px);
@include position($checkbox-ios-checkmark-top, null, null, $checkbox-ios-checkmark-start);
position: absolute;
width: 4px;
height: 9px;
width: $checkbox-ios-checkmark-width;
height: $checkbox-ios-checkmark-height;
border-width: $checkbox-ios-icon-checkmark-width;
border-width: $checkbox-ios-checkmark-border-width;
border-top-width: 0;
border-left-width: 0;
border-style: $checkbox-ios-icon-checkmark-style;
border-color: $checkbox-ios-icon-checkmark-color;
border-style: $checkbox-ios-checkmark-border-style;
border-color: $checkbox-ios-checkmark-border-color;
transform: rotate(45deg);
}

26
core/src/components/checkbox/checkbox.ios.vars.scss
View File

@ -15,7 +15,7 @@ $checkbox-ios-background-color-on: ion-color($colors-ios, primary, base,
$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default;
/// @prop - Size of the checkbox icon
$checkbox-ios-icon-size: 21px !default;
$checkbox-ios-icon-size: 24px !default;
/// @prop - Border color of the checkbox icon when off
$checkbox-ios-icon-border-color-off: $item-ios-border-color !default;
@ -32,14 +32,26 @@ $checkbox-ios-icon-border-style: solid !default;
/// @prop - Border radius of the checkbox icon
$checkbox-ios-icon-border-radius: 50% !default;
/// @prop - Width of the checkbox icon checkmark
$checkbox-ios-icon-checkmark-width: 1px !default;
/// @prop - Width of the checkmark border in the checkbox
$checkbox-ios-checkmark-border-width: 1px !default;
/// @prop - Style of the checkbox icon checkmark
$checkbox-ios-icon-checkmark-style: solid !default;
/// @prop - Style of the checkmark border in the checkbox
$checkbox-ios-checkmark-border-style: solid !default;
/// @prop - Color of the checkbox icon checkmark
$checkbox-ios-icon-checkmark-color: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default;
/// @prop - Color of the checkmark border in the checkbox
$checkbox-ios-checkmark-border-color: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default;
/// @prop - Top of the checkmark in the checkbox
$checkbox-ios-checkmark-top: $checkbox-ios-icon-size / 6 !default;
/// @prop - Start of the checkmark in the checkbox
$checkbox-ios-checkmark-start: ($checkbox-ios-icon-size / 3) + 1px !default;
/// @prop - Width of the checkmark in the checkbox
$checkbox-ios-checkmark-width: ($checkbox-ios-icon-size / 6) + 1px !default;
/// @prop - Height of the checkmark in the checkbox
$checkbox-ios-checkmark-height: $checkbox-ios-icon-size / 2 !default;
/// @prop - Opacity of the disabled checkbox
$checkbox-ios-disabled-opacity: .3 !default;