<commit_before>@import "mixins/mixins";
@import "common/var";

@keyframes el-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin drawer-animation($direction) {

  @keyframes #{$direction}-drawer-in {
    0% {

      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0px);
      }
    }
  }

  @keyframes #{$direction}-drawer-out {
    0% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);;
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }
  }
}

@mixin animation-in($direction) {
  .el-drawer__open &.#{$direction} {
    animation: #{$direction}-drawer-in .3s 1ms;
  }
}

@mixin animation-out($direction) {
  &.#{$direction} {
    animation: #{$direction}-drawer-out .3s;
  }
}

@include drawer-animation(rtl);
@include drawer-animation(ltr);
@include drawer-animation(ttb);
@include drawer-animation(btt);

$directions: rtl, ltr, ttb, btt;

@include b(drawer) {
  position: absolute;
  box-sizing: border-box;
  background-color: $--dialog-background-color;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
  0 16px 24px 2px rgba(0, 0, 0, 0.14),
  0 6px 30px 5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  outline: 0;

  @each $direction in $directions {
    @include animation-out($direction);
    @include animation-in($direction);
  }

  &__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    margin: 0;
  }

  &__header {
    align-items: center;
    color: rgb(114, 118, 123);
    display: flex;
    margin-bottom: 32px;
    padding: $--dialog-padding-primary;
    padding-bottom: 0;
    & > :first-child {
      flex: 1;
    }
  }

  &__title {
    margin: 0;
    flex: 1;
    line-height: inherit;
    font-size: 1rem;
  }

  &__close-btn {
    border: none;
    cursor: pointer;
    font-size: $--font-size-extra-large;
    color: inherit;
    background-color: transparent;
  }

  &__body {
    flex: 1;
    & > * {
      box-sizing: border-box;
    }
  }

  &.ltr, &.rtl {
    height: 100%;
    top: 0;
    bottom: 0;
  }

  &.ttb, &.btt {
    width: 100%;
    left: 0;
    right: 0;
  }

  &.ltr {
    left: 0;
  }

  &.rtl {
    right: 0;
  }<commit_msg>Drawer: add overflow auto (#20948)<commit_after>@import "mixins/mixins";
@import "common/var";

@keyframes el-drawer-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin drawer-animation($direction) {

  @keyframes #{$direction}-drawer-in {
    0% {

      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0px);
      }
    }
  }

  @keyframes #{$direction}-drawer-out {
    0% {
      @if $direction == ltr {
        transform: translate(0px, 0px);
      }

      @if $direction == rtl {
        transform: translate(0px, 0px);;
      }

      @if $direction == ttb {
        transform: translate(0px, 0px);
      }

      @if $direction == btt {
        transform: translate(0px, 0);
      }
    }

    100% {
      @if $direction == ltr {
        transform: translate(-100%, 0px);
      }

      @if $direction == rtl {
        transform: translate(100%, 0px);
      }

      @if $direction == ttb {
        transform: translate(0px, -100%);
      }

      @if $direction == btt {
        transform: translate(0px, 100%);
      }
    }
  }
}

@mixin animation-in($direction) {
  .el-drawer__open &.#{$direction} {
    animation: #{$direction}-drawer-in .3s 1ms;
  }
}

@mixin animation-out($direction) {
  &.#{$direction} {
    animation: #{$direction}-drawer-out .3s;
  }
}

@include drawer-animation(rtl);
@include drawer-animation(ltr);
@include drawer-animation(ttb);
@include drawer-animation(btt);

$directions: rtl, ltr, ttb, btt;

@include b(drawer) {
  position: absolute;
  box-sizing: border-box;
  background-color: $--dialog-background-color;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
  0 16px 24px 2px rgba(0, 0, 0, 0.14),
  0 6px 30px 5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  outline: 0;

  @each $direction in $directions {
    @include animation-out($direction);
    @include animation-in($direction);
  }

  &__wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    margin: 0;
  }

  &__header {
    align-items: center;
    color: rgb(114, 118, 123);
    display: flex;
    margin-bottom: 32px;
    padding: $--dialog-padding-primary;
    padding-bottom: 0;
    & > :first-child {
      flex: 1;
    }
  }

  &__title {
    margin: 0;
    flex: 1;
    line-height: inherit;
    font-size: 1rem;
  }

  &__close-btn {
    border: none;
    cursor: pointer;
    font-size: $--font-size-extra-large;
    color: inherit;
    background-color: transparent;
  }

  &__body {
    flex: 1;
    overflow: auto;
    & > * {
      box-sizing: border-box;
    }
  }

  &.ltr, &.rtl {
    height: 100%;
    top: 0;
    bottom: 0;
  }

  &.ttb, &.btt {
    width: 100%;
    left: 0;
    right: 0;
  }

  &.ltr {
    left: 0;
  }

  &.rtl {
    right: 0;
  }
{'fraction_non_alphanumeric': 0.16134303966721142, 'fraction_numerical': 0.04026147674936859, 'mean_word_length': 2.05583295506128, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2871135', 'n_tokens_mistral': 2732, 'n_tokens_neox': 2447, 'n_words': 554}