examples/switch.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../less/bootstrap.css"/>
</head>
<body style="margin: 50px;">
<h1>Switchs light</h1>
<div class="material-switch">
<input type="checkbox" id="switch1"/>
<label for="switch1">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch red">
<input type="checkbox" id="switch2"/>
<label for="switch2">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch pink">
<input type="checkbox" id="switch3"/>
<label for="switch3">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch purple">
<input type="checkbox" id="switch4"/>
<label for="switch4">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dpurple">
<input type="checkbox" id="switch5"/>
<label for="switch5">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch indigo">
<input type="checkbox" id="switch6"/>
<label for="switch6">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch blue">
<input type="checkbox" id="switch7"/>
<label for="switch7">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch lblue">
<input type="checkbox" id="switch8"/>
<label for="switch8">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch cyan">
<input type="checkbox" id="switch9"/>
<label for="switch9">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch teal">
<input type="checkbox" id="switch10"/>
<label for="switch10">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch green">
<input type="checkbox" id="switch11"/>
<label for="switch11">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch lgreen">
<input type="checkbox" id="switch12"/>
<label for="switch12">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch lime">
<input type="checkbox" id="switch13"/>
<label for="switch13">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch yellow">
<input type="checkbox" id="switch14"/>
<label for="switch14">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch amber">
<input type="checkbox" id="switch15"/>
<label for="switch15">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch orange">
<input type="checkbox" id="switch16"/>
<label for="switch16">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dorange">
<input type="checkbox" id="switch17"/>
<label for="switch17">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch brown">
<input type="checkbox" id="switch18"/>
<label for="switch18">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch grey">
<input type="checkbox" id="switch19"/>
<label for="switch19">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch bgrey">
<input type="checkbox" id="switch20"/>
<label for="switch20">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch">
<input type="checkbox" id="switch21" disabled/>
<label for="switch21">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch">
<input type="checkbox" id="switch22" disabled checked/>
<label for="switch22">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div style="background-color: #424242; padding: 30px 50px; margin: 0 -50px;">
<div class="material-switch dark dark">
<input type="checkbox" id="switch2-1"/>
<label for="switch2-1">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark red">
<input type="checkbox" id="switch2-2"/>
<label for="switch2-2">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark pink">
<input type="checkbox" id="switch2-3"/>
<label for="switch2-3">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark purple">
<input type="checkbox" id="switch2-4"/>
<label for="switch2-4">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark dpurple">
<input type="checkbox" id="switch2-5"/>
<label for="switch2-5">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark indigo">
<input type="checkbox" id="switch2-6"/>
<label for="switch2-6">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark blue">
<input type="checkbox" id="switch2-7"/>
<label for="switch2-7">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark lblue">
<input type="checkbox" id="switch2-8"/>
<label for="switch2-8">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark cyan">
<input type="checkbox" id="switch2-9"/>
<label for="switch2-9">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark teal">
<input type="checkbox" id="switch2-10"/>
<label for="switch2-10">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark green">
<input type="checkbox" id="switch2-11"/>
<label for="switch2-11">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark lgreen">
<input type="checkbox" id="switch2-12"/>
<label for="switch2-12">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark lime">
<input type="checkbox" id="switch2-13"/>
<label for="switch2-13">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark yellow">
<input type="checkbox" id="switch2-14"/>
<label for="switch2-14">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark amber">
<input type="checkbox" id="switch2-15"/>
<label for="switch2-15">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark orange">
<input type="checkbox" id="switch2-16"/>
<label for="switch2-16">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark dorange">
<input type="checkbox" id="switch2-17"/>
<label for="switch2-17">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark brown">
<input type="checkbox" id="switch2-18"/>
<label for="switch2-18">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark grey">
<input type="checkbox" id="switch2-19"/>
<label for="switch2-19">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark bgrey">
<input type="checkbox" id="switch2-20"/>
<label for="switch2-20">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark">
<input type="checkbox" id="switch2-21" disabled/>
<label for="switch2-21">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
<div class="material-switch dark">
<input type="checkbox" id="switch2-22" disabled checked/>
<label for="switch2-22">
<span class="line"></span>
<span class="selector">
<span class="focus"></span>
</span>
</label>
</div>
</div>
</body>
</html>