impress/app/assets/stylesheets/_layout.sass

@import "partials/icon"
@import "partials/clean/constants"
@import "partials/clean/mixins"

/* Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  vertical-align: baseline
  background: transparent

/* Typography

html, body
  height: 100%

body
  background: $background-color
  color: $text-color
  font:
    family: $main-font
    size: 90%
  line-height: 1.5

a[href]
  color: $link-color

p
  font-family: $text-font

input, button, select
  font:
    family: inherit
    size: 100%

p
  margin-bottom: 1em

h1, h2, h3
  +header-text

h1
  font-size: 3em
  line-height: 1
  margin-bottom: 0.50em

h2
  font-size: 2em
  margin-bottom: 0.75em

h3
  font-size: 1.5em
  line-height: 1
  margin-bottom: 1.00em

.inline-image
  margin-right: 1em
  vertical-align: middle

/* Main

$container_width: 800px

#container
  margin: .25em auto
  padding-top: $container-top-padding
  position: relative
  width: $container_width

input, button, select, label
  cursor: pointer

input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
  border-radius: 3px
  background: #fff
  border: 1px solid $input-border-color
  color: $text-color + #444444
  padding: .25em
  &:focus, &:active
    color: inherit

textarea
  font: inherit

// TODO: This conflicts with button styles in embedded wardrobe-2020
// components. It'd be nice to not apply it to ALL button elements.
a.button, input[type=submit], button
  +awesome-button
  &.loud
    +loud-awesome-button
  .icon
    margin-right: .25em
    vertical-align: middle

ul.buttons
  margin-bottom: 1em
  li
    list-style: none
    margin: 0 .5em
    &, form
      display: inline

#footer
  clear: both
  font-size: 75%
  margin-bottom: 1em
  padding-top: 2em
  text-align: center
  ul, div
    display: inline
    margin: 0 1em
  li, div ul
    display: inline
    margin: 0 .5em
  #locale-form
    float: right
  .terms
    &[data-updated-recently]
      font-weight: bold

=flash
  margin-bottom: 1em
  padding: .25em .5em
  text-align: center

.notice, .alert, .warning
  +flash

.notice
  +notice

.alert
  +error

.warning
  +warning

#userbar
  +header-text
  position: absolute
  right: 0
  top: 0
  > *
    display: inline
    margin: 0 .25em

#userbar-image-mode
  font-weight: bold
  margin-right: 1em
  text-decoration: none
  img
    +icon

#userbar-log-in
  text-decoration: none
  img
    margin:
      bottom: -4px
      right: .25em
  span
    text-decoration: underline
  &:hover span
    text-decoration: none

.object
  +inline-block
  margin: $object-padding 0
  padding: 0 $object-padding
  position: relative
  text-align: center
  vertical-align: top
  width: $object-width
  a
    text-decoration: none
    img
      +opacity(0.75)
  img
    display: block
    height: $object-img-size
    margin: 0 auto
    width: $object-img-size
  &:hover img, a:hover img
    // behave in browsers that only respond to a:hover, but also be in the
    // hover state more often for browsers who support div:hover
    // (quantity form in user items)
    +opacity(1)

  .nc-icon, .closeted-icons
    +opacity(1)
    background: rgba(255, 255, 255, 0.75)
    line-height: 1
    position: absolute
    top: $object-img-size - $nc-icon-size
    &:hover
      +opacity(0.5)
      background: transparent

  .nc-icon, .closeted-icons img
    display: inline
    height: $nc-icon-size
    width: $nc-icon-size

  .nc-icon
    right: ($object-width - $object-img-size) / 2 + $object-padding

  $closeted-icons-left: ($object-width - $object-img-size) / 2 + $object-padding
  .closeted-icons
    left: $closeted-icons-left

dt
  font-weight: bold

dd
  margin: 0 0 1.5em 1em

#home-link
  +header-text
  font:
    size: 175%
    weight: bold
  left: 0
  line-height: 1
  padding-left: .25em
  padding-right: .25em
  position: absolute
  top: 0
  &:hover
    background: $module-bg-color
    text-decoration: none
  span:before
    content: "<< "

#home-link, #userbar
  padding-top: 6px
  padding-bottom: 6px

.pagination
  a, span
    margin: 0 .5em
  .current
    font-weight: bold