blocks.scss

// CSS rules used for the standard Agama section (core/Section.jsx)
// In the future we might add different section layouts by using data-variant attribute
// or similar strategy
[data-type="agama/section"] {
  display: grid;
  grid-template-rows:
    [header] auto
    [content] auto
  ;
  grid-template-columns: [bleed] var(--section-icon-size) [content] 1fr;
  gap: var(--spacer-small);
  margin-inline-start: calc(
    var(--header-icon-size) - var(--section-icon-size)
  );
  margin-inline-end: var(--section-icon-size);

  &:not(:last-child) {
    margin-block-end: var(--spacer-medium);
  }

  > header {
    display: grid;
    grid-area: header;
    grid-template-columns: subgrid;
    grid-column: bleed / content-end;

    h2 {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: bleed / content-end;

      svg {
        block-size: var(--section-icon-size);
        inline-size: var(--section-icon-size);
        grid-column: bleed / content;
      }

      :not(svg) {
        grid-column: content
      }
    }

    p {
      grid-column: content;
      color: var(--color-gray-dimmest);
      margin-block-end: var(--spacer-smaller);
    }
  }

  > :not(header) {
    grid-area: content;
    grid-column: content;
  }
}

// Custom selection list
.selection-list > * {
  border: 1px solid #eee;
  transition:
    font-size 0.15s ease-in-out,
    font-weight 0.25s ease-in-out,
    margin-block 0.15s ease-in-out,
    box-shadow 0.35s ease-in-out;

  margin-block-start: -2px;
}

.selection-list .header {
  border-block-end: 1px solid #eee;
  padding: var(--spacer-normal);
}

.selection-list .content {
  padding: var(--spacer-normal);
}

.selection-list [data-state="focused"] {
  margin-block: 20px;
  box-shadow: 0 0 6px rgb(0 0 0 / 16%), 0 6px 12px rgb(0 0 0 / 32%);
}

.selection-list [data-state="unstyled"] {
  border: 0;
}

[data-type="agama/sidebar"] {
  /** Override the header background, see styles/layout.scss */
  --agama-header-bg: var(--color-primary-lighter);

  position: absolute;
  padding: 0;
  right: 0;
  z-index: 1000;
  inline-size: 70%;
  min-inline-size: min-content;
  box-shadow: -10px 10px 20px 0 var(--color-primary);

  header {
    --focus-color: var(--color-primary-darkest);
  }

  footer {
    border-top: 1px solid var(--color-gray);
  }

  a, button {
    font-size: 16px;
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-block: 0;

    &:hover {
      color: var(--color-link-hover);
      text-decoration: underline;

      svg {
        color: var(--color-link);
      }
    }

    svg {
      color: var(--color-link);
      vertical-align: text-bottom;
      margin-block-end: -2px;
    }
  }

  a {
    margin-inline-start: var(--pf-v5-global--spacer--md);

    // Keep links and buttons labels aligned by adding the same margin than
    // .pf-v5-c-button__icon.pf-m-start
    svg {
      margin-inline-end: var(--pf-v5-global--spacer--xs);
    }
  }

  // Remove not wanted PatternFly padding left on a loading link
  button.pf-m-progress {
    --pf-v5-c-button--m-progress--PaddingLeft: var(--pf-v5-global--spacer--md);
  }

  button.pf-m-progress + div {
    padding-inline-start: calc(var(--pf-v5-global--spacer--md));
  }

  &[data-state="hidden"] {
    transition: all 0.04s ease-in-out;
    inline-size: 0;
    min-inline-size: 0;
    box-shadow: none;
  }

  &[data-state="visible"] {
    transition: all 0.2s ease-in-out;
  }
}


.disclosure > button {
  margin-inline-start: var(--pf-v5-global--spacer--md);
  display: inline-flex;
  align-items: center;
  // Keep links and buttons labels aligned by adding the same margin than
  // .pf-v5-c-button__icon.pf-m-start
  svg {
    margin-inline-end: var(--pf-v5-global--spacer--xs);
    transition: transform 0.2s ease-in-out;
  }

  &[aria-expanded="true"] {
    svg {
      transform: rotate(90deg);
    }
  }

  &[aria-expanded="false"] + div {
    display: none;
    visibility: hidden;
  }
}

.disclosure > div {
  margin-inline-start: calc(
    var(--pf-v5-global--spacer--md) + 12px // half of the icon size;
  );
  border-inline-start: 1px solid var(--color-primary-lighter);
  padding-block: var(--spacer-small);
}

// raw file content with formatting similar to <pre>
.filecontent {
  font-family: var(--ff-code);
  font-size: 90%;
  word-break: break-all;
  white-space: pre-wrap;
}

// Make progress more compact
.dasd-format-progress {
  .pf-v5-c-progress {
    --pf-v5-c-progress--GridGap: var(--spacer-small);
  }
}

[data-type="agama/page-menu"] {
  > button {
    --pf-v5-c-button--PaddingRight: 0
  }

  a {
    font-weight: var(--fw-bold);
    text-decoration: none;

    svg {
      color: inherit;
    }

    &:hover {
      color: var(--color-link-hover);

      svg {
        color: var(--color-link);
      }
    }
  }
}

