pillar/src/styles/_user.sass

.login-container
  align-items: center
  bottom: 0
  display: flex
  justify-content: center
  left: 0
  position: fixed
  right: 0
  top: 0

.login-box
  +container-box
  margin: 15px
  max-width: 600px
  min-width: 300px
  padding: 15px 35px

  .login-title,
  .settings-title
    font:
      size: 2.2em
      weight: 300
    padding: 15px
    text-align: center

  .login-info
    color: $color-text-dark-primary
    font-weight: 300
    text-align: center

  $provider-color-facebook: #3b5998
  $provider-color-google: #dd4b39
  $provider-color-blender_id: #00bcef
  .login-providers
    align-items: center
    display: flex
    flex-direction: column
    justify-content: center
    margin: 15px

    .login-provider-button
      background-color: $provider-color-blender_id
      border-radius: 3px
      color: white
      display: block
      font-weight: bold
      margin-bottom: 10px
      min-width: 200px
      padding: 8px 10px
      text-align: center
      text-decoration: none
      text-shadow: 1px 1px rgba(black, .2)
      transition: background-color 150ms ease-in-out

      &:hover
        background-color: lighten($provider-color-blender_id, 7%)

      &.facebook
        background-color: $provider-color-facebook

        &:hover
          background-color: lighten($provider-color-facebook, 7%)

      &.google
        background-color: $provider-color-google

        &:hover
          background-color: lighten($provider-color-google, 7%)

#settings
  #settings-sidebar
    +media-xs
      width: 100%

    +container-box
    background-color: $color-background-light
    color: $color-text
    margin-right: 15px
    width: 30%

    .settings-content
      padding: 0

      ul
        list-style: none
        margin: 0
        padding: 0

      a
        &:hover
          text-decoration: none

          li
            background-color: lighten($color-background, 5%)

        li
          border-bottom: thin solid $color-background
          border-left: thick solid transparent
          margin: 0
          padding: 25px
          transition: all 100ms ease-in-out

          i
            font-size: 1.1em
            padding-right: 15px

      .active
        li
          background-color: lighten($color-background, 5%)
          border-left: thick solid $color-info


  #settings-container
    +media-xs
      width: 100%

    +container-box
    background-color: $color-background-light
    width: 70%

  .settings-header
    background-color: $color-background
    border-top-left-radius: 3px
    border-top-right-radius: 3px

    .settings-title
      font:
        size: 1.5em
        weight: 300
      padding: 10px 15px 10px 25px

  .settings-content
    padding: 25px

    .settings-billing-info
      font-size: 1.2em

    .subscription-active
      color: $color-success
      padding-bottom: 20px
    .subscription-demo
      color: $color-info
      margin-top: 0
    .subscription-missing
      color: $color-danger
      margin-top: 0

  .button-submit
    clear: both
    display: block
    min-width: 200px
    margin: 0 auto
    +button($color-primary, 3px, true)


#settings-container
  #settings-form
    width: 100%


  .settings-form
    align-items: center
    display: flex
    justify-content: center

    .left, .right
      padding: 25px 0

    .left
      width: 60%
      float: left

    .right
      width: 40%
      float: right
      text-align: center

    label
      color: $color-text
      display: block

    .settings-avatar
      img
        border-radius: 3px

      span
        display: block
        padding: 15px 0
        font:
          size: .9em

    .settings-password
      color: $color-text-dark-primary


#user-edit-container
  padding: 15px

  #user-edit-header
    .user-edit-name
      font-size: 1.5em
    .user-edit-username,
    .user-edit-email,
    .user-edit-id
      color: $color-text-dark-secondary
      padding: 3px 0

      i
        margin-right: 5px

  #user-edit-form
    padding: 10px 0

    #submit_edit_user
      +button($color-success, 3px, true)

    #button-cancel
      +button(#aaa, 3px)
      margin: 0 10px

    #user-edit-notification
      float: right
      color: $color-text-dark-secondary
      padding: 10px 0

      &.success
        color: $color-success
      &.fail
        color: $color-danger