chore(dropdowns): fix issues logged after testing

#40 #43 #44 #45
telerik · Apr 11, 2018 · 749cb36 · 749cb36
1 parent dffbbbb
commit 749cb36
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 18 deletions.
diff --git a/packages/default/scss/common/_forms.scss b/packages/default/scss/common/_forms.scss
@@ -147,6 +147,12 @@ $forms-invalid-color: $error !default;
         .k-i-loading {
             position: absolute;
             right: $input-padding-x;
+
+            .k-rtl &,
+            [dir="rtl"] & {
+                right: auto;
+                left: $input-padding-x;
+            }
         }
 
         .k-clear-value {

diff --git a/packages/default/scss/multiselect/_layout.scss b/packages/default/scss/multiselect/_layout.scss
@@ -1,3 +1,4 @@
+
 @include exports("multiselect/layout") {
 
     // Base
@@ -9,6 +10,7 @@
             visibility: hidden;
         }
 
+        .k-i-loading,
         .k-clear-value {
             top: $input-padding-y;
             margin-top: 0;
@@ -20,6 +22,11 @@
         padding-right: ($padding-x * 3);
         cursor: text;
 
+        // Input
+        .k-input {
+            float: left;
+        }
+
         // Token list
         ul {
             vertical-align: top;

diff --git a/packages/default/scss/popup/_layout.scss b/packages/default/scss/popup/_layout.scss
@@ -1,5 +1,9 @@
+$popup-border-width: 1px !default;
+$popup-header-padding: $list-item-padding-y $list-item-padding-x !default;
+$popup-header-font-size: null !default;
+$popup-header-text: null !default;
+
 @include exports('popup/layout') {
-    $popup-border-width: 1px !default;
 
     .k-popup {
         display: flex;
@@ -42,13 +46,18 @@
     }
     .k-popup > .k-group-header,
     .k-popup > .k-virtual-wrap > .k-group-header {
-        padding: $list-item-padding-y $list-item-padding-x;
+        padding: $popup-header-padding;
         min-height: $line-height-em;
+        font-size: $popup-header-font-size;
+        color: $popup-header-text;
         white-space: normal;
         transition: $transition;
         border-bottom-width: 1px;
         border-bottom-style: solid;
     }
+    .k-popup > .k-group-header {
+        margin-top: -$popup-padding-y;
+    }
     .k-popup .k-list .k-item > .k-group {
         position: absolute;
         top: 0;
@@ -57,6 +66,12 @@
         font-size: $font-size * .714;
         line-height: 1.5;
         text-transform: uppercase;
+
+        .k-rtl &,
+        [dir="rtl"] & {
+            right: auto;
+            left: 0;
+        }
     }
     .k-popup .k-list .k-item > .k-group::before {
         display: block;
@@ -66,6 +81,12 @@
         position: absolute;
         left: -14px;
         bottom: 0;
+
+        .k-rtl &,
+        [dir="rtl"] & {
+            right: -14px;
+            left: auto;
+        }
     }
     .k-group-header+div>.k-list>.k-item.k-first::before {
         content: " ";

diff --git a/packages/material/scss/multiselect/_layout.scss b/packages/material/scss/multiselect/_layout.scss
@@ -1,2 +1,29 @@
 @import "~@progress/kendo-theme-default/scss/multiselect/layout";
 
+@include exports("multiselect/layout/material") {
+
+    .k-multiselect {
+
+        .k-clear-value {
+            top: $padding-y;
+        }
+
+        &[dir='rtl'],
+        .k-rtl & {
+
+            .k-multiselect-wrap {
+
+                .k-button {
+                    margin-left: $input-padding-y;
+                    margin-right: 0;
+
+                    .k-select {
+                        margin-left: -.2em;
+                        margin-right: .5em;
+                    }
+                }
+            }
+        }
+    }
+}
+
diff --git a/packages/material/scss/multiselect/_theme.scss b/packages/material/scss/multiselect/_theme.scss
@@ -17,15 +17,9 @@
             padding-right: $icon-size;
         }
 
-        .k-clear-value {
-            top: $padding-y;
-            width: $padding-x-lg;
-        }
-
         .k-button {
             min-height: $form-line-height-em;
-            margin: $input-padding-y;
-            margin-left: 0;
+            margin: $input-padding-y $input-padding-y 0 0;
             padding-top: 0;
             padding-bottom: 0;
             font-size: .75em;
@@ -88,13 +82,4 @@
     .k-multiselect.k-state-border-down .k-icon.k-i-arrow-60-down {
         line-height: initial;
     }
-
-    // RTL
-    .k-rtl {
-        .k-multiselect .k-button .k-select {
-            margin-left: -.2em;
-            margin-right: .5em;
-        }
-    }
-
 }
diff --git a/packages/material/scss/popup/_layout.scss b/packages/material/scss/popup/_layout.scss
@@ -1,7 +1,19 @@
 $popup-border-width: 0;
+$popup-header-padding: $padding-y-lg $padding-x-lg !default;
+$popup-header-font-size: $font-size-sm !default;
+$popup-header-text: rgba($base-text, .54) !default;
+
 @import "~@progress/kendo-theme-default/scss/popup/layout";
 
 @include exports('popup/layout/material') {
+
+    .k-popup {
+
+        .k-group-header {
+            text-transform: uppercase;
+        }
+    }
+
     .k-list-filter {
 
         & > .k-icon {