chore: update toolbar layout (#215)

telerik · Feb 19, 2017 · 2029faa · 2029faa
1 parent 3540c02
commit 2029faa
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 44 deletions.
diff --git a/scss/button/_theme.scss b/scss/button/_theme.scss
@@ -1,4 +1,4 @@
-@include exports('button/theme') {
+@include exports( "button/theme" ) {
 
     // Default button
     .k-button {
@@ -13,9 +13,7 @@
 
         // Pressed state
         &:active,
-        &.k-state-active,
-        &:active:focus,
-        &.k-state-active.k-state-focused {
+        &.k-state-active {
             @include fill( $button-text, $button-bg, $button-border, #{to top, $button-gradient} );
             box-shadow: inset $button-pressed-shadow;
         }
@@ -25,6 +23,7 @@
         &.k-state-focused {
             box-shadow: $button-focused-shadow;
         }
+
     }
 
     // Primary button
@@ -39,9 +38,7 @@
 
         // Active state
         &:active,
-        &.k-state-active,
-        &:active:focus,
-        &.k-state-active.k-state-focused {
+        &.k-state-active {
             @include appearance( pressed-primary-button );
             box-shadow: inset $primary-button-pressed-shadow;
         }
@@ -56,16 +53,17 @@
 
     //DropDown Button
     .k-dropdown-button {
-        &:focus > .k-button,
-        &.k-state-focused > .k-button {
-            box-shadow: $button-focused-shadow;
-        }
 
         &:active > .k-button:not(:disabled),
         &.k-state-active > .k-button:not(:disabled) {
             box-shadow: inset $button-pressed-shadow;
         }
 
+        &:focus > .k-button,
+        &.k-state-focused > .k-button {
+            box-shadow: $button-focused-shadow;
+        }
+
         .k-widget {
             border-width: 0;
             display: inline-block;

diff --git a/scss/mixins/appearance/_node.scss b/scss/mixins/appearance/_node.scss
@@ -26,8 +26,6 @@ $_node-imported: false !default;
         background-color: $list-item-bg;
     }
     %appearance_focused-list-item {
-        color: $list-item-text;
-        background-color: $list-item-bg;
         box-shadow: $list-item-focused-shadow;
     }
     %appearance_hovered-list-item {

diff --git a/scss/popup/_layout.scss b/scss/popup/_layout.scss
@@ -119,4 +119,32 @@
             outline: none;
         }
     }
+
 }
+
+
+
+
+@include exports( "listcontainer/layout" ) {
+
+    .k-list-container {
+
+        .k-button {
+            padding: $list-item-padding-y $list-item-padding-x;
+            border-width: 0;
+            border-radius: 0;
+            color: inherit;
+            background-color: transparent;
+            background-image: none;
+            line-height: inherit;
+            display: flex;
+            justify-content: flex-start;
+
+            .k-icon {
+                margin: 0 $icon-spacing 0 0;
+            }
+        }
+
+    }
+
+}
diff --git a/scss/popup/_theme.scss b/scss/popup/_theme.scss
@@ -70,3 +70,42 @@ $popup-text: $normal-text-color !default;
         box-shadow: none;
     }
 }
+
+
+
+
+@include exports( "listcontainer/theme" ) {
+
+
+    .k-list-container {
+
+        // Button normal state
+        .k-button {
+            box-shadow: none;
+        }
+
+
+        // Button hover state
+        .k-button:hover,
+        .k-button.k-state-hover {
+            @include appearance( hovered-list-item );
+            background-image: none;
+        }
+
+        // Button pressed state
+        .k-button:active,
+        .k-button.k-state-active {
+            @include appearance( selected-list-item );
+            background-image: none;
+        }
+
+
+        // Button focus state
+        .k-button:focus,
+        .k-button.k-state-focused {
+            box-shadow: $list-item-focused-shadow;
+        }
+
+    }
+
+}
diff --git a/scss/toolbar/_layout.scss b/scss/toolbar/_layout.scss
@@ -6,11 +6,14 @@
         line-height: $form-line-height;
         display: flex;
         flex-direction: row;
+        align-items: center;
         justify-content: flex-start;
         position: relative;
 
         > * {
             display: inline-flex;
+            align-items: stretch;
+            align-content: center;
             vertical-align: middle;
         }
         > * + * {
@@ -47,6 +50,9 @@
             width: calc( #{$toolbar-inner-calc-size} );
             height: calc( #{$toolbar-inner-calc-size} );
             border-width: 0 0 0 1px;
+            border-color: inherit;
+            background-clip: padding-box;
+            border-radius: 0;
             box-sizing: border-box;
             justify-content: center;
             position: absolute;
@@ -63,6 +69,7 @@
             border-width: 0 0 0 1px;
             border-style: solid;
             border-color: inherit;
+            align-self: stretch;
         }
 
 
@@ -103,36 +110,11 @@
             display: block;
         }
 
-        // Items
-        .k-overflow-button {
-            padding: $list-item-padding-y ($list-item-padding-x * 4) $list-item-padding-y ($list-item-padding-x / 2);
-            border-width: 0;
-            border-radius: 0;
-            display: block;
-            margin: 0;
-            text-align: left;
-
-            .k-icon {
-                margin: 0 $spacer-y / 2;
-            }
-        }
-
         // Hidden items
         .k-tool.k-state-disabled,
         .k-overflow-hidden {
             display: none;
         }
     }
 
-    .k-split-container {
-        // Items
-        .k-button {
-            padding: $list-item-padding-y $list-item-padding-x;
-            border-width: 0;
-            border-radius: 0;
-            display: flex;
-        }
-
-    }
-
 }
diff --git a/scss/toolbar/_theme.scss b/scss/toolbar/_theme.scss
@@ -45,14 +45,12 @@
             border-radius: 0;
         }
 
-    }
-
 
-    // Overflow container
-    .k-overflow-container {
-        .k-overflow-button {
-            background-image: none;
+        // Overflow anchor
+        .k-overflow-anchor {
+            border-width: 0;
         }
+
     }
 
 }