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

refactor(segment): MD fixing the segment colors in toolbars with colors

Browse Source 
references #597
This commit is contained in:
Brandy Carney
2015-11-20 12:59:21 -05:00
parent 0a5d1ec7d9
commit 116d4aa23c
3 changed files with 78 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
ionic/components/segment/modes/md.scss
View File

@ -39,34 +39,63 @@ ion-segment {
ion-segment {
margin: 0 auto;
ion-segment-button[button][outline].activated {
background-color: transparent;
}
}
}
// Generate Default Button Colors
// Generate Default Segment Colors
// --------------------------------------------------
@each $color, $value in $colors {
@mixin segment-button($button-color) {
background-color: transparent;
ion-segment[#{$color}] {
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
&[outline] {
color: $button-color;
&.activated {
background-color: transparent;
color: $text-color;
color: $button-color;
border-color: $button-color;
opacity: 1;
}
}
}
&[outline] {
color: $bg-color;
// Loop through all of the colors to change the segment colors
// based on the toolbar color or if it isn't in a toolbar then based on
// the segment color value
@each $color-name, $color-value in $colors {
$inverse-color-value: inverse($color-value);
&.activated {
opacity: 1;
color: $bg-color;
border-color: $bg-color;
.toolbar[#{$color-name}] {
ion-segment {
ion-segment-button[button] {
@include segment-button($inverse-color-value);
}
}
// Loop through all of the colors again to change the segment colors
// for each toolbar based on the segment color
// this will take priority over the default toolbar colors
@each $color-name, $color-value in $colors {
ion-segment[#{$color-name}] {
ion-segment-button[button] {
@include segment-button($color-value);
}
}
}
}
ion-segment[#{$color-name}] {
ion-segment-button[button] {
@include segment-button($color-value);
}
}
}

38
ionic/components/segment/test/basic/main.html
View File

@ -82,16 +82,44 @@
<p>Model Style: <b>Model {{ modelStyle }}</b></p>
</ion-content>
<ion-toolbar position="bottom">
<ion-segment [(ng-model)]="appType" primary>
<ion-toolbar position="bottom" primary>
<ion-segment [(ng-model)]="appType">
<ion-segment-button value="paid">
Paid
Primary
</ion-segment-button>
<ion-segment-button value="free">
Free
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Top Grossing
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar position="bottom" light>
<ion-segment [(ng-model)]="appType" primary>
<ion-segment-button value="paid">
Light
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Primary Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar position="bottom" light>
<ion-segment [(ng-model)]="appType">
<ion-segment-button value="paid">
Light
</ion-segment-button>
<ion-segment-button value="free">
Toolbar
</ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>