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
);

Demo

Source Code