chore(dropdowns): add styles for grouping headers (#109)

* chore(dropdowns): add styles for grouping headers #40 #43 #44 #45 * chore(dropdowns): improve grouping variables #109
telerik · Apr 11, 2018 · 52376ee · 52376ee
1 parent 12f293e
commit 52376ee
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/default/scss/popup/_theme.scss b/packages/default/scss/popup/_theme.scss
@@ -1,9 +1,10 @@
 // TODO: list item variables
 $list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-
-$popup-text: $normal-text-color !default;
-
 $list-container-no-data-text: rgba( $text-color, .5 ) !default;
+$popup-text: $normal-text-color !default;
+$grouping-header-text: $bg-color !default;
+$grouping-header-bg: $text-color !default;
+$grouping-border: $border-color !default;
 
 @include exports('popup/theme') {
 
@@ -23,14 +24,14 @@ $list-container-no-data-text: rgba( $text-color, .5 ) !default;
         box-shadow: $list-container-shadow;
     }
     .k-popup .k-list .k-item > .k-group {
-        background: $text-color;
-        color: $bg-color;
+        color: $grouping-header-text;
+        background: $grouping-header-bg;
     }
     .k-popup .k-list .k-item > .k-group::before {
-        border-color: $text-color $text-color transparent transparent;
+        border-color: $grouping-header-bg $grouping-header-bg transparent transparent;
     }
     .k-group-header+div > .k-list > .k-item.k-first::before {
-        border-color: $border-color;
+        border-color: $grouping-border;
     }
     .k-popup-transparent {
         border-width: 0;

diff --git a/packages/material/scss/popup/_theme.scss b/packages/material/scss/popup/_theme.scss
@@ -1,3 +1,8 @@
+
+$grouping-header-text: $icon-color !default;
+$grouping-header-bg: $widget-border !default;
+$grouping-border: $grouping-header-bg !default;
+
 @import "~@progress/kendo-theme-default/scss/popup/theme";
 
 @include exports('popup/theme/material') {