RiffMaster_WPFaT2023_Project/Frontend/RiffMasterFront/node_modules/@material/drawer/_mixins.scss

//
// Copyright 2017 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 'sass:math';
@use 'sass:list';
@use 'sass:meta';
@use '@material/feature-targeting/feature-targeting';
@use '@material/animation/functions' as functions2;
@use '@material/animation/variables' as animation-variables;
@use '@material/rtl/rtl';
@use '@material/typography/typography';
@use '@material/theme/theme';
@use '@material/theme/theme-color';
@use '@material/list/mixins' as list-mixins;
@use '@material/ripple/ripple-theme';
@use '@material/shape/mixins' as shape-mixins;
@use '@material/elevation/mixins' as elevation-mixins;
@use './variables';

//
// Public
//

@mixin core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);
  $feat-animation: feature-targeting.create-target($query, animation);

  // postcss-bem-linter: define drawer
  .mdc-drawer {
    @include title-ink-color(variables.$title-ink-color, $query: $query);
    @include subtitle-ink-color(variables.$subtitle-ink-color, $query: $query);
    @include border-color(variables.$divider-color, $query: $query);
    @include surface-fill-color(variables.$surface-fill-color, $query: $query);
    @include item-icon-ink-color(
      variables.$item-inactive-ink-color,
      $query: $query
    );
    @include item-text-ink-color(
      variables.$item-inactive-ink-color,
      $query: $query
    );
    @include item-activated-icon-ink-color(
      variables.$item-activated-ink-color,
      $query: $query
    );
    @include item-activated-text-ink-color(
      variables.$item-activated-ink-color,
      $query: $query
    );
    @include shape-radius(variables.$shape-radius, $query: $query);
    @include item-shape-radius(variables.$item-shape-radius, $query: $query);
    @include z-index(variables.$z-index, $query: $query);
    @include width(variables.$width, $query: $query);

    @include feature-targeting.targets($feat-structure) {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      box-sizing: border-box;
      height: 100%;
      @include rtl.ignore-next-line();
      border-right-width: 1px;
      @include rtl.ignore-next-line();
      border-right-style: solid;
      overflow: hidden;

      @include rtl.rtl {
        @include rtl.ignore-next-line();
        border-right-width: 0;
        @include rtl.ignore-next-line();
        border-left-width: 1px;
        @include rtl.ignore-next-line();
        border-right-style: none;
        @include rtl.ignore-next-line();
        border-left-style: solid;
      }
    }

    @include feature-targeting.targets($feat-animation) {
      transition-property: transform;
      transition-timing-function: animation-variables.$standard-curve-timing-function;
    }

    @include list-item_($query);
  }

  .mdc-drawer--animate {
    @include feature-targeting.targets($feat-structure) {
      transform: translateX(-100%);

      @include rtl.rtl {
        transform: translateX(100%);
      }
    }
  }

  .mdc-drawer--opening {
    @include feature-targeting.targets($feat-structure) {
      transform: translateX(0);

      // Required to level the specificity with animate class.
      @include rtl.rtl {
        transform: translateX(0);
      }
    }

    @include feature-targeting.targets($feat-animation) {
      transition-duration: variables.$animation-enter;
    }
  }

  .mdc-drawer--closing {
    @include feature-targeting.targets($feat-structure) {
      transform: translateX(-100%);

      @include rtl.rtl {
        transform: translateX(100%);
      }
    }

    @include feature-targeting.targets($feat-animation) {
      transition-duration: variables.$animation-exit;
    }
  }

  .mdc-drawer__header {
    @include feature-targeting.targets($feat-structure) {
      flex-shrink: 0;
      box-sizing: border-box;
      min-height: 64px; // same as $mdc-top-app-bar-row-height
      padding: 0 variables.$surface-padding 4px;
    }
  }

  .mdc-drawer__title {
    @include typography.typography(headline6, $query: $query);
    @include typography.text-baseline(
      $top: 36px,
      $bottom: 20px,
      $query: $query
    );
  }

  .mdc-drawer__subtitle {
    @include typography.typography(body2, $query: $query);
    @include typography.text-baseline($top: 20px, $query: $query);

    @include feature-targeting.targets($feat-structure) {
      margin-bottom: 0;
    }
  }

  .mdc-drawer__content {
    @include feature-targeting.targets($feat-structure) {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  // postcss-bem-linter: end
}

@mixin dismissible-core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-drawer--dismissible {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-position(left, 0);

      display: none;
      position: absolute;

      &.mdc-drawer--open {
        display: flex;
      }
    }
  }

  .mdc-drawer-app-content {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-box(margin, left, 0);

      position: relative;
    }
  }
}

