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

md segment wip

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 16:45:24 -06:00
parent 53356f6b08
commit 3143091d63
4 changed files with 59 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,28 +13,24 @@ $segment-button-md-border-color-activated: map-get($colors-md, primary) !def
$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 { .segment-button {
border-width: 0;
transition: 100ms all linear;
font-size: $segment-button-md-font-size;
opacity: 0.7;
button, min-height: $segment-button-md-min-height;
[button] { line-height: $segment-button-md-line-height;
border-width: 0;
transition: 100ms all linear;
font-size: $segment-button-md-font-size;
opacity: 0.7;
min-height: $segment-button-md-min-height; &.activated,
line-height: $segment-button-md-line-height; &.segment-activated {
color: $segment-button-md-text-color-activated;
&.activated, &.segment-activated { background-color: transparent;
color: $segment-button-md-text-color-activated; border-color: $segment-button-md-border-color-activated;
background-color: transparent;
border-color: $segment-button-md-border-color-activated;
}
border-radius: 0;
border-bottom: $segment-button-md-border-bottom;
} }
border-radius: 0;
border-bottom: $segment-button-md-border-bottom;
} }
.toolbar { .toolbar {
@ -42,8 +38,8 @@ ion-segment {
ion-segment { ion-segment {
margin: 0 auto; margin: 0 auto;
ion-segment-button[button][outline].activated, .segment-button.activated,
ion-segment-button[button][outline].segment-activated { .segment-button.segment-activated {
background-color: transparent; background-color: transparent;
opacity: 1; opacity: 1;
} }
@ -57,15 +53,13 @@ ion-segment {
@mixin segment-button($button-color) { @mixin segment-button($button-color) {
background-color: transparent; background-color: transparent;
&[outline] { color: $button-color;
color: $button-color;
&.activated, &.segment-activated { &.activated, &.segment-activated {
background-color: transparent; background-color: transparent;
color: $button-color; color: $button-color;
border-color: $button-color; border-color: $button-color;
opacity: 1; opacity: 1;
}
} }
} }
@ -78,7 +72,7 @@ ion-segment {
.toolbar[#{$color-name}] { .toolbar[#{$color-name}] {
ion-segment { ion-segment {
ion-segment-button[button] { .segment-button {
@include segment-button($inverse-color-value); @include segment-button($inverse-color-value);
} }
} }
@ -88,7 +82,7 @@ ion-segment {
// this will take priority over the default toolbar colors // this will take priority over the default toolbar colors
@each $color-name, $color-value in $colors-md { @each $color-name, $color-value in $colors-md {
ion-segment[#{$color-name}] { ion-segment[#{$color-name}] {
ion-segment-button[button] { .segment-button {
@include segment-button($color-value); @include segment-button($color-value);
} }
} }
@ -97,7 +91,7 @@ ion-segment {
} }
ion-segment[#{$color-name}] { ion-segment[#{$color-name}] {
ion-segment-button[button] { .segment-button {
@include segment-button($color-value); @include segment-button($color-value);
} }

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

@ -7,33 +7,31 @@ $segment-button-padding: 0 16px !default;
ion-segment { ion-segment {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
width: 100%; width: 100%;
}
button,
[button] { .segment-button {
position: relative;
margin-left: 0; overflow: hidden;
margin-right: 0; display: block;
flex: 1; margin-left: 0;
display: block; margin-right: 0;
overflow: hidden; padding: $segment-button-padding;
padding: $segment-button-padding; flex: 1;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
background: none; background: none;
}
} }

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

@ -177,7 +177,7 @@ export class Segment extends Ion {
], ],
host: { host: {
'(click)': 'click($event)', '(click)': 'click($event)',
'[class.segment-activated]': 'isActive', '[class.segment-activated]': 'isActive'
} }
}) })
export class SegmentButton { export class SegmentButton {
@ -189,8 +189,8 @@ export class SegmentButton {
) { ) {
this.segment = segment; this.segment = segment;
renderer.setElementAttribute(elementRef, 'button', ''); renderer.setElementClass(elementRef, 'segment-button', true);
renderer.setElementAttribute(elementRef, 'outline', ''); renderer.setElementAttribute(elementRef, 'tappable', '');
} }
/** /**

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

@ -274,14 +274,16 @@ ion-buttons[right] {
// iOS Toolbar Menu Toggle // iOS Toolbar Menu Toggle
// -------------------------------------------------- // --------------------------------------------------
[menu-toggle] { .toolbar {
order: map-get($toolbar-order-ios, menu-toggle-start); [menu-toggle] {
cursor: pointer; order: map-get($toolbar-order-ios, menu-toggle-start);
} cursor: pointer;
}
[menu-toggle][end], [menu-toggle][end],
[menu-toggle][right] { [menu-toggle][right] {
order: map-get($toolbar-order-ios, menu-toggle-end); order: map-get($toolbar-order-ios, menu-toggle-end);
}
} }
ion-segment-button[button] { ion-segment-button[button] {