Add phone mockup.

Author: arielger

index.styl

@@ -64,6 +64,7 @@
 @import 'lib/big-tabs/index';
 @import 'lib/ui-switch/index';
 @import 'lib/switchboard/index';
+@import 'lib/phone-mockup/index';
 @import 'lib/pills/index';
 @import 'lib/browser/index';
 @import 'lib/center-title-block/index';

landing/templates/components.jade

@@ -135,3 +135,11 @@
 
       +playground('switchboard', '', true)
         include ../../lib/switchboard/demo
+        
+    section 
+    
+      h2#phone-mockup Phone mockup
+      p We use this mockup for wrapping mobile screenshots.
+      
+      +playground('phone-mockup', '', true)
+        include ../../lib/phone-mockup/demo

lib/phone-mockup/demo.jade

@@ -0,0 +1,2 @@
+.phone-mockup
+  img(src="https://cdn.auth0.com/styleguide/latest/lib/phone-mockup/img/example-mobile-screenshot.png", alt="Mobile example screenshot")

lib/phone-mockup/img/example-mobile-screenshot.png

@@ -0,0 +1,35 @@
+.phone-mockup
+  display block
+  position relative
+  margin 40px auto
+  width 300px
+  border 1px solid #999
+  border-radius 1.2em
+  background-color white
+
+  &:before
+    content ''
+    position absolute
+    width 70px
+    height 8px
+    border 1px solid #999
+    border-radius 0.8em
+    top 16px
+    left 50%
+    transform translateX(-50%);
+
+  &:after
+    content ''
+    width 44px
+    height 44px
+    border 1px solid #999
+    border-radius 50%
+    position absolute
+    bottom 14px
+    left 50%
+    transform translateX(-50%)
+
+  > img
+    max-width calc(100% - 20px)
+    margin 45px 10px 70px 10px
+    border 1px solid #999