button-toggle.scss

@import '../core/style/vendor-prefixes';
@import '../core/style/layout-common';
@import '../../cdk/a11y/a11y';

$mat-button-toggle-standard-padding: 0 12px !default;
$mat-button-toggle-standard-height: 48px !default;
$mat-button-toggle-standard-border-radius: 4px !default;

$mat-button-toggle-legacy-padding: 0 16px !default;
$mat-button-toggle-legacy-height: 36px !default;
$mat-button-toggle-legacy-border-radius: 2px !default;

.mat-button-toggle-standalone,
.mat-button-toggle-group {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  white-space: nowrap;
  overflow: hidden;
  border-radius: $mat-button-toggle-legacy-border-radius;

  @include cdk-high-contrast {
    outline: solid 1px;
  }
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
.mat-button-toggle-group-appearance-standard {
  border-radius: $mat-button-toggle-standard-border-radius;

  @include cdk-high-contrast {
    outline: 0;
  }
}

.mat-button-toggle-vertical {
  flex-direction: column;

  .mat-button-toggle-label-content {
    // Vertical button toggles shouldn't be an inline-block, because the toggles should
    // fill the available width in the group.
    display: block;
  }
}

.mat-button-toggle {
  white-space: nowrap;
  position: relative;
  -webkit-tap-highlight-color: transparent;

  &.cdk-keyboard-focused {
    .mat-button-toggle-focus-overlay {
      opacity: 1;

      // In high contrast mode `opacity: 1` will show the overlay as solid so we fall back 0.5.
      @include cdk-high-contrast {
        opacity: 0.5;
      }
    }
  }
}

.mat-button-toggle-appearance-standard {
  &:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
    opacity: 0.04;
  }

  // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
  // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always
  // treated as programmatic focus. Note that it needs the extra `:not` in order to have more
  // specificity than the `:hover` above.
  // TODO(paul): support `program` as well. See https://github.com/angular/material2/issues/9889
  &.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay {
    opacity: 0.12;

    @include cdk-high-contrast {
      opacity: 0.5;
    }
  }
}

.mat-button-toggle-label-content {
  @include user-select(none);
  display: inline-block;
  line-height: $mat-button-toggle-legacy-height;
  padding: $mat-button-toggle-legacy-padding;

  // Prevents IE from shifting the content on click.
  position: relative;

  .mat-button-toggle-appearance-standard & {
    line-height: $mat-button-toggle-standard-height;
    padding: $mat-button-toggle-standard-padding;
  }
}

.mat-button-toggle-label-content > * {
  vertical-align: middle;
}

// Overlay to be used as a tint.
.mat-button-toggle-focus-overlay {
  border-radius: inherit;

  // Disable pointer events to prevent it from hijacking user events.
  pointer-events: none;
  opacity: 0;
  @include mat-fill;

  .mat-button-toggle-checked & {
    border-bottom: solid $mat-button-toggle-legacy-height;

    // Changing the background color for the selected item won't be visible in high contrast mode.
    // We fall back to using the overlay to draw a brighter, semi-transparent tint on top instead.
    // It uses a border, because the browser will render it using a brighter color.
    @include cdk-high-contrast {
      opacity: 0.5;
      height: 0;
    }
  }
}

@include cdk-high-contrast {
  .mat-button-toggle-checked {
    &.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
      border-bottom: solid $mat-button-toggle-standard-height;
    }
  }
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-button-toggle .mat-button-toggle-ripple {
  @include mat-fill;

  // Disable pointer events for the ripple container, because the container will overlay the user
  // content and we don't want to prevent mouse clicks that should toggle the state.
  // Pointer events can be safely disabled because the ripple trigger element is the label element.
  pointer-events: none;
}

.mat-button-toggle-button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
  width: 100%; // Stretch the button in case the consumer set a custom width.
  cursor: pointer;

  .mat-button-toggle-disabled & {
    cursor: default;
  }

  // Remove the extra focus outline that is added by Firefox on native buttons.
  &::-moz-focus-inner {
    border: 0;
  }
}