mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(toolbar): fixed default button colors for MD in a toolbar, added new function to get this inverse
closes #91
This commit is contained in:
Brandy Carney
13
ionic/components/toolbar/test/colors/index.ts
Normal file
13
ionic/components/toolbar/test/colors/index.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import {App} from 'ionic/ionic';
|
||||||
|
|
||||||
|
|
||||||
|
@App({
|
||||||
|
templateUrl: 'main.html'
|
||||||
|
})
|
||||||
|
class E2EApp {
|
||||||
|
|
||||||
|
|
||||||
|
buttonClick(button) {
|
||||||
|
console.log(button);
|
||||||
|
}
|
||||||
|
}
|
||||||
199
ionic/components/toolbar/test/colors/main.html
Normal file
199
ionic/components/toolbar/test/colors/main.html
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar primary>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button>
|
||||||
|
<icon ios=contact></icon>
|
||||||
|
</button>
|
||||||
|
<button>
|
||||||
|
<icon search></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button secondary>
|
||||||
|
<icon more></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Primary</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar primary>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button class="activated">
|
||||||
|
<icon ios="contact"></icon>
|
||||||
|
</button>
|
||||||
|
<button class="activated">
|
||||||
|
<icon search></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button secondary class="activated">
|
||||||
|
<icon more></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Primary.activated</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar secondary>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button solid>
|
||||||
|
<icon contact></icon>
|
||||||
|
</button>
|
||||||
|
<button solid>
|
||||||
|
<icon contact></icon>
|
||||||
|
Solid
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Secondary</ion-title>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button solid danger>
|
||||||
|
Help
|
||||||
|
<icon help-circle></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar secondary>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button solid class="activated">
|
||||||
|
<icon contact></icon>
|
||||||
|
</button>
|
||||||
|
<button solid class="activated">
|
||||||
|
<icon contact></icon>
|
||||||
|
Solid
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Secondary Activated</ion-title>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button solid danger class="activated">
|
||||||
|
Help
|
||||||
|
<icon help-circle></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar dark>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button outline>
|
||||||
|
<icon contact></icon>
|
||||||
|
</button>
|
||||||
|
<button outline>
|
||||||
|
<icon star></icon>
|
||||||
|
Star
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button secondary outline>
|
||||||
|
<icon contact></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Dark</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar dark>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button outline class="activated">
|
||||||
|
<icon contact></icon>
|
||||||
|
</button>
|
||||||
|
<button outline class="activated">
|
||||||
|
<icon star></icon>
|
||||||
|
Star
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button secondary outline class="activated">
|
||||||
|
<icon contact></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Dark.activated</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar danger>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button>
|
||||||
|
<icon contact></icon>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button>
|
||||||
|
Edit
|
||||||
|
<icon create></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Danger</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar danger>
|
||||||
|
<button menuToggle>
|
||||||
|
<icon menu></icon>
|
||||||
|
</button>
|
||||||
|
<ion-buttons start>
|
||||||
|
<button>
|
||||||
|
<icon star></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Danger</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button #button1 (click)="buttonClick(button1)">
|
||||||
|
<icon star></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title>Right side menu toggle</ion-title>
|
||||||
|
<button menuToggle right>
|
||||||
|
<icon menu></icon>
|
||||||
|
</button>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button #button2 (click)="buttonClick(button2)">
|
||||||
|
<icon search></icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-segment secondary>
|
||||||
|
<ion-segment-button>
|
||||||
|
Something
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button>
|
||||||
|
Else
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button>
|
||||||
|
Light
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button>
|
||||||
|
Toolbar
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button>
|
||||||
|
Default Segment
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.toolbar {
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
background: #eee !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -22,7 +22,7 @@ $toolbar-md-title-font-size: 2rem !default;
|
|||||||
$toolbar-md-button-font-size: 1.4rem !default;
|
$toolbar-md-button-font-size: 1.4rem !default;
|
||||||
$navbar-md-height: $toolbar-md-height !default;
|
$navbar-md-height: $toolbar-md-height !default;
|
||||||
|
|
||||||
$bar-button-md-color: $toolbar-md-active-color !default;
|
$bar-button-md-color: $toolbar-md-button-color !default;
|
||||||
$bar-button-md-border-radius: 2px !default;
|
$bar-button-md-border-radius: 2px !default;
|
||||||
|
|
||||||
|
|
||||||
@ -71,8 +71,19 @@ ion-title {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-title,
|
.toolbar-title,
|
||||||
.bar-button-default {
|
.bar-button-default,
|
||||||
color: inverse($color-value);
|
.bar-button-outline {
|
||||||
|
color: toolbar-button-inverse($color-value);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-button-outline {
|
||||||
|
border-color: toolbar-button-inverse($color-value);
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color-name, $color-value in $colors-md {
|
||||||
|
@include md-bar-button-default($color-name, $color-value);
|
||||||
|
@include md-bar-button-outline($color-name, $color-value);
|
||||||
|
@include md-bar-button-solid($color-name, $color-value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -186,12 +197,10 @@ ion-buttons[right] {
|
|||||||
background-color: $bar-button-md-color;
|
background-color: $bar-button-md-color;
|
||||||
|
|
||||||
&:hover:not(.disable-hover) {
|
&:hover:not(.disable-hover) {
|
||||||
opacity: 0.4;
|
|
||||||
color: inverse($bar-button-md-color);
|
color: inverse($bar-button-md-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.activated {
|
&.activated {
|
||||||
opacity: 0.4;
|
|
||||||
color: inverse($bar-button-md-color);
|
color: inverse($bar-button-md-color);
|
||||||
background-color: color-shade($bar-button-md-color);
|
background-color: color-shade($bar-button-md-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,9 +20,10 @@ $font-size-md-base: $font-size-base !default;
|
|||||||
|
|
||||||
$toolbar-md-background: $toolbar-background !default;
|
$toolbar-md-background: $toolbar-background !default;
|
||||||
$toolbar-md-border-color: $toolbar-border-color !default;
|
$toolbar-md-border-color: $toolbar-border-color !default;
|
||||||
$toolbar-md-text-color: $toolbar-text-color !default;
|
$toolbar-md-text-color: #424242 !default;
|
||||||
$toolbar-md-active-color: $toolbar-active-color !default;
|
$toolbar-md-active-color: $toolbar-active-color !default;
|
||||||
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
|
$toolbar-md-inactive-color: $toolbar-inactive-color !default;
|
||||||
|
$toolbar-md-button-color: #424242 !default;
|
||||||
|
|
||||||
|
|
||||||
// Material Design List
|
// Material Design List
|
||||||
|
|||||||
@ -15,6 +15,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@function toolbar-button-inverse($color-value) {
|
||||||
|
$lightness: lightness($color-value);
|
||||||
|
$red: red($color-value);
|
||||||
|
$green: green($color-value);
|
||||||
|
|
||||||
|
@if ($lightness > 65 or $green > 220 or ($red > 240 and $green > 180)) {
|
||||||
|
@return $toolbar-md-button-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@function color-shade($color-value, $amount:8%) {
|
@function color-shade($color-value, $amount:8%) {
|
||||||
$lightness: lightness($color-value);
|
$lightness: lightness($color-value);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user