app/assets/stylesheets/elements/boxes.scss
@mixin box {
background: #fff;
margin: 0 5px 15px;
border-radius: 4px;
border: 1px solid #f0f0f0;
h1 {
background: $primary-color;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: $inverse-text-color;
font-size: 17px;
font-weight: 600;
margin: 0;
padding: 9px 15px;
a {
float: right;
color: $white;
text-decoration: none;
font-size: 15px;
}
}
}
@mixin header-panel {
margin: 0;
padding: 25px;
background: #fff;
border-bottom: 1px solid #f6f6f6;
h1 {
font-size: 30px;
font-weight: 600;
line-height: 1.3em;
margin: 0;
padding: 0;
.type-label {
font-size: 1.7rem;
display: block;
line-height: 1.6rem;
}
}
}
@mixin header-panel-with-negative-margin {
@include header-panel;
margin: -25px -25px 25px;
}
@mixin page-section {
padding: 25px;
header {
@include header-panel-with-negative-margin;
}
}
.page-section {
@include page-section;
}