emory-libraries/dlp-selfdeposit

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

Summary

Maintainability
Test Coverage
@import "colors.scss";

/**** Phone/Tablet Screen ****/
@media (max-width: 767px) {
  /**** Header ****/
  header {
    nav {
      /**** top nav ****/
      &.navbar-collapse {
        .oe2-controls {
          width: 100%;

          #language-dropdown-menu {
            flex-basis: 100%;
            border: none;
          }

          .dropdown-menu.dropdown-menu-right.show {
            display: flex;
            flex-wrap: wrap;
            flex-basis: 100%;
            border: none;
          }

          .dropdown-item {
            border-bottom: 1px solid $bootstrap-slate;
          }
        }
      } /**** END top nav ****/

      /**** masthead nav ****/
      &#masthead {
      } /**** END masthead nav ****/

      /*** general styling ****/
      .nav-item {
        .nav-link {
          border-bottom: 1px solid $light-slate;

          &::after {
            position: absolute;
          }
        }
      }
    }
  }
  header {
    .navbar .nav-item {
      flex-wrap: wrap;
      flex-basis: 100%;
    }
    .nav-link {
      flex-basis: 100%;
    }
    li {
      flex-wrap: wrap;
    }
    .navbar .nav-item:not(:last-child)::after {
      display: none;
    }
    .header-search {
      justify-content: center;
    }
    .col-sm-7 {
      flex: auto;
      max-width: 100%;
      padding: 15px 0;
    }
  }

  /**** Footer ****/
  #emory-as-footer footer {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
    ul {
      padding: 0px;
    }
    .footer-list,
    .copyright-signature {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

/*** search results ***/
@media (max-width: 767px) {
  #search-results .search-result-wrapper .list-thumbnail {
    justify-content: unset;
  }
}
@media (max-width: 576px) {
  #search-results dt.data-labels {
    text-align: unset !important;
  }
}

/*** View Work Page (/concerns/publications/) ***/
@media (max-width: 991px) {
  #view-work-page {
    .dropdown-toggle {
      white-space: normal;
    }
  }
  .table-responsive {
    overflow-x: scroll;
  }
}