extinctionrebellion/RebelsManager

View on GitHub
app/javascript/css/components/page_header.scss

Summary

Maintainability
Test Coverage
@mixin xr-page-header {
  #page-header {
    margin-top: 5px;
    margin-bottom: 1rem;

    #page-header-inner {
      padding: 2rem 0;
      background: $white;
      border-bottom: 1px solid $white;
      transition: border 1s ease-in-out;
      z-index: 10; // required for inner dropdowns

      &.is-stuck {
        border-bottom-color: #dee2e4;
        z-index: 10; // wysiwyg editors = 1000, current date label = 1007
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
      }

      h1 {
        .badge {
          padding: .25rem .5rem;
          font-size: .85rem;
          vertical-align: middle;
          border: 1px solid $dark-gray;
          background: $white;
          color: $dark-gray;
        }

        .label {
          vertical-align: middle;
        }
      }

      h1,
      button,
      a,
      input[type="submit"] {
        margin-bottom: 0;
      }

      .actions {
        a[data-toggle=actions-menu] {
          i {
            margin-right: 0;
          }
        }

        .actions-wrapper {
          > a,
          > button {
            margin-left: 6px;

            &:first-child {
              margin-left: 0;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 39.9375em) {
    #page-header {
      #page-header-inner {
        padding: 1rem 0;

        .actions {
          a[data-toggle=actions-menu] {
            margin-right: 0;
            border-radius: 100%;
          }

          .actions-wrapper {
            margin-top: 1rem;
          }
        }
      }
    }
  }
}