javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +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({
template: '' +
'<ion-navbar *navbar primary>' +
'<ion-title>{{title}}</ion-title>' +
'<ion-navbar *navbar>' +
'<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>' +
'<button><icon star></icon></button>' +
'</ion-nav-items>' +

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

@ -2,6 +2,11 @@
// 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 {
display: block;
@ -34,6 +39,22 @@ ion-segment {
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 {
border-radius: $button-border-radius 0px 0px $button-border-radius;
}
@ -56,30 +77,22 @@ ion-segment {
ion-segment-button[button] {
$bg-color: $value;
$bg-color-activated: darken-or-lighten($bg-color);
$text-color: inverse($bg-color);
background-color: $bg-color;
background-color: transparent;
color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
&[outline] {
border: 1px solid $bg-color;
background: $background-color;
background: $segment-button-bg-color;
color: $bg-color;
&.activated {
opacity: 1;
color: $text-color;
background-color: $bg-color;
color: $text-color !important;
background-color: $bg-color !important;
}
}
}
}
}

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

@ -11,6 +11,14 @@
Satellite
</ion-segment-button>
</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>
</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);
}
ion-segment-button[button] {
line-height: 2.4rem;
min-height: 2.4rem;
font-size: 1.2rem;
}
button,
[button] {
margin-top: 0;