layout

/* scss/layout/_notifications.scss */

/* scss/layout/_help-center.scss */ .help-center{ text-align: $end; .dropdown{ display: inline-block; &.open .help-center__icon { color: $primary-700 !important; background-color: $primary-50; &:hover:not(:focus) { background: $primary-100; } } .help-center__icon { padding: 0; background-color: transparent; line-height: 40px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: $gray-500; border: 4px solid transparent; position: relative; transition: .3s; font-size: 24px; cursor: pointer; &:hover:not(:focus) { color: $primary-700; background: $primary-50; } &:focus { color: $gray-500; border: 4px solid $primary-100; } &.active { &::before { content: ""; display: block; position: absolute; top: 1px; right: 5px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background-color: $error-500; } } i { font-size: 24px; } } } .dropdown-menu{ width: 769px; padding: 20px; padding-bottom: 10px; border-radius: 8px; box-shadow: 0px 12px 16px -4px #1018281a, 0px 4px 6px -2px #1018280d; border: 1px solid $gray-200; .dropdown-menu__header{ font-size: 18px; font-weight: 500; color: $gray-900; text-transform: capitalize; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid $gray-100; .icomoon-x{ display: none; } } &.dropdown-menu--right{ #{$end}: 0; #{$start}: auto; overflow-y: hidden; } .help-center__body{ display: flex; .body__header{ font-size: 14px; color: $primary-600; font-weight: 500; margin-bottom: 16px; display: inline-block; } a{ color: unset; display: block; margin-bottom: 23px; .resources__links__container { display: flex; .resources__links__icon{ font-size: 20px; color: $primary-600; margin-#{$end}: 16px; span{ } } .blogs__thumbnail{ width: 144px; height: 80px; background: #E4E7EC; border-radius: 6px; } } .links__captions{ h4{ color: $gray-900; font-weight: 500; font-size: 16px; text-transform: capitalize; line-height: 24px; text-align: $start; } p{ color: $gray-500; font-size: 14px; line-height: 20px; text-align: $start; } } } .help-center__body__resources{ padding: 0 15px; .resources__links{ } } .help-center__body__blogs{ padding-#{$start}: 24px; position: relative; a{ margin-bottom: 8px; } &::before{ content: ''; width: 1px; height: calc(100% + 30px); #{$start}: 0; background-color: $gray-100; position: absolute; top: -20px; } .resources__links__container{ padding: 12px; padding-#{$end}: 0; } .body__header{ padding-#{$start}: 12px; } .links__captions{ margin-#{$start}: 20px; width: 55%; } .help-center__body__blogs__link{ padding-#{$start}: 12px; color: $primary-500; display: flex; align-items: center; font-weight: 500; font-size: 14px; .icomoon-arrow-right{ margin-#{$start}: 12px; @if $start != 'left'{ transform: rotateY(180deg); } } } } &:not(.help-center__body--without-blogs){ .help-center__body__resources{ width: 68%; } } &.help-center__body--without-blogs{ flex-direction: column; } } } &.help-center--notifications{ .dropdown-menu{ width: 448px; padding-top: 15px; max-height: 695px; overflow-y: auto; .help-center__body { .help-center__body__resources{ width: 100%; padding: 0; } a{ padding: 15px; transition: .3s; margin-bottom: 8px; border-radius: 7px; &:hover{ background: #F1F5FE; } .resources__links__container { .resources__links__icon{ > span { font-size: 13px; width: 32px; cursor: pointer; height: 32px; display: inline-flex; align-items: center; background: #E3EBFC; justify-content: center; border-radius: 50%; color: inherit; } } } .links__captions{ h4{ margin-bottom: 3px; } p{ font-size: 16px; line-height: 24px; padding-bottom: 11px; } .links__captions__time{ font-size: 14px; color: #98A2B3; } } } } } } } @include smScreen { .help-center{ .dropdown{ position: static; .dropdown-menu{ position: fixed; top: 0; left: 0; width: 100%; padding: 0; border-radius: 0; border: none; box-shadow: none; overflow-y: scroll; height: 100%; .dropdown-menu__header{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; .icomoon-x{ display: block; } } .help-center__body{ flex-direction: column; .help-center__body__resources{ width: 100%; .resources__links{ padding-bottom: 12px; } } .help-center__body__blogs{ .body__header{ margin-top: 24px; margin-bottom: 10px; } &::before{ width: 100%; height: 1px; top: 0; } padding-#{$start}: 0; .resources__links__container{ padding-#{$end}: 12px; flex-direction: column; .blogs__thumbnail{ height: 118px; width: 100%; margin-bottom: 20px; } .links__captions{ width: 100%; margin-#{$start}: 0; } } } } } } .dropdown-backdrop{ display: none; } .help-center--notifications { .dropdown-menu { .help-center__body { a{ border-radius: 0; } } } } } .hidden-scroll{ overflow: hidden; } aside.atoms-side{ display:none !important; } }

/* js/help-center.js */ $(document).ready(function (){ $('.dropdown-menu').on('click', function (event) { event.stopPropagation(); }); $('.icomoon-help-circle , .icomoon-bell').on('click', function (event) { $('body').addClass('hidden-scroll'); }); $('.icomoon-x').on('click', function (event) { $('.help-center__icon').removeClass('open'); $('body').removeClass('hidden-scroll'); }); });

/* scss/layout/_submenu-list-notify.scss */

/* scss/layout/_nav-list-notify-icon.scss */

/* scss/layout/_nav-list-notify.scss */ .nav-list__notify{ transition: .3s; font-size: 12px; line-height: 22px; display: inline-block; width: 22px; height: 22px; background-color: #F1F5FE; text-align: center; border-radius: 50%; color: #1852F1; font-weight: 500; position: absolute; #{$end}: 9px; top: 50%; transform: translateY(-50%); } .has-ul{ .nav-list__notify{ #{$end}: 40px; } }

/* scss/layout/_submenu-list.scss */

/* scss/layout/_nav-list.scss */ .side-list { >li.side-list__nav-list{ >a{ padding-#{$start}: 42px; } } } .side-list { position: relative; min-height: 100%; @media (max-width: $screen-lg) { min-height: auto; } > li { > .link { position: relative; padding: 4px 6px; display: flex; align-items: center; font-weight: 500; font-size: 16px; color: #344054; border-radius: 6px; transition: .3s; border: 4px solid transparent; width: 100%; background-color: transparent; i { @include dir-margin-right(12px); font-size: 24px; color: #667085; } &.has-ul { .unread { @include dir-right(40px); } &::after { content: "\e980"; font-family: 'icomoonapp'; display: block; position: absolute; top: 50%; @include dir-right(10px); transform: translateY(-50%); font-size: 20px; color: #98a2b3; font-weight: bold; transition: .3s; } &:hover:not(:focus) { .nav-list__notify{ background-color: #E4EBFD; } } &.active{ .nav-list__notify{ background-color: #E4EBFD; } } } &:hover:not(:focus) { background-color: #f1f5fe; color: #1852f1; .nav-list__notify{ background-color: #E4EBFD; } i { color: #2164f4; } &::after { color: #427bf6; } } &:focus { border-color: #e3ebfc; } &.active:not(.has-active-link) { background-color: #F1F5FE; color: #1852f1; i { color: #2164f4; } &::after { transform: translateY(-50%) rotate(180deg); color: #2164f4; } &:hover:not(:focus) { background-color: #E3EBFC; color: #1852f1; i { color: #2164f4; } &::after { color: #427bf6; } } } &.has-active-link { &:not(.active) { background-color: #F1F5FE; color: #1852f1; i { color: #2164f4; } &::after { color: #2164f4; } &:hover:not(:focus) { background-color: #E3EBFC; color: #1852f1; i { color: #2164f4; } &::after { color: #427bf6; } } } + .sub-menu { display: block; } &.active::after { transform: translateY(-50%) rotate(180deg); } } &.active { .unread { opacity: 0; } + .sub-menu { .unread { opacity: 1; } } } } &:not(:last-child) { margin-bottom: 8px; } &.last-tab { position: absolute; bottom: -48px; left: 0; width: 100%; @media (max-width: $screen-sm) { position: static; } } &.title { } } .unread { position: absolute; top: 50%; @include dir-right(6px); transform: translateY(-50%); width: 24px; height: 22px; border-radius: 50%; background-color: $primary-50; color: $primary-700; @extend .text-xs; @extend .weight-m; display: flex; align-items: center; justify-content: center; transition: .3s; } .sub-menu { display: none; li { a { position: relative; display: block; padding: 8px 12px; @include dir-padding-left(42px); border-radius: 6px; font-weight: 500; font-size: 16px; color: #344054; border: 4px solid transparent; transition: .3s; &:hover:not(:focus) { background-color: #f1f5fe; color: #1852f1; } &:focus { border-color: #E3EBFC; } &.active-link { background-color: #f1f5fe; color: #1852f1; &:hover:not(:focus) { background-color: #E3EBFC; } } .unread { opacity: 0; } } &:first-child { margin-top: 8px; } &:not(:last-child) { margin-bottom: 4px; } } } } @media (max-width: 768px) { .side-bar-overlay{ background: #98a2b3de; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } }

/* scss/layout/_nav-list-icon.scss */