rkeys/ui/mixin/keys.styl

A platform for creating tablet/HTML5 virtual-keyboard apps to send keystrokes to remote X11

@require nib

// css classes to arrange a set of keys into n columns
// e.g. key-cols-2 for a pair of keys per row
for n in (1..9)
  .key-cols-{n}
    .key:nth-child({n}n+1)
      clear     both

// mixin to set key colors
key-color(up = false, label-up = false, down = false, label-down = false)
  if up and label-up and !down and !label-down
    // default behaviour is to invert colors on down
    down = label-up
    label-down = up
  .key.up
    if up
      background-color  up
    if label-up
      .label
        color     label-up
  .key.down
    if down
      background-color  down
    if label-down
      .label
        color     label-down

// mixin to set key size
//
// k: the key size, including internal border
// gap-percent: % of k to use for the internal border
key-size(k, gap-percent = 5%)
  .key
    height      k
    width       k
    font-size   k

    // internal border allows precise alignments of different sized keys
    background-clip padding-box
    border          solid transparent k * gap-percent * 0.01
    box-sizing      border-box

    .label
      font-size   25%
    for l in 1 2 3 // enlarge short labels
      .label.len-{l}
        font-size   40%

  // width and height modifiers e.g. h-2 for double height,
  // w-3 for triple width, etc
  for n in (2..9)
    .key.h-{n}
      height    n * k
    .key.w-{n}
      width     n * k