Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | @import '../global/_variables'; // global variables. |
| 2 | @import '../global/components/_mixins'; // global mixings. |
||
| 3 | |||
| 4 | /*** |
||
| 5 | Login page |
||
| 6 | ***/ |
||
| 7 | |||
| 8 | /* bg color */ |
||
| 9 | $bg-color: #364150; |
||
| 10 | |||
| 11 | |||
| 12 | .login { |
||
| 13 | background-color: $bg-color !important; |
||
| 14 | } |
||
| 15 | |||
| 16 | .login .logo { |
||
| 17 | margin: 0 auto; |
||
| 18 | margin-top: 60px; |
||
| 19 | padding: 15px; |
||
| 20 | text-align: center; |
||
| 21 | } |
||
| 22 | |||
| 23 | .login .content { |
||
| 24 | background-color: lighten(#eceef1, 10%); |
||
| 25 | @include border-radius(7px); |
||
| 26 | width: 400px; |
||
| 27 | margin: 40px auto 10px auto; |
||
| 28 | padding: 30px; |
||
| 29 | padding-top: 10px; |
||
| 30 | overflow: hidden; |
||
| 31 | position: relative; |
||
| 32 | } |
||
| 33 | |||
| 34 | .login .content h3 { |
||
| 35 | color: #4db3a5; |
||
| 36 | text-align: center; |
||
| 37 | font-size: 28px; |
||
| 38 | font-weight: 400 !important; |
||
| 39 | } |
||
| 40 | |||
| 41 | .login .content h4 { |
||
| 42 | color: #555; |
||
| 43 | } |
||
| 44 | |||
| 45 | .login .content .hint { |
||
| 46 | color: #999; |
||
| 47 | padding: 0; |
||
| 48 | margin: 15px 0 7px 0; |
||
| 49 | } |
||
| 50 | |||
| 51 | .login .content .login-form, |
||
| 52 | .login .content .forget-form { |
||
| 53 | padding: 0px; |
||
| 54 | margin:0px; |
||
| 55 | } |
||
| 56 | |||
| 57 | .login .content .form-control { |
||
| 58 | border: none; |
||
| 59 | background-color: #dde3ec; |
||
| 60 | height: 43px; |
||
| 61 | color: #8290a3; |
||
| 62 | border: 1px solid #dde3ec; |
||
| 63 | |||
| 64 | &:focus, |
||
| 65 | &:active { |
||
| 66 | border: 1px solid #c3ccda; |
||
| 67 | } |
||
| 68 | |||
| 69 | @include placeholder(#8290a3); |
||
| 70 | } |
||
| 71 | |||
| 72 | .login .content select.form-control { |
||
| 73 | padding-left: 9px; |
||
| 74 | padding-right: 9px; |
||
| 75 | } |
||
| 76 | |||
| 77 | .login .content .forget-form { |
||
| 78 | display: none; |
||
| 79 | } |
||
| 80 | |||
| 81 | .login .content .register-form { |
||
| 82 | display: none; |
||
| 83 | } |
||
| 84 | |||
| 85 | .login .content .form-title { |
||
| 86 | font-weight: 300; |
||
| 87 | margin-bottom: 25px; |
||
| 88 | } |
||
| 89 | |||
| 90 | .login .content .form-actions { |
||
| 91 | clear: both; |
||
| 92 | border: 0px; |
||
| 93 | border-bottom: 1px solid #eee; |
||
| 94 | padding: 25px 30px 25px 30px; |
||
| 95 | margin-left: -30px; |
||
| 96 | margin-right: -30px; |
||
| 97 | |||
| 98 | > .btn { |
||
| 99 | margin-top: -2px; |
||
| 100 | } |
||
| 101 | } |
||
| 102 | |||
| 103 | .login-options { |
||
| 104 | margin-top: 30px; |
||
| 105 | margin-bottom: 30px; |
||
| 106 | overflow: hidden; |
||
| 107 | } |
||
| 108 | |||
| 109 | .login-options h4 { |
||
| 110 | float: left; |
||
| 111 | font-weight: 600; |
||
| 112 | font-size: 15px; |
||
| 113 | color: #7d91aa !important; |
||
| 114 | } |
||
| 115 | |||
| 116 | .login-options .social-icons { |
||
| 117 | float: right; |
||
| 118 | padding-top: 3px; |
||
| 119 | } |
||
| 120 | |||
| 121 | .login-options .social-icons li a { |
||
| 122 | border-radius: 15px 15px 15px 15px !important; |
||
| 123 | -moz-border-radius: 15px 15px 15px 15px !important; |
||
| 124 | -webkit-border-radius: 15px 15px 15px 15px !important; |
||
| 125 | } |
||
| 126 | |||
| 127 | .login .content .form-actions .checkbox { |
||
| 128 | margin-left: 0; |
||
| 129 | padding-left: 0; |
||
| 130 | } |
||
| 131 | |||
| 132 | .login .content .forget-form .form-actions { |
||
| 133 | border: 0; |
||
| 134 | margin-bottom: 0; |
||
| 135 | padding-bottom: 20px; |
||
| 136 | } |
||
| 137 | |||
| 138 | .login .content .register-form .form-actions { |
||
| 139 | border: 0; |
||
| 140 | margin-bottom: 0; |
||
| 141 | padding-bottom: 0px; |
||
| 142 | } |
||
| 143 | |||
| 144 | .login .content .form-actions .btn { |
||
| 145 | margin-top: 1px; |
||
| 146 | } |
||
| 147 | |||
| 148 | .login .content .form-actions .btn { |
||
| 149 | font-weight: 600; |
||
| 150 | padding: 10px 20px !important; |
||
| 151 | } |
||
| 152 | |||
| 153 | .login .content .form-actions .btn-default { |
||
| 154 | font-weight: 600; |
||
| 155 | padding: 10px 25px !important; |
||
| 156 | color: #6c7a8d; |
||
| 157 | background-color: #ffffff; |
||
| 158 | border: none; |
||
| 159 | } |
||
| 160 | |||
| 161 | .login .content .form-actions .btn-default:hover { |
||
| 162 | background-color: #fafaff; |
||
| 163 | color: #45b6af; |
||
| 164 | } |
||
| 165 | |||
| 166 | .login .content .forget-password { |
||
| 167 | font-size: 14px; |
||
| 168 | float: right; |
||
| 169 | display: inline-block; |
||
| 170 | margin-top: 10px; |
||
| 171 | } |
||
| 172 | |||
| 173 | .login .content .check { |
||
| 174 | color: #8290a3; |
||
| 175 | } |
||
| 176 | |||
| 177 | .login .content .rememberme { |
||
| 178 | margin-left: 8px; |
||
| 179 | |||
| 180 | } |
||
| 181 | |||
| 182 | .login .content .create-account { |
||
| 183 | margin: 0 -40px -30px -40px; |
||
| 184 | padding: 15px 0 17px 0; |
||
| 185 | text-align: center; |
||
| 186 | background-color: #6c7a8d; |
||
| 187 | @include border-radius(0 0 7px 7px); |
||
| 188 | |||
| 189 | > p { |
||
| 190 | margin: 0; |
||
| 191 | } |
||
| 192 | } |
||
| 193 | |||
| 194 | .login .content .create-account p a { |
||
| 195 | font-weight: 600; |
||
| 196 | font-size: 14px; |
||
| 197 | color: #c3cedd; |
||
| 198 | } |
||
| 199 | |||
| 200 | .login .content .create-account a { |
||
| 201 | display: inline-block; |
||
| 202 | margin-top: 5px; |
||
| 203 | } |
||
| 204 | |||
| 205 | /* footer copyright */ |
||
| 206 | .login .copyright { |
||
| 207 | text-align: center; |
||
| 208 | margin: 0 auto 30px 0; |
||
| 209 | padding: 10px; |
||
| 210 | color: lighten($bg-color, 30%); |
||
| 211 | font-size: 13px; |
||
| 212 | } |
||
| 213 | |||
| 214 | @media (max-width: 440px) { |
||
| 215 | /*** |
||
| 216 | Login page |
||
| 217 | ***/ |
||
| 218 | .login .logo { |
||
| 219 | margin-top: 10px; |
||
| 220 | } |
||
| 221 | |||
| 222 | .login .content { |
||
| 223 | width: 280px; |
||
| 224 | margin-top: 10px; |
||
| 225 | } |
||
| 226 | |||
| 227 | .login .content h3 { |
||
| 228 | font-size: 22px; |
||
| 229 | } |
||
| 230 | |||
| 231 | .forget-password { |
||
| 232 | display: inline-block; |
||
| 233 | margin-top: 20px; |
||
| 234 | } |
||
| 235 | |||
| 236 | .login-options .social-icons { |
||
| 237 | float: left; |
||
| 238 | padding-top: 3px; |
||
| 239 | } |
||
| 240 | |||
| 241 | .login .checkbox { |
||
| 242 | font-size: 13px; |
||
| 243 | } |
||
| 244 | |||
| 245 | } |