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

wip solid toolbar btn

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 11:42:11 -06:00
parent a9ba120967
commit 822141c420
3 changed files with 39 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ionic/components/toolbar/modes/ios.scss
View File

@@ -75,6 +75,20 @@ ion-title {
transform: translateZ(0px);
}
@mixin ios-toolbar-theme($color-name, $color-value) {
.toolbar[#{$color-name}] {
.toolbar-background {
background-color: $color-value;
border-color: darken($color-value, 10%);
}
.toolbar-title {
color: inverse($color-value);
}
}
}
// iOS Toolbar Buttons
// --------------------------------------------------
@@ -183,17 +197,5 @@ ion-segment-button[button] {
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
.toolbar[#{$color-name}] {
.toolbar-background {
background-color: $color-value;
border-color: darken($color-value, 10%);
}
.toolbar-title {
color: inverse($color-value);
}
}
@include ios-toolbar-theme($color-name, $color-value);
}

37
ionic/components/toolbar/modes/md.scss
View File

@@ -60,6 +60,19 @@ ion-title {
font-weight: 500;
}
@mixin md-toolbar-theme($color-name, $color-value) {
.toolbar[#{$color-name}] {
.toolbar-background {
background-color: $color-value;
}
.toolbar-title {
color: inverse($color-value);
}
}
}
// Material Design Toolbar Buttons
// --------------------------------------------------
@@ -128,31 +141,9 @@ ion-buttons[right] {
}
// Material Design Navbar
// --------------------------------------------------
$navbar-md-height: 5.6rem !default;
ion-navbar-section {
min-height: $navbar-md-height;
}
// Material Design Toolbar Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
.toolbar[#{$color-name}] {
.toolbar-background {
background-color: $color-value;
}
.toolbar-title {
color: inverse($color-value);
}
}
@include md-toolbar-theme($color-name, $color-value);
}

20
ionic/components/toolbar/test/scenarios/main.html
View File

@@ -42,17 +42,17 @@
<ion-toolbar>
<ion-buttons start>
<button clear>
<button solid>
<icon contact></icon>
</button>
<button clear>
<button solid>
<icon contact></icon>
Clear
Solid
</button>
</ion-buttons>
<ion-title>Clear</ion-title>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button clear secondary>
<button solid secondary>
Help
<icon help-circle></icon>
</button>
@@ -62,17 +62,17 @@
<ion-toolbar>
<ion-buttons start>
<button clear class="activated">
<button solid class="activated">
<icon contact></icon>
</button>
<button clear class="activated">
<button solid class="activated">
<icon contact></icon>
Clear
Solid
</button>
</ion-buttons>
<ion-title>Clear</ion-title>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button clear secondary class="activated">
<button solid secondary class="activated">
Help
<icon help-circle></icon>
</button>