_general.scss

// Border box all the things by default
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  background-color: $html-background-color;
  height: 100%;
}

body {
  color: $text-color;
  @include font();
  font-size: $base-font;
  padding-bottom: 20px;
}

a {
  color: $link-color;
  cursor: pointer; // Use the correct cursor for anchors without an href

  &:active {
    outline: none;
  }

  &:focus {
    outline: 1px dotted $link-color;
  }

  &.no-underline {
    text-decoration: none;
  }
}

noscript {
  color: $error-text-color;
  display: block;
  margin: 160px 0 0 0;
}

#about-mozilla {
  background-image: image-url('mozilla.png');
  background-size: 69px 19px;
  cursor: pointer;
  height: 19px;
  opacity: 0.5;
  position: absolute;
  right: 12px;
  top: 12px;
  transition: opacity $short-transition;
  width: 69px;

  &:hover {
    opacity: 1;
  }

  &:focus {
    outline-color: $html-background-color;
  }
}

#fox-logo {
  background: image-url('firefox.png');
  background-size: 80px 85px;
  height: 85px;
  margin: 0 auto;
  opacity: 0;
  position: relative;
  top: 40px;
  width: 80px;
  z-index: 999;

  &.static {
    opacity: 1;
  }

  // IE7/8 specific hacks to fix the firefox logo
  .lt-ie9 & {
    background: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/firefox.png', sizingMethod='scale')";
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/firefox.png', sizingMethod='scale');
  }

  // IE < 10 does not support CSS transforms
  .lt-ie10 & {
    opacity: 1;
  }
}

// Apply styles to div injected by backbone, rather than to the stage itself.
#main-content {
  background: $content-background-color;
  border-radius: $big-border-radius;
  box-shadow: 0 1px 5px $input-row-border-color;
  margin: -5px auto 0 auto;
  min-height: 450px;
  padding: 60px 40px 40px 40px;
  text-align: center;
  width: 420px;

  .in-content & {
    margin-top: 85px;
  }
}

#stage {
  .js & {
    display: none;
  }

  .lt-ie10 & {
    display: block;
  }
}

header {
  h1,
  h2,
  h3 {
    @include header-font();
    line-height: 1em;
    margin: 0;
  }

  h1 {
    font-size: $large-font;
    font-weight: 200;
    margin: 0 0 32px 0;

    span.service {
      display: block;
      font-size: $medium-font;
      font-weight: 200;
      margin-top: 10px;
    }
  }

  h2 {
    font-size: $large-font;
    font-weight: 200;
  }
}


#legal-header {
  h2 {
    margin: 0 0 30px 0;
    padding: 0;
  }

  h3 {
    font-size: $small-font;
    padding: 5px 0 10px;
  }
}



#legal-footer {
  bottom: 0;
  margin: 10px 0;
  position: absolute;
  text-align: center;
  width: 100%;

  .terms {
    margin-right: 10px;
    text-align: right;
    width: 50%;
  }

  .privacy {
    margin-left: 10px;
    text-align: left;
    width: 50%;
  }

  a {
    color: $faint-text-color;
    font-size: $small-font;
    text-decoration: none;

    &:hover {
      color: $link-color;
      text-decoration: underline;
    }

    &:active {
      outline-color: $html-background-color;
    }
  }
}

section p {
  font-size: $medium-font;

  &.prefill {
    margin-top: 24px;
    word-wrap: break-word;
  }
}

#legal-copy {
  text-align: left;

  p {
    font-size: $base-font;
  }

  ol,
  ul {
    margin-left: 0;
    padding-left: 20px;
  }
}

strong.email {
  display: block;
}

.error,
.success {
  border-radius: $small-border-radius;
  color: $message-text-color;
  display: none;
  margin-bottom: 5px;
  padding: 5px;
  position: relative;
  top: -15px;

  a {
    color: $message-text-color;
  }
}

.error {
  background: $error-background-color;

  &.visible {
    display: block;
  }
}

.success {
  background: $success-background-color;
  display: none;
}

// complete is like success, but without the associated styles.
.complete {
  display: none;
}

.browsehappy {
  display: block;
}

.graphic {
  background-repeat: no-repeat;
  background-size: 150px 130px;
  height: 130px;
  margin: 0 auto;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 150px;
}

.graphic-checkbox {
  background-image: image-url('graphic_checkbox.png');
}

.graphic-mail {
  background-image: image-url('graphic_mail.png');
  margin-bottom: 25px;
  padding-bottom: 10px;
}

