less/modules/login.less

0001 //
0002 //  Login screen
0003 // --------------------------------------------------
0004
0005 // Module color variable
0006 @form-color: mix(@base, @inverse, 9%);
0007
0008 .login {
0009   background: url(../img/login/imac.png) 0 0 no-repeat;
0010   background-size: 940px 778px;
0011   color: @inverse;
0012   margin-bottom: 77px;
0013   padding: 38px 38px 267px;
0014   position: relative;
0015 }
0016
0017 .login-screen {
0018   background-color: @firm;
0019   min-height: 317px;
0020   padding: 123px 199px 33px 306px;
0021 }
0022
0023 .login-icon {
0024   left: 200px;
0025   position: absolute;
0026   top: 160px;
0027   width: 96px;
0028
0029   > img {
0030     display: block;
0031     margin-bottom: 6px;
0032     width: 100%;
0033   }
0034   > h4 {
0035     font-size: 17px;
0036     font-weight: 200;
0037     line-height: 34px;
0038     .opacity(95);
0039
0040     small {
0041       color: inherit;
0042       display: block;
0043       font-size: inherit;
0044       font-weight: 700;
0045     }
0046   }
0047 }
0048
0049 // LOGIN FORM
0050 // -----------
0051 .login-form {
0052   background-color: @form-color;
0053   padding: 24px 23px 20px;
0054   position: relative;
0055   .border-radius(6px);
0056
0057   // Ear
0058   &:before {
0059     content: '';
0060     border-style: solid;
0061     border-width: 12px 12px 12px 0;
0062     border-color: transparent @form-color transparent transparent;
0063     height: 0;
0064     position: absolute;
0065     left: -12px;
0066     top: 35px;
0067     width: 0;
0068     -webkit-transform: rotate(360deg); // Make corners smooth
0069   }
0070   .control-group {
0071     margin-bottom: 6px;
0072     position: relative;
0073   }
0074   .login-field {
0075     border-color: transparent;
0076     font-size: 17px;
0077     padding-bottom: 11px;
0078     padding-top: 11px;
0079     text-indent: 3px;
0080     width: 299px;
0081     margin-bottom: 10px !important;
0082
0083     &:focus {
0084       & + .login-field-icon {
0085         color: @firm;
0086       }
0087     }
0088   }
0089   .login-field-icon {
0090     color: mix(@gray, @inverse, 60%);
0091     font-size: 16px;
0092     position: absolute;
0093     right: 13px;
0094     top: 14px;
0095     .transition(.25s);
0096   }
0097 }
0098
0099 .login-link {
0100   color: mix(@gray, @inverse, 60%);
0101   display: block;
0102   font-size: 13px;
0103   margin-top: 15px;
0104   text-align: center;
0105 }
0106
0107 // Retina support
0108 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
0109   .login {
0110     background-image: url(../img/login/imac-2x.png);
0111   }
0112 }
0113