Merge remote-tracking branch 'origin/passwordless' into passwordless

WeTransfer · Aug 20, 2015 · 7e61fde · 7e61fde
2 parents a67468f + fa3bf80
commit 7e61fde
Show file tree

Hide file tree

Showing 9 changed files with 1,071 additions and 2,102 deletions.
diff --git a/build/design-tools.js b/build/design-tools.js
diff --git a/css/index.css b/css/index.css
@@ -27,11 +27,10 @@ body.frame {
 }
 .auth0-loading {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 4px;
+  left: 44.5%;
   width: 30px;
   height: 30px;
-  margin: -20px 0 0 -20px;
   border-width: 2px;
   border-style: solid;
   border-color: rgba(0,0,0,0.4) rgba(0,0,0,0.4) rgba(0,0,0,0.2) rgba(0,0,0,0.2);
@@ -208,9 +207,11 @@ body.frame {
   display: block;
 }
 .auth0-lock .auth0-lock-header-logo {
-  max-width: 60px;
-  height: 60px;
-  margin: auto auto 10px auto;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+.auth0-lock .auth0-lock-header-logo svg {
+  vertical-align: middle;
 }
 .auth0-lock .auth0-lock-header-placeholder {
   background: #008000;
@@ -433,13 +434,17 @@ body.frame {
   bottom: 0;
   transition: background-color 0.2s ease-in-out;
 }
-.auth0-lock .auth0-lock-submit i {
+.auth0-lock .auth0-lock-submit span {
+  display: inline-block;
   transition: all 0.2s ease-in-out;
 }
+.auth0-lock .auth0-lock-submit span svg {
+  vertical-align: middle;
+}
 .auth0-lock .auth0-lock-submit:hover {
   background: #c43e13;
 }
-.auth0-lock .auth0-lock-submit:hover i {
+.auth0-lock .auth0-lock-submit:hover span {
   transform: scale(1.05);
 }
 .auth0-lock .auth0-lock-submit:focus {
@@ -451,32 +456,9 @@ body.frame {
     position: relative;
   }
 }
-.auth0-lock .auth0-lock-submit i {
-  border: 2.5px solid #fff;
-  width: 40px;
-  height: 40px;
-  display: block;
-  margin: auto;
-  border-radius: 100px;
-}
-.auth0-lock .auth0-lock-submit i:before {
-  content: "p";
-  color: #fff;
-  top: 9.5px;
-  position: relative;
-  font-size: 20px;
-  left: 2px;
-}
 .auth0-lock .auth0-lock-submit[disabled] {
   background: #c43e13;
 }
-.auth0-lock .auth0-lock-submit[disabled] i:before {
-  content: "…";
-  left: 0;
-}
-.auth0-lock .auth0-lock-submit .auth0-loading {
-  top: 26px;
-}
 .auth0-lock .auth0-loading-container {
   position: relative;
   display: none;
@@ -494,7 +476,7 @@ body.frame {
   cursor: initial;
   pointer-events: none;
 }
-.auth0-lock.auth0-lock-mode-loading i {
+.auth0-lock.auth0-lock-mode-loading .auth0-lock-submit span {
   animation-name: fadeOutDownBig;
   animation-duration: 1s;
   animation-fill-mode: both;
@@ -631,13 +613,7 @@ body.frame {
   margin: 30px 0 0 0;
   color: #5c666f;
 }
-.auth0-lock .auth0-lock-badge {
-  display: block;
-  text-align: center;
-  margin-top: 20px;
-  font-size: 20px;
-  position: relative;
-  z-index: -1;
+.auth0-lock .auth0-lock-badge-bottom {
   -webkit-transition: transform 4s ease 1.8s, opacity 1.2s ease 1.8s;
   -webkit-transform: translateY(-200%) scale(0.8);
   transition: transform 0.5s ease 1s, opacity 0.2s ease 0s;
@@ -646,15 +622,19 @@ body.frame {
   left: 0;
   right: 0;
   opacity: 0;
-  font-size: 18px;
+  z-index: -1;
+  text-align: center;
+  margin-top: 20px;
 }
-.auth0-lock .auth0-lock-badge:before {
-  content: "f";
-  transition: color 0.5s;
-  color: rgba(255,255,255,0.4);
+.auth0-lock .auth0-lock-badge-bottom .auth0-lock-badge {
+  display: inline-block;
+}
+.auth0-lock .auth0-lock-badge-bottom .auth0-lock-badge svg {
+  vertical-align: middle;
 }
-.auth0-lock .auth0-lock-badge:hover:before {
-  color: #eb5424;
+.auth0-lock .auth0-lock-badge-bottom .auth0-lock-badge:hover svg g#Lock {
+  fill: #eb5424;
+  fill-opacity: 1;
 }
 .auth0-lock.auth0-lock-opened .auth0-lock-header-bg .auth0-lock-header-bg-inner {
   opacity: 0.4;
@@ -674,7 +654,7 @@ body.frame {
   -webkit-transition: transform 0.6s, opacity 0.6s;
   -webkit-transition-delay: 0.5s;
 }
-.auth0-lock.auth0-lock-opened .auth0-lock-badge {
+.auth0-lock.auth0-lock-opened .auth0-lock-badge-bottom {
   -webkit-transform: translateY(0%) scale(1);
   -webkit-transition-delay: 0;
   transform: translateY(0%) scale(1);
@@ -701,7 +681,7 @@ body.frame {
   -webkit-transition: transform 0.6s, opacity 0.6s;
   -webkit-transition-delay: 0.5s;
 }
-.auth0-lock.auth0-lock-opened-in-frame .auth0-lock-badge {
+.auth0-lock.auth0-lock-opened-in-frame .auth0-lock-badge-bottom {
   -webkit-transform: translateY(0%) scale(1);
   -webkit-transition-delay: 0;
   transform: translateY(0%) scale(1);

diff --git a/css/index.styl b/css/index.styl
@@ -52,11 +52,10 @@ body.frame
 
 .auth0-loading
   position:absolute;
-  top:50%;
-  left:50%;
+  top: 4px;
+  left: 44.5%;
   width:30px;
   height:30px;
-  margin:-20px 0 0 -20px;
   border-width: 2px;
   border-style:solid;
   border-color: rgba(0,0,0,.4) rgba(0,0,0,.4) rgba(0,0,0,.2) rgba(0,0,0,.2);
@@ -222,9 +221,10 @@ body.frame
     display: block;
 
   .auth0-lock-header-logo
-    max-width: 60px;
-    height: 60px;
-    margin: auto auto 10px auto;
+    display inline-block
+    margin-bottom 10px
+    svg
+      vertical-align middle
 
   .auth0-lock-header-placeholder
     background: green;
@@ -440,13 +440,16 @@ body.frame
     position: relative;
     bottom: 0;
     transition: background-color .2s ease-in-out;
-    i
+    span
+      display inline-block
       transition: all .2s ease-in-out;
+      svg
+        vertical-align middle
 
     &:hover
       background: darken(#EA5323, 20%)
 
-      i
+      span
         transform: scale(1.05)
 
     &:focus
@@ -455,34 +458,10 @@ body.frame
     +breakpoint("mobile-landscape")
       position: static;
       position: relative;
-      // border-bottom-right-radius: 5px;
-      // border-bottom-left-radius: 5px;
-
-    i
-      border: 2.5px solid white;
-      width: 40px;
-      height: 40px;
-      display: block;
-      margin: auto;
-      border-radius: 100px;
-      &:before
-        content: "p"
-        color: white
-        top: 9.5px;
-        position: relative;
-        font-size: 20px
-        left: 2px;
 
     &[disabled]
       background: darken(#EA5323, 20%)
 
-      i:before
-        content: "…"
-        left: 0;
-
-    .auth0-loading
-      top: 26px
-
 
   .auth0-loading-container
     position: relative;
@@ -503,10 +482,10 @@ body.frame
       cursor: initial;
       pointer-events: none
 
-    i
-      animation-name: fadeOutDownBig;
-      animation-duration: 1s;
-      animation-fill-mode: both;
+      span
+        animation-name: fadeOutDownBig;
+        animation-duration: 1s;
+        animation-fill-mode: both;
 
     .auth0-loading-container
       animation-name: fadeInDownBig;
@@ -635,13 +614,7 @@ body.frame
     margin: 30px 0 0 0;
     color: #5C666F;
 
-  .auth0-lock-badge
-    display: block;
-    text-align: center;
-    margin-top: 20px;
-    font-size: 20px;
-    position: relative;
-    z-index: -1;
+  .auth0-lock-badge-bottom
     -webkit-transition: transform 4s ease 1.8s, opacity 1.2s ease 1.8s;
     -webkit-transform: translateY(-200%) scale(.8);
     transition: transform .5s ease 1s, opacity .2s ease 0s;
@@ -650,15 +623,20 @@ body.frame
     left: 0;
     right: 0;
     opacity: 0;
-    font-size: 18px;
-    &:before
-      content: "f"
-      transition: color .5s;
-      color: rgba(255,255,255,.4)
+    z-index: -1;
+    text-align: center;
+    margin-top: 20px;
 
-    &:hover
-      &:before
-        color: #EB5424
+    .auth0-lock-badge
+      display: inline-block;
+      svg
+        vertical-align middle
+
+      &:hover
+        svg
+          g#Lock
+            fill #EB5424
+            fill-opacity 1
 
   &.auth0-lock-opened
     .auth0-lock-header-bg
@@ -679,7 +657,7 @@ body.frame
       -webkit-transition: transform .6s, opacity .6s;
       -webkit-transition-delay: .5s;
 
-    .auth0-lock-badge
+    .auth0-lock-badge-bottom
       -webkit-transform: translateY(0%)  scale(1);
       -webkit-transition-delay: 0;
       transform: translateY(0%)  scale(1);
@@ -706,7 +684,7 @@ body.frame
       -webkit-transition: transform .6s, opacity .6s;
       -webkit-transition-delay: .5s;
 
-    .auth0-lock-badge
+    .auth0-lock-badge-bottom
       -webkit-transform: translateY(0%)  scale(1);
       -webkit-transition-delay: 0;
       transform: translateY(0%)  scale(1);

diff --git a/src/header/icon.jsx b/src/header/icon.jsx
@@ -2,11 +2,7 @@ import React from 'react';
 
 export default class Icon extends React.Component {
   render() {
-    const { imageUrl } = this.props;
-    return <img className="auth0-lock-header-logo" src={imageUrl} />;
+    const svgTag = '<svg width="53px" height="60px" viewBox="0 0 53 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" sketch:type="MSArtboardGroup" transform="translate(-276.000000, -3229.000000)" fill="#EB5424"><g id="SMS" sketch:type="MSLayerGroup" transform="translate(153.000000, 3207.000000)"><g id="Group" sketch:type="MSShapeGroup"><g id="Header" transform="translate(-0.500000, 0.000000)"><path d="M165.577374,70.538627 L159.629065,51.9991063 L175.199514,40.5441677 L155.952763,40.5441677 L150.003748,22.005362 L150.001983,22.0003575 L169.251911,22.0003575 L175.201985,40.5423804 L175.201985,40.5420229 L175.206927,40.5391632 C178.662948,51.2959744 175.103847,63.5305423 165.577374,70.538627 L165.577374,70.538627 L165.577374,70.538627 Z M134.429416,70.538627 L134.424474,70.5422016 L149.999159,82 L165.577374,70.5389844 L150.004101,59.0808286 L134.429416,70.538627 L134.429416,70.538627 Z M124.80304,40.5395206 L124.80304,40.5395206 C121.16557,51.8786409 125.387986,63.8937259 134.426239,70.5407718 L134.427651,70.5350523 L140.376666,51.9966041 L124.809394,40.5438102 L144.051556,40.5438102 L150.000924,22.0050045 L150.002336,22 L130.751349,22 L124.80304,40.5395206 L124.80304,40.5395206 Z" id="Shape"></path></g></g></g></g></g></svg>';
+    return <span className="auth0-lock-header-logo" dangerouslySetInnerHTML={{__html: svgTag}} />;
   }
 }
-
-Icon.propTyes = {
-  imageUrl: React.PropTypes.string
-};
diff --git a/src/header/welcome.jsx b/src/header/welcome.jsx
@@ -8,7 +8,7 @@ export default class Welcome extends React.Component {
 
     return (
       <div className="auth0-lock-header-welcome">
-        {imageUrl && <Icon imageUrl={imageUrl} />}
+        {imageUrl && <Icon />}
         <WelcomeMessage name={name}/>
       </div>
     );

diff --git a/src/lock/auth0_badge.jsx b/src/lock/auth0_badge.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default class Badge extends React.Component {
+  render() {
+    const svgTag = '<svg width="18px" height="21px" viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" sketch:type="MSArtboardGroup" transform="translate(-276.000000, -3229.000000)" fill-opacity="0.4" fill="#FFFFFF"><g id="SMS" sketch:type="MSLayerGroup" transform="translate(153.000000, 3207.000000)"><g id="Group" sketch:type="MSShapeGroup"><g id="Header" transform="translate(-0.500000, 0.000000)"><path d="M137.790429,38.4848167 L135.770249,32.1883757 L141.058325,28.2980192 L134.521693,28.2980192 L132.501273,22.001821 L132.500673,22.0001214 L139.038385,22.0001214 L141.059165,28.2974122 L141.059165,28.2972908 L141.060843,28.2963196 C142.234586,31.9495762 141.025835,36.1047125 137.790429,38.4848167 L137.790429,38.4848167 L137.790429,38.4848167 Z M127.211877,38.4848167 L127.210199,38.4860307 L132.499714,42.3773585 L137.790429,38.4849381 L132.501393,34.593489 L127.211877,38.4848167 L127.211877,38.4848167 Z M123.942542,28.296441 L123.942542,28.296441 C122.707175,32.147463 124.141203,36.2280579 127.210798,38.4855451 L127.211278,38.4836027 L129.231698,32.1875259 L123.9447,28.2978978 L130.479774,28.2978978 L132.500314,22.0016996 L132.500793,22 L125.962722,22 L123.942542,28.296441 L123.942542,28.296441 Z" id="Shape"></path></g></g></g></g></g></svg>';
+    return <a href="https://auth0.com/" target="_blank" className="auth0-lock-badge" dangerouslySetInnerHTML={{__html: svgTag}} />;
+  }
+}
diff --git a/src/lock/lock.jsx b/src/lock/lock.jsx
@@ -1,6 +1,7 @@
 import React from 'react/addons';
 import Avatar from './avatar';
 import IconButton from '../icon/button';
+import Badge from './auth0_badge';
 import * as l from './index';
 import * as g from '../gravatar/index';
 const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
@@ -49,7 +50,9 @@ export default class Lock extends React.Component {
                 {children}
               </ReactCSSTransitionGroup>
             </div>
-            <a href="https://auth0.com/" target="_blank" className="auth0-lock-badge auth0-lock-icon"/>
+            <span className="auth0-lock-badge-bottom">
+              <Badge />
+            </span>
           </form>
         </div>
       </div>

diff --git a/src/lock/submit_button.jsx b/src/lock/submit_button.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import SubmitIcon from './submit_icon';
 
 export default class SubmitButton extends React.Component {
   render() {
@@ -7,7 +8,7 @@ export default class SubmitButton extends React.Component {
         <div className="auth0-loading-container">
           <div className="auth0-loading" />
         </div>
-        <i className="auth0-lock-icon"/>
+        <SubmitIcon />
       </button>
     );
   }

diff --git a/src/lock/submit_icon.jsx b/src/lock/submit_icon.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default class SubmitIcon extends React.Component {
+  render() {
+    const svgTag = '<svg width="43px" height="42px" viewBox="0 0 43 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="Lock" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -3592.000000)"><g id="SMS" sketch:type="MSLayerGroup" transform="translate(153.000000, 3207.000000)"><g id="Group" sketch:type="MSShapeGroup"><g id="Login" transform="translate(0.000000, 369.000000)"><g id="Btn"><g id="Oval-302-+-Shape" transform="translate(128.000000, 17.000000)"><circle id="Oval-302" stroke="#FFFFFF" stroke-width="2" cx="20.5" cy="20" r="20"></circle><path d="M17.8,15.4 L19.2,14 L25.2,20 L19.2,26 L17.8,24.6 L22.4,20 L17.8,15.4 Z" id="Shape" fill="#FFFFFF"></path></g></g></g></g></g></g></g></svg>';
+    return <span dangerouslySetInnerHTML={{__html: svgTag}} />;
+  }
+}