<button class="b1">Pure</button>
<button class="b2">Red</button>
<button class="b3">Orange</button>
<button class="b4">Yellow</button>
<button class="b5">Green</button>
<button class="b6">Blue</button>
<button class="b7">Cyan</button>
<button class="b8">Purple</button>
@import "lib/_oa-material";
.b1 { @include button(); }
.b2 { @include button('red'); }
.b3 { @include button('orange'); }
.b4 { @include button('yellow'); }
.b5 { @include button('green'); }
.b6 { @include button('blue'); }
.b7 { @include button('cyan'); }
.b8 { @include button('purple'); }
<button class="b1 jelly">Pure</button>
<button class="b2 jelly">Red</button>
<button class="b3 jelly">Orange</button>
<button class="b4 jelly">Yellow</button>
<button class="b5 jelly">Green</button>
<button class="b6 jelly">Blue</button>
<button class="b7 jelly">Cyan</button>
<button class="b8 jelly">Purple</button>
@import "lib/_oa-material";
.b1 { @include button(); }
.b2 { @include button('red'); }
.b3 { @include button('orange'); }
.b4 { @include button('yellow'); }
.b5 { @include button('green'); }
.b6 { @include button('blue'); }
.b7 { @include button('cyan'); }
.b8 { @include button('purple'); }
$('button.jelly').click (function () {
var events = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
$(this).addClass ('jelly-effect')
.bind (events, function () {
$(this).removeClass ('jelly-effect');
});
});
<button disabled class="b1">Pure</button>
<button disabled class="b2">Red</button>
<button disabled class="b3">Orange</button>
<button disabled class="b4">Yellow</button>
<button disabled class="b5">Green</button>
<button disabled class="b6">Blue</button>
<button disabled class="b7">Cyan</button>
<button disabled class="b8">Purple</button>
@import "lib/_oa-material";
.b1 { @include button(); }
.b2 { @include button('red'); }
.b3 { @include button('orange'); }
.b4 { @include button('yellow'); }
.b5 { @include button('green'); }
.b6 { @include button('blue'); }
.b7 { @include button('cyan'); }
.b8 { @include button('purple'); }
<div class="radio1">
<input type="radio" id="radio1" name="radio">
<span></span>
<label for="radio1">Item 1</label>
</div>
<div class="radio2 red">
<input type="radio" id="radio2" name="radio">
<span></span>
<label for="radio2">Item 2</label>
</div>
<div class="radio3 orange">
<input type="radio" id="radio3" name="radio">
<span></span>
<label for="radio3">Item 3</label>
</div>
<div class="radio4 yellow">
<input type="radio" id="radio4" name="radio">
<span></span>
<label for="radio4">Item 4</label>
</div>
<div class="radio5 green">
<input type="radio" id="radio5" name="radio">
<span></span>
<label for="radio5">Item 5</label>
</div>
<div class="radio6 blue">
<input type="radio" id="radio6" name="radio">
<span></span>
<label for="radio6">Item 6</label>
</div>
<div class="radio7 cyan">
<input type="radio" id="radio7" name="radio">
<span></span>
<label for="radio7">Item 7</label>
</div>
<div class="radio8 purple">
<input type="radio" id="radio8" name="radio">
<span></span>
<label for="radio8">Item 8</label>
</div>
@import "lib/_oa-material";
.radio1 { @include radio(); }
.radio2 { @include radio('red'); }
.radio3 { @include radio('orange'); }
.radio4 { @include radio('yellow'); }
.radio5 { @include radio('green'); }
.radio6 { @include radio('blue'); }
.radio7 { @include radio('cyan'); }
.radio8 { @include radio('purple'); }
<div class="radio1">
<input type="radio" disabled id="radio1" name="radio">
<span></span>
<label for="radio1">Item 1</label>
</div>
<div class="radio2 red">
<input type="radio" disabled id="radio2" name="radio">
<span></span>
<label for="radio2">Item 2</label>
</div>
<div class="radio3 orange">
<input type="radio" disabled id="radio3" name="radio">
<span></span>
<label for="radio3">Item 3</label>
</div>
<div class="radio4 yellow">
<input type="radio" disabled id="radio4" name="radio">
<span></span>
<label for="radio4">Item 4</label>
</div>
<div class="radio5 green">
<input type="radio" disabled id="radio5" name="radio">
<span></span>
<label for="radio5">Item 5</label>
</div>
<div class="radio6 blue">
<input type="radio" disabled id="radio6" name="radio">
<span></span>
<label for="radio6">Item 6</label>
</div>
<div class="radio7 cyan">
<input type="radio" disabled id="radio7" name="radio">
<span></span>
<label for="radio7">Item 7</label>
</div>
<div class="radio8 purple">
<input type="radio" disabled id="radio8" name="radio">
<span></span>
<label for="radio8">Item 8</label>
</div>
@import "lib/_oa-material";
.radio1 { @include radio(); }
.radio2 { @include radio('red'); }
.radio3 { @include radio('orange'); }
.radio4 { @include radio('yellow'); }
.radio5 { @include radio('green'); }
.radio6 { @include radio('blue'); }
.radio7 { @include radio('cyan'); }
.radio8 { @include radio('purple'); }
<div class="checkbox1">
<input type="checkbox" id="checkbox1">
<span></span>
<label for="checkbox1">Item 1</label>
</div>
<div class="checkbox2 red">
<input type="checkbox" id="checkbox2">
<span></span>
<label for="checkbox2">Item 2</label>
</div>
<div class="checkbox3 orange">
<input type="checkbox" id="checkbox3">
<span></span>
<label for="checkbox3">Item 3</label>
</div>
<div class="checkbox4 yellow">
<input type="checkbox" id="checkbox4">
<span></span>
<label for="checkbox4">Item 4</label>
</div>
<div class="checkbox5 green">
<input type="checkbox" id="checkbox5">
<span></span>
<label for="checkbox5">Item 5</label>
</div>
<div class="checkbox6 blue">
<input type="checkbox" id="checkbox6">
<span></span>
<label for="checkbox6">Item 6</label>
</div>
<div class="checkbox7 cyan">
<input type="checkbox" id="checkbox7">
<span></span>
<label for="checkbox7">Item 7</label>
</div>
<div class="checkbox8 purple">
<input type="checkbox" id="checkbox8">
<span></span>
<label for="checkbox8">Item 8</label>
</div>
@import "lib/_oa-material";
.checkbox1 { @include checkbox(); }
.checkbox2 { @include checkbox('red'); }
.checkbox3 { @include checkbox('orange'); }
.checkbox4 { @include checkbox('yellow'); }
.checkbox5 { @include checkbox('green'); }
.checkbox6 { @include checkbox('blue'); }
.checkbox7 { @include checkbox('cyan'); }
.checkbox8 { @include checkbox('purple'); }
<div class="checkbox1">
<input type="checkbox" disabled id="checkbox1">
<span></span>
<label for="checkbox1">Item 1</label>
</div>
<div class="checkbox2 red">
<input type="checkbox" disabled id="checkbox2">
<span></span>
<label for="checkbox2">Item 2</label>
</div>
<div class="checkbox3 orange">
<input type="checkbox" disabled id="checkbox3">
<span></span>
<label for="checkbox3">Item 3</label>
</div>
<div class="checkbox4 yellow">
<input type="checkbox" disabled id="checkbox4">
<span></span>
<label for="checkbox4">Item 4</label>
</div>
<div class="checkbox5 green">
<input type="checkbox" disabled id="checkbox5">
<span></span>
<label for="checkbox5">Item 5</label>
</div>
<div class="checkbox6 blue">
<input type="checkbox" disabled id="checkbox6">
<span></span>
<label for="checkbox6">Item 6</label>
</div>
<div class="checkbox7 cyan">
<input type="checkbox" disabled id="checkbox7">
<span></span>
<label for="checkbox7">Item 7</label>
</div>
<div class="checkbox8 purple">
<input type="checkbox" disabled id="checkbox8">
<span></span>
<label for="checkbox8">Item 8</label>
</div>
@import "lib/_oa-material";
.radio1 { @include radio(); }
.radio2 { @include radio('red'); }
.radio3 { @include radio('orange'); }
.radio4 { @include radio('yellow'); }
.radio5 { @include radio('green'); }
.radio6 { @include radio('blue'); }
.radio7 { @include radio('cyan'); }
.radio8 { @include radio('purple'); }
<div class="switch1">
<input type="checkbox" id="switch1">
<span></span>
<label for="switch1">Item 1</label>
</div>
<div class="switch2 red">
<input type="checkbox" id="switch2">
<span></span>
<label for="switch2">Item 2</label>
</div>
<div class="switch3 orange">
<input type="checkbox" id="switch3">
<span></span>
<label for="switch3">Item 3</label>
</div>
<div class="switch4 yellow">
<input type="checkbox" id="switch4">
<span></span>
<label for="switch4">Item 4</label>
</div>
<div class="switch5 green">
<input type="checkbox" id="switch5">
<span></span>
<label for="switch5">Item 5</label>
</div>
<div class="switch6 blue">
<input type="checkbox" id="switch6">
<span></span>
<label for="switch6">Item 6</label>
</div>
<div class="switch7 cyan">
<input type="checkbox" id="switch7">
<span></span>
<label for="switch7">Item 7</label>
</div>
<div class="switch8 purple">
<input type="checkbox" id="switch8">
<span></span>
<label for="switch8">Item 8</label>
</div>
@import "lib/_oa-material";
.switch1 { @include switch(false); }
.switch2 { @include switch(false, 'red'); }
.switch3 { @include switch(false, 'orange'); }
.switch4 { @include switch(false, 'yellow'); }
.switch5 { @include switch(false, 'green'); }
.switch6 { @include switch(false, 'blue'); }
.switch7 { @include switch(false, 'cyan'); }
.switch8 { @include switch(false, 'purple'); }
<div class="switch1">
<input type="checkbox" id="switch1">
<span></span>
<label for="switch1">Item 1</label>
</div>
<div class="switch2 red">
<input type="checkbox" id="switch2">
<span></span>
<label for="switch2">Item 2</label>
</div>
<div class="switch3 orange">
<input type="checkbox" id="switch3">
<span></span>
<label for="switch3">Item 3</label>
</div>
<div class="switch4 yellow">
<input type="checkbox" id="switch4">
<span></span>
<label for="switch4">Item 4</label>
</div>
<div class="switch5 green">
<input type="checkbox" id="switch5">
<span></span>
<label for="switch5">Item 5</label>
</div>
<div class="switch6 blue">
<input type="checkbox" id="switch6">
<span></span>
<label for="switch6">Item 6</label>
</div>
<div class="switch7 cyan">
<input type="checkbox" id="switch7">
<span></span>
<label for="switch7">Item 7</label>
</div>
<div class="switch8 purple">
<input type="checkbox" id="switch8">
<span></span>
<label for="switch8">Item 8</label>
</div>
@import "lib/_oa-material";
.switch1 { @include switch(true); }
.switch2 { @include switch(true, 'red'); }
.switch3 { @include switch(true, 'orange'); }
.switch4 { @include switch(true, 'yellow'); }
.switch5 { @include switch(true, 'green'); }
.switch6 { @include switch(true, 'blue'); }
.switch7 { @include switch(true, 'cyan'); }
.switch8 { @include switch(true, 'purple'); }
<div class="switch1">
<input type="checkbox" disabled id="switch1">
<span></span>
<label for="switch1">Item 1</label>
</div>
<div class="switch2 red">
<input type="checkbox" disabled id="switch2">
<span></span>
<label for="switch2">Item 2</label>
</div>
<div class="switch3 orange">
<input type="checkbox" disabled id="switch3">
<span></span>
<label for="switch3">Item 3</label>
</div>
<div class="switch4 yellow">
<input type="checkbox" disabled id="switch4">
<span></span>
<label for="switch4">Item 4</label>
</div>
<div class="switch5 green">
<input type="checkbox" disabled id="switch5">
<span></span>
<label for="switch5">Item 5</label>
</div>
<div class="switch6 blue">
<input type="checkbox" disabled id="switch6">
<span></span>
<label for="switch6">Item 6</label>
</div>
<div class="switch7 cyan">
<input type="checkbox" disabled id="switch7">
<span></span>
<label for="switch7">Item 7</label>
</div>
<div class="switch8 purple">
<input type="checkbox" disabled id="switch8">
<span></span>
<label for="switch8">Item 8</label>
</div>
@import "lib/_oa-material";
.switch1 { @include switch(false); }
.switch2 { @include switch(false, 'red'); }
.switch3 { @include switch(false, 'orange'); }
.switch4 { @include switch(false, 'yellow'); }
.switch5 { @include switch(false, 'green'); }
.switch6 { @include switch(false, 'blue'); }
.switch7 { @include switch(false, 'cyan'); }
.switch8 { @include switch(false, 'purple'); }
<div class='paper1'>pure</div>
<div class='paper2'>shadow</div>
<div class='paper3'>corner</div>
<div class='paper4'>convex</div>
<div class='paper5'>horizontal-convex</div>
<div class='paper6'>vertical-convex</div>
@import "lib/_oa-material";
.paper1 { @include paper(); }
.paper2 { @include paper('shadow'); }
.paper3 { @include paper('corner'); }
.paper4 { @include paper('convex'); }
.paper5 { @include paper('horizontal-convex'); }
.paper6 { @include paper('vertical-convex'); }