.tooltip {
  background: $error-background-color;
  border-radius: $small-border-radius;
  color: $message-text-color;
  left: 3px;
  padding: 5px 12px;
  position: absolute;
  top: -32px;
  white-space: nowrap;
  z-index: 5;
}

/* tooltip caret */
.tooltip:before,
.tooltip::before {
  background: $error-background-color;
  content: '.';
  height: 16px;
  left: 12px;
  position: absolute;
  text-indent: -999px;
  top: 21px;
  transform: rotate(45deg);
  white-space: nowrap;
  width: 16px;
  // The z-index must be -1 or else the caret is displayed on top of the tooltip text
  z-index: -1;
}

//RTL languages need adjusted caret position
html[dir='rtl'] {
  .tooltip:before,
  .tooltip::before {
    top: 19px;
  }
}

/**
 * these are caret's attached to tooltips that hang below the
 * input element. The tooltip's top is set via JS.
 */
html[dir='rtl'] .tooltip-below:before,
html[dir='rtl'] .tooltip-below::before,
.tooltip-below:before,
.tooltip-below::before {
  top: -7px;
}

.input-row {
  margin-bottom: 15px;
  position: relative;
  width: 100%;

  &:hover input {
    border-color: $input-border-color;
  }

  &:last-child {
    margin-bottom: 0;
  }

  button,
  input,
  select {
    @include font();
  }

  input[type='text'],
  input[type='email'],
  input[type='password'],
  select {
    // kills inset shadow on iOS browsers
    -webkit-appearance: none;
    background-color: $mobile-html-background-color;
    border: 1px solid $input-row-border-color;
    border-radius: $big-border-radius;
    box-shadow: inset 0 1px 1px $input-row-box-shadow-color;
    color: $input-text-color;
    font-size: $medium-font;
    height: 45px;
    outline: none;
    padding: 0 $input-left-right-padding;
    position: relative;
    transition-duration: $short-transition;
    transition-property: border-color;
    width: 100%;
    z-index: 2;
  }

  input::-webkit-input-placeholder,
  input:-moz-placeholder, /* Firefox 18- */
  input::-moz-placeholder,  /* Firefox 19+ */
  input:-ms-input-placeholder {
    color: $input-placeholder-color;
  }

  select {
    // autoprefixer does not handle appearance, see https://github.com/ai/autoprefixer/issues/205
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: $content-background-color image-url('ddarrow_inactive.png') 96% center;
    background-repeat: no-repeat;
    background-size: 10px 17px;
    color: $input-placeholder-color;
    height: auto;
    outline: none;
    padding: 10px $input-left-right-padding;
    // Some hackery for Firefox since moz-appearance: none doesn't remove the arrow
    text-indent: 0.01px;
    text-overflow: '';
    user-select: none;
    width: 100%;

    &:hover,
    &:hover:active,
    &:focus {
      background-color: $html-background-color;
      background-image: image-url('ddarrow_active.png');
      transition-duration: $short-transition;
      transition-property: all;
    }

    /**
     * Firefox show a focus ring around the selected text.
     * See issue https://github.com/mozilla/fxa-content-server/issues/459
     * and the solution at:
     * http://stackoverflow.com/questions/19468372/how-to-remove-dashed-border-of-select-box-in-firefox#answer-19468615
     */
    &:-moz-focusring {
      color: transparent !important; /* !important must be added or else the browser ignores the request */
      text-shadow: 0 0 0 $input-row-hover-border-color !important;
    }
  }

  input:focus,
  select:focus {
    border-color: $input-row-focus-border-color;
    transition-duration: $short-transition;
    transition-property: border-color;
  }

  option {
    background-color: $content-background-color;
  }

  input:hover,
  select:hover,
  &:hover input:hover,
  &:hover select:hover {
    border-color: $input-row-hover-border-color;
    outline: none;
  }

  input:focus,
  select:focus,
  &:hover input:focus,
  &:hover select:focus,
  &:focus input {
    border-color: $input-row-focus-border-color;
    color: $text-color;
    outline: none;
  }

  input[type='text'].invalid,
  input[type='email'].invalid,
  input[type='password'].invalid,
  input[type='text'].invalid ~ .show-password-label,
  input[type='password'].invalid ~ .show-password-label,
  select.invalid {
    border-color: $error-background-color;
  }

  .input-help {
    color: $input-placeholder-color;
    margin-top: 8px;
  }

  .input-help-focused {
    opacity: 0;
    transition-duration: $medium-transition;
    transition-property: opacity;
  }
}

