less/patternfly/login.less

   1 //
   2 // Login
   3 // --------------------------------------------------
   4
   5 .login-pf {
   6   height: 100%;
   7   #brand {
   8     position: relative;
   9     top: -70px;
  10     img {
  11       display: block;
  12       height: 18px;
  13       margin: 0 auto;
  14       max-width: 100%;
  15       @media (min-width: @screen-sm-min) {
  16         margin: 0;
  17         text-align: left;
  18       }
  19     }
  20   }
  21   #badge {
  22     display: block;
  23     margin: 20px auto 70px;
  24     position: relative;
  25     text-align: center;
  26     @media (min-width: @screen-sm-min) {
  27       float: right;
  28       margin-right: 64px;
  29       margin-top: 50px;
  30     }
  31   }
  32   body {
  33     background: @login-bg-color url("@{img-path}/@{img-bg-login}") repeat-x 50% 0;
  34     background-size: auto;
  35     color: #fff;
  36     @media (min-width: @screen-sm-min) {
  37       background-size: 100% auto;
  38     }
  39   }
  40   .container {
  41     background-color: @login-container-bg-color;
  42     background-color: @login-container-bg-color-rgba;
  43     clear: right;
  44     padding-bottom: 40px;
  45     padding-top: 20px;
  46     width: auto;
  47     @media (min-width: @screen-sm-min) {
  48       bottom: 13%;
  49       padding-left: 80px;
  50       position: absolute;
  51       width: 100%;
  52     }
  53     .details {
  54       p:first-child {
  55         border-top: 1px solid #474747;
  56         padding-top: 25px;
  57         margin-top: 25px;
  58       }
  59       @media (min-width: @screen-sm-min) {
  60         p:first-child {
  61           border-top: 0;
  62           padding-top: 0;
  63           margin-top: 0;
  64         }
  65         border-left: 1px solid #474747;
  66         padding-left: 40px;
  67       }
  68       p {
  69         margin-bottom: 2px;
  70       }
  71     }
  72     .form-horizontal {
  73       .control-label {
  74         font-size: @font-size-base + 1;
  75         font-weight: 400;
  76         text-align: left;
  77       }
  78       .form-group:last-child {
  79         &, .help-block:last-child {
  80           margin-bottom: 0;
  81         }
  82       }
  83     }
  84     .help-block {
  85       color: #fff;
  86     }
  87     .login {
  88       @media (min-width: @screen-sm-min) {
  89         padding-right: 40px;
  90       }
  91     }
  92     .submit {
  93       text-align: right;
  94     }
  95   }
  96 }
  97
  98 .ie8.login-pf {
  99   #badge {
 100     background: url('@{img-path}/@{img-badge-ie8}') no-repeat;
 101     height: @img-badge-ie8-height;
 102     width: @img-badge-ie8-width;
 103     img {
 104       width: 0;
 105     }
 106   }
 107   #brand {
 108     background: url('@{img-path-alt}/@{img-brand-lg-ie8}') no-repeat center;
 109     background-size: cover auto;
 110     @media (min-width: @screen-sm-min) {
 111       background-position: 0 0;
 112     }
 113     img {
 114       width: 0;
 115     }
 116   }
 117 }