Adding transition exercise

jakearchibald · Oct 8, 2012 · a53a4fc · a53a4fc
1 parent ce43137
commit a53a4fc
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/transition-mixin/bin/dev.sh b/transition-mixin/bin/dev.sh
@@ -0,0 +1,2 @@
+sass -l --update style.scss:style.css
+sass -l --watch  style.scss:style.css
diff --git a/transition-mixin/bin/prod.sh b/transition-mixin/bin/prod.sh
@@ -0,0 +1 @@
+sass --style compressed --update style.scss:style.css
diff --git a/transition-mixin/index.html b/transition-mixin/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+		<input type="checkbox" id="toggler">
+		<label for="toggler">Toggle to animate box</label>
+		<div class="box"></div>
+	</body>
+</html>
diff --git a/transition-mixin/style.scss b/transition-mixin/style.scss
@@ -0,0 +1,12 @@
+.box {
+	background: red;
+	position: relative;
+	width: 100px;
+	height: 100px;
+	//@include transition(all 1s ease-in-out);
+
+	#toggler:checked ~ & {
+		background: green;
+		left: 300px;
+	}
+}