tracim_v2/src/css/AccountPage.styl

.nomarginlabel
  margin-bottom 0

settingText()
  margin 15px 0
  font-size 18px

.table td
  vertical-align middle

.table tr:nth-child(even)
  background-color grey-hover


/**** MENU HAMBURGER ON EXPAND BAR *****/

.hamburger--spring .hamburger-inner
  margin 4px 8px

.hamburger--spring .hamburger-inner::before
  top 7px

.hamburger--spring .hamburger-inner::after
  top 14px

/***************************************/

.hamburger--spring
  .hamburger-inner
    transition-delay 0.22s
    background-color transparent
    &::before
      top -3px
      transition top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
      transform translate3d(0, 10px, 0) rotate(45deg)
    &::after
      top -3px
      transition top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
      transform translate3d(0, 10px, 0) rotate(-45deg)

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before
  width 30px

.account
  .btn-outline-primary
    color thirdColor
    border-color thirdColor
    &:hover, &:focus, &:active
      color off-white
      border-color thirdColor
      background-color thirdColor
      box-shadow 0 0 1px 2px fifthColor
      outline fifthColor
  &__userinformation
    display flex
    justify-content center
    align-items center
    flex-wrap wrap
    border 1px solid grey
    padding 25px
    font-size 18px
    &__wrapper
      flex-direction column
    &__avatar
      margin-right 50px
      img
        width 150px
        height 150px
    &__name
      font-size 22px
    &__email
      color thirdColor
    &__company
      font-size 20px
      color thirdColor
  &__delimiter
    position relative
    top 3px
    margin auto
    z-index 3
  &__userpreference
    display flex
    padding 25px
    width 100%
    background-color lightGrey
    &__menu
      margin-right 30px
      border-radius 10px
      padding 0
      width 20%
      min-height 600px
      background-color off-white
      &__responsive
        font-size 20px
      &__list
        width 100%
        margin-bottom 20px
        &__close
          display none
          justify-content flex-end
          margin 10px 0 15px 0
          font-size 20px
          cursor pointer
        &__disabled
          padding 25px 20px 20px 16px
          color grey
          font-size 18px
        &__item
          margin-top 10px
          font-weight 500
          font-size 18px
          cursor pointer
          &:hover
            background-color lightGrey
          &.active
            background-color thirdColor
            color white
    &__setting
      border-radius 10px
      padding 20px
      width 80%
      min-height 600px
      background-color off-white
      .personaldata
        &__text
          settingText()
        &__form
          margin 25px 0
          &__title
            margin-bottom 15px
            font-size 18px
          &__txtinput
            display block
            width auto
            border 1px solid thirdColor
            border-radius 5px
          &__button
            vertical-align top
            border 1px solid thirdColor
            border-radius 5px
            padding 8px 25px
            cursor pointer
      .calendar
        &__text
          settingText()
        &__title
          margin 15px 0
          font-size 18px
        &__link
          display inline-block
          border 1px solid grey
          border-radius 5px
          padding 10px 25px
        &__timezone
          margin 15px 0 30px 0
          &__select
            max-width 300px
      .notification
        &__text
          settingText()
          margin-bottom 30px
        &__table
          border 1px solid lightGrey
          &__role
            display flex
            align-items center
            &__icon
              margin-right 10px

/***** MEDIAQUERIES *****/

/**** MEDIA 576px & 1199px ****/

// Regroup the common rules

@media (min-width: min-sm) and (max-width: max-md)

  .account
    &__userpreference
      display block
      position relative
      &__menu
        justify-content center
        margin-bottom 25px
        border-radius 50%
        width 60px
        min-height 60px
        &__responsive
          &__hamburger
            padding 0
            &:focus
              outline none
            &__box
              margin 15px 5px 0 0
              &__icon, &__icon::before, &__icon::after
                width 30px
        &__list
          display none
      &__setting
        padding 10px
        width 100%

  .activemenu
    .account
      &__userpreference
        &__menu
          justify-content start
          position absolute
          top 0
          left 0
          border-radius 10px
          width 100%
          height 100%
          z-index 2
          background-color rgbGrey
          &__responsive
            display none
          &__list
            display block
            border-radius 10px
            height 100%
            background-color off-white
            width 300px
            &__close
              display flex
            &__disabled
              padding 0 20px

/***** MEDIA LG *****/

@media (min-width: min-lg) and (max-width: max-lg)

  .account
    &__userpreference
      padding 25px 10px
      &__menu
        margin-right 15px
        width 25%

/**** MEDIA SM ****/

@media (min-width: min-sm) and (max-width: max-sm)

  .account
    &__userpreference
      padding 25px 0
      &__menu
        margin-left 15px
      &__setting
        padding 30px 15px

  .activemenu
    .account__userpreference__menu
      margin-left 0

/***** MEDIA XS *****/

@media (max-width: max-xs)

  .hamburger-box
    width 45px
    height 22px

  .account
    &__userinformation
      &__avatar
        margin 0 0 20px 0
      &__wrapper
        text-align center
    &__userpreference
      display block
      position relative
      padding 25px 0
      &__menu
        justify-content center
        margin 0 0 25px 15px
        border-radius 30px
        width 60px
        min-height 60px
        &__responsive
          align-self center
        &__list
          display none
      &__setting
        border-radius 0
        padding 10px 0
        width 100%
        .personaldata
          &__form
            margin-left 10px
        .calendar
          &__link
            padding 10px 15px
        .notification
          &__table
            &__wksname
              text-overflow ellipsis
              white-space nowrap
              overflow hidden
              width 175px
              &:focus
                overflow visible
                width auto

  .activemenu
    .account
      &__userpreference
        &__menu
          justify-content start
          position absolute
          top 0
          left 0
          margin-left 0
          border-radius 10px
          width 100%
          height 100%
          z-index 2
          background-color rgbGrey
          &__responsive
            display none
          &__list
            display block
            border-radius 10px
            height 100%
            background-color off-white
            width 300px
            &__close
              display flex
            &__disabled
              padding 0 20px