diff --git a/administrator/templates/atum/scss/blocks/_sidebar.scss b/administrator/templates/atum/scss/blocks/_sidebar.scss index fc36be398c03b..b6eb740cc5925 100644 --- a/administrator/templates/atum/scss/blocks/_sidebar.scss +++ b/administrator/templates/atum/scss/blocks/_sidebar.scss @@ -29,6 +29,7 @@ background-color: var(--atum-bg-dark); box-shadow: $atum-box-shadow; overflow: hidden; + @include media-breakpoint-up(sm) { display: flex; flex-direction: column; @@ -42,6 +43,7 @@ bottom: 0; top: auto; } + &:not(.sidebar-menu) { display: flex; flex-direction: column; @@ -91,7 +93,7 @@ .sidebar-toggle { position: relative; - background:var(--atum-bg-dark-50); + background: var(--atum-bg-dark-50); a { display: block; @@ -139,7 +141,8 @@ flex-grow: 2; } - .menu-dashboard, .menu-quicktask { + .menu-dashboard, + .menu-quicktask { position: relative; display: inline-block; @@ -172,10 +175,13 @@ } li { - .menu-dashboard, .menu-quicktask { + + .menu-dashboard, + .menu-quicktask { > a { &.mm-active { background-color: var(--atum-bg-dark-80); + &::before { display: none; } @@ -197,6 +203,7 @@ // All links a { + display: flex; position: relative; color: var(--atum-text-light); @@ -214,7 +221,6 @@ } > a { - display: block; padding: 0 0.35rem; &:hover { @@ -242,11 +248,16 @@ box-shadow: 0 0 6px -6px rgba(0, 0, 0, .8) } + > a { + padding: 0 1rem 0 2.4rem; + + [dir=rtl] & { + padding: 0 2.4rem 0 1rem; + } + } } a { - display: block; - padding: 0 1rem 0 2.4rem; color: var(--atum-text-light); font-size: 0.9rem; @@ -276,17 +287,28 @@ background-color: var(--atum-bg-dark-80); a { - padding-left: 3rem; + [dir=ltr] & { + padding-left: 3rem; + } + + [dir=rtl] & { + padding-right: 3rem; + } &.mm-active { - color: $white; background-color: var(--atum-bg-dark-90); box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .5); } } a::before { - left: 1.25rem; + [dir=ltr] & { + left: 1.25rem; + } + + [dir=rtl] & { + right: 1.25rem; + } } //4th level @@ -315,15 +337,18 @@ .menuitem-group { margin-top: 0.65rem; font-size: .75rem; - padding-left: 2.4rem; + + [dir=ltr] & { + padding-left: 2.4rem; + } + [dir=rtl] & { - padding-left: 0; padding-right: 2.4rem; } } .home-image { - padding: 0 0.4rem 0; + padding: .7rem .4rem; } .mm-collapse { @@ -345,25 +370,33 @@ } // Dropdown indicator - .has-arrow::after { - position: absolute; - top: 0.8rem; - right: 1.4rem; - width: .5rem; - height: .5rem; - color: var(--atum-text-light); - content: "\f054"; - font-weight: 900; - font-family: "Font Awesome 5 Free"; - transition: all .3s ease-out; + .has-arrow { + .sidebar-item-title { + [dir=ltr] & { + margin-right: auto; + } + + [dir=rtl] & { + margin-left: auto; + } + } + + &::after { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + color: var(--atum-text-light); + content: "\f054"; + font-weight: 900; + font-family: "Font Awesome 5 Free"; + transition: all .3s ease-out; + } } .mm-active { - > .has-arrow::after { - filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; transform: rotate(90deg); - transform-origin: 0.4rem 0.7rem; } } @@ -377,6 +410,11 @@ vertical-align: top; transition: all .2s ease-in-out; } + + .badge { + align-self: center; + margin: 0 4px; + } } .sidebar-toggle .fa { @@ -397,7 +435,6 @@ transition: all .2s ease-in-out; } - .sidebar-wrapper { flex: 1 0 $sidebar-width-closed; max-width: $sidebar-width-closed; @@ -439,8 +476,9 @@ @include media-breakpoint-down(xs) { #menu-collapse { display: none; - background:var(--atum-bg-dark-50); + background: var(--atum-bg-dark-50); } + .toggler-burger { display: block; width: 70px; @@ -457,6 +495,7 @@ right: auto; left: 10px; } + .navbar-toggler-icon { color: var(--toggle-color); @@ -493,7 +532,6 @@ overflow-y: scroll; } - } &:not(.show) { diff --git a/administrator/templates/atum/scss/template-rtl.scss b/administrator/templates/atum/scss/template-rtl.scss index ca2fe2f7f998a..c3881101052c7 100644 --- a/administrator/templates/atum/scss/template-rtl.scss +++ b/administrator/templates/atum/scss/template-rtl.scss @@ -85,69 +85,6 @@ body { } } -// Sidebar -.main-nav { - - .open > a { - - + ul { - right: 60px; - left: auto; - } - } - - li { - > a.btn-dashboard { - left: 30px; - right: auto; - } - } - - .collapse-level-2 { - right: 100%; - left: auto; - border-radius: $border-radius 0 0 $border-radius; - } - - .parent .collapse-arrow::after { - right: auto; - left: 15px; - content: "\f0d9"; - } - - .has-arrow::after { - left: 1rem; - right: inherit; - transform: rotate(180deg) translate(0, -180%); - } - - ul a { - padding: 0 1.4rem 0 0; - } - - .active .no-dropdown .sidebar-item-title { - margin-right: 1rem; - } - - .dropdown-submenu .sidebar-item-title { - margin-right: 1rem; - } - - .dropdown-submenu .no-dropdown .sidebar-item-title { - margin-right: 44px; - } - - ul ul a::before { - right: 34px; - left: 0; - } -} - -.child-open > .open > a::before { - right: 0; - left: auto; -} - // Status .status { margin-right: 250px;