_button.scss

//
// Copyright 2020 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

// stylelint-disable selector-class-pattern --
// Selector '.mdc-*' should only be used in this project.

@use '@material/feature-targeting/feature-targeting';
@use '@material/rtl/rtl';
@use '@material/touch-target/mixins' as touch-target-mixins;
@use '@material/typography/typography';
@use './button-base';
@use './button-filled';
@use './button-filled-theme';
@use './button-outlined';
@use './button-outlined-theme';
@use './button-protected';
@use './button-protected-theme';
@use './button-ripple';
@use './button-text';
@use './button-text-theme';
@use './button-theme';
@use './button-shared-theme';

// For backwards compatibility.
@forward './button-base' show deprecated-base, base, icon, icon-trailing, icon-svg, icon-contained, icon-contained-trailing, deprecated-icon, deprecated-icon-trailing, deprecated-icon-svg, deprecated-icon-contained, deprecated-icon-contained-trailing;

@mixin styles($query: feature-targeting.all()) {
  @include static-styles($query: $query);
  @include theme-styles($query: $query);
}

@mixin theme-styles($query: feature-targeting.all()) {
  .mdc-button {
    @include button-text-theme.theme-styles(
      button-text-theme.$light-theme,
      $query: $query
    );
  }
  .mdc-button--unelevated {
    @include button-filled-theme.theme-styles(
      button-filled-theme.$light-theme,
      $query: $query
    );
  }
  .mdc-button--raised {
    @include button-protected-theme.theme-styles(
      button-protected-theme.$light-theme,
      $query: $query
    );
  }
  .mdc-button--outlined {
    @include button-outlined-theme.theme-styles(
      button-outlined-theme.$light-theme,
      $query: $query
    );
  }
}

@mixin static-styles($query: feature-targeting.all()) {
  @include static-styles-without-ripple($query: $query);
  @include button-ripple.static-styles($query: $query);
}

@mixin static-styles-without-ripple($query: feature-targeting.all()) {
  @include button-base.static-styles($query: $query);
  @include button-text.static-styles-without-ripple($query: $query);
  @include button-filled.static-styles-without-ripple($query: $query);
  @include button-protected.static-styles-without-ripple($query: $query);
  @include button-outlined.static-styles-without-ripple($query: $query);
}

// Legacy mixins

@mixin without-ripple($query: feature-targeting.all()) {
  @include button-base.deprecated-static-styles-without-ripple($query: $query);
  @include button-text.static-styles-without-ripple($query: $query);
  @include button-filled.static-styles-without-ripple($query: $query);
  @include button-protected.static-styles-without-ripple($query: $query);
  @include button-outlined.static-styles-without-ripple($query: $query);
  @include _theme-styles-without-ripple($query: $query);
}

@mixin _theme-styles-without-ripple($query: feature-targeting.all()) {
  @include button-text-theme.deprecated-theme-styles($query: $query);
  @include button-filled-theme.deprecated-theme-styles($query: $query);
  @include button-outlined-theme.deprecated-theme-styles($query: $query);
  // Elevation has been recategorized into theme styles. Keeping old elevation
  // styles here for backwards compatibility.
  .mdc-button--raised {
    @include button-protected.raised($query: $query);
  }
}

// @deprecated - use styles() instead.
@mixin core-styles($query: feature-targeting.all()) {
  @include styles($query: $query);
  // TODO: remove this rule since padding now takes care of icon margins.
  $feat-structure: feature-targeting.create-target($query, structure);
  .mdc-button--raised,
  .mdc-button--unelevated,
  .mdc-button--outlined {
    .mdc-button__icon {
      @include feature-targeting.targets($feat-structure) {
        // Icons inside contained buttons have different styles due to increased button padding
        @include button-base.icon-contained;
      }
    }

    .mdc-button__label + .mdc-button__icon {
      @include feature-targeting.targets($feat-structure) {
        @include button-base.icon-contained-trailing;
      }
    }
  }
}