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

refactor(segment): added MD styling to copy tabs, minus the animations

Browse Source 
references #283
This commit is contained in:
Brandy Carney
2015-10-14 12:30:51 -04:00
parent a0b8f6f537
commit 94c93d7468
6 changed files with 157 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,32 +2,79 @@
// iOS Segment
// --------------------------------------------------
$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;
.ion-segment {
button,
[button] {
border-width: 1px;
border-style: solid;
transition: 100ms all linear;
min-height: 3.3rem;
line-height: 3.3rem;
&.active {
color: white;
}
background-color: $segment-button-ios-bg-color;
color: $segment-button-ios-text-color;
border-style: solid;
&[outline] {
border: 1px solid $segment-button-ios-bg-color-activated;
background: $segment-button-ios-bg-color;
color: $segment-button-ios-bg-color-activated;
&.activated {
opacity: 1;
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-bg-color-activated;
}
}
&:first-of-type {
border-right-width: 0px;
border-radius: $button-border-radius 0px 0px $button-border-radius;
margin-right: 0;
}
&:last-of-type {
border-left-width: 0px;
border-radius: 0px $button-border-radius $button-border-radius 0px;
margin-left: 0;
}
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color, $value in $colors {
ion-segment[#{$color}] {
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
background-color: transparent;
color: $text-color;
&[outline] {
border-color: $bg-color;
background: $segment-button-ios-bg-color;
color: $bg-color;
&.activated {
opacity: 1;
color: $text-color !important;
background-color: $bg-color !important;
}
}
}
}
}

55
ionic/components/segment/modes/md.scss Normal file
View File

@ -0,0 +1,55 @@
// iOS Segment
// --------------------------------------------------
$segment-button-md-text-color-activated: color(primary) !default;
$segment-button-md-border-color-activated: color(primary) !default;
.ion-segment {
button,
[button] {
border-width: 0;
transition: 100ms all linear;
min-height: 3.3rem;
line-height: 3.3rem;
&.activated {
color: $segment-button-md-text-color-activated;
background-color: transparent;
border-color: $segment-button-md-border-color-activated;
}
border-radius: 0;
border-bottom: 2px solid transparent;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color, $value in $colors {
ion-segment[#{$color}] {
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
background-color: transparent;
color: $text-color;
&[outline] {
color: $bg-color;
&.activated {
opacity: 1;
color: $bg-color !important;
border-color: $bg-color !important;
}
}
}
}
}