/**
 * The label:active and :focus selectors are added
 * to eliminate flicker when the user holds the mouse
 * key down over top of teh "show/hide" password button.
 */
input:focus ~ .input-help-focused,
label:active ~ .input-help-focused,
label:focus ~ .input-help-focused {
  opacity: 1;
}

/**
* The select-row works as a hacky fix for FF30's regression on
* select list skinning. If ff fixes. the following css can be removed
* and all .select-rows can be replaced with input rows*
*/
.select-row-wrapper {
  position: relative;
}

.select-row {
  background: $content-background-color image-url('ddarrow_inactive.png') 96% center no-repeat;
  border: 1px solid $input-row-border-color;
  border-radius: $big-border-radius;
  cursor: pointer;
  height: 45px;
  overflow: hidden;
  transition-duration: $short-transition;
  transition-property: border-color;
  width: 100%;

  &:hover {
    background-image: image-url('ddarrow_active.png');
    border-color: $input-row-hover-border-color;

    select {
      color: $input-text-color;
    }
  }

  select {
    // autoprefixer does not handle appearance, see https://github.com/ai/autoprefixer/issues/205
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    box-sizing: content-box;
    color: $input-placeholder-color;
    cursor: pointer;
    font-size: $medium-font;
    height: auto;
    outline: none;
    padding: 9px 10% 9px $input-left-right-padding;
    text-indent: 0.01px;
    text-overflow: '';
    user-select: none;
    width: 90%;

    option {
      background-color: $content-background-color;
    }
  }

  &.select-focus {
    background-color: $html-background-color;
    background-image: image-url('ddarrow_active.png');
    border-color: $input-row-focus-border-color;

    select {
      color: $input-text-color;
    }
  }

  &.invalid-row {
    border-color: $error-background-color;
  }

  // Override the default blue highlight for IE10+
  select::-ms-value {
    background: none;
  }

  select:focus::-ms-value {
    color: $input-text-color;
  }

  select:-moz-focusring {
    color: transparent !important; /* !important must be added or else the browser ignores the request */
    text-shadow: 0 0 0 $input-row-hover-border-color !important;
  }
}

/*end select row rules*/

