sdnr/wireless-transport/code-Carbon-SR1/apps/dlux/dlux-web/src/common/login/login.less

   1 /* login pages */
   2
   3 .login-container {
   4   width:375px;
   5   margin:0 auto;
   6 }
   7
   8 .login-layout {
   9   background-color:#1D2024;
  10  .main-container:after {
  11         display:none;
  12  }
  13
  14  .main-content {
  15         margin-left:0;
  16         min-height:100%;
  17         padding-left: 15px;
  18         padding-right:15px;
  19  }
  20
  21
  22  label {
  23         margin-bottom:11px;
  24  }
  25
  26
  27  .widget-box {
  28         visibility:hidden;
  29         position:absolute;
  30         overflow:hidden;
  31         width:100%;
  32
  33         border-bottom:none;
  34         box-shadow:none;
  35         padding:6px;
  36         background-color:#394557;
  37
  38         .transform(~"scale(0,1) translate(-150px)");
  39         &.visible {
  40                 visibility:visible;
  41                 .transform(~"scale(1,1) translate(0)");
  42
  43                 .transition(~"all .3s ease");
  44                 -o-transition: none;/* too slow */
  45                 -webkit-transition: none;/* works in chrome but not in safari, never scales back to 1! */
  46         }
  47
  48         .widget-main {
  49                 padding:16px 36px 36px;
  50                 background:#F7F7F7;
  51                 form {
  52                         margin:0;
  53                 }
  54         }
  55         .widget-body .toolbar > div > a {
  56                 font-size:15px;
  57                 font-weight:400;
  58                 text-shadow:1px 0px 1px rgba(0,0,0,0.25);
  59         }
  60  }
  61
  62
  63 }
  64
  65
  66
  67
  68 .login-box {
  69   .forgot-password-link { color:#FE9; }
  70   .user-signup-link { color:#CF7; }
  71
  72   .toolbar {
  73         background:#5090C1;
  74         border-top:2px solid #597597;
  75         > div {
  76                 width:50%;
  77                 display:inline-block;
  78                 padding:9px 0 11px;
  79
  80                 &:first-child {//the first link
  81                         float:left;
  82                         text-align:left;
  83                         > a {
  84                                 margin-left:11px;
  85                         }
  86
  87                         + div {//the next one
  88                                 float:right;
  89                                 text-align:right;
  90                                 > a {
  91                                         margin-right:11px;
  92                                 }
  93                         }
  94                 }
  95         }
  96   }
  97 }
  98
  99
 100
 101
 102 .forgot-box .toolbar {
 103  background:#C16050;
 104  border-top:2px solid #976559;
 105  padding:9px 18px;
 106 }
 107
 108 .signup-box  .toolbar {
 109  background:#76B774;
 110  border-top:2px solid #759759;
 111  padding:9px 18px;
 112 }
 113
 114 .forgot-box .back-to-login-link  , .signup-box .back-to-login-link{
 115  color:#FE9;
 116  font-size:14px;
 117  font-weight:bold;
 118  text-shadow:1px 0px 1px rgba(0,0,0,0.25);
 119 }
 120
 121
 122
 123
 124
 125 /* social login */
 126 .login-layout .login-box .widget-main {
 127         padding-bottom:16px;
 128 }
 129 .login-box {
 130
 131  .social-or-login {
 132         margin-top:4px;
 133
 134         position:relative; z-index:1;
 135         :first-child {
 136                 display:inline-block;
 137                 background: #F7F7F7;
 138                 padding: 0 8px;
 139                 color: #5090C1; font-size: 13px;
 140         }
 141
 142         &:before {
 143                 content:""; display:block;
 144                 position:absolute; z-index:-1;
 145                 top:50%; left:0; right:0;
 146                 border-top:1px dotted #A6C4DB;
 147         }
 148  }
 149
 150  .social-login {
 151         margin-top:12px;
 152         a {
 153                 border-radius:100%;
 154                 width:42px; height:42px; line-height:46px;
 155                 padding:0;
 156                 margin:0 1px;
 157                 border:none;
 158                 > [class*="icon-"] {
 159                         font-size:24px;
 160                         margin:0;
 161                 }
 162         }
 163  }
 164
 165 }
 166
 167
 168
 169
 170
 171 /* loginbox */
 172 @media only screen and (max-width: @screen-xs) {
 173 .login-layout .widget-box .widget-main {
 174  padding:16px;
 175 }
 176 }
 177 @media only screen and (max-width: @screen-xs) {
 178 .login-container {
 179  width:98%;
 180 }
 181 .login-layout .widget-box {
 182  padding:0;
 183 }
 184
 185 .login-box .toolbar > div {
 186  width:auto;
 187 }
 188 }
 189 @media only screen and (max-width: @screen-xs-max) {
 190 .login-layout .widget-box.visible {
 191  .transition(~"none");
 192 }
 193 }