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): cleaned up both iOS and md mode styling

Browse Source 
Converted values to some sass variables, moved transition to after
button tap, added border bottom for md mode, reorganized the sass
variables by the order they’re used, removed the use of !important,
added iOS hover background-color. Closes #283
This commit is contained in:
Brandy Carney
2015-10-27 13:25:25 -04:00
parent b27c7b0efa
commit bf8d3073dc
6 changed files with 55 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,26 +2,31 @@
// iOS Segment
// --------------------------------------------------
$segment-button-ios-border-width: 1px !default;
$segment-button-ios-min-height: 3.0rem !default;
$segment-button-ios-line-height: 3.0rem !default;
$segment-button-ios-bg-color: transparent !default;
$segment-button-ios-bg-color-activated: color(primary) !default;
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
$segment-button-ios-hover-opacity: 0.8 !default;
$segment-button-ios-font-size: 1.3rem !default;
$segment-button-ios-bg-color-activated: color(primary) !default;
$segment-button-ios-activated-transition: 100ms all linear !default;
$segment-button-ios-hover-opacity: 0.16 !default;
.ion-segment {
button,
[button] {
border-width: 1px;
border-width: $segment-button-ios-border-width;
border-style: solid;
transition: 100ms all linear;
min-height: 3.3rem;
line-height: 3.3rem;
min-height: $segment-button-ios-min-height;
line-height: $segment-button-ios-line-height;
background-color: $segment-button-ios-bg-color;
color: $segment-button-ios-text-color;
font-size: $segment-button-ios-font-size;
&[outline] {
border: 1px solid $segment-button-ios-bg-color-activated;
@ -32,6 +37,11 @@ $segment-button-ios-hover-opacity: 0.8 !default;
opacity: 1;
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-bg-color-activated;
transition: $segment-button-ios-activated-transition;
}
&:hover:not(.activated) {
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
}
}
@ -71,8 +81,12 @@ $segment-button-ios-hover-opacity: 0.8 !default;
&.activated {
opacity: 1;
color: $text-color !important;
background-color: $bg-color !important;
color: $text-color;
background-color: $bg-color;
}
&:hover:not(.activated) {
background-color: rgba($bg-color, $segment-button-ios-hover-opacity);
}
}
}

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

@ -2,11 +2,13 @@
// iOS Segment
// --------------------------------------------------
$segment-button-md-font-size: 1.2rem !default;
$segment-button-md-min-height: 4.0rem !default;
$segment-button-md-line-height: 4.0rem !default;
$segment-button-md-text-color-activated: color(primary) !default;
$segment-button-md-border-color-activated: color(primary) !default;
$segment-button-md-min-height: 5.0rem;
$segment-button-md-line-height: 5.0rem;
$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default;
.ion-segment {
@ -15,6 +17,7 @@ $segment-button-md-line-height: 5.0rem;
[button] {
border-width: 0;
transition: 100ms all linear;
font-size: $segment-button-md-font-size;
min-height: $segment-button-md-min-height;
line-height: $segment-button-md-line-height;
@ -26,7 +29,7 @@ $segment-button-md-line-height: 5.0rem;
}
border-radius: 0;
border-bottom: 2px solid transparent;
border-bottom: $segment-button-md-border-bottom;
}
}
@ -49,8 +52,8 @@ $segment-button-md-line-height: 5.0rem;
&.activated {
opacity: 1;
color: $bg-color !important;
border-color: $bg-color !important;
color: $bg-color;
border-color: $bg-color;
}
}
}

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

@ -2,6 +2,8 @@
// Segment
// --------------------------------------------------
$segment-button-padding: 0 16px !default;
ion-segment {
display: block;
@ -22,7 +24,7 @@ ion-segment {
display: block;
overflow: hidden;
padding: 0 16px;
padding: $segment-button-padding;
width: 0;
border-width: 1px 0px 1px 1px;

3
ionic/components/segment/test/basic/index.ts
View File

@ -13,7 +13,8 @@ class MyApp {
this.myForm = fb.group({
mapStyle: ['hybrid', Validators.required]
});
console.log(this.myForm);
this.modelStyle = 'B';
}
doSubmit(event) {

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

@ -40,4 +40,22 @@
<h2>Satellite!!</h2>
</div>
</div>
<hr>
<h3>NgModel</h3>
<ion-segment [(ng-model)]="modelStyle" dark>
<ion-segment-button value="A">
Model A
</ion-segment-button>
<ion-segment-button value="B">
Model B
</ion-segment-button>
<ion-segment-button value="C">
Model C
</ion-segment-button>
</ion-segment>
Model Style: <b>Model {{ modelStyle }}</b>
</ion-content>