sul-dlss/pre-assembly

View on GitHub
app/assets/stylesheets/main.scss

Summary

Maintainability
Test Coverage
 a {
  color: $link-color;
 }

 body {
  --bs-body-font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 .btn {
    --digital-blue: #{$stanford-digital-blue};
  }

  .btn-sul-dlss {
    background-color: var(--digital-blue);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--digital-blue);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-color: #fff;
  }

  .btn-sul-dlss:hover {
    filter: brightness(85%);
  }

  .brand {
    background-color: var(--cardinal-red);
    font-family: serif;
  }

  .navbar-brand {
    font-family: serif;
    color: var(--cardinal-red);
    text-decoration: none;
    font-size: 2rem;
    padding-left: 20px;
    a {
      color: var(--cardinal-red);
      text-decoration: none;
    }
  }

  /* Removes underline in the asterisk which marks a required field */
  abbr[title],
  abbr[data-original-title] {
    text-decoration: none;
  }

  .form-group {
    margin-bottom: 1rem;
    label {
      margin-bottom: .4rem;
    }
  }

  [title="required"] {
    color: $stanford-digital-red;
  }

  .form-check-input[type="radio"] {
    border-radius: 50%;
    --bs-border-color: #979694;
  }

  .form-check-input:checked {
    background-color: $stanford-digital-blue;
    border-color: $stanford-digital-blue;
  }

  .btn-outline {
    color: var(--cardinal-red);
    background-color: var(--bs-btn-bg);
    border-color: var(--cardinal-red);
  }
  /*
  From https://github.com/heartcombo/simple_form-bootstrap/blob/main/app/assets/stylesheets/simple_form-bootstrap/_form_legend_clear.scss
  In bootstrap 5 legend floats left and requires the following element
  to be cleared. In a radio button or checkbox group the element after
  the legend will be the automatically generated hidden input; the fix
  in https://github.com/twbs/bootstrap/pull/30345 applies to the hidden
  input and has no visual effect. Here we try to fix matters by
  applying the clear to the div wrapping the first following radio button
  or checkbox.
  */

  .simple_form {
    background-color: $stanford-fog-light;
    border-radius: 0.25rem;
  }

  legend~div.form-check:first-of-type {
    clear: left;
  }

  #discovery-report-links {
    max-width: 275px;
    width: 30%;
  }

  #summary-link {
    float: right;
  }

  .structural-changes {
    margin: 20px 0 20px 0;
    padding: 20px 0 20px 0;
  }

  caption {
    caption-side: top;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    margin-top: 0;
  }

  .copy-button {
    margin: 0 10px 0 5px;
  }

  .copy-nowrap {
    white-space: nowrap;
  }

  .staging-location {
    white-space: normal;
  }

  .language-pill {
    gap: 0.35rem;
    display: inline-flex;
    align-items: center;
    padding-left: 0.55rem;
    padding-right: 0.45rem;
  
    .language-label {
      border-inline-end: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
      font-size: 0.875em;
      line-height: 1.45em;
      padding-block: 0.1rem;
      padding-inline-end: 0.45rem;
      text-wrap: nowrap;
    }

    .pill-close {
      font-size: .6rem;
    }
  }

.dropdown-content {
  background-color: #f1f1f1;
  overflow-y: auto;
  max-height: 180px;
  label {
    padding: 5px 10px;
    cursor: pointer;
  }

  label:hover {
    background-color: #ddd;
  }
}

.text-cardinal {
  color: $stanford-cardinal;
}

.ocr-search-bar {
  input, input:focus {
    border: none;
    outline: none;
  }

  button {
    flex: 0 0 auto;
  }

  input {
    flex: 1;
  }
}

.break-all {
  word-break: break-all;
}