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

feat(segment): default styles and header fit

Browse Source
This commit is contained in:
Max Lynch
2015-10-02 11:25:40 -05:00
parent b43cb32111
commit 963f3dca1b
4 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/nav/test/basic/index.ts
View File

@ -5,8 +5,8 @@ import {NavParams, NavController} from 'ionic/ionic';
@IonicView({ @IonicView({
template: '' + template: '' +
'<ion-navbar *navbar primary>' + '<ion-navbar *navbar>' +
'<ion-title>{{title}}</ion-title>' + '<ion-title><ion-segment><ion-segment-button>Friends</ion-segment-button><ion-segment-button>Enemies</ion-segment-button></ion-segment></ion-title>' +
'<ion-nav-items primary>' + '<ion-nav-items primary>' +
'<button><icon star></icon></button>' + '<button><icon star></icon></button>' +
'</ion-nav-items>' + '</ion-nav-items>' +

37
ionic/components/segment/segment.scss
View File

@ -2,6 +2,11 @@
// Segment // Segment
// -------------------------------------------------- // --------------------------------------------------
$segment-button-bg-color: transparent !default;
$segment-button-bg-color-activated: color(primary) !default;
$segment-button-text-color: inverse($segment-button-bg-color-activated) !default;
$segment-button-hover-opacity: 0.8 !default;
ion-segment { ion-segment {
display: block; display: block;
@ -34,6 +39,22 @@ ion-segment {
background: none; background: none;
background-color: $segment-button-bg-color;
color: $segment-button-text-color;
&[outline] {
border: 1px solid $segment-button-bg-color-activated;
background: $segment-button-bg-color;
color: $segment-button-bg-color-activated;
&.activated {
opacity: 1;
color: $segment-button-text-color;
background-color: $segment-button-bg-color-activated;
}
}
&:first-of-type { &:first-of-type {
border-radius: $button-border-radius 0px 0px $button-border-radius; border-radius: $button-border-radius 0px 0px $button-border-radius;
} }
@ -56,30 +77,22 @@ ion-segment {
ion-segment-button[button] { ion-segment-button[button] {
$bg-color: $value; $bg-color: $value;
$bg-color-activated: darken-or-lighten($bg-color);
$text-color: inverse($bg-color); $text-color: inverse($bg-color);
background-color: $bg-color; background-color: transparent;
color: $text-color; color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
&[outline] { &[outline] {
border: 1px solid $bg-color; border: 1px solid $bg-color;
background: $background-color; background: $segment-button-bg-color;
color: $bg-color; color: $bg-color;
&.activated { &.activated {
opacity: 1; opacity: 1;
color: $text-color; color: $text-color !important;
background-color: $bg-color; background-color: $bg-color !important;
} }
} }
} }
} }
} }

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

@ -11,6 +11,14 @@
Satellite Satellite
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-segment>
<ion-segment-button>
Friends
</ion-segment-button>
<ion-segment-button>
Enemies
</ion-segment-button>
</ion-segment>
<button type="submit" button primary>Submit</button> <button type="submit" button primary>Submit</button>
</form> </form>

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

@ -28,6 +28,12 @@ $toolbar-ios-title-font-size: 1.7rem !default;
order: map-get($toolbar-order-ios, menu-toggle-secondary); order: map-get($toolbar-order-ios, menu-toggle-secondary);
} }
ion-segment-button[button] {
line-height: 2.4rem;
min-height: 2.4rem;
font-size: 1.2rem;
}
button, button,
[button] { [button] {
margin-top: 0; margin-top: 0;