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): removed div wrapping segment buttons

Browse Source 
references #356
This commit is contained in:
Brandy Carney
2015-11-03 10:32:28 -05:00
parent ff398d43ef
commit ead95ac738
4 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,11 +17,6 @@ $segment-button-ios-toolbar-button-max-width: 100px !default;
ion-segment { ion-segment {
display: flex;
align-items: center;
}
.ion-segment {
button, button,
[button] { [button] {
@ -70,15 +65,22 @@ ion-segment {
} }
ion-toolbar { .toolbar {
.ion-segment {
justify-content: center; // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed
ion-segment {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
button, button,
[button] { [button] {
max-width: $segment-button-ios-toolbar-button-max-width; max-width: $segment-button-ios-toolbar-button-max-width;
} }
} }
} }
// Generate Default Button Colors // Generate Default Button Colors
@ -111,5 +113,6 @@ ion-toolbar {
} }
} }
} }
} }
} }

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

@ -11,7 +11,7 @@ $segment-button-md-border-color-activated: color(primary) !default;
$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default; $segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default;
.ion-segment { ion-segment {
button, button,
[button] { [button] {
@ -32,13 +32,16 @@ $segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !de
border-radius: 0; border-radius: 0;
border-bottom: $segment-button-md-border-bottom; border-bottom: $segment-button-md-border-bottom;
} }
} }
ion-toolbar { .toolbar {
.ion-segment {
ion-segment {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
} }
// Generate Default Button Colors // Generate Default Button Colors
@ -65,5 +68,6 @@ ion-toolbar {
} }
} }
} }
} }
} }

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

@ -6,12 +6,10 @@ $segment-button-padding: 0 16px !default;
ion-segment { ion-segment {
display: block;
width: 100%;
}
.ion-segment {
display: flex; display: flex;
align-items: center;
justify-content: center;
flex: 1; flex: 1;
width: 100%; width: 100%;

2
ionic/components/segment/segment.ts
View File

@ -29,7 +29,7 @@ import {dom} from 'ionic/util';
inputs: [ inputs: [
'value' 'value'
], ],
template: '<div class="ion-segment"><ng-content></ng-content></div>', template: '<ng-content></ng-content>',
directives: [forwardRef(() => SegmentButton)] directives: [forwardRef(() => SegmentButton)]
}) })
export class Segment extends Ion { export class Segment extends Ion {