123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330 |
- .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
- 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()
- &__link
- display inline-block
- border 1px solid grey
- border-radius 5px
- padding 10px 25px
- .timezone
- &__text
- settingText()
- &__time
- 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
|