@material/mwc-button/_button.scss

Material Design button web component

/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

@use 'sass:math';
@use 'sass:map';
@use '@material/button/button';
@use '@material/button/button-theme';
@use '@material/elevation/elevation-theme';
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '@material/rtl/rtl';
@use '@material/theme/custom-properties';
@use '@material/theme/theme';
@use '@material/theme/theme-color';
@use '@material/mwc-ripple/ripple-theme';

@mixin core-styles() {
  @include button.without-ripple();

  :host {
    display: inline-flex;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /**
     * Override vertical-align with shortest value "top". Vertical-align's default
     * "baseline" value causes buttons to be misaligned next to each other if one
     * button has an icon and the other does not.
     */
    vertical-align: top;
  }

  :host([fullwidth]) {
    width: 100%;
  }

  :host([raised]),
  :host([unelevated]) {
    $ripple-config: (
      state: theme-color.$on-primary,
      opacity: mdc-ripple-theme.$light-ink-opacities,
    );
    @include ripple-theme.theme-deprecated($ripple-config);
  }

  .trailing-icon,
  .leading-icon {
    ::slotted(*),
    .mdc-button__icon {
      @include button.deprecated-icon();
    }
  }

  .trailing-icon {
    ::slotted(*),
    .mdc-button__icon {
      @include button.deprecated-icon-trailing();
    }
  }

  .slot-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &.flex {
      flex: auto;
    }
  }

  $text-padding: custom-properties.create(
    --mdc-button-horizontal-padding,
    button-theme.$horizontal-padding
  );

  $contained-padding: custom-properties.create(
    --mdc-button-horizontal-padding,
    button-theme.$contained-horizontal-padding
  );

  .mdc-button {
    flex: auto;
    overflow: hidden;
    @include _horizontal-padding($text-padding);
  }

  .mdc-button--raised {
    @include theme.property(
      box-shadow,
      custom-properties.create(
        --mdc-button-raised-box-shadow,
        elevation-theme.elevation-box-shadow(2)
      )
    );

    &:focus {
      @include theme.property(
        box-shadow,
        custom-properties.create(
          --mdc-button-raised-box-shadow-focus,
          custom-properties.create(
            --mdc-button-raised-box-shadow-hover,
            elevation-theme.elevation-box-shadow(4)
          )
        )
      );
    }

    &:hover {
      @include theme.property(
        box-shadow,
        custom-properties.create(
          --mdc-button-raised-box-shadow-hover,
          elevation-theme.elevation-box-shadow(4)
        )
      );
    }

    &:active {
      @include theme.property(
        box-shadow,
        custom-properties.create(
          --mdc-button-raised-box-shadow-active,
          elevation-theme.elevation-box-shadow(8)
        )
      );
    }

    &:disabled {
      @include theme.property(
        box-shadow,
        custom-properties.create(
          --mdc-button-raised-box-shadow-disabled,
          elevation-theme.elevation-box-shadow(0)
        )
      );
    }
  }

  .mdc-button--raised,
  .mdc-button--unelevated {
    @include _horizontal-padding($contained-padding);
  }

  .mdc-button--outlined {
    $outline-width: custom-properties.create(
      --mdc-button-outline-width,
      button-theme.$outlined-border-width
    );

    @include _outline-width($outline-width, $contained-padding);

    // TODO(dfreedm): remove over-specificity in MDC button mixin
    &:not(:disabled) {
      @include theme.property(
        border-color,
        custom-properties.create(
          --mdc-button-outline-color,
          button-theme.$outline-color
        )
      );
    }

    .ripple {
      @include _outline-ripple($outline-width);
    }
  }

  .mdc-button--dense {
    @include button-theme.density(-2);
  }

  :host([disabled]) {
    pointer-events: none;

    .mdc-button {
      @include theme.property(
        color,
        custom-properties.create(
          --mdc-button-disabled-ink-color,
          button-theme.$disabled-ink-color
        )
      );
    }

    .mdc-button--raised,
    .mdc-button--unelevated {
      @include theme.property(
        background-color,
        custom-properties.create(
          --mdc-button-disabled-fill-color,
          button-theme.$outline-color
        )
      );
    }

    .mdc-button--outlined {
      @include theme.property(
        border-color,
        custom-properties.create(
          --mdc-button-disabled-outline-color,
          button-theme.$disabled-container-color
        )
      );
    }
  }
}

@mixin _horizontal-padding($padding) {
  @include theme.property(padding-left, $padding, $gss: (noflip: true));
  @include theme.property(padding-right, $padding, $gss: (noflip: true));
}

@mixin _outline-width(
  $outline-width,
  $padding: button-theme.$contained-horizontal-padding
) {
  @include theme.property(border-width, $outline-width);

  $replace: (
    padding: $padding,
    outline: $outline-width,
  );

  @include theme.property(
    padding-left,
    'calc(padding - outline)',
    $gss: (noflip: true),
    $replace: $replace
  );

  @include theme.property(
    padding-right,
    'calc(padding - outline)',
    $gss: (noflip: true),
    $replace: $replace
  );
}

@mixin _outline-ripple($width) {
  $replace: (
    width: $width,
  );

  @include theme.property(top, 'calc(-1 * width)', $replace: $replace);

  @include rtl.reflexive-position(left, 'calc(-1 * width)', $replace: $replace);

  @include theme.property(border-width, $width);
  border-style: solid;
  border-color: transparent;
}