Styleguide 0.1.0

99 - Dice

Experimental

EXPERIMENTAL: Rating used for reviews and tests

99.1 - Roll

99.1.1 - Ace

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="50" cy="50" r="10"/>
</svg>

99.1.2 - Deuce

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
</svg>

99.1.3 - Trey

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="50" cy="50" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
</svg>

99.1.4 - Carter

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="25" r="10"/>
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
    <circle class="pip" cx="75" cy="75" r="10"/>
</svg>

99.1.5 - Cinque

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="25" r="10"/>
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="50" cy="50" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
    <circle class="pip" cx="75" cy="75" r="10"/>
</svg>

99.1.6 - Sice

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="25" r="10"/>
    <circle class="pip" cx="25" cy="50" r="10"/>
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
    <circle class="pip" cx="75" cy="50" r="10"/>
    <circle class="pip" cx="75" cy="75" r="10"/>
</svg>

99.2 - Colors

.white

$color-white

.yellow

$color-yellow

.black

$color-dark

<svg class="dice {$modifiers}" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <rect class="face" x="0" y="0" width="100" height="100"></rect>
  <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
  <circle class="pip" cx="25" cy="25" r="10"/>
  <circle class="pip" cx="25" cy="50" r="10"/>
  <circle class="pip" cx="25" cy="75" r="10"/>
  <circle class="pip" cx="75" cy="25" r="10"/>
  <circle class="pip" cx="75" cy="50" r="10"/>
  <circle class="pip" cx="75" cy="75" r="10"/>
</svg>