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,26 +1,14 @@
@import "./slides-vendor";
@import "./slides";
@import "./slides.md.vars";
.slides-md .swiper-pagination-bullet {
background-color: $slides-md-bullet-background-color;
}
// Material Design Slides
// --------------------------------------------------
.slides-md .swiper-pagination-bullet-active {
background-color: $slides-md-bullet-background-color-active;
}
.slides-md .swiper-pagination-progress {
background-color: $slides-md-progress-background-color;
}
.slides-md .swiper-pagination-progress .swiper-pagination-progressbar {
background-color: $slides-md-progress-bar-background-color;
}
.slides-md .swiper-scrollbar {
background-color: $slides-md-scroll-bar-background-color;
}
.slides-md .swiper-scrollbar-drag {
background-color: $slides-md-scroll-bar-drag-background-color;
:host {
--bullet-background: #{$slides-md-bullet-background};
--bullet-background-active: #{$slides-md-bullet-background-active};
--progress-bar-background: #{$slides-md-progress-bar-background};
--progress-bar-background-active: #{$slides-md-progress-bar-background-active};
--scroll-bar-background: #{$slides-md-scroll-bar-background};
--scroll-bar-background-active: #{$slides-md-scroll-bar-drag-background};
}