Skip to content
Permalink
Browse files

fix(toolbar): inconsistent buttons background color in material theme

  • Loading branch information...
dimitar-pechev authored and joneff committed Feb 6, 2019
1 parent 448a6a1 commit bb9e286a5a18fbe1dfedf9018b5af04d624ad22c
Showing with 56 additions and 1 deletion.
  1. +7 −1 packages/material/scss/toolbar/_theme.scss
  2. +49 −0 tests/visual/toolbar.html
@@ -9,7 +9,13 @@ $toolbar-separator-padding-y: 0 !default;

.k-toolbar {

.k-button {}
background-color: $toolbar-bg;

.k-dropdown-button,
.k-split-button,
.k-button {
background-color: initial;
}

.k-button.k-state-disabled,
.k-state-disabled > .k-button {
@@ -470,6 +470,55 @@
</div>
</div>

<!-- Angular specific rendering (.k-button not direct descendant of .k-toolbar) -->
<div class="section">
<div tabindex="0" role="toolbar" dir="ltr" class="k-widget k-toolbar">
<div style="display: inline-block;">
<button tabindex="-1" class="k-button" dir="ltr">
Button
</button>
</div>
<div style="display: inline-block;">
<button tabindex="-1" role="checkbox" aria-checked="true" class="k-button k-state-active" dir="ltr">
Toggle
</button>
</div>
<div style="display: inline-block;">
<div class="k-widget k-split-button k-button-group" dir="ltr">
<button role="listbox" type="button" tabindex="-1" class="k-button" dir="ltr">
Split Button
</button>
<button type="button" class="k-button-icon k-button" tabindex="-1" dir="ltr">
<span class="k-icon k-i-arrow-s" role="presentation"></span>
</button>
</div>
</div>
<div style="display: inline-block;">
<div class="k-widget k-dropdown-button" dir="ltr">
<button role="menu" type="button" tabindex="-1" class="k-button" dir="ltr">
DropDownButton
</button>
</div>
</div>
<div style="display: inline-block;">
<div class="k-button-group" role="radiogroup" dir="ltr" tabindex="-1">
<button class="k-button-icon k-button k-group-start" role="radio" dir="ltr" tabindex="-1">
<span class="k-icon k-i-align-left" role="presentation"></span>
</button>
<button class="k-button-icon k-button" role="radio" dir="ltr" tabindex="-1">
<span class="k-icon k-i-align-center" role="presentation"></span>
</button>
<button class="k-button-icon k-button" role="radio" dir="ltr" tabindex="-1">
<span class="k-icon k-i-align-right" role="presentation"></span>
</button>
<button class="k-button-icon k-button k-group-end k-state-active" role="radio" dir="ltr" tabindex="0">
<span class="k-icon k-i-align-justify" role="presentation"></span>
</button>
</div>
</div>
</div>
</div>

<!-- Owerflow popup with normal buttons -->
<div class="section" style="float: left">
<div id="overflowPopup" class="k-animation-container k-overflow-wrapper" style="overflow: visible; display: inline-block; position: static">

0 comments on commit bb9e286

Please sign in to comment.
You can’t perform that action at this time.