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

@ -1,28 +1,28 @@
@import "../../themes/ionic.globals.ios";
/// @prop - Slides Bullet Background color
$slides-ios-bullet-background-color: $text-ios-color-step-400 !default;
/// @prop - Background color of the bullet
$slides-ios-bullet-background: $text-color-step-800 !default;
/// @prop - Slides Bullet Background color when Active
$slides-ios-bullet-background-color-active: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of the active bullet
$slides-ios-bullet-background-active: ion-color(primary, base) !default;
/// @prop - Slides Progress indicator Background color alpha
$slides-ios-progress-background-color-alpha: .25 !default;
/// @prop - Alpha to use for the background color of the progress bar
$slides-ios-progress-bar-background-alpha: .25 !default;
/// @prop - Slides Progress indicator Background color
$slides-ios-progress-background-color: css-var($text-ios-color-value, text-ios-color, $slides-ios-progress-background-color-alpha) !default;
/// @prop - Background color of the progress bar
$slides-ios-progress-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-progress-bar-background-alpha) !default;
/// @prop - Slides Progress indicator bar Background color
$slides-ios-progress-bar-background-color: ion-color($colors-ios, primary, shade, ios) !default;
/// @prop - Background color of the active progress bar
$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default;
/// @prop - Slides Scroll bar Background color alpha
$slides-ios-scroll-bar-background-color-alpha: .25 !default;
/// @prop - Alpha to use for the background color of the scroll bar
$slides-ios-scroll-bar-background-alpha: .1 !default;
/// @prop - Slides Scroll bar Background color
$slides-ios-scroll-bar-background-color: css-var($text-ios-color-value, text-ios-color, $slides-ios-scroll-bar-background-color-alpha) !default;
/// @prop - Background color of the scroll bar
$slides-ios-scroll-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-background-alpha) !default;
/// @prop - Slides Scroll bar drag handle Background color alpha
$slides-ios-scroll-bar-drag-background-color-alpha: .5 !default;
/// @prop - Alpha to use for the background color of the scroll bar while dragging
$slides-ios-scroll-bar-drag-background-alpha: .5 !default;
/// @prop - Slides Scroll bar drag handle Background color
$slides-ios-scroll-bar-drag-background-color: css-var($text-ios-color-value, text-ios-color, $slides-ios-scroll-bar-drag-background-color-alpha) !default;
/// @prop - Background color of the scroll bar drag handle
$slides-ios-scroll-bar-drag-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-drag-background-alpha) !default;