| Vapor CSS

White Space

Immutable margin and padding utilities are based on a multiple of a basic spacing unit. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser. Those classes are available from p0 to p2 and m0 to m2.

Style sheet: /scss/utility/white-space.scss

Use p0[..n] to add a uniform padding around the box.

Use px1[..n] to add padding right and left (x axis).

Use py1[..n] to add padding top and bottom (y axis).

Use m0[..n] to add a uniform margin around the box.
Use m[t|r|b|l][1..n] to add a top, right, bottom or left margin on the element.

Use m[t|r|b|l][-5..-1] to add a negative top, right, bottom or left margin on the element.
Use mx-auto to have a auto margin-left and margin-right.
<div class="text-white">
    <div class="p2 bg-red">
        Use p0[..n] to add a uniform padding around the box.
    </div>
    <br />

    <div class="px1 bg-orange">
        Use px1[..n] to add padding right and left (x axis).
    </div>
    <br />

    <div class="py1 bg-yellow">
        Use py1[..n] to add padding top and bottom (y axis).
    </div>
    <br />

    <div class="m2 bg-green">
        Use m0[..n] to add a uniform margin around the box.
    </div>

    <div class="mt2 bg-blue">
        Use m[t|r|b|l][1..n] to add a top, right, bottom or left margin on the element.
    </div>
    <br />

    <div class="p3 bg-grey-2">
        <div class="mt-2 bg-grey-7">
            Use m[t|r|b|l][-5..-1] to add a negative top, right, bottom or left margin on the element.
        </div>
    </div>

    <div class="mx-auto" style="width: 200px; background-color: darkmagenta">
        Use mx-auto to have a auto margin-left and margin-right.
    </div>
</div>

Spaced box

Simple spaced boxes container that you can use for alomost everything. Pair it with flex and flex-wrap and you get a nice container.

Style sheet: /scss/utility/white-space.scss

A span Another span More!
<div class="spaced-boxes-container flex flex-wrap" style="max-width: 400px">
    <span class="p2 bg-red text-pure-white spaced-box">
        A span
    </span>

    <button type="button" class="btn spaced-box">
        A button
    </button>

    <span class="p2 bg-light-blue text-pure-white spaced-box">
        Another span
    </span>

    <button type="button" class="btn mod-primary spaced-box">
        Another button
    </button>

    <span class="p2 bg-green text-pure-white spaced-box">
        More!
    </span>
</div>

Cursor

Set a specific cursor style on any element.

Style sheet: /scss/utility/cursor.scss

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

w-resize

wait

zoom-in

zoom-out

<p class='mb1 cursor-alias'>alias</p>
<p class='mb1 cursor-all-scroll'>all-scroll</p>
<p class='mb1 cursor-auto'>auto</p>
<p class='mb1 cursor-cell'>cell</p>
<p class='mb1 cursor-context-menu'>context-menu</p>
<p class='mb1 cursor-col-resize'>col-resize</p>
<p class='mb1 cursor-copy'>copy</p>
<p class='mb1 cursor-crosshair'>crosshair</p>
<p class='mb1 cursor-default'>default</p>
<p class='mb1 cursor-e-resize'>e-resize</p>
<p class='mb1 cursor-ew-resize'>ew-resize</p>
<p class='mb1 cursor-grab'>grab</p>
<p class='mb1 cursor-grabbing'>grabbing</p>
<p class='mb1 cursor-help'>help</p>
<p class='mb1 cursor-move'>move</p>
<p class='mb1 cursor-n-resize'>n-resize</p>
<p class='mb1 cursor-ne-resize'>ne-resize</p>
<p class='mb1 cursor-nesw-resize'>nesw-resize</p>
<p class='mb1 cursor-ns-resize'>ns-resize</p>
<p class='mb1 cursor-nw-resize'>nw-resize</p>
<p class='mb1 cursor-nwse-resize'>nwse-resize</p>
<p class='mb1 cursor-no-drop'>no-drop</p>
<p class='mb1 cursor-none'>none</p>
<p class='mb1 cursor-not-allowed'>not-allowed</p>
<p class='mb1 cursor-pointer'>pointer</p>
<p class='mb1 cursor-progress'>progress</p>
<p class='mb1 cursor-row-resize'>row-resize</p>
<p class='mb1 cursor-s-resize'>s-resize</p>
<p class='mb1 cursor-se-resize'>se-resize</p>
<p class='mb1 cursor-sw-resize'>sw-resize</p>
<p class='mb1 cursor-text'>text</p>
<p class='mb1 cursor-w-resize'>w-resize</p>
<p class='mb1 cursor-wait'>wait</p>
<p class='mb1 cursor-zoom-in'>zoom-in</p>
<p class='mb1 cursor-zoom-out'>zoom-out</p>

