refactor(cc-dark-theme): organize styles in several files
Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.
This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.
Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/components/_drawer.scss b/src/ccDarkTheme/components/_drawer.scss
new file mode 100644
index 0000000..973b7f8
--- /dev/null
+++ b/src/ccDarkTheme/components/_drawer.scss
@@ -0,0 +1,33 @@
+material-drawer, material-drawer .panel, ec-filter-drawer-item > .root, ec-forum-drawer-item material-list-item {
+ background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-drawer material-expansionpanel .main-header > .header:is(:hover, :focus) {
+ background-color: var(--TWPT-active-background)!important;
+}
+
+:is(
+ ec-filter-drawer-item > .root,
+ ec-forum-drawer-item > material-list-item,
+ material-list material-list-item,
+ .drawer-section .drawer-item:not([separator=present])
+ ):is(:hover, :focus, :focus-within, .active, .drawer-item--active) {
+ background: var(--TWPT-active-background)!important;
+}
+
+material-drawer .panel {
+ border-bottom-color: #25231f!important;
+}
+
+material-drawer .drawer-section-title, material-drawer .header > material-icon {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-drawer material-list-item,
+ material-drawer material-list-item .title {
+ color: #d2cecb!important;
+}
+
+material-drawer ec-forum-drawer-item material-checkbox material-icon {
+ filter: brightness(1.5);
+}