auth-base.scss

/*!
 * Iguana auth/base
 *
 */

@import 'dev.scss';

.body-wrapper.auth-main {
  display: table;
  height: 100%;
  width: 100%;

  .navbar-header {
    .navbar-brand {
      color: $color-absolute-white;
      font-family: 'FuturaPTDemi', sans-serif;
      font-size: 1.6em;
      font-weight: 400;
    }
  }
  .form-container {
    display: table;
    height: 90%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;

    .form-header {
      display: table-caption;
      height: 60px;
      padding: 15px;

      .title {
        font-size: 1.4em;
        margin-top: 0.2em;
      }
    }
    .form-content {
      display: table-cell;
      margin: 0 auto;
      vertical-align: middle;

      .page-form-header {
        margin: 1em;

        .page-title {
          color: $color-white;
          font-size: 4.09em;
          font-weight: bold;
          position: relative;
          text-align: center;
          @include no-text-shadow;
          top: 18px;
          z-index: 10;
        }
      }
      .form-content-inner-login-state {
        margin: 0 auto;
      }
      .login-passphrase-textarea {
        border-radius: 4px;
        display: block;
        font-size: 1.344em;
        @include bold;
        height: 112px;
        line-height: 1.224em;
        margin: 28px auto;
        padding: 20px 40px 16px 40px;
      }
    }
  }
  .passphrase-section {
    display: table;
    height: 90%;
    position: absolute;
    width: 100%
  }
  .inner-passphrase-section {
    display: table-cell;
    margin: 0 auto;
    vertical-align: middle;
    width: 50%;
  }
  .login-passphrase-textarea {
    display: block;
    font-size: 1.24em;
    @include bold;
    height: 85px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 50px;
    resize: none;
    @include center;
    width: 100%;
  }
  .btn-signin-account:not([disabled='disabled']) {
    @include orange-gradient;
  }
  .btn-signin-account {
    margin-top: 50px;
    max-width: none;
    text-shadow: 0 1px 3px rgba-black(0.25);
    width: 100%;
  }
  .error-msg {
    color: $color-red;
  }
  .error-field {
    border: 1px solid $color-red;
  }
  .login-input-directions-msg {
    margin: 0 auto;
    text-align: center !important;
  }
  .advanced-benefits {
    font-size: 1.1em;
    font-weight: bold;
  }
}
.auth-orange-gradient {
  @include login-orange-image;
}
.auth-main {
  .coin {
    display: inline-block;
    padding: 20px;
    width: 130px;

    input[type='checkbox'] + label {
      display: inline-block;
    }
  }
  .coin.block {
    display: block;
    padding: 0;
    width: 100%;
  }
  .container-fluid {
    display: table-cell;
    vertical-align: middle;
  }
  .box-shadow-all {
    box-shadow: 0 1px 5px 1px $login-boxshadow-color;
  }
  .box-shadow-bottom {
    box-shadow: 0 1px 1px 0 rgba-black(0.2);
  }
  .login-or-delim {
    color: $color-white;
    font-family: sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    padding: 1.38em 0;
    @include center;
  }
  .login-add-coin-selection {
    text-align: center;

    textarea {
      @include proxima;
      @include bold;
      border: solid 1px $color-medium-gray;
      border-radius: $border-radius-smaller;
      font-size: 1.16em;
      height: 120px;
      padding: 10px 12px;
      resize: none;
      width: 100%;
    }
  }
  .passphrase-container {
    @include proxima;
    @include bold;
    font-size: 1.3em;
    line-height: 1.3em;
    background: $color-white;
    border-radius: $border-radius-smaller;
    box-shadow: 0 2px 3px 2px rgba-black(0.12);
    padding: 39px 12px;
    margin: 30px auto;
    width: 100%;

    .title {
      font-family: sans-serif;
      font-size: 0.91em;
      font-weight: normal;
      margin-bottom: 4px;
    }
  }
  .bi_interface-cross {
    color: $color-white;
    font-size: 1.2em;
    left: 10px;
    position: relative;
    text-shadow: 1px 1px 3px rgba-black(0.3);
    top: 10px;
    z-index: 20;
  }
  .bi_interface-arrow-left {
    color: $color-white;
    font-size: 2.26em;
    left: 0.3em;
    position: absolute;
    text-shadow: 1px 1px 3px rgba-black(0.3);
    top: 0.38em;

    ::before {
      font-weight: 900;
    }
  }
  .error {
    border: solid 1px $color-red;
  }
  .center {
    text-align: center;
  }
  .advanced-benefits {
    color: $color-white;
  }
  .create-account-form,
  .login-account-form,
  .verify-passphrase-form {
    .login-input-directions {
      font-size: 1.05em;
      margin-bottom: 0;
      margin-top: 4em;
      /* csslint ignore:start */
      @include offset-bottom-md;
      @include center;
      /* csslint ignore:end */
      word-wrap: break-word;
    }
  }
  .header {
    background-color: $login-header-color-bg;
    color: $color-absolute-white;
    padding: 15px 10px;
    text-align: center;
  }
  .form-content {
    color: $login-content-color-bg;
    font-size: 1.05em;
    margin: 0 auto;
  }
  .form-header {
    height: 50px;
    @include orange-gradient;

    .title {
      font-size: 1.46em;
      margin-top: 0.1em;
    }
  }
  .btn {
    @include proxima;
    @include bold;
    color: $color-white;
    font-size: 1.20em;
    height: 40px;
  }
  .btn:hover,
  .btn:focus {
    color: $color-white;
  }
  .btn.btn-hover-orange:not([disabled]):hover,
  .btn.btn-hover-orange:not([disabled]):focus,
  .btn.row.btn-signin:not([disabled]):hover,
  .btn.row.btn-signup:not([disabled]):hover {
    background: $login-button-hover-color;
  }
  .btn.row.btn-signin,
  .btn.row.btn-signup {
    -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color=#FE470D)';/*IE 8*/
    -moz-box-shadow: 0 0 5px 2px rgba(254, 71, 13, 0.3);/*FF 3.5+*/
    -webkit-box-shadow: 0 0 5px 2px rgba(254, 71, 13, 0.3);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
    box-shadow: 0 0 5px 2px rgba(254, 71, 13, 0.3);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#FE470D); /*IE 5.5-7*/
    text-shadow: 0 1px 3px rgba-black(0.25);
    /* csslint ignore:start */
    @include orange-gradient;
    /* csslint ignore:end */
  }
  .btn.row {
    display: block;
    font-size: 1.02em;
    height: 34px;
    width: 100%;
    max-width: 300px;
  }
  .checkbox {
    display: inline-block;
  }
  .label-text {
    @include cursor-pointer;
    font-size: 1.09em;
  }
  input[type='checkbox'] {
    display: none;
  }
  input[type='checkbox'] + label {
    display: block;
    font-weight: normal;
    margin-bottom: 0.44em;
    text-align: center;

    .box {
      background: transparent;
      border: solid 2px $color-medium-gray;
      border-radius: $border-radius-smaller;
      display: inline-block;
      height: 20px;
      margin: 0 16px 2px 1px;
      vertical-align: middle;
      width: 20px;
    }
  }
  input[type='checkbox']:checked + label .box {
    background: $color-orange;
    border-color: $color-orange;
  }
  input[type='checkbox']:checked + label .box:before {
    @include budicon;
    color: $color-white;
    content: '\eb23';
    font-weight: bold;
    position: relative;
    top: -1px;
  }
  .generated-passhprase-hidden {
    height: 1px;
    opacity: 0;
  }
  .paste-from-clipboard-link {
    border-bottom: dotted 1px $color-black;
    padding-top: 2px;
  }
  .login-add-coin-selection-title {
    background: $color-white;
    border-radius: $border-radius-smaller;
    box-shadow: 0 3px 10px 3px rgba-black(0.065);
    color: $login-coin-selection-color;
    font-size: 1.03em;
    @include bold;
    margin: 0 auto;
    max-width: 300px;
    padding: 7px 0;
    width: auto;

    .small {
      font-size: 0.9em;
    }
  }
}
.auth-main .btn.disabled,
.auth-main .btn.disabled:focus,
.modal .btn.disabled {
  background: $login-button-disabled-color;
  pointer-events: none;
  text-shadow: none;
}
.btn-group .dropdown-button-style {
  background-color: $color-absolute-white;
  color: $dropdown-button-style-color;
  height: 60px;
}
.dropdown-fee .btn-group .dropdown-button-style:hover {
  background-color: $color-absolute-white;
  color: $dropdown-button-style-color;
}
.pop-form {
  .segment {
    .segment-select {
      .send-coin-line-height {
        line-height: 14px;
      }
      .line-height-empty {
        height: inherit;
      }
    }
  }
}
.terms-condition-bold {
  font-weight: 700;
}