docbrown/app/assets/stylesheets/admin.scss

@import 'config/import';
@import 'crayons';
@import 'variables';
@import 'scaffolds';

@import 'components/admin/users';
@import 'components/skip-link';

// overriding Bootstrap styles
label {
  margin-bottom: 0 !important;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.hr-no-margins {
  margin-top: 0px;
  margin-bottom: 0px;
  border-top: 1px solid rgba(var(--grey-100), 1);
}

a:hover {
  color: var(--link-branded-color-hover);
  text-decoration: underline var(--link-branded-color-hover) solid 1px;
}

.pagination {
  justify-content: right;

  .page,
  .next,
  .last,
  .first,
  .prev {
    padding: 8px;
  }
}

/****
The admin area's shared <main> has padding of var(--su-2).
In the new member index view we want inner content to be able to take up full screen width.
Since we will want to be able to do the same in later admin area redesigns, we have created a helper class,
which may be more easily removed once we no longer wish admin layouts to have a padded <main> by default. 
****/
.overflow-admin-main-layout-padding {
  margin: calc(-1 * var(--su-2));
}

// New pagination styles as added in Admin Member Index view. As we roll out these styles to other admin views, the above CSS will eventually be removed.
.admin-pagination {
  color: var(--link-color-secondary);

  &--link {
    padding: var(--su-1);
  }

  &--inactive {
    color: var(--base-30);
  }
}

.member-data-heading {
  box-shadow: 0 2px 4px var(--header-shadow);
}

// Member index view search and filter indicators
.indicator-btn {
  .search-indicator {
    display: inline-block;
  }

  &[aria-expanded='true'] {
    .search-indicator {
      display: none;
    }
  }
}

.bg-featured {
  background: #bbffd2;
}

.bg-approved {
  background: #92e8ae;
  border: 12px solid #ff9900;
}

.bg-pinned {
  background: $light-sky-blue;
  border: 12px solid $sky-blue;
}

.bg-highlighted {
  background: #2effa8 !important;
  border: 20px solid black;
}

.border-highlighted {
  border: 20px solid black;
}

.broadcast-wrapper {
  display: flex;
  position: relative;
  z-index: unset;
}

.site-config__required {
  background: #dc3545;
  border-radius: 19px;
  padding: 5px 15px;
  color: white;
  text-align: right;
  margin-left: 10px;
}

.site-config__label {
  display: flex;
  justify-content: space-between;
}

.profile__group-toggle {
  text-decoration: underline;
  cursor: pointer;
  color: grey;
  margin: 1em 0;
  text-align: end;
}

#profileFields {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }

  .card-header__actions {
    display: flex;
    justify-content: space-between;
  }

  .card-header__information {
    display: flex;
    align-items: center;
  }

  .group__description {
    color: $medium-gray;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 16px;
  }

  .card-header__actions > div {
    margin: 0 16px;
    cursor: pointer;
  }
}

.navigation-link-position {
  min-width: 25px;
  text-align: right;
}

.admin-navigation-links {
  width: 240px;
}

.admin-navigation-links .crayons-icon svg {
  width: 24px;
  height: 24px;
}

.config-authentication__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--su-2);
  padding-top: var(--su-3);
  padding-bottom: var(--su-3);

  &--container {
    width: 100%;
  }

  &--row {
    height: 40px;
  }

  &--icon {
    align-items: center;
    color: var(--base-80);
    display: flex;
    height: 40px;
    width: 40px;
  }

  &--label {
    .enabled-indicator {
      display: none;

      &.visible {
        display: flex;
        align-items: center;
      }
    }
  }
}

.config-authentication-form {
  display: grid;
  gap: var(--su-4);
  padding-top: var(--su-6);
  padding-bottom: var(--su-2);
}

.admin-config-checkmark {
  width: var(--su-4);
  height: var(--su-4);
  background-color: var(--accent-success);
  border-radius: 100%;
  color: var(--base-inverted);
}

.mod-actions__data {
  max-width: 300px;
}

.capitalize {
  text-transform: capitalize;
}

.data_update_script__filename {
  max-width: 350px;
}

.data_update_script__status {
  min-width: 120px;
}

.admin__left-sidebar {
  button {
    border: 0;
    width: 100%;

    // In safari the links show up with a grey background
    &:not(.crayons-link--current) {
      background: transparent;
    }
  }

  .crayons-link--current {
    cursor: default;
  }
}

.admin__tabbed-navbar,
.admin__left-sidebar {
  // Navbar links have text-decorations that are being
  // rendered from bootstrap. We want to remove these to be
  // consistent with links in the crayons design system.
  .crayons-link,
  .crayons-tabs__item {
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }

    &:focus {
      outline: 2px auto blue;
    }

    &:focus-visible {
      outline: 2px auto blue;
    }

    &:focus:not(:focus-visible) {
      outline: none;
    }
  }

  ul {
    list-style: none;
    padding: 0;
  }
  // override the Bootstrap collapse animation
  .collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
  }
}

.admin-details {
  border-bottom: 1px solid var(--base-10);

  summary::marker {
    display: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  &[open] .summary-icon {
    transform: rotate(180deg);
  }
}