Skip to content

Commit

Permalink
fix(toolbar): md mode use the color contrast for toolbar button/title
Browse files Browse the repository at this point in the history
BREAKING CHANGES:

`$toolbar-md-button-color` no longer gets passed to the function that
sets the contrast color for toolbar buttons, but it can still be used
to set the default button color.

`$bar-button-md-color` was renamed to `$toolbar-md-button-color`
`$bar-button-md-border-radius` was renamed to
`$toolbar-md-button-border-radius`

references #6364
  • Loading branch information
brandyscarney committed May 5, 2016
1 parent 132d8e9 commit 9f54f16
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 18 deletions.
21 changes: 21 additions & 0 deletions ionic/components/toolbar/test/colors/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,27 @@
</ion-toolbar>


<ion-toolbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button>
<ion-icon ios="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>


<ion-toolbar primary>
<ion-buttons start>
<button>
Expand Down
33 changes: 18 additions & 15 deletions ionic/components/toolbar/toolbar.md.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ $toolbar-order-md: (
$toolbar-md-padding: 4px !default;
$toolbar-md-height: 5.6rem !default;
$toolbar-md-title-font-size: 2rem !default;
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, true) !default;

$toolbar-md-button-font-size: 1.4rem !default;
$navbar-md-height: $toolbar-md-height !default;

$bar-button-md-color: $toolbar-md-button-color !default;
$bar-button-md-border-radius: 2px !default;
$toolbar-md-button-color: $toolbar-md-title-text-color !default;
$toolbar-md-button-border-radius: 2px !default;

$navbar-md-height: $toolbar-md-height !default;


.toolbar {
Expand Down Expand Up @@ -62,7 +65,7 @@ ion-navbar-section {

font-size: $toolbar-md-title-font-size;
font-weight: 500;
color: $toolbar-md-text-color;
color: $toolbar-md-title-text-color;
}

@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
Expand Down Expand Up @@ -142,7 +145,7 @@ ion-buttons[right] {
height: 32px;

border: 0;
border-radius: $bar-button-md-border-radius;
border-radius: $toolbar-md-button-border-radius;
font-size: $toolbar-md-button-font-size;
font-weight: 500;
text-transform: uppercase;
Expand Down Expand Up @@ -174,17 +177,17 @@ ion-buttons[right] {
.bar-button-outline {
border-width: 1px;
border-style: solid;
border-color: $bar-button-md-color;
color: $bar-button-md-color;
border-color: $toolbar-md-button-color;
color: $toolbar-md-button-color;
background-color: transparent;

&:hover:not(.disable-hover) {
opacity: .4;
}

&.activated {
color: color-contrast($colors-md, $bar-button-md-color);
background-color: $bar-button-md-color;
color: color-contrast($colors-md, $toolbar-md-button-color, true);
background-color: $toolbar-md-button-color;
}
}

Expand All @@ -209,16 +212,16 @@ ion-buttons[right] {
// --------------------------------------------------

.bar-button-solid {
color: color-contrast($colors-md, $bar-button-md-color);
background-color: $bar-button-md-color;
color: color-contrast($colors-md, $toolbar-md-button-color, true);
background-color: $toolbar-md-button-color;

&:hover:not(.disable-hover) {
color: color-contrast($colors-md, $bar-button-md-color);
color: color-contrast($colors-md, $toolbar-md-button-color, true);
}

&.activated {
color: color-contrast($colors-md, $bar-button-md-color);
background-color: color-shade($bar-button-md-color);
color: color-contrast($colors-md, $toolbar-md-button-color, true);
background-color: color-shade($toolbar-md-button-color);
}
}

Expand Down Expand Up @@ -326,7 +329,7 @@ ion-buttons[right] {
// Material Design Toolbar Color Generation
// --------------------------------------------------

@include md-bar-button-default(default, $bar-button-md-color, color-contrast($colors-md, $bar-button-md-color));
@include md-bar-button-default(default, $toolbar-md-button-color, color-contrast($colors-md, $toolbar-md-button-color, true));

@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-toolbar-theme($color-name, $color-base, $color-contrast);
Expand Down
1 change: 0 additions & 1 deletion ionic/themes/dark.md.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ $toolbar-md-border-color: $toolbar-border-color !default;
$toolbar-md-text-color: #fff !default;
$toolbar-md-active-color: $toolbar-active-color !default;
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
$toolbar-md-button-color: #424242 !default;

// Material Design Card
// --------------------------------------------------
Expand Down
1 change: 0 additions & 1 deletion ionic/themes/default.md.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ $toolbar-md-border-color: $toolbar-border-color !default;
$toolbar-md-text-color: #424242 !default;
$toolbar-md-active-color: $toolbar-active-color !default;
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
$toolbar-md-button-color: #424242 !default;


// Material Design List
Expand Down
2 changes: 1 addition & 1 deletion ionic/util/functions.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@


@function toolbar-button-inverse($color-value) {
@return color-inverse($color-value, $dark: $toolbar-md-button-color, $light: #fff);
@return color-inverse($color-value, $dark: #424242, $light: #fff);
}


Expand Down

0 comments on commit 9f54f16

Please sign in to comment.