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

- 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

View File

@ -6,13 +6,13 @@
// --------------------------------------------------
/// @prop - Background color of the checkbox when off
$checkbox-ios-background-color-off: $item-ios-background-color !default;
$checkbox-ios-background-color-off: $item-background-color !default;
/// @prop - Background color of the checkbox when on
$checkbox-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
$checkbox-ios-background-color-on: ion-color(primary, base) !default;
/// @prop - Background color of focus indicator for checkbox when focused
$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default;
$checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
/// @prop - Size of the checkbox icon
$checkbox-ios-icon-size: 24px !default;
@ -39,7 +39,7 @@ $checkbox-ios-checkmark-border-width: 1px !default;
$checkbox-ios-checkmark-border-style: solid !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;
$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default;
/// @prop - Top of the checkmark in the checkbox
$checkbox-ios-checkmark-top: $checkbox-ios-icon-size / 6 !default;