mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +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
95 lines
2.6 KiB
SCSS
95 lines
2.6 KiB
SCSS
|
|
// 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-text-color: inverse($segment-button-ios-bg-color-activated) !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: $segment-button-ios-border-width;
|
|
border-style: solid;
|
|
|
|
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;
|
|
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;
|
|
transition: $segment-button-ios-activated-transition;
|
|
}
|
|
|
|
&:hover:not(.activated) {
|
|
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
|
|
}
|
|
}
|
|
|
|
&: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;
|
|
background-color: $bg-color;
|
|
}
|
|
|
|
&:hover:not(.activated) {
|
|
background-color: rgba($bg-color, $segment-button-ios-hover-opacity);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|