locomotivecms/engine

View on GitHub
app/assets/stylesheets/locomotive/new/_drawer.scss

Summary

Maintainability
Test Coverage
// =============================================================================
// Drawer
// =============================================================================

// Wrapper class for the asset drawer.

.drawer {
  position: absolute;
  top: 0;
  right: -100%;
  bottom: 0;
  left: 100%;
  z-index: 105;
  width: 100%;
  background: $white;
  transition: all $base-transition-speed ease-in-out;
  .header-row {
    padding: 15px 0;
  }
  h1 {
    margin: 0;
    font-family: $font-family-sans-serif;
    font-size: 22px;
    color: $gray-darkest;
  }
  > .close-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 991;
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    color: $white;
    text-align: center;
    cursor: pointer;
    background: $gray-darker;
  }
  .inner {
    height: 100%;
    > .row:first-child {
      padding: 20px 0 10px;
    }
  }
}

// Class that opens the asset drawer.

.drawer-open {
  right: 0;
  left: 0;
}