@mixin modal-core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);
  $feat-animation: feature-targeting.create-target($query, animation);

  .mdc-drawer--modal {
    @include scrim-fill-color(variables.$modal-scrim-color, $query: $query);
    @include elevation-mixins.elevation(
      variables.$modal-elevation,
      $query: $query
    );

    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-position(left, 0);

      display: none;
      position: fixed;
    }

    &.mdc-drawer--open {
      @include feature-targeting.targets($feat-structure) {
        display: flex;
      }
    }
  }

  .mdc-drawer-scrim {
    @include feature-targeting.targets($feat-structure) {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: variables.$z-index - 1;
    }

    @include feature-targeting.targets($feat-animation) {
      transition-property: opacity;
      transition-timing-function: animation-variables.$standard-curve-timing-function;
    }

    .mdc-drawer--open + & {
      @include feature-targeting.targets($feat-structure) {
        display: block;
      }
    }

    .mdc-drawer--animate + & {
      @include feature-targeting.targets($feat-structure) {
        opacity: 0;
      }
    }

    .mdc-drawer--opening + & {
      @include feature-targeting.targets($feat-animation) {
        transition-duration: variables.$animation-enter;
      }

      @include feature-targeting.targets($feat-structure) {
        opacity: 1;
      }
    }

    .mdc-drawer--closing + & {
      @include feature-targeting.targets($feat-animation) {
        transition-duration: variables.$animation-exit;
      }

      @include feature-targeting.targets($feat-structure) {
        opacity: 0;
      }
    }
  }
}

@mixin activated-overlay-color($color, $query: feature-targeting.all()) {
  :not(.mdc-deprecated-list--non-interactive) > .mdc-deprecated-list-item {
    @include ripple-theme.states-activated($color, $query: $query);
  }
}

@mixin border-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);
  $value: rgba(theme-color.prop-value($color), variables.$divider-opacity);

  @include feature-targeting.targets($feat-color) {
    @include theme.property(border-color, $value);
  }
}

@mixin item-shape-radius(
  $radius,
  $rtl-reflexive: true,
  $query: feature-targeting.all()
) {
  @include list-mixins.deprecated-single-line-shape-radius(
    $radius,
    $rtl-reflexive,
    $query: $query
  );
}

@mixin shape-radius($radius, $query: feature-targeting.all()) {
  // Check type since $radius may be a custom property Map
  $is-list: meta.type-of($radius) == 'list';
  @if $is-list and list.length($radius) > 2 {
    @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
  } @else if $is-list and list.length($radius) == 2 {
    $radius: 0 list.nth($radius, 1) list.nth($radius, 2) 0;
  } @else {
    $radius: 0 $radius $radius 0;
  }

  @include shape-mixins.radius($radius, $rtl-reflexive: true, $query: $query);
}

@mixin divider-color($color, $query: feature-targeting.all()) {
  $value: rgba(theme-color.prop-value($color), variables.$divider-opacity);

  @include list-mixins.deprecated-divider-color($value, $query: $query);
}

@mixin title-ink-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);
  $value: rgba(theme-color.prop-value($color), variables.$title-ink-opacity);

  .mdc-drawer__title {
    @include feature-targeting.targets($feat-color) {
      @include theme.property(color, $value);
    }
  }
}

@mixin subtitle-ink-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);
  $value: rgba(theme-color.prop-value($color), variables.$subtitle-ink-opacity);

  @include list-mixins.deprecated-group-subheader-ink-color(
    $value,
    $query: $query
  );

  .mdc-drawer__subtitle {
    @include feature-targeting.targets($feat-color) {
      @include theme.property(color, $value);
    }
  }
}

