Skip to content
Permalink
Browse files

fix(material): ensure button, toolbar and pager look ok in dark themes

  • Loading branch information...
joneff authored and gyoshev committed Nov 27, 2018
1 parent eed58ba commit d885bc5fda92fc6f4fa92c73e32496f485076401
Showing with 12 additions and 12 deletions.
  1. +6 −6 packages/material/docs/customization.md
  2. +6 −6 packages/material/scss/_variables.scss
@@ -102,16 +102,16 @@ Used to provide contrast between the background and foreground colors.
<td>$base-text</td>
<td>

rgb(0, 0, 0)
if($theme-type == dark, white, black)
</td>
<td>The text color of the components' chrome area.
</td>
</tr>
<tr>
<td>$base-bg</td>
<td>
<span class="color-preview" style="background-color: #fff"></span>
#fff

if($theme-type == dark, black, white)
</td>
<td>The background of the components' chrome area.
</td>
@@ -138,7 +138,7 @@ Used to provide contrast between the background and foreground colors.
<td>$hovered-bg</td>
<td>

rgba( black, .07)
rgba( if($theme-type == dark, white, black), .07)
</td>
<td>The background of hovered items.
</td>
@@ -147,7 +147,7 @@ Used to provide contrast between the background and foreground colors.
<td>$hovered-border</td>
<td>

rgba( black, .15 )
rgba( if($theme-type == dark, white, black), .15 )
</td>
<td>The border color of hovered items.
</td>
@@ -183,7 +183,7 @@ Used to provide contrast between the background and foreground colors.
<td>$selected-border</td>
<td>

rgba( black, .1 )
rgba( if($theme-type == dark, white, black), .1 )
</td>
<td>The border color of selected items.
</td>
@@ -281,20 +281,20 @@ $bg-color: #ffffff !default;
$border-color: rgba( black, .12 ) !default;

/// The text color of the components' chrome area.
$base-text: rgb(0, 0, 0) !default;
$base-text: if($theme-type == dark, white, black) !default;
/// The background of the components' chrome area.
$base-bg: #fff !default;
$base-bg: if($theme-type == dark, black, white) !default;

$base-border: rgba( black, .08 ) !default;
$base-border: rgba( if($theme-type == dark, white, black), .08 ) !default;
/// The gradient background of the components' chrome area.
$base-gradient: null !default;

/// The text color of hovered items.
$hovered-text: $base-text !default;
/// The background of hovered items.
$hovered-bg: rgba( black, .07) !default;
$hovered-bg: rgba( if($theme-type == dark, white, black), .07) !default;
/// The border color of hovered items.
$hovered-border: rgba( black, .15 ) !default;
$hovered-border: rgba( if($theme-type == dark, white, black), .15 ) !default;
/// The gradient background of hovered items.
$hovered-gradient: null !default;

@@ -303,7 +303,7 @@ $selected-text: $accent-contrast !default;
/// The background of selected items.
$selected-bg: $accent !default;
/// The border color of selected items.
$selected-border: rgba( black, .1 ) !default;
$selected-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
/// The gradient background of selected items.
$selected-gradient: null !default;

0 comments on commit d885bc5

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