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): cleaned up UI of segments inside of a toolbar

Browse Source 
references #356
This commit is contained in:
Brandy Carney
2015-11-02 16:15:58 -05:00
parent ccd109dfee
commit d0301c814e
2 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/segment/modes/ios.scss
View File

@ -13,6 +13,7 @@ $segment-button-ios-text-color: inverse($segment-button-ios-bg-col
$segment-button-ios-activated-transition: 100ms all linear !default; $segment-button-ios-activated-transition: 100ms all linear !default;
$segment-button-ios-hover-opacity: 0.16 !default; $segment-button-ios-hover-opacity: 0.16 !default;
$segment-button-ios-toolbar-button-max-width: 100px !default;
.ion-segment { .ion-segment {
@ -63,6 +64,17 @@ $segment-button-ios-hover-opacity: 0.16 !default;
} }
ion-toolbar {
.ion-segment {
justify-content: center;
button,
[button] {
max-width: $segment-button-ios-toolbar-button-max-width;
}
}
}
// Generate Default Button Colors // Generate Default Button Colors
// -------------------------------------------------- // --------------------------------------------------

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

@ -34,6 +34,13 @@ $segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !de
} }
} }
ion-toolbar {
.ion-segment {
width: 80%;
margin: 0 auto;
}
}
// Generate Default Button Colors // Generate Default Button Colors
// -------------------------------------------------- // --------------------------------------------------