ionic-framework/ionic/components/segment/modes/ios.scss

@import "../../../globals.ios";
@import "../segment";

// 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-font-size:                1.3rem !default;
$segment-button-ios-border-radius:            4px !default;

$segment-button-ios-bg-color-activated:       map-get($colors-ios, primary) !default;
$segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
$segment-button-ios-activated-transition:     100ms all linear !default;
$segment-button-ios-hover-opacity:            0.16 !default;

$segment-button-ios-toolbar-button-max-width: 100px !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;

      &.segment-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(.segment-activated) {
        background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
      }
    }

    &:first-of-type {
      border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
      margin-right: 0;
    }

    &:not(:first-of-type) {
      border-left-width: 0;
    }

    &:last-of-type {
      border-left-width: 0;
      border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
      margin-left: 0;
    }
  }

}

.toolbar {

  // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed
  ion-segment {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    button,
    [button] {
      max-width: $segment-button-ios-toolbar-button-max-width;
    }
  }

}

// Generate Default Segment Colors
// --------------------------------------------------

@mixin segment-button($button-color, $activated-text-color) {
  background-color: transparent;

  &[outline] {
    border-color: $button-color;
    background: $segment-button-ios-bg-color;
    color: $button-color;

    &.segment-activated {
      opacity: 1;
      color: $activated-text-color;
      background-color: $button-color;
    }

    &:hover:not(.segment-activated) {
      background-color: rgba($button-color, $segment-button-ios-hover-opacity);
    }
  }
}

// Loop through all of the colors to change the segment colors
// based on the toolbar color or if it isn't in a toolbar then based on
// the segment color value
@each $color-name, $color-value in $colors-ios {
  $inverse-color-value: inverse($color-value);

  .toolbar[#{$color-name}] {

    ion-segment {
      ion-segment-button[button] {
        @include segment-button($inverse-color-value, $color-value);
      }
    }

    // Loop through all of the colors again to change the segment colors
    // for each toolbar based on the segment color
    // this will take priority over the default toolbar colors
    @each $color-name, $color-value in $colors-ios {
      $inverse-color-value: inverse($color-value);

      ion-segment[#{$color-name}] {
        ion-segment-button[button] {
          @include segment-button($color-value, $inverse-color-value);
        }
      }
    }

  }

  ion-segment[#{$color-name}] {
    ion-segment-button[button] {
      @include segment-button($color-value, $inverse-color-value);
    }

  }
}