cozy-labs/cozy-desktop

@require './node_modules/cozy-ui/react/Tabs/styles.styl'
@require './node_modules/cozy-ui/stylus/components/button.styl'
@require './node_modules/cozy-ui/stylus/components/tabs.styl'
@require './node_modules/cozy-ui/stylus/settings/palette.styl'
@require '_spin'

.container
  display flex
  flex-direction column
  width 100vw
  height 100vh

.two-panes
  flex 1 0
  display flex
  flex-direction column
  overflow-y auto

.two-panes__menu
  @extend $tabs-base .coz-tab-list

.two-panes__menu__item
  @extend $tabs-base .coz-tab
  font-size: rem(16)
  font-weight: normal

.two-panes__menu__item--active
  @extend $tabs-base .coz-tab--active

.two-panes__content
  box-sizing border-box
  font-size .8em
  overflow-x hidden
  flex: 1

  a:not([class*="btn"])
    color var(--scienceBlue)
    text-decoration none

  h2
    font-size: 1.2em
    margin-top 1.8em

  h2:first-of-type
    margin-top .5em

  h3
    a
      color var(--coolGrey)
      font-size 1em

  .help-list
    display flex
    padding 0
    li
      flex 1
      display inline-block
      box-sizing border-box
      padding 1em
    a
      display flex
      flex-direction column
      align-items center
    .icon
      display block
      width 96px
      height 96px
      margin-bottom .3em
      background-image url('images/sprite-help.svg')
      background-size auto 100%
      background-repeat no-repeat
    .icon--forum
      background-position 0 0
    .icon--irc
      background-position -96px 0
    .icon--github
      background-position -192px 0
    .icon--email
      background-position -288px 0
    .icon--twitter
      background-position -384px 0
    .icon--documentation
      background-position -480px 0

  .disk-space
    display flex
    line-height 2.4
  .disk-space__icon
    margin-right .5em

  .send-mail-to-support
    textarea
      width 100%
      height 10em
      background-color var(--paleGrey)
      border 1px solid grey-03
      border-radius 5px
      margin-bottom .5em

  .message--success
    color var(--dodgerBlue)
    font-weight bold

  .message--error
    color var(--pomegranate)
    font-weight bold

  &.user-alert
    padding 2em
    justify-content center

    img
      display: block
      width: 10em
      margin: 0px auto 2em auto

    h2
      text-align center

    a
      cursor pointer


.progress
  width 100%
  height .5em
  border-radius rem(100px)
  overflow hidden

  /* Light/action/ghost */
  background-color rgba(29, 33, 42, 0.08)

  .progress-inner
    height 100%
    border-radius rem(100px)
    background-color var(--primaryColor)

  &.indeterminate
    .progress-inner
      width 30%
      transition: none
      animation slide 2s infinite linear


.two-panes__content--settings
  padding 1em

  strong
    width 25%
    color var(--coolGrey)
    display inline-block

  .toggle
    margin-left 1em
    display inline-block
    vertical-align middle


.two-panes__content--help
  padding 2em