Give the floating action button a slash effect

sky/examples/fn/widgets/floating_action_button.dart

Index: sky/examples/fn/widgets/floating_action_button.dart
diff --git a/sky/examples/fn/widgets/floating_action_button.dart b/sky/examples/fn/widgets/floating_action_button.dart
index cdb446b46e95a41f9f7309046eb595bd00ee3a66..a9a957b7a0f5de5e5cae7c6d41e1db4670878d22 100644
--- a/sky/examples/fn/widgets/floating_action_button.dart
+++ b/sky/examples/fn/widgets/floating_action_button.dart
@@ -1,25 +1,53 @@
 part of widgets;
 
-class FloatingActionButton extends StyleComponent {
-
+class FloatingActionButton extends MaterialComponent {
   // TODO(rafaelw): Ganesh has problems with box shadows
   // box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 
   static final Style _style = new Style('''
     position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     bottom: 16px;
     right: 16px;
+    z-index: 5;
+    transform: translateX(0);
     width: 56px;
     height: 56px;
     background-color: #F44336;
     color: white;
     border-radius: 28px;'''
   );
+  static final Style _clipStyle = new Style('''
+    transform: translateX(0);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-clip-path: circle(28px at center);''');
+
+  Node content;
+
+  FloatingActionButton({ Object key, this.content }) : super(key: key);
+
+  Node render() {
+    List<Node> children = [super.render()];
 
-  Style get style => _style;
+    if (content != null)
+      children.add(content);
 
-  FloatingActionButton({ Object key, Node content }) : super(key: key, content: content);
+    return new Container(
+      key: "Container",
+      style: _style,
+      children: [
+        new Container(
+          key: "Clip",
+          style: _clipStyle,
+          children: children
+        )
+      ]
+    );
+  }
 }