javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toolbar): md mode use the color contrast for toolbar button/title

Browse Source 
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
This commit is contained in:
Brandy Carney
2016-05-05 11:13:37 -06:00
parent 132d8e977a
commit 9f54f160f0
5 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
ionic/components/toolbar/test/colors/main.html
View File

@@ -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>

35
ionic/components/toolbar/toolbar.md.scss
View File

@@ -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-button-font-size: 1.4rem !default;
$navbar-md-height: $toolbar-md-height !default;
$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, true) !default;
$bar-button-md-color: $toolbar-md-button-color !default;
$bar-button-md-border-radius: 2px !default;
$toolbar-md-button-font-size: 1.4rem !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 {
@@ -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) {
@@ -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;
@@ -174,8 +177,8 @@ 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) {
@@ -183,8 +186,8 @@ ion-buttons[right] {
}
&.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;
}
}
@@ -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);
}
}
@@ -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);

1
ionic/themes/dark.md.scss
View File

@@ -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
// --------------------------------------------------

1
ionic/themes/default.md.scss
View File

@@ -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

2
ionic/util/functions.scss
View File

@@ -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);
}