add sass mode

2013-02-09 20:51:07 +04:00 · 2013-02-09 20:51:07 +04:00 · b4f799770a
commit b4f799770a
parent 0c318fa8c0
7 changed files with 181 additions and 3 deletions
--- a/demo/kitchen-sink/docs/sass.sass
+++ b/demo/kitchen-sink/docs/sass.sass
@ -0,0 +1,39 @@
+// sass ace mode;
+
+@import url(http://fonts.googleapis.com/css?family=Ace:700)
+
+html, body
+  :background-color #ace
+  text-align: center
+  height: 100%
+  /*;*********;
+    ;comment  ;
+    ;*********;
+
+.toggle
+  $size: 14px
+
+  :background url(http://subtlepatterns.com/patterns/dark_stripes.png)
+  border-radius: 8px
+  height: $size
+
+  &:before
+    $radius: $size * 0.845
+    $glow: $size * 0.125
+
+    box-shadow: 0 0 $glow $glow / 2 #fff
+    border-radius: $radius
+    
+    &:active
+      ~ .button
+        box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4)      
+      ~ .label
+        font-size: 40px
+        color: rgba(0,0,0,0.45)
+
+    &:checked      
+      ~ .button
+        box-shadow: 0 15px 25px -4px #ace
+      ~ .label
+        font-size: 40px
+        color: #c9c9c9