.button-row {
  margin-bottom: 20px;
  margin-top: 45px;

  a.button {
    display: inline-block;
    text-decoration: none;
  }

  a.button,
  button {
    background: $button-background-color;
    border: 0;
    border-radius: $big-border-radius;
    color: $message-text-color;
    cursor: pointer;
    @include font();
    font-size: $large-font;
    padding: 15px 0;
    transition-duration: $short-transition;
    transition-property: background-color;
    width: 100%;

    &:active,
    &:hover,
    &:focus {
      background: $button-background-hover-color;
    }
  }

  button:disabled,
  button.disabled {
    background: $button-background-disabled-color;
    cursor: auto;
  }
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Custom rows */
.input-row-month-day select {
  width: 45%;
}


.description {
  font-size: $medium-font;
}

.links {
  margin-bottom: 20px;
  overflow: auto;
  // the 1px of padding allows the :focus outline on anchors to show.
  padding: 1px;

  + .privacy-links {
    margin: 20px 0 15px 0;
  }

  .left {
    float: left;
  }

  .right {
    float: right;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

ul.links {
  list-style: none;
  padding: 0;

  li {
    margin: 12px 0;
    padding: 0;
  }
}




.privacy-links,
.privacy-links a {
  color: $input-placeholder-color;
  margin-top: 35px;
  transition-duration: $short-transition;
}

.privacy-links + .button-row {
  margin-top: 20px;
}

.privacy-links a:active,
.privacy-links a:hover,
.privacy-links a:focus {
  color: $link-color;
}

.verification-email-message,
.signed-in-email-message {
  word-wrap: break-word;
}

.password-row {
  position: relative;

  /*
   * The password class is used instead of type because the field's type can
   * change from password to text.
   */
  input[type='password'],
  input[type='text'] {
    padding-right: 75px;
  }

  /**
   * The addition of right, top, border-radius, and background-color are
   * all to fix a bug in firefox 29 where the right padding of the password
   * field is ignored and password text flows under the show/hide button. When
   * Firefox is fixed, top and right can be set to 0, height set to 44px,
   * border-radius and background-color removed.
   *
   * See https://bugzilla.mozilla.org/show_bug.cgi?id=965237
   */
  .show-password-label {
    background-color: $content-background-color;
    border-left: 1px solid $input-row-border-color;
    border-radius: 0 $big-border-radius $big-border-radius 0;
    color: $input-placeholder-color;
    cursor: pointer;
    font-size: $base-font;
    height: 43px;
    line-height: 42px;
    min-width: 55px;
    padding: 0 7px;
    position: absolute;
    right: 1px;
    top: 1px;
    // it is very easy to accidentally select the text when clicking
    -webkit-touch-callout: none;
    user-select: none;
    z-index: 3;
  }

  > .password:hover {
    border-color: $input-border-color;
  }
}

.show-password-label {
  border-color: $input-border-color;
}

/**
 * The checkboxes are keyboard accessible, the label is placed as a sibling
 * to the checkbox. The checkbox cannot be hidden or set to `display: none` or
 * else it is impossible to focus the element using the keyboard. Instead, we
 * give it an absolute position and set its opacity to 0. Whenever tabbed to
 * using the keyboard, the label acts as if the mouse were hovering over the
 * label.
 */
.show-password {
  opacity: 0;
  position: absolute;
}

/**
 * IE8 blows up when changing the type of the password field
 * to a text field. Hide the show/hide button and reset
 * the password field's padding.
 */
.no-toggle-pw,
.reveal-pw {
  .password-row input[type='password'] {
    padding-right: $input-left-right-padding;
  }

  .show-password,
  .show-password-label {
    display: none;
  }
}

/* IE8 has trouble rendering bullet characters with custom fonts,
 * so use something standard */
.lt-ie9 input[type="password"] {
  font-family: sans-serif;
}

.show-password-label:hover,
.show-password-label:active,
.show-password-label:focus,
.show-password:hover + .show-password-label,
.show-password:active + .show-password-label,
.show-password:focus + .show-password-label {
  background: $html-background-color;
  color: $text-color;
  outline: none;
}

/* this one is impossible to do w/o sibling selector
we may need to add js for IE8*/

.password:focus ~ .show-password-label {
  border-left-color: $input-row-focus-border-color;
}

input[type="text"] {
  ~ .show-password-label {
    background: $button-background-disabled-color;
    color: $message-text-color;
  }

  // Hover over the show password label in its dark state
  ~ .show-password:focus + .show-password-label,
  ~ .show-password:active + .show-password-label,
  ~ .show-password:hover + .show-password-label,
  ~ .show-password-label:focus,
  ~ .show-password-label:active,
  ~ .show-password-label:hover {
    background: $show-password-background-color;
    color: $message-text-color;
  }
}

.customize-sync-row {
  color: $input-placeholder-color;
  margin-bottom: 20px !important;
}

.cannot-create-account-content {
  margin-top: 105px;
}

.change-password .password-row,
.complete_reset_password .password-row {
  margin-bottom: 25px;
}

.label-helper {
  border-radius: $small-border-radius;
  color: $input-placeholder-color;
  font-size: $small-font;
  font-weight: normal;
  height: 16px;
  margin: 0 10px;
  position: absolute;
  top: 0;
  z-index: 1;
}

.spinner {
  animation: 0.9s spin infinite linear;
  background-image: image-url('spinnerlight.png');
  background-size: 36px 36px;
  display: block;
  height: 36px;
  margin: 130px auto 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 36px;
}

.spinner-white {
  animation: 0.9s spin infinite linear;
  background-image: image-url('spinnerwhite.png');
  background-size: 33px 33px;
  display: block;
  height: 33px;
  margin: 0 auto;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 33px;
}

.hidden {
  display: none;
}

.marketing {
  background-color: $html-background-color;
  border-radius: 0 0 $big-border-radius $big-border-radius;
  border-top: 1px solid $marketing-border-color;
  box-shadow: 0 1px 1px $content-background-color inset;
  font-size: $medium-font;
  // pull in the margins from #main-content
  margin: 60px -40px -40px -40px;
  position: relative;

  &.image-snippet {
    // 160 right padding to avoid overlap of the android logo
    // in long locales (German)
    padding: 28px 160px 28px 50px;
    text-align: left;
  }

  &.text-snippet {
    // pull in the margins from #main-content
    padding: 28px 20px 36px 20px;
    text-align: center;
  }

  .marketing-copy {
    display: block;
  }

  .android-logo {
    background: image-url('android_logo.png');
    background-size: 84px 74px;
    bottom: 0;
    display: block;
    height: 74px;
    position: absolute;
    right: 50px;
    width: 84px;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.reset-warning {
  font-size: $small-font;
  font-weight: normal;
}

// Put a margin on top when the error messages follow a div
div + .success,
div + .error {
  margin-top: 10px;
}

@import 'avatars';
@import 'keyframes';
@import 'media_queries';