<p>A layer adds whitespace at the top and bottom.</p>
<div class="o-layer o-layer--tiny" style="background-color: #ffba00;">
<p><code><div class="o-layer o-layer--tiny"></code></p>
</div>
<div class="o-layer o-layer--small" style="background-color: #cccccc;">
<p><code><div class="o-layer o-layer--small"></code></p>
</div>
<div class="o-layer o-layer--base" style="background-color: #ffba00;">
<p><code><div class="o-layer o-layer--base"></code></p>
</div>
<div class="o-layer o-layer--large" style="background-color: #cccccc;">
<p><code><div class="o-layer o-layer--large"></code></p>
</div>
<p>A layer adds whitespace at the top and bottom.</p>
<div class="o-layer o-layer--tiny" style="background-color: #ffba00;">
<p><code><div class="o-layer o-layer--tiny"></code></p>
</div>
<div class="o-layer o-layer--small" style="background-color: #cccccc;">
<p><code><div class="o-layer o-layer--small"></code></p>
</div>
<div class="o-layer o-layer--base" style="background-color: #ffba00;">
<p><code><div class="o-layer o-layer--base"></code></p>
</div>
<div class="o-layer o-layer--large" style="background-color: #cccccc;">
<p><code><div class="o-layer o-layer--large"></code></p>
</div>
/* No context defined. */
/* =========================================================================
Atoms.Objects.Layer
========================================================================= */
@use 'node_modules/@supple-kit/supple-css/tools/responsive';
/* Block
========================================================================= */
.o-layer {
display: block;
}
/* Modifier
========================================================================= */
.o-layer--tiny {
padding-block: var(--space-tiny);
}
.o-layer--small {
padding-block: var(--space-small);
}
.o-layer--base,
.o-layer--huge,
.o-layer--large {
padding-block: var(--space-base);
}
/* Responsive
========================================================================= */
@include responsive.mq(desk) {
.o-layer--large {
padding-block: var(--space-large);
}
.o-layer--huge {
padding-block: var(--space-huge);
}
}
No notes defined.