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): 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

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

@ -2,11 +2,6 @@
// Segment
// --------------------------------------------------
$segment-button-bg-color: transparent !default;
$segment-button-bg-color-activated: color(primary) !default;
$segment-button-text-color: inverse($segment-button-bg-color-activated) !default;
$segment-button-hover-opacity: 0.8 !default;
ion-segment {
display: block;
@ -38,63 +33,5 @@ ion-segment {
white-space: nowrap;
background: none;
background-color: $segment-button-bg-color;
color: $segment-button-text-color;
&[outline] {
border: 1px solid $segment-button-bg-color-activated;
background: $segment-button-bg-color;
color: $segment-button-bg-color-activated;
&.activated {
opacity: 1;
color: $segment-button-text-color;
background-color: $segment-button-bg-color-activated;
}
}
&:first-of-type {
border-radius: $button-border-radius 0px 0px $button-border-radius;
margin-right: 0;
}
&:last-of-type {
border-right-width: 1px;
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: 1px solid $bg-color;
background: $segment-button-bg-color;
color: $bg-color;
&.activated {
opacity: 1;
color: $text-color !important;
background-color: $bg-color !important;
}
}
}
}
}