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

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,55 +4,38 @@
// Material Design Checkbox
// --------------------------------------------------
// Material Design Checkbox Outer Square: Unchecked
// -----------------------------------------
:host {
--size: #{$checkbox-md-icon-size};
.checkbox-md .checkbox-icon {
@include border-radius($checkbox-md-icon-border-radius);
--border-radius: calc(var(--size) * .125);
--border-width: #{$checkbox-md-icon-border-width};
--border-style: #{$checkbox-md-icon-border-style};
position: relative;
--unchecked-border-color: #{$checkbox-md-icon-border-color-off};
--unchecked-background: #{$checkbox-md-icon-background-color-off};
width: $checkbox-md-icon-size;
height: $checkbox-md-icon-size;
border-width: $checkbox-md-icon-border-width;
border-style: $checkbox-md-icon-border-style;
border-color: $checkbox-md-icon-border-color-off;
background-color: $checkbox-md-icon-background-color-off;
transition-duration: $checkbox-md-transition-duration;
transition-property: background;
transition-timing-function: $checkbox-md-transition-easing;
contain: strict;
--transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
}
// Material Design Checkbox Outer Square: Checked
// -----------------------------------------
.checkbox-md .checkbox-checked {
border-color: $checkbox-md-icon-border-color-on;
background-color: $checkbox-md-icon-background-color-on;
}
// Material Design Checkbox Inner Checkmark: Checked
// -----------------------------------------
.checkbox-md .checkbox-checked .checkbox-inner {
@include position(0, null, null, 4px);
:host(.checkbox-checked) .checkbox-inner {
@include position(
calc(var(--size) * .05),
null, null,
calc(var(--size) * .3)
);
position: absolute;
width: 5px;
height: 10px;
width: calc(var(--size) * .3125);
height: calc(var(--size) * .625);
border-width: $checkbox-md-icon-checkmark-width;
border-width: calc(var(--size) * .125);
border-top-width: 0;
border-left-width: 0;
border-style: $checkbox-md-icon-checkmark-style;
border-color: $checkbox-md-icon-checkmark-color;
transform: rotate(45deg);
}
@ -60,8 +43,10 @@
// Material Design Checkbox: Disabled
// -----------------------------------------
.checkbox-md.checkbox-disabled,
.item-md.item-checkbox-disabled ion-label {
// TODO
// .item-md.item-checkbox-disabled ion-label {
:host(.checkbox-disabled) {
opacity: $checkbox-md-disabled-opacity;
pointer-events: none;
@ -71,7 +56,7 @@
// Material Design Checkbox Keyboard Focus
// -----------------------------------------
.checkbox-key .checkbox-icon::after {
:host(.checkbox-key) .checkbox-icon::after {
@include border-radius(50%);
@include position(-12px, null, null, -12px);
@ -93,43 +78,18 @@
// Material Design Checkbox Within An Item
// -----------------------------------------
.item.item-md .checkbox-md {
:host(.in-item) {
@include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
position: static;
display: block;
}
.item.item-md .checkbox-md[slot="end"] {
:host(.in-item[slot="end"]) {
@include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
}
.checkbox-md + .item-inner ion-label {
@include margin-horizontal(0, null);
}
// Material Design Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-md($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.checkbox-md-#{$color-name} .checkbox-checked {
border-color: $color-base;
background-color: $color-base;
}
.checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner {
border-color: $color-contrast;
}
}
// Generate Material Design Checkbox Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include checkbox-theme-md($color-name);
}
// REVIEW
// .checkbox-md + .item-inner ion-label {
// @include margin-horizontal(0, null);
// }