mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
bf8d3073dc
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
62 lines
1.5 KiB
SCSS
62 lines
1.5 KiB
SCSS
|
|
// 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-border-bottom: 2px solid rgba(#000000, 0.10) !default;
|
|
|
|
|
|
.ion-segment {
|
|
|
|
button,
|
|
[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;
|
|
|
|
&.activated {
|
|
color: $segment-button-md-text-color-activated;
|
|
background-color: transparent;
|
|
border-color: $segment-button-md-border-color-activated;
|
|
}
|
|
|
|
border-radius: 0;
|
|
border-bottom: $segment-button-md-border-bottom;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
border-color: $bg-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|