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

.account
  width 100%
  &__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 blue
    &__company
      font-size 20px
      color blue
  &__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%
      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 blue
            color white
    &__setting
      border-radius 10px
      padding 20px
      width 80%
      background-color off-white
      .personaldata
        &__text
          settingText()
        &__form
          margin 25px 0
          &__title
            margin-bottom 15px
            font-size 18px
          &__txtinput
            display inline-flex
            width auto
            margin 0 15px 15px 0
            border 1px solid blue
            border-radius 5px
            padding 8px 15px
          &__button
            vertical-align top
            border 1px solid blue
            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
          &__btn
            border 1px solid blue
            border-radius 5px
            padding 10px 35px
            color blue
            background-color transparent
            &::after
              margin-left 10px
            &:hover, &:focus
              background-color blue
              color white
          &__submenu
            width 203px
            max-height 300px
            overflow-Y auto
            &__item
              &:hover, &:focus
                background-color blue
                color white
      .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 30px
        width 60px
        min-height 60px
        &__responsive
          align-self center
        &__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)

  .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 310px
              &: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