pad
The pad or keypad consists of the set of keys arranged in a grid.
HTML
<div class="pad">
<div class="pad__slot r0 c0 colspan2">
<button class="key key--primary" type="button">AC</button>
</div>
<div class="pad__slot r0 c2">
<button class="key" type="button">÷</button>
</div>
<div class="pad__slot r0 c3">
<button class="key" type="button">×</button>
</div>
<div class="pad__slot r1 c0">
<button class="key" type="button">7</button>
</div>
<div class="pad__slot r1 c1">
<button class="key" type="button">8</button>
</div>
<div class="pad__slot r1 c2">
<button class="key" type="button">9</button>
</div>
<div class="pad__slot r1 c3">
<button class="key" type="button">-</button>
</div>
<div class="pad__slot r2 c0">
<button class="key" type="button">4</button>
</div>
<div class="pad__slot r2 c1">
<button class="key" type="button">5</button>
</div>
<div class="pad__slot r2 c2">
<button class="key" type="button">6</button>
</div>
<div class="pad__slot r2 c3">
<button class="key" type="button">+</button>
</div>
<div class="pad__slot r3 c0">
<button class="key" type="button">1</button>
</div>
<div class="pad__slot r3 c1">
<button class="key" type="button">2</button>
</div>
<div class="pad__slot r3 c2">
<button class="key" type="button">3</button>
</div>
<div class="pad__slot r3 c3 rowspan2">
<button class="key key--secondary" type="button">=</button>
</div>
<div class="pad__slot r4 c0 colspan2">
<button class="key" type="button">0</button>
</div>
<div class="pad__slot r4 c2">
<button class="key" type="button">.</button>
</div>
</div>
The pad contains slots for the keys. I made the deliberate choice to style the position and size of each slot using utility classes scoped to the slots.
Sass
@use "../colors";
$pad-slot-width: 80px !default;
$pad-slot-height: 65px !default;
$pad-slot-spacing-around: 1px !default;
$pad-width: 4 * $pad-slot-width + 5 * $pad-slot-spacing-around;
$pad-height: 5 * $pad-slot-height + 6 * $pad-slot-spacing-around;
.pad {
position: relative;
width: $pad-width;
height: $pad-height;
background-color: colors.$black;
}
.pad__slot {
position: absolute;
width: $pad-slot-width;
height: $pad-slot-height;
}
.pad__slot.r0 {
top: $pad-slot-spacing-around;
}
.pad__slot.r1 {
top: $pad-slot-height + 2 * $pad-slot-spacing-around;
}
.pad__slot.r2 {
top: 2 * $pad-slot-height + 3 * $pad-slot-spacing-around;
}
.pad__slot.r3 {
top: 3 * $pad-slot-height + 4 * $pad-slot-spacing-around;
}
.pad__slot.r4 {
top: 4 * $pad-slot-height + 5 * $pad-slot-spacing-around;
}
.pad__slot.c0 {
left: $pad-slot-spacing-around;
}
.pad__slot.c1 {
left: $pad-slot-width + 2 * $pad-slot-spacing-around;
}
.pad__slot.c2 {
left: 2 * $pad-slot-width + 3 * $pad-slot-spacing-around;
}
.pad__slot.c3 {
left: 3 * $pad-slot-width + 4 * $pad-slot-spacing-around;
}
.pad__slot.rowspan2 {
height: 2 * $pad-slot-height + $pad-slot-spacing-around;
}
.pad__slot.colspan2 {
width: 2 * $pad-slot-width + $pad-slot-spacing-around;
}
The width, height, and spacing around the slots can each be overriden when using the pad module. For e.g.
@use "blocks/pad" with (
$pad-slot-width: 75px,
$pad-slot-height: 50px,
$pad-slot-spacing-around: 2px
);