fix(toolbar): make floating toolbar styles consistent with toolbar st…

…yles
telerik · Nov 16, 2020 · 4e1c0a7 · 4e1c0a7
1 parent 03015ec
commit 4e1c0a7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 50 deletions.
diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss
@@ -62,18 +62,6 @@
     .k-window.k-editor-widget {
         padding: 0;
     }
-    // sass-lint:disable class-name-format
-    .editorToolbarWindow {
-        padding: 0;
-        display: flex;
-        align-items: stretch;
-    }
-    .k-editortoolbar-dragHandle {
-        margin: $toolbar-padding-y;
-        padding: 0;
-        cursor: move;
-    }
-    // sass-lint:enable class-name-format
 
 
     // Toolbar

diff --git a/packages/default/scss/editor/_theme.scss b/packages/default/scss/editor/_theme.scss
@@ -53,17 +53,6 @@
         }
     }
 
-    // sass-lint:disable class-name-format
-    .editorToolbarWindow.k-header.k-window-content {
-        @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
-        );
-    }
-    // sass-lint:enable class-name-format
-
 
     // Insert table
     .k-ct-popup {

diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss
@@ -4,9 +4,7 @@
     .k-toolbar {
         @include use-background-clip();
         margin: 0;
-        // Until flex gap is available in chrome
-        // padding: $toolbar-padding-y $toolbar-padding-x;
-        padding: ($toolbar-padding-y / 2) $toolbar-padding-x;
+        padding: $toolbar-padding-y $toolbar-padding-x;
         border-width: $toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -16,42 +14,37 @@
         line-height: $toolbar-line-height;
         list-style: none;
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
+        gap: $toolbar-spacing;
         align-items: center;
         justify-content: flex-start;
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        // Remove once we decide to not size empty containers
         &::before {
             content: "";
             height: $button-calc-size;
+            margin-inline-start: -$toolbar-spacing;
         }
 
         &.k-toolbar-resizable {
             flex-wrap: nowrap;
         }
 
         > * {
-            // Until flex gap is available in chrome
-            margin-top: ($toolbar-padding-y / 2);
-            margin-bottom: ($toolbar-padding-y / 2);
-            margin-right: $toolbar-spacing;
             flex-shrink: 0;
             display: inline-flex;
             align-items: stretch;
             align-content: center;
             vertical-align: middle;
 
             > label {
-                margin-right: $toolbar-spacing;
+                margin-inline-end: $toolbar-spacing;
             }
         }
-        > :last-child {
-            margin-right: 0;
-        }
 
         .k-button,
         .k-button-group,
@@ -176,26 +169,49 @@
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
-
-            > * {
-                margin-right: 0;
-                margin-left: $toolbar-spacing;
-
-                > label {
-                    margin-right: 0;
-                    margin-left: $toolbar-spacing;
-                }
-            }
-            > :last-child {
-                margin-left: 0;
-            }
-
             .k-overflow-anchor {
                 margin: 0;
                 right: auto;
                 left: 0;
             }
         }
+
     }
 
 }
+
+
+
+
+@include exports( "floating-toolbar/layout" ) {
+
+
+    // sass-lint:disable class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        padding: $toolbar-padding-y $toolbar-padding-x !important; // sass-lint:disable-line no-important
+        border-width: $toolbar-border-width;
+        border-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: $toolbar-spacing;
+        align-items: center;
+
+        .k-toolbar {
+            padding: 0;
+            border-width: 0;
+            color: inherit;
+            background: none;
+        }
+    }
+    .k-editortoolbar-dragHandle {
+        cursor: move;
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+    // sass-lint:enable class-name-format
+
+
+}
diff --git a/packages/default/scss/toolbar/_theme.scss b/packages/default/scss/toolbar/_theme.scss
@@ -38,3 +38,21 @@
     }
 
 }
+
+
+
+
+@include exports("floating-toolbar/theme") {
+
+    // sass-lint:disable-block class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        @include fill(
+            $toolbar-text,
+            $toolbar-bg,
+            $toolbar-border,
+            $toolbar-gradient
+        );
+    }
+
+}