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 21327 additions and 21181 deletions

View File

@ -6,13 +6,13 @@
// --------------------------------------------------
/// @prop - Font family of the label
$label-md-font-family: $font-family-md-base !default;
$label-md-font-family: $font-family-base !default;
/// @prop - Text color of the label by an input, select, or datetime
$label-md-text-color: $text-md-color-step-600 !default;
$label-md-text-color: $text-color-step-600 !default;
/// @prop - Text color of the stacked/floating label when it is focused
$label-md-text-color-focused: ion-color($colors-md, primary, base, md) !default;
$label-md-text-color-focused: ion-color(primary, base) !default;
/// @prop - Margin top of the label
$label-md-margin-top: $item-md-padding-top !default;
@ -31,3 +31,6 @@ $label-md-text-wrap-font-size: 14px !default;
/// @prop - Line height of the label when the text wraps
$label-md-text-wrap-line-height: 1.5 !default;
/// @prop - Color of the item paragraph
$item-md-paragraph-text-color: $text-color-step-400 !default;