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

fix(checkbox): get css variable customization working better

Browse Source 
also fixes a bug where transition wasn’t working
This commit is contained in:
Brandy Carney
2018-07-23 17:16:16 -04:00
parent c3b5dc77ff
commit 3e7aa4be83
4 changed files with 107 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,22 +6,22 @@
:host { :host {
--size: #{$checkbox-ios-icon-size}; --size: #{$checkbox-ios-icon-size};
// Border
--border-radius: #{$checkbox-ios-icon-border-radius}; --border-radius: #{$checkbox-ios-icon-border-radius};
--border-width: #{$checkbox-ios-icon-border-width}; --border-width: #{$checkbox-ios-icon-border-width};
--border-style: #{$checkbox-ios-icon-border-style}; --border-style: #{$checkbox-ios-icon-border-style};
--unchecked-border-color: #{$checkbox-ios-icon-border-color-off}; --border-color: #{$checkbox-ios-icon-border-color-off};
--unchecked-background: #{$checkbox-ios-background-color-off};
// Background
--background: #{$checkbox-ios-background-color-off};
} }
// iOS Checkbox Inner Checkmark: Checked // iOS Checkbox Inner Checkmark: Checked
// ----------------------------------------- // -----------------------------------------
.checkbox-inner { .checkbox-inner {
@include position( @include position(calc(var(--size) / 6), null, null, calc(var(--size) / 2.5 - 1px));
calc(var(--size) / 6),
null, null,
calc(var(--size) / 2.5 - 1px)
);
position: absolute; position: absolute;

14
core/src/components/checkbox/checkbox.md.scss
View File

@ -6,11 +6,15 @@
:host { :host {
--size: #{$checkbox-md-icon-size}; --size: #{$checkbox-md-icon-size};
// Border
--border-radius: calc(var(--size) * .125); --border-radius: calc(var(--size) * .125);
--border-width: #{$checkbox-md-icon-border-width}; --border-width: #{$checkbox-md-icon-border-width};
--border-style: #{$checkbox-md-icon-border-style}; --border-style: #{$checkbox-md-icon-border-style};
--unchecked-border-color: #{$checkbox-md-icon-border-color-off}; --border-color: #{$checkbox-md-icon-border-color-off};
--unchecked-background: #{$checkbox-md-icon-background-color-off};
// Background
--background: #{$checkbox-md-icon-background-color-off};
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing}; --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
} }
@ -18,11 +22,7 @@
// ----------------------------------------- // -----------------------------------------
:host(.checkbox-checked) .checkbox-inner { :host(.checkbox-checked) .checkbox-inner {
@include position( @include position(calc(var(--size) * .05), null, null, calc(var(--size) * .3));
calc(var(--size) * .05),
null, null,
calc(var(--size) * .3)
);
position: absolute; position: absolute;

22
core/src/components/checkbox/checkbox.scss
View File

@ -6,18 +6,20 @@
:host { :host {
--ion-color-base: #{ion-color(primary, base)}; --ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)}; --ion-color-contrast: #{ion-color(primary, contrast)};
--background: var(--unchecked-backgroud);
--border-color: var(--unchecked-border-color); // Checked colors
--checked-border-color: #{current-color(base)}; --background-checked: #{current-color(base)};
--checked-background: #{current-color(base)}; --border-color-checked: #{current-color(base)};
--checkmark-color: #{current-color(contrast)};
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
:host(.checkbox-checked) { :host(.checkbox-checked) .checkbox-icon {
--background: var(--checked-background); border-color: var(--border-color-checked);
--border-color: var(--checked-border-color);
background: var(--background-checked);
} }
:host(.checkbox-checked) .checkbox-inner { :host(.checkbox-checked) .checkbox-inner {
@ -36,17 +38,19 @@ input {
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
transition: var(--transition);
border-width: var(--border-width); border-width: var(--border-width);
border-style: var(--border-style); border-style: var(--border-style);
border-color: var(--border-color); border-color: var(--border-color);
background-color: var(--background); background: var(--background);
contain: strict; contain: strict;
} }
.checkbox-inner { .checkbox-inner {
border-color: #{current-color(contrast)}; border-color: var(--checkmark-color);
opacity: 0; opacity: 0;
} }

86
core/src/components/checkbox/test/standalone/index.html
View File

@ -9,11 +9,26 @@
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css"> <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head> </head>
<body> <body padding>
<!-- Default --> <h1>Default</h1>
<ion-checkbox></ion-checkbox>
<ion-checkbox checked></ion-checkbox> <ion-checkbox checked></ion-checkbox>
<ion-checkbox disabled></ion-checkbox>
<ion-checkbox disabled checked></ion-checkbox>
<h1>Colors</h1>
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="tertiary"></ion-checkbox>
<ion-checkbox color="success"></ion-checkbox>
<ion-checkbox color="warning"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="medium"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<hr>
<!-- Colors -->
<ion-checkbox checked color="primary"></ion-checkbox> <ion-checkbox checked color="primary"></ion-checkbox>
<ion-checkbox checked color="secondary"></ion-checkbox> <ion-checkbox checked color="secondary"></ion-checkbox>
<ion-checkbox checked color="tertiary"></ion-checkbox> <ion-checkbox checked color="tertiary"></ion-checkbox>
@ -24,8 +39,67 @@
<ion-checkbox checked color="medium"></ion-checkbox> <ion-checkbox checked color="medium"></ion-checkbox>
<ion-checkbox checked color="dark"></ion-checkbox> <ion-checkbox checked color="dark"></ion-checkbox>
<!-- Disabled --> <hr>
<ion-checkbox disabled></ion-checkbox>
<ion-checkbox disabled checked></ion-checkbox> <ion-checkbox checked disabled color="primary"></ion-checkbox>
<ion-checkbox checked disabled color="secondary"></ion-checkbox>
<ion-checkbox checked disabled color="tertiary"></ion-checkbox>
<ion-checkbox checked disabled color="success"></ion-checkbox>
<ion-checkbox checked disabled color="warning"></ion-checkbox>
<ion-checkbox checked disabled color="danger"></ion-checkbox>
<ion-checkbox checked disabled color="light"></ion-checkbox>
<ion-checkbox checked disabled color="medium"></ion-checkbox>
<ion-checkbox checked disabled color="dark"></ion-checkbox>
<h1>Custom</h1>
<ion-checkbox class="custom"></ion-checkbox>
<ion-checkbox class="custom" checked></ion-checkbox>
<ion-checkbox class="custom" disabled></ion-checkbox>
<ion-checkbox class="custom" disabled checked></ion-checkbox>
<h1>Custom: checked</h1>
<ion-checkbox class="custom-checked"></ion-checkbox>
<ion-checkbox class="custom-checked" checked></ion-checkbox>
<ion-checkbox class="custom-checked" disabled></ion-checkbox>
<ion-checkbox class="custom-checked" disabled checked></ion-checkbox>
<h1>Custom: light</h1>
<ion-checkbox class="custom-light"></ion-checkbox>
<ion-checkbox class="custom-light" checked></ion-checkbox>
<ion-checkbox class="custom-light" disabled></ion-checkbox>
<ion-checkbox class="custom-light" disabled checked></ion-checkbox>
<h1>Custom: transition</h1>
<ion-checkbox class="custom-transition"></ion-checkbox>
<ion-checkbox class="custom-transition" checked></ion-checkbox>
<style>
.custom {
--background: #444;
--border-color: #000;
}
.custom-checked {
--background: lightblue;
--border-color: lightpink;
--background-checked: lightpink;
--border-color-checked: lightblue;
}
.custom-light {
--background: lightgrey;
--border-color: darkgrey;
--background-checked: darkgrey;
--border-color-checked: transparent;
--checkmark-color: #000;
}
.custom-transition {
--transition: all 5s ease-out;
}
</style>
</body> </body>
</html> </html>