blueCoin-UI/node_modules/ionic-angular/components/segment/segment.ios.scss

@import "../../themes/ionic.globals.ios";

// iOS Segment
// --------------------------------------------------

/// @prop - Background of the segment button
$segment-button-ios-background-color:           transparent !default;

/// @prop - Background of the activated segment button
$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default;

/// @prop - Text color of the segment button
$segment-button-ios-text-color:                 color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default;

/// @prop - Transition of the activated segment button
$segment-button-ios-transition-activated:       100ms all linear !default;

/// @prop - Transition of the segment button on hover
$segment-button-ios-transition-hover:           100ms all linear !default;

/// @prop - Transition of the segment button when pressed
$segment-button-ios-transition-active:          100ms all linear !default;

/// @prop - Opacity of the segment button on hover
$segment-button-ios-opacity-hover:              .1 !default;

/// @prop - Opacity of the segment button when pressed
$segment-button-ios-opacity-active:             .16 !default;

/// @prop - Opacity of the activated segment button
$segment-button-ios-opacity-activated:          1 !default;

/// @prop - Opacity of the disabled segment button
$segment-button-ios-opacity-disabled:           .3 !default;

/// @prop - Border width of the segment button
$segment-button-ios-border-width:               1px !default;

/// @prop - Height of the segment button
$segment-button-ios-height:                     3.2rem !default;

/// @prop - Line height of the segment button
$segment-button-ios-line-height:                3rem !default;

/// @prop - Font size of the segment button
$segment-button-ios-font-size:                  1.3rem !default;

/// @prop - Border radius of the segment button
$segment-button-ios-border-radius:              4px !default;

/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size:                  2.6rem !default;

/// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height:           2.8rem !default;

/// @prop - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width:   100px !default;

/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height:      2.6rem !default;

/// @prop - Line height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height:        2.5rem !default;

/// @prop - Font size of the segment button in a toolbar
$segment-button-ios-toolbar-font-size:          1.2rem !default;

/// @prop - Size of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-size:          2.2rem !default;

/// @prop - Line height of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-line-height:   2.4rem !default;


.segment-ios .segment-button {
  flex: 1;

  width: 0;

  height: $segment-button-ios-height;

  border-width: $segment-button-ios-border-width;
  border-style: solid;
  border-color: $segment-button-ios-background-color-activated;

  font-size: $segment-button-ios-font-size;
  line-height: $segment-button-ios-line-height;

  color: $segment-button-ios-background-color-activated;
  background-color: $segment-button-ios-background-color;

  ion-icon {
    font-size: $segment-button-ios-icon-size;
    line-height: $segment-button-ios-icon-line-height;
  }

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

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

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

  &:first-of-type {
    @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
    @include margin-horizontal(null, 0);
  }

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

  &:last-of-type {
    @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
    @include margin-horizontal(0, null);

    border-left-width: 0;
  }
}

[dir="rtl"] .segment-ios .segment-button {
  &:first-of-type {
    border-left-width: 0;
  }

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


.segment-ios.segment-disabled {
  opacity: .4;

  pointer-events: none;
}

.segment-ios .segment-button-disabled {
  color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);

  pointer-events: none;
}


// iOS Segment in Toolbar
// --------------------------------------------------

.toolbar-ios .segment-ios {
  @include position(0, 0, 0, 0);

  position: absolute;
}

.toolbar-ios .segment-button {
  max-width: $segment-button-ios-toolbar-button-max-width;
  height: $segment-button-ios-toolbar-button-height;

  font-size: $segment-button-ios-toolbar-font-size;
  line-height: $segment-button-ios-toolbar-line-height;

  ion-icon {
    font-size: $segment-button-ios-toolbar-icon-size;
    line-height: $segment-button-ios-toolbar-icon-line-height;
  }
}


// iOS Segment Button Mixin
// --------------------------------------------------

@mixin ios-segment-button($color-name, $color-base, $color-contrast) {

  .segment-ios-#{$color-name} {

    .segment-button {
      border-color: $color-base;
      color: $color-base;

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

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

      &.segment-activated {
        color: $color-contrast;
        background-color: $color-base;
      }
    }

    .segment-button-disabled {
      color: rgba($color-base, $segment-button-ios-opacity-disabled);
    }

  }

}


// iOS Segment Color Generation
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {

  @include ios-segment-button($color-name, $color-base, $color-contrast);

  .toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
    color: $color-base;
  }
}