Color dots

Display a status.'

Style sheet: /scss/elements/color-dot.scss

Standard color dots

Flashing color dots

Color dot aligned with text

Success
<p class="p1">Standard color dots</p>
<i class="color-dot"></i>
<i class="color-dot state-critical"></i>
<i class="color-dot state-major"></i>
<i class="color-dot state-info"></i>
<i class="color-dot state-disabled"></i>
<i class="color-dot state-waiting"></i>

<p class="p1">Flashing color dots</p>
<i class="color-dot state-executing"></i>
<i class="color-dot state-executing state-critical"></i>
<i class="color-dot state-executing state-major"></i>
<i class="color-dot state-executing state-info"></i>
<i class="color-dot state-executing state-disabled"></i>
<i class="color-dot state-executing state-waiting"></i>

<p class="p1">Color dot aligned with text</p>
<span class="inline-flex center-align">
    <i class="color-dot mr1"></i>
    Success
</span>

Borders

Clearly define the edge of components or layouts.

Style sheet: /scss/utility/border.scss

1
2
3
4
5
6
7
8
9
10
top
bottom
left
right
<div class="flex">
    <div style="width: 100px; height: 50px;" class="m2 mod-border"></div>
    <div style="width: 100px; height: 50px;" class="m2 mod-border-top mod-border-bottom"></div>
    <div style="width: 100px; height: 50px;" class="m2 mod-border-left mod-border-right"></div>
</div>
<div class="flex">
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-1">1</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-2">2</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-3">3</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-4">4</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-5">5</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-6">6</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-7">7</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-8">8</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-9">9</div>
        <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-10">10</div>
</div>
<div class="flex">
    <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-top-5">top</div>
    <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-bottom-5">bottom</div>
    <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-left-5">left</div>
    <div style="width: 100px; height: 50px;" class="m2 p2 mod-border mod-rounded-border-right-5">right</div>
</div>

Transparency

Utility to modify the transparency.

Style sheet: /scss/utility/transparency.scss

<div class="flex">
    <div style="width: 100px; height: 50px;" class="transparency-1"><button class="btn"/>1</div>
    <div style="width: 100px; height: 50px;" class="transparency-2"><button class="btn"/>2</div>
    <div style="width: 100px; height: 50px;" class="transparency-3"><button class="btn"/>3</div>
    <div style="width: 100px; height: 50px;" class="transparency-4"><button class="btn"/>4</div>
    <div style="width: 100px; height: 50px;" class="transparency-5"><button class="btn"/>5</div>
</div>

Hover

Utility to apply hover on element.

Style sheet: /scss/utility/layout.scss

<div class="flex">
    <button style="width: 100px; height: 50px;" class="btn mod-primary hover-color-light-blue">Blue</button>
    <button style="width: 100px; height: 50px;" class="btn mod-primary hover-color-yellow">Yellow</button>
    <button style="width: 100px; height: 50px;" class="btn mod-primary hover-color-dark-grey">Dark grey</button>
</div>