Cocktail.sass

A simple material design library for Sass

Download

Colours

$black

$white

$red

$pink

$purple

$deep_purple

$indigo

$blue

$light_blue

$cyan

$teal

$green

$light_green

$lime

$yellow

$amber

$orange

$deep_orange

$brown

$grey

$blue_grey

background-color: $blue

Buttons

.button .button-black .button-white .button-red .button-pink .button-purple .button-deep-purple .button-indigo .button-blue .button-light-blue .button-cyan .button-teal .button-green .button-light-green .button-lime .button-yellow .button-amber .button-orange .button-deep-orange .button-brown .button-grey .button-blue-grey

<a class="button" href="">.button</a> <a class="button button-black" href="">.button-black</a>

Rounded Buttons

.button-rounded .button-black .button-white .button-red .button-pink .button-purple .button-deep-purple .button-indigo .button-blue .button-light-blue .button-cyan .button-teal .button-green .button-light-green .button-lime .button-yellow .button-amber .button-orange .button-deep-orange .button-brown .button-grey .button-blue-grey

<a class="button button-rounded" href="">.button</a> <a class="button button-rounded button-black" href="">.button-black</a>

Action Buttons

+ + + + + + + + + + + + + + + + + + + + + +

<a class="button button-action" href="">+</a> <a class="button button-action button-black" href="">+</a>

Back To Top Buttons

▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲

<a class="button button-top" href="">▲</a> <a class="button button-top button-black" href="">▲</a>