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

fix(toolbar): fixed default button colors for MD in a toolbar, added new function to get this inverse

Browse Source 
closes #91
This commit is contained in:
Brandy Carney
2015-12-15 16:41:33 -05:00
parent 8f4307276a
commit d5e0570193
5 changed files with 241 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ionic/components/toolbar/test/colors/index.ts Normal file
View 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
View 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>

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

@ -22,7 +22,7 @@ $toolbar-md-title-font-size: 2rem !default;
$toolbar-md-button-font-size: 1.4rem !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;
@ -71,8 +71,19 @@ ion-title {
}
.toolbar-title,
.bar-button-default {
color: inverse($color-value);
.bar-button-default,
.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;
&:hover:not(.disable-hover) {
opacity: 0.4;
color: inverse($bar-button-md-color);
}
&.activated {
opacity: 0.4;
color: inverse($bar-button-md-color);
background-color: color-shade($bar-button-md-color);
}

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

@ -20,9 +20,10 @@ $font-size-md-base: $font-size-base !default;
$toolbar-md-background: $toolbar-background !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-inactive-color: $toolbar-inactive-color !default;
$toolbar-md-button-color: #424242 !default;
// Material Design List

13
ionic/util/functions.scss
View File

@ -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%) {
$lightness: lightness($color-value);