Add seed code for sdnr app based on ONF Centennial
[ccsdk/apps.git] / sdnr / wireless-transport / code-Carbon-SR1 / apps / dlux / dlux-web / src / common / login / login.less
diff --git a/sdnr/wireless-transport/code-Carbon-SR1/apps/dlux/dlux-web/src/common/login/login.less b/sdnr/wireless-transport/code-Carbon-SR1/apps/dlux/dlux-web/src/common/login/login.less
new file mode 100644 (file)
index 0000000..a4f9912
--- /dev/null
@@ -0,0 +1,193 @@
+/* login pages */
+
+.login-container {
+  width:375px;
+  margin:0 auto;
+}
+
+.login-layout {
+  background-color:#1D2024;
+ .main-container:after {
+       display:none;
+ }
+
+ .main-content {
+       margin-left:0;
+       min-height:100%;
+       padding-left: 15px;
+       padding-right:15px;
+ }
+
+
+ label {
+       margin-bottom:11px;
+ }
+
+ .widget-box {
+       visibility:hidden;
+       position:absolute;       
+       overflow:hidden;
+       width:100%;
+        
+       border-bottom:none;
+       box-shadow:none;
+       padding:6px;
+       background-color:#394557;
+        
+       .transform(~"scale(0,1) translate(-150px)");    
+       &.visible {
+               visibility:visible;
+               .transform(~"scale(1,1) translate(0)");
+
+               .transition(~"all .3s ease");
+               -o-transition: none;/* too slow */
+               -webkit-transition: none;/* works in chrome but not in safari, never scales back to 1! */
+       }
+       
+       .widget-main {
+               padding:16px 36px 36px;
+               background:#F7F7F7;
+               form {
+                       margin:0;
+               }
+       }
+       .widget-body .toolbar > div > a {
+               font-size:15px;
+               font-weight:400;
+               text-shadow:1px 0px 1px rgba(0,0,0,0.25); 
+       }
+ }
+}
+
+
+
+
+.login-box {
+  .forgot-password-link { color:#FE9; }
+  .user-signup-link { color:#CF7; }
+  
+  .toolbar {
+       background:#5090C1;
+       border-top:2px solid #597597;
+       > div {
+               width:50%;
+               display:inline-block;
+               padding:9px 0 11px;
+
+               &:first-child {//the first link
+                       float:left;
+                       text-align:left;
+                       > a {
+                               margin-left:11px;
+                       }
+                       
+                       + div {//the next one
+                               float:right;
+                               text-align:right;
+                               > a {
+                                       margin-right:11px;
+                               }
+                       }
+               }
+       }
+  }
+}
+
+
+
+
+.forgot-box .toolbar {
+ background:#C16050;
+ border-top:2px solid #976559;
+ padding:9px 18px;
+}
+
+.signup-box  .toolbar {
+ background:#76B774;
+ border-top:2px solid #759759;
+ padding:9px 18px;
+}
+
+.forgot-box .back-to-login-link  , .signup-box .back-to-login-link{
+ color:#FE9;
+ font-size:14px;
+ font-weight:bold;
+ text-shadow:1px 0px 1px rgba(0,0,0,0.25); 
+}
+
+
+
+
+
+/* social login */
+.login-layout .login-box .widget-main {
+       padding-bottom:16px;
+}
+.login-box {
+
+ .social-or-login {
+       margin-top:4px;
+        
+       position:relative; z-index:1;
+       :first-child {
+               display:inline-block;
+               background: #F7F7F7;
+               padding: 0 8px;
+               color: #5090C1; font-size: 13px;
+       }
+       
+       &:before {
+               content:""; display:block;
+               position:absolute; z-index:-1;
+               top:50%; left:0; right:0;
+               border-top:1px dotted #A6C4DB;
+       }
+ }
+
+ .social-login {
+       margin-top:12px;
+       a {
+               border-radius:100%;
+               width:42px; height:42px; line-height:46px;
+               padding:0;
+               margin:0 1px;
+               border:none;
+               > [class*="icon-"] {
+                       font-size:24px;
+                       margin:0;
+               }
+       }
+ }
+
+}
+
+
+
+
+
+/* loginbox */
+@media only screen and (max-width: @screen-xs) {
+.login-layout .widget-box .widget-main {
+ padding:16px;
+}
+}
+@media only screen and (max-width: @screen-xs) {
+.login-container {
+ width:98%;
+}
+.login-layout .widget-box {
+ padding:0;
+}
+
+.login-box .toolbar > div {
+ width:auto;
+}
+}
+@media only screen and (max-width: @screen-xs-max) {
+.login-layout .widget-box.visible {
+ .transition(~"none");
+}
+}