app/javascript/css/components/page_header.scss
@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;
}
}
}
}
}
}