.issue {
  --icon-size: 1rem;

  div:first-child {
    svg {
      width: var(--icon-size);
      height: var(--icon-size);
    }
  }

  div:nth-child(2) {
    padding-left: calc(var(--icon-size) + var(--pf-v5-c-helper-text__item-icon--MarginRight));
  }
}

ul[data-type="agama/list"] {
  list-style: none;
  margin-inline: 0;

  li {
    border: 2px solid var(--color-gray-dark);
    padding: var(--spacer-normal);
    text-align: start;
    background: var(--color-gray-light);
    margin-block-end: 0;

    &:nth-child(n+2) {
      border-top: 0;
    }

    &:not(:last-child) {
      border-bottom-width: 1px;
    }

    > div {
      margin-block-end: var(--spacer-smaller);
    }

    // Done in two rules instead of div:not(:last-child) to avoid specificity
    // problems later; see the storage-devices selector
    > div:last-child {
      margin-block-end: 0;
    }
  }

  // FIXME: see if it's semantically correct to mark an li as aria-selected when
  // not belongs to a listbox or grid list ul.
  li[aria-selected] {
    background: var(--color-gray-dark);
    font-weight: 700;

    &:not(:last-child) {
      border-bottom-color: white;
    }
  }
}

// These attributes together means that UI is rendering a selector
ul[data-type="agama/list"][role="grid"] {
  li[role="row"] {
    cursor: pointer;

    &:first-child {
      border-radius: 5px 5px 0 0;
    }

    &:last-child {
      border-radius: 0 0 5px 5px;
    }

    &:only-child {
      border-radius: 5px;
    }

    &:hover {
      &:not([aria-selected]) {
        background: var(--color-gray-dark);
      }

      &:not(:last-child) {
        border-bottom-color: white;
      }
    }

    div[role="gridcell"] {
      display: flex;
      align-items: center;
      gap: var(--spacer-normal);

      & > input {
        --size: var(--fs-h2);
        block-size: var(--size);
        inline-size: var(--size);
      }

      & > div {
        flex: 1;
      }
    }
  }
}

// Each kind of list/selector has its way of laying out their items
[data-items-type="agama/storage-devices"] {
  display: grid;
  gap: var(--spacer-smaller);
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-areas: "type-and-size drive-info drive-content";

  svg {
    vertical-align: inherit;
  }

  > div {
    margin-block-end: 0;
  }

  > :first-child {
    align-self: center;
    text-align: center;
    justify-self: start;
  }
}

[data-items-type="agama/space-policies"] {
  // It works with the default styling
}

[data-items-type="agama/locales"] {
  display: grid;
  grid-template-columns: 1fr 2fr;

  > :last-child {
    grid-column: 1 / -1;
    font-size: var(--fs-small);
  }
}

[data-items-type="agama/keymaps"] {
  > :last-child {
    font-size: var(--fs-small);
  }
}

[data-items-type="agama/timezones"] {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;

  > :last-child {
    grid-column: 1 / -1;
    font-size: 80%;
  }

  > :nth-child(3) {
    color: var(--color-gray-dimmed);
    text-align: end;
  }
}

[role="dialog"] {
  .sticky-top-0 {
    position: sticky;
    top: calc(-1 * var(--pf-v5-c-modal-box__body--PaddingTop));
    margin-block-start: calc(-1 * var(--pf-v5-c-modal-box__body--PaddingTop));
    padding-block-start: var(--pf-v5-c-modal-box__body--PaddingTop);
    background-color: var(--pf-v5-c-modal-box--BackgroundColor);

    [role="search"] {
      width: 100%;
      padding: var(--spacer-small);
      border: 1px solid var(--color-primary);
      border-radius: 5px;
    }
  }
}

// compact lists in popover
.pf-v5-c-popover li + li {
  margin: 0;
}

.radio-group {
  .pf-v5-c-radio {
    position: relative;
    padding-block-end: var(--spacer-small);
    padding-inline-end: var(--spacer-small);

    &.selected::after {
      --arrow-size: var(--spacer-small, 10px);

      content:'';
      position: absolute;
      bottom: -1px;
      left: 50%;
      width: 0;
      height: 0;
      border-bottom: solid var(--arrow-size) var(--color-gray);
      border-left: solid var(--arrow-size) transparent;
      border-right: solid var(--arrow-size) transparent;
    }
  }
}

.highlighted-live-region {
  padding: 10px;
  background: var(--color-gray);
}

.size-input-group {
  max-inline-size: 20ch;

  input {
    text-align: end;
  }
}

[data-type="agama/options-picker"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacer-smaller);

  [role="option"] {
    cursor: pointer;
    border: 1px solid var(--color-gray);
    padding: var(--spacer-small);
    border-block-end-width: 4px;

    &[aria-selected="true"] {
      background: var(--color-gray-light);
      border-color: var(--color-primary);
    }

    >:first-child {
      margin-block-end: var(--spacer-small);
    }

    >:last-child {
      font-size: var(--fs-small);
    }
  }
}

[role="dialog"] {
  section:not([class^="pf-c"]) {
    > svg:first-child {
    block-size: 24px;
    inline-size: 24px;
    }

    h2 {
      font-size: var(--fs-h3);
    }
  }
}

.tpm-hint {
  container-type: inline-size;
  container-name: tpm-info;
  text-align: start;

  .pf-v5-c-alert__title {
    margin-block-end: var(--spacer-small);
  }

  .pf-v5-c-alert__description {
    max-inline-size: 100%;
  }
}