<commit_before>@import './theme/default';
@import './theme/font';

$z-index: 1050;

$vertical-padding: 56px * 2;
$horizontal-padding: 28px * 2;

$min-height: 190px;
$min-width: 560px;

// all includes padding to dialog body
$header-height: 72px;
$footer-height: 72px;

/*
  WARNING: Do NOT use transform: translate(-50%, -50%) to center dialog,
  it makes content blurry.

  With GPU rendering elements we are translating, their sizes must be
  even numbers.

  The bad news is that we cannot control the size of dialogs.

  http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

  Here we're using inline-blocks to center the dialog.

  https://css-tricks.com/centering-in-the-unknown/
*/
.zent-dialog-r-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index;
  outline: 0;
  text-align: center;
  font-size: 0;
  white-space: nowrap;

  &::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle; // required
  }
}

.zent-dialog-r {
  @include theme-color(background-color, stroke, 9);
  position: relative;
  display: inline-block;
  vertical-align: middle; // required
  text-align: initial;
  border-radius: 4px;
  padding: 16px 0;
  box-sizing: border-box;
  white-space: normal;
  min-width: $min-width;
  max-width: calc(100vw - #{$horizontal-padding});
  min-height: $min-height;
  max-height: calc(100vh - #{$vertical-padding});
}

.zent-dialog-r-title {
  @include font-large;
  @include theme-color(border-bottom-color, stroke, 5);
  @include theme-color(color, stroke, 1);
  padding: 0 16px 15px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin: 0;
  box-sizing: border-box;
  font-weight: $font-weight-medium;
}

.zent-dialog-r-close {
  @include theme-color(color, stroke, 2);
  @include theme-color(background-color, stroke, 9);
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 10px;
  font-size: 18px;
  line-height: 18px;
  text-align: right;
  vertical-align: middle;
  cursor: pointer;
  border: 0;
  outline: none;
  user-select: none;
  padding: 0 0 0 6px;
  margin: 0;

  &:link,
  &:active,
  &:focus {
    @include theme-color(color, stroke, 2);
  }

  &.zent-dialog-r-has-title {
    top: 16px;
    right: 12px;
  }
}

.zent-dialog-r-body {
  @include font-normal;
  @include theme-color(color, stroke, 1);

  padding-top: 16px;

  &.with-success-icon,
  &.with-warning-icon {
    padding-left: 30px;
  }

  &:last-child {
    padding-bottom: 0;
  }

  &-content {
    padding: 0 16px;
    overflow-y: scroll;
  }
}

/*
We need to consider only two cases if header is present, close button has no impact on style
Header  CloseButton  Footer
O       O            O<commit_msg>fix: 修改dialog overflow css问题 (#1611)<commit_after>@import './theme/default';
@import './theme/font';

$z-index: 1050;

$vertical-padding: 56px * 2;
$horizontal-padding: 28px * 2;

$min-height: 190px;
$min-width: 560px;

// all includes padding to dialog body
$header-height: 72px;
$footer-height: 72px;

/*
  WARNING: Do NOT use transform: translate(-50%, -50%) to center dialog,
  it makes content blurry.

  With GPU rendering elements we are translating, their sizes must be
  even numbers.

  The bad news is that we cannot control the size of dialogs.

  http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

  Here we're using inline-blocks to center the dialog.

  https://css-tricks.com/centering-in-the-unknown/
*/
.zent-dialog-r-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index;
  outline: 0;
  text-align: center;
  font-size: 0;
  white-space: nowrap;

  &::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle; // required
  }
}

.zent-dialog-r {
  @include theme-color(background-color, stroke, 9);
  position: relative;
  display: inline-block;
  vertical-align: middle; // required
  text-align: initial;
  border-radius: 4px;
  padding: 16px 0;
  box-sizing: border-box;
  white-space: normal;
  min-width: $min-width;
  max-width: calc(100vw - #{$horizontal-padding});
  min-height: $min-height;
  max-height: calc(100vh - #{$vertical-padding});
}

.zent-dialog-r-title {
  @include font-large;
  @include theme-color(border-bottom-color, stroke, 5);
  @include theme-color(color, stroke, 1);
  padding: 0 16px 15px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin: 0;
  box-sizing: border-box;
  font-weight: $font-weight-medium;
}

.zent-dialog-r-close {
  @include theme-color(color, stroke, 2);
  @include theme-color(background-color, stroke, 9);
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 10px;
  font-size: 18px;
  line-height: 18px;
  text-align: right;
  vertical-align: middle;
  cursor: pointer;
  border: 0;
  outline: none;
  user-select: none;
  padding: 0 0 0 6px;
  margin: 0;

  &:link,
  &:active,
  &:focus {
    @include theme-color(color, stroke, 2);
  }

  &.zent-dialog-r-has-title {
    top: 16px;
    right: 12px;
  }
}

.zent-dialog-r-body {
  @include font-normal;
  @include theme-color(color, stroke, 1);

  padding-top: 16px;

  &.with-success-icon,
  &.with-warning-icon {
    padding-left: 30px;
  }

  &:last-child {
    padding-bottom: 0;
  }

  &-content {
    padding: 0 16px;
    overflow-y: auto;
  }
}

/*
We need to consider only two cases if header is present, close button has no impact on style
Header  CloseButton  Footer
O       O            O
{'fraction_non_alphanumeric': 0.1445654113867571, 'fraction_numerical': 0.03283955024094235, 'mean_word_length': 3.166542750929368, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, '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': '2625322', 'n_tokens_mistral': 2221, 'n_tokens_neox': 2024, 'n_words': 531}