No notes defined.
<div class="box widebox">
<h5>This is a panel</h5>
<p class="subheading">This is a panel</p>
</div>
{% set classString = '' %}
{% for modifier in modifiers %}
{% set classString = classString ~ modifier %}
{% endfor %}
<div class="box {{ classString }}">
<h5>This is a panel</h5>
<p class="subheading">This is a panel</p>
</div>
.box {
background: #fff;
padding: 2rem;
width: 100%;
box-shadow: 0 1rem 1rem -0.75rem rgba(0,0,0,0.1);
margin: 0 0 $spacing-2xl;
box-sizing: border-box;
@include typescale('xs');
position: relative;
z-index: 2;
display: block;
&.sub-box {
background: $grey--lightest;
}
+ .sub-box {
margin-top: -$spacing-2xl;
z-index: 1;
}
&--blue {
background: $primary;
color: #fff;
#{headings()} {
color: #fff;
}
}
}
a.box {
padding: 1rem;
transition: all 0.2s;
top: 0;
color: $magenta;
#{headings()} {
color: $magenta;
margin: 0 0 0.75rem;
line-height: 1.3;
text-decoration: underline;
+ p {
color: $navy;
}
}
&:hover {
box-shadow: 0 1rem 1rem -0.75rem rgba(0,0,0,0.2);
top: -0.1rem;
transform: scale(1.025);
#{headings()} {
color: $navy;
}
}
}
.page-section > .introbox:first-child {
margin-top: -6.5rem;
}
.widebox {
@media (min-width: map_get($breakpoint-stages, smalldesktop)) {
padding-left: calc(11.11% + 1rem);
padding-right: calc(11.11% + 1rem);
padding-top: 3rem;
}
hr {
background: #C0C0C0;
height: 1px;
width: calc(130.4% + 2em);
margin-left: calc(-1em - 15.2%);
}
}