@import "../mixins";

/** A React component holding the currently selected repository's changes */
#changes-list {
  ul {
    list-style-type: none;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
  }

  li {
    white-space: nowrap;
  }
}

.changes-panel {
  &-header {
    background: var(--alt-background-color);
    border-bottom: 1px solid var(--box-border-color);
    display: flex;
    padding: var(--spacing-half);
  }

  &-header-input {
    font-weight: var(--font-weight-semibold);
    flex-grow: 0;
  }

  &-header-label {
    font-weight: var(--font-weight-semibold);
    flex-grow: 1;
    text-align: center;
  }

  .list-item {
    padding: var(--spacing-half);
    border-bottom: var(--base-border);
  }
}

.changed-file {
  display: flex;
  flex-grow: 1;

  .status {
    flex-grow: 1;
    text-align: right;

    &-new .octicon {
      fill: var(--color-new);
    }

    &-modified .octicon {
      fill: var(--color-modified);
    }

    &-deleted .octicon {
      fill: var(--color-deleted);
    }
  }

  .octicon {
    vertical-align: text-bottom;
  }
}

@import "../mixins";

/** A React component holding the currently selected repository's changes */
#changes-list {
  ul {
    list-style-type: none;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
  }

  li {
    white-space: nowrap;
  }
}

.changes-panel {
  &-header {
    background: var(--alt-background-color);
    border-bottom: 1px solid var(--box-border-color);
    display: flex;
    padding: var(--spacing-half);
  }

  &-header-input {
    font-weight: var(--font-weight-semibold);
    flex-grow: 0;
  }

  &-header-label {
    font-weight: var(--font-weight-semibold);
    flex-grow: 1;
    text-align: center;
  }

  .list-item {
    padding: var(--spacing-half);
    border-bottom: var(--base-border);
  }
}

.changed-file {
  display: flex;
  flex-grow: 1;

  // See https://css-tricks.com/flexbox-truncated-text/
  min-width: 0;

  input, .status { flex-shrink: 0; }

  .path {
    flex-grow: 1;
    @include ellipsis;
  }

  .status {
    &-new .octicon { fill: var(--color-new); }
    &-modified .octicon { fill: var(--color-modified); }
    &-deleted .octicon { fill: var(--color-deleted); }
  }

  .octicon {
    vertical-align: text-bottom;
  }
}

Truncate filenames and don't shrink icons and input
Truncate filenames and don't shrink icons and input
