javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +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 { ion-segment {
margin: 0 auto; 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}] { &[outline] {
color: $button-color;
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
&.activated {
background-color: transparent; background-color: transparent;
color: $text-color; color: $button-color;
border-color: $button-color;
opacity: 1;
}
}
}
&[outline] { // Loop through all of the colors to change the segment colors
color: $bg-color; // 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 { .toolbar[#{$color-name}] {
opacity: 1;
color: $bg-color; ion-segment {
border-color: $bg-color; 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> <p>Model Style: <b>Model {{ modelStyle }}</b></p>
</ion-content> </ion-content>
<ion-toolbar position="bottom"> <ion-toolbar position="bottom" primary>
<ion-segment [(ng-model)]="appType" primary> <ion-segment [(ng-model)]="appType">
<ion-segment-button value="paid"> <ion-segment-button value="paid">
Paid Primary
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="free"> <ion-segment-button value="free">
Free Toolbar
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="top" class="e2eSegmentTopGrossing"> <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-button>
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>

3
tsconfig.json
View File

@ -13,5 +13,6 @@
"!./scripts/**", "!./scripts/**",
"!./dist/**", "!./dist/**",
"!./tmp/**" "!./tmp/**"
] ],
"compileOnSave" : false
} }