<commit_before>// The styles herein attempt to follow a flow where margins are only applied
// to the bottom of elements (with the exception of the last child). This to
// allow easy layout using generalized components and elements such as <Row>
// and <p>.
dialog {
  border: var(--base-border);
  box-shadow: var(--base-box-shadow);
  padding: 0;
  border-radius: var(--border-radius);

  color: var(--text-color);
  background: var(--background-color);

  // This resets the properties we animate in the transition group
  // such that if there's ever a race condition between the JS timing
  // and the CSS transition we'll always revert back to a known good
  // state.
  transform: scale(1);
  opacity: 1;

  min-width: 400px;
  max-width: 800px;

  // The modal class here is the transition name for the react css transition
  // group which allows us to apply an animation when the popup appears.
  &.modal {
    
    &-enter {
      opacity: 1;
      transform: scale(0.75);
    }

    &-enter-active {
      opacity: 1;
      transform: scale(1);
      transition: transform 250ms var(--easing-ease-out-back);
    }

    &-leave {
      opacity: 1;
      transform: scale(1);

      &::backdrop {
        opacity: 0.4;
      }
    }

    &-leave-active {
      opacity: 0.01;
      transform: scale(0.25);
      transition: opacity 100ms ease-in,
                  transform 100ms var(--easing-ease-in-back);

      &::backdrop {
        opacity: 0.01;
        transition: opacity 100ms ease-in;
      }
    }
  }

  &::backdrop {
    background: black;
    opacity: 0.4;
  }

  // The dialog embeds a fieldset as the first child of the form element
  // in order to be able to disable all form elements and buttons in one
  // swoop. This resets all styles for that fieldset.
  & > form > fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .dialog-header {
    height: 53px;
    border-bottom: var(--base-border);
    position: relative;

    // There's at most three elements in the header,
    //   1. The icon (optional, only for errors, warnings, etc)
    //   2. The title, a h1 element which is always present if the
    //      header element is visible
    //   3. The close button (optional, hidden when dialog isn't dismissable).
    //
    // In order to correctly center the title in all scenarios we lay out the
    // children in a flexbox but we position the icon and close button
    // absolutely to the left and right side leaving the h1 all available
    // width. We then add a 40px margin on each side of the h1 ensuring that
    // even in the scenario where only one of the two optional elements is
    // visible the h1 stays centered horizontally.
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    svg.icon {
      position: absolute;
      left: var(--spacing);
    }

    h1 {
      font-weight: var(--font-weight-light);
      font-size: var(--font-size-md);

      // See comment above. 40px is enough space to clear both the icon
      // and the close button with their respective margins.
      margin: 0 40px;
      text-align: center;
      padding: 0;
      flex-grow: 1;
    }

    button.close {
      position: absolute;
      right: var(--spacing);
      top: var(--spacing);

      border: 0;<commit_msg>Ensure dialog title truncates if too long<commit_after>@import "../mixins";

// The styles herein attempt to follow a flow where margins are only applied
// to the bottom of elements (with the exception of the last child). This to
// allow easy layout using generalized components and elements such as <Row>
// and <p>.
dialog {
  border: var(--base-border);
  box-shadow: var(--base-box-shadow);
  padding: 0;
  border-radius: var(--border-radius);

  color: var(--text-color);
  background: var(--background-color);

  // This resets the properties we animate in the transition group
  // such that if there's ever a race condition between the JS timing
  // and the CSS transition we'll always revert back to a known good
  // state.
  transform: scale(1);
  opacity: 1;

  min-width: 400px;
  max-width: 800px;

  // The modal class here is the transition name for the react css transition
  // group which allows us to apply an animation when the popup appears.
  &.modal {
    
    &-enter {
      opacity: 1;
      transform: scale(0.75);
    }

    &-enter-active {
      opacity: 1;
      transform: scale(1);
      transition: transform 250ms var(--easing-ease-out-back);
    }

    &-leave {
      opacity: 1;
      transform: scale(1);

      &::backdrop {
        opacity: 0.4;
      }
    }

    &-leave-active {
      opacity: 0.01;
      transform: scale(0.25);
      transition: opacity 100ms ease-in,
                  transform 100ms var(--easing-ease-in-back);

      &::backdrop {
        opacity: 0.01;
        transition: opacity 100ms ease-in;
      }
    }
  }

  &::backdrop {
    background: black;
    opacity: 0.4;
  }

  // The dialog embeds a fieldset as the first child of the form element
  // in order to be able to disable all form elements and buttons in one
  // swoop. This resets all styles for that fieldset.
  & > form > fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .dialog-header {
    height: 53px;
    border-bottom: var(--base-border);
    position: relative;

    // There's at most three elements in the header,
    //   1. The icon (optional, only for errors, warnings, etc)
    //   2. The title, a h1 element which is always present if the
    //      header element is visible
    //   3. The close button (optional, hidden when dialog isn't dismissable).
    //
    // In order to correctly center the title in all scenarios we lay out the
    // children in a flexbox but we position the icon and close button
    // absolutely to the left and right side leaving the h1 all available
    // width. We then add a 40px margin on each side of the h1 ensuring that
    // even in the scenario where only one of the two optional elements is
    // visible the h1 stays centered horizontally.
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    svg.icon {
      position: absolute;
      left: var(--spacing);
    }

    h1 {
      font-weight: var(--font-weight-light);
      font-size: var(--font-size-md);

      // See comment above. 40px is enough space to clear both the icon
      // and the close button with their respective margins.
      margin: 0 40px;
      text-align: center;
      padding: 0;
      flex-grow: 1;

      @include ellipsis;
    }

    button.close {
      position: absolute;
      right: var(--spacing);
      top: var(--spacing);

      border: 0;
{'fraction_non_alphanumeric': 0.10230974237488895, 'fraction_numerical': 0.019543973941368076, 'mean_word_length': 2.225883476599809, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, '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': '892586', 'n_tokens_mistral': 2125, 'n_tokens_neox': 1952, 'n_words': 792}