.header-right { height: 100%; .nav-item { height: 100%; display: flex; align-items: center; .nav-link { color: var(--text-gray); font-size: 1.125rem; padding-#{$dlab-pos-right}: 0; padding-#{$dlab-pos-left}: 0; } } &>li { &:not(:first-child) { padding-#{$dlab-pos-left}:1rem; @include respond('phone') { padding-#{$dlab-pos-left}:0.4rem; } } } .notification_dropdown { @include respond('phone-land') { position: static; } .nav-link { position: relative; border-radius: $radius; padding: 0.9375rem; line-height: 1; svg{ width:1.25rem; height:1.25rem; path{ fill : var(--text-gray); } } @include respond('laptop') { padding:0.625rem; } i { font-size: 1.5rem; @include respond('laptop') { font-size: 1.125rem; } } .badge { position: absolute; font-size: 0.625rem; border-radius: 50%; #{$dlab-pos-right}: 0rem; top: 0rem; font-weight: normal; height: 1.3rem; width: 1.3rem; line-height: 1.7; text-align: center; padding: 0; font-size: 0.7rem; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); min-width: 1.3rem; min-height: 1.3rem; @include respond('phone-land') { height: 1.125rem; width:1.125rem; padding: 0; line-height: 1.2rem; } } } .dropdown-item { &:focus, &:active { a { color: $white; } } a { color: $dark; &:hover { text-decoration: none; } } } } .dropdown-menu { border-width:0; box-shadow: 0 0 2.3125rem rgba(8,21,66,0.05); // @at-root [data-theme-version="dark"] & { // box-shadow: none; // } } } .dlab-fullscreen{ #icon-minimize{ display:none; } &.active{ #icon-full{ display:none; } #icon-minimize{ display:inline-block; } } } .dlab-theme-mode{ #icon-light{ display:none; } &.active{ #icon-light{ display:inline-block; } #icon-dark{ display:none; } } } .moon{ path{ fill:var(--priamry); } } .notification_dropdown { .dropdown-menu-end { min-width: 19.375rem; padding: 0rem 0 1rem; top: 100%; text-align: #{$dlab-pos-left}; .notification_title { background: var(--primary); color: $white; padding: 0.625rem 1.25rem; h5 { color: $white; margin-bottom: 0.1875rem; } } .media { width: 2.8125rem ; height: 2.8125rem ; font-size: 1.125rem ; &>span { width: 2.1875rem; height: 2.1875rem; border-radius: 3.125rem; display: inline-block; padding: 0.4375rem 0.5625rem; margin-#{$dlab-pos-right}: 0.625rem; &.success { background: $success-light; color: $success; } &.primary { background: var(--rgba-primary-1); color: var(--primary); } &.danger { background: $danger-light; color: $danger; } } .notify-time { width: 100%; margin-#{$dlab-pos-right}: 0; color: $l-ctl; } p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 12.5rem; margin-bottom: 0; margin-top: 0.3125rem; @include respond('phone') { max-width: 6.25rem; } } } .all-notification { display: block; padding: 0.9375rem 1.875rem 0; color:var(--primary); text-align: center; border-top: 0.0625rem solid $light; i { margin-#{$dlab-pos-left}: 0.625rem; } } } } .header-profile { &>a.nav-link { padding:0; display: flex; align-items: center; margin-#{$dlab-pos-left}: 0.9375rem; i { font-weight: 700; } .header-info{ padding-#{$dlab-pos-left}: 0rem; text-align: left; @include respond('laptop') { padding-#{$dlab-pos-left}: 0.625rem; } @include respond('phone') { display:none; } span{ font-size:1rem; color:$black; display: block; font-weight: 600; } strong{ color:$dark; } small{ display:block; font-size: 0.8125rem; color:$muted; font-weight:400; line-height: 1.2; } } @include respond ('laptop'){ margin-#{$dlab-pos-left}: 0rem; padding-#{$dlab-pos-left}:0rem; .header-info{ span{ font-size:1rem; } } } } .dropdown-menu { padding: 0.9375rem 0; min-width: 12.5rem; a { &:hover, &:focus, &.active { color: $primary; } } } img { width: 3rem; height: 3rem; border-radius: $radius; @include respond ('phone-land'){ width: 2.5rem; height: 2.5rem; } } .dropdown-toggle { i { font-size: 1.25rem; } span { @include respond('phone') { display: none; } } } .profile_title { background: $primary; color: $white; padding: 0.625rem 1.25rem; h5 { color: $white; margin-bottom: 0.1875rem; } } .dropdown-item { padding: 0.5rem 1.5rem; } }