@mixin fill-color-accessible($color, $query: feature-targeting.all()) {
  $accessibleColor: theme-color.accessible-ink-color($color);

  @include title-ink-color($accessibleColor, $query: $query);
  @include subtitle-ink-color($accessibleColor, $query: $query);
  @include item-text-ink-color($accessibleColor, $query: $query);
  @include item-icon-ink-color($accessibleColor, $query: $query);
  @include surface-fill-color($color, $query: $query);
}

@mixin item-icon-ink-color($color, $query: feature-targeting.all()) {
  $value: rgba(
    theme-color.prop-value($color),
    variables.$item-inactive-icon-ink-opacity
  );

  @include list-mixins.deprecated-item-graphic-ink-color(
    $value,
    $query: $query
  );
}

@mixin item-activated-icon-ink-color($color, $query: feature-targeting.all()) {
  $value: rgba(
    theme-color.prop-value($color),
    variables.$item-active-icon-ink-opacity
  );

  .mdc-deprecated-list-item--activated {
    @include list-mixins.deprecated-item-graphic-ink-color(
      $value,
      $query: $query
    );
  }
}

@mixin item-activated-text-ink-color($color, $query: feature-targeting.all()) {
  $value: rgba(
    theme-color.prop-value($color),
    variables.$item-active-text-ink-opacity
  );

  .mdc-deprecated-list-item--activated {
    @include list-mixins.deprecated-item-primary-text-ink-color(
      $value,
      $query: $query
    );
  }
}

@mixin item-text-ink-color($color, $query: feature-targeting.all()) {
  $value: rgba(
    theme-color.prop-value($color),
    variables.$item-inactive-text-ink-opacity
  );

  .mdc-deprecated-list-item {
    @include list-mixins.deprecated-item-primary-text-ink-color(
      $value,
      $query: $query
    );
  }
}

@mixin surface-fill-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  @include feature-targeting.targets($feat-color) {
    @include theme.property(background-color, $color);
  }
}

@mixin scrim-fill-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);
  $value: rgba(theme-color.prop-value($color), variables.$modal-scrim-opacity);

  + .mdc-drawer-scrim {
    @include feature-targeting.targets($feat-color) {
      @include theme.property(background-color, $value);
    }
  }
}

@mixin z-index($value, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    z-index: $value;
  }
}

@mixin width($width, $query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    @include theme.property(width, $width);
  }

  &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
    @include feature-targeting.targets($feat-structure) {
      @include rtl.reflexive-box(margin, left, $width);
    }
  }
}

//
// Private
//
@mixin list-item_($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  // postcss-bem-linter: ignore
  .mdc-deprecated-list-item {
    @include typography.typography(subtitle2, $query: $query);

    @include feature-targeting.targets($feat-structure) {
      height: calc(48px - 2 * #{variables.$list-item-spacing});
      // To accomodate margin conflict.
      margin: (variables.$list-item-spacing * 2) 8px;
      padding: 0 math.div(variables.$surface-padding, 2);
    }
  }

  // postcss-bem-linter: ignore
  .mdc-deprecated-list-item:nth-child(1) {
    @include feature-targeting.targets($feat-structure) {
      margin-top: 2px;
    }
  }

  // postcss-bem-linter: ignore
  .mdc-deprecated-list-item:nth-last-child(1) {
    @include feature-targeting.targets($feat-structure) {
      margin-bottom: 0;
    }
  }

  // postcss-bem-linter: ignore
  .mdc-deprecated-list-group__subheader {
    @include typography.typography(body2, $query: $query);
    @include typography.text-baseline($top: 24px, $query: $query);

    @include feature-targeting.targets($feat-structure) {
      margin: 0;
      padding: 0 variables.$surface-padding;
    }
  }

  // postcss-bem-linter: ignore
  .mdc-deprecated-list-divider {
    @include feature-targeting.targets($feat-structure) {
      margin: 3px 0 4px;
    }
  }

  // Prevents list item children from being included in the click target.
  // postcss-bem-linter: ignore
  .mdc-deprecated-list-item__text,
  .mdc-deprecated-list-item__graphic {
    @include feature-targeting.targets($feat-structure) {
      pointer-events: none;
    }
  }
}