MD - Basics - Agnostic

by bizamajig

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
	<header>
		<h1>Web Starter Kit</h1>
		<h2>Material Design checkbox*</h2>
	</header>

	<div class="md-checkbox">
		<label>
			<input type="checkbox" checked />
			<span class="checkbox"></span>
			Milk
		</label>
	</div>

	<div class="md-checkbox">
		<label>
			<input type="checkbox" />
			<span class="checkbox"></span>
			Cereal
		</label>
	</div>

	<div class="md-checkbox">
		<label>
			<input type="checkbox" />
			<span class="checkbox"></span>
			Eggs
		</label>
	</div>

	<div class="md-checkbox">
		<label>
			<input type="checkbox" />
			<span class="checkbox"></span>
			Pony
		</label>
	</div>

	<hr>

	<h2>Inverse Examples</h2>


	<div class="inverse">
		<table>
			<thead class="text-muted">
				<tr>
					<th></th>
					<th>active</th>
					<th>disabled</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="text-muted">ON</td>
					<td>

						<div class="md-checkbox md-checkbox-inverse">
							<label>
								<input type="checkbox" checked />
								<span class="checkbox"></span>
								Milk
							</label>
						</div>

					</td>
					<td>

						<div class="md-checkbox md-checkbox-inverse">
							<label>
								<input type="checkbox" checked disabled />
								<span class="checkbox"></span>
								Cereal <span class="muted">(disabled)</span>
							</label>
						</div>

					</td>
				</tr>
				<tr>
					<td class="text-muted">OFF</td>
					<td>

						<div class="md-checkbox md-checkbox-inverse">
							<label>
								<input type="checkbox" />
								<span class="checkbox"></span>
								Eggs
							</label>
						</div>

					</td>
					<td>

						<div class="md-checkbox md-checkbox-inverse">
							<label>
								<input type="checkbox" disabled />
								<span class="checkbox"></span>
								Pony <span class="muted">(disabled)</span>
							</label>
						</div>

					</td>
				</tr>
			</tbody>
		</table>
	</div>
       
    <br>
...

CSS

/* First of all, border-box everything! */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Default styles, just to fit all */
body {
	background-color: #edeced;
	padding: 15px 35px;
}
header {
	margin-bottom: 50px;
}
hr {
	visibility: hidden;
}
h1, h2 {
	font-family: 'Roboto';
}
h1 {
	font-weight: lighter;
}
h2 {
	color: #aaa;
}

table {
	width: 100%;
}
td, th {
	padding: 15px;
	text-align: left;
}

.inverse {
	padding: 35px;
	background-color: #333;
	color: #fff;
	margin-left: -35px;
	margin-right: -35px;
}
.muted {
	color: #999;
}

/*
 *
 * THE CSS
 *
 */
.md-checkbox {
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
  min-height: 24px;
  position: relative;
}
.md-checkbox label {
  cursor: pointer;
  font-weight: normal;
  padding-left: 30px;
}
.md-checkbox input[type="checkbox"] {
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -30px;
  position: absolute;
}
.md-checkbox input[type="checkbox"] + .checkbox {
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;
  content: " ";
  cursor: pointer;
  display: inline-block;
  height: 20px;
  left: 0;
  margin-left: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  visibility: visible;
  width: 20px;
  -webkit-animation: checkbox-bg-off 0.25s;
  -o-animation: checkbox-bg-off 0.25s;
  animation: checkbox-bg-off 0.25s;
}
.md-checkbox input[type="checkbox"] + .checkbox:after {
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 2px 2px;
  content: " ";
  cursor: pointer;
  height: 8px;
  left: 50%;
  margin-left: -7px;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  width: 14px;
  -webkit-animation: checkbox-marker-off 0.2s;
  -o-animation: checkbox-marker-off 0.2s;
  animation: checkbox-marker-off 0.2s;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform:...

JavaScript

// No soup for You!