devise_safeguard.sass in safeguard-devise-0.0.6

- old
+ new
@@ -1,71 +1,156 @@
-#safeguard-form-token
-  width: 312px
+#safeguard-lean-overlay
+  position: fixed
+  z-index: 100
+  top: 0px
+  left: 0px
+  height: 100%
+  width: 100%
+  background: #000
+  opacity: 0.5
+
+.hidden_field
+  display: none
+
+.safeguard-form .form
+  font-family: 'Open Sans',sans-serif
   font-size: 15px
-  position: relative
+  position: fixed
+  z-index: 11000
   left: 50%
-  margin-left: -166px
-  margin-top: 100px
-  font-family: 'OpenSansRegular', sans-serif
-  .devise-logo-safeguard
-    background: url("devise_logo_safeguard.png") no-repeat
+  width: 400px
+  margin-left: -223px
+  top: 50%
+  border: 1px solid rgba(71, 71, 71, 1)
+  font-weight: normal
+  padding: 10px 10px 10px
+  border-radius: 8px
+  box-shadow: 0px 0px 150px rgba(0, 0, 0, 0.5)
+  background: #348eda
+  margin-top: -180px
+  overflow: hidden
+
+.safeguard-form-button
+  width: auto !important
+  cursor: pointer !important
+  display: inline-block
+  text-align: center
+  font-size: 15px
+  padding: 0 30px
+  border: 1px solid rgba(0, 0, 0, 0.33)
+  color: #fff
+  margin-right: 0px
+  box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.33)
+  font-weight: 300
+  border-radius: 4px
+  height: auto
+  background: rgba(16, 87, 177, 0.7)
+  position: relative
+  top: 2px
+  text-transform: uppercase
+  font-weight: bold
+  height: 63px
+  &:hover
+    background: rgba(16, 87, 177, 1)
+
+.token-serial_number
+  font-size: 18px
+  font-weight: bold
+  color: #fff
+
+.safeguard-form form div
+  position: relative
+  float: left
+  padding: 5px
+
+.token-types
+  width: 90%
+  float: none !important
+  overflow: hidden
+  top: 5px
+  margin: 0 auto
+  input
+    position: absolute
+    margin-left: -19px
+    margin-top: 6px
+
+.safeguard-form form
+  div
+    &.token-types div
+      width: 50%
+      padding: 11px 10px !important
+      margin: 0
+      text-align: center
+      background: rgba(0, 0, 0, 0.67)
+      box-sizing: border-box
+      color: #fff
+      font-size: 13px
+      cursor: pointer
+      &.token-type
+        &.normal
+          float: left
+          border-radius: 5px 0px 0px 5px
+          border-right: 1px solid rgba(0, 0, 0, 0.44)
+          &.checked
+            background: rgba(0, 0, 0, 0.8)
+            box-shadow: inset -4px 0px 4px rgba(0, 0, 0, 0.25)
+        &.smartphone
+          float: right
+          border-radius: 0px 5px 5px 0px
+          &.checked
+            background: rgba(0, 0, 0, 0.8)
+            box-shadow: inset 4px 0px 4px rgba(0, 0, 0, 0.25)
+    &.token-code
+      background: url("/assets/token.svg") no-repeat center
+      width: 54%
+      height: 97px
+      background-size: 200px
+      margin-top: -16px
+      margin-bottom: 8px
+    &.token-message:before
+      content: ''
+      position: absolute
+      width: 450px
+      height: 500px
+      background: rgba(255, 255, 255, 1)
+      left: -25px
+      top: 40px
+      /* border: 1px solid rgba(0, 0, 0, 0.38);
+      border-left: none
+      border-right: none
+  .token-message
     position: relative
     float: left
-    height: 65px
-    width: 100%
     text-align: center
-    left: 37px
-  form
-    background: none repeat scroll 0 0 #FBFBFB
-    border: 1px solid #E5E5E5
-    font-weight: normal
-    height: 160px
-    margin-left: 8px
-    padding: 26px 24px 46px
-  #safeguard-token
-    width: 235px
-    padding: 4px 5px 5px 5px
-    height: 16px
-    color: #333333
-    margin: 5px
-    outline: none
-    height: 28px
-    border: 1px solid #c8c8c8
-    padding: 0px 7px 0px 7px
-    color: #555
-    -webkit-box-shadow: 0px 1px 0px 0px #fff
-    -moz-box-shadow: 0px 1px 0px 0px #fff
-    box-shadow: 0px 1px 0px 0px #fff
-    -webkit-border-radius: 4px
-    -moz-border-radius: 4px
-    border-radius: 4px
-    -moz-background-clip: padding
-    -webkit-background-clip: padding-box
-    background-clip: padding-box
-    background: #fff
-  .button
-    width: 250px
-    padding: 4px 5px 5px 5px
-    height: 16px
-    color: #333333
-    margin: 5px
-    outline: none
-    height: 28px
-    border: 1px solid #c8c8c8
-    padding: 0px 7px 0px 7px
-    color: #555
-    -webkit-box-shadow: 0px 1px 0px 0px #fff
-    -moz-box-shadow: 0px 1px 0px 0px #fff
-    box-shadow: 0px 1px 0px 0px #fff
-    -webkit-border-radius: 4px
-    -moz-border-radius: 4px
-    border-radius: 4px
-    -moz-background-clip: padding
-    -webkit-background-clip: padding-box
-    background-clip: padding-box
-    background: #fff
-  .token-type
-    font-size: 14px
-    position: relative
-    float: left
-    padding-right: 20px
-    padding-bottom: 20px
+    position: absolute
+    width: 98%
+    background: rgba(52, 142, 218, 0.72)
+    top: 10px
+    font-size: 15px
+    line-height: 11px
+    padding: 10px 0 29px
+    color: rgba(0, 0, 0, 0.8)
+
+.safeguard-form-input
+  width: 100px
+  outline: none
+  height: 35px
+  text-align: center
+  font-family: sans-serif
+  padding: 2px 6px 2px 6px
+  color: #555
+  border-radius: 4px
+  background: rgba(0, 0, 0, 0)
+  font-size: 17px
+  position: absolute
+  top: 39px
+  left: 103px
+  border: none
+
+.logo-safeguard
+  background: url("#{APP_CONFIG[" server_url "]}/assets/blue-logo.svg") no-repeat 0px 0px
+  position: relative
+  float: left
+  height: 75px
+  width: 100%
+  text-align: center
+  background-size: 30px