diff --git a/framework/core/less/common/side-nav.less b/framework/core/less/common/side-nav.less new file mode 100644 index 000000000..dda79486a --- /dev/null +++ b/framework/core/less/common/side-nav.less @@ -0,0 +1,76 @@ +.side-nav > ul { + margin: 0; + padding: 0; + list-style: none; +} + +// On phones, the index sidebar will pretty much take care of itself. The +// navigation list is a .dropdown-select and will be shown as the title- +// control; the new discussion button is the primary-control. On anything +// larger than a phone, however, we need to affix the sidebar and expand the +// .dropdown-select into a plain list. +@media @tablet, @desktop, @desktop-hd { + .side-nav { + // Expand the dropdown-select component into a normal nav list. + & .dropdown-select { + display: block; + + .expand-dropdown(); + + & .dropdown-menu { + .nav-list(); + } + } + } +} + +@media @tablet { + .side-nav { + padding: 15px 0; + white-space: nowrap; + overflow: auto; + -webkit-overflow-scrolling: touch; + + &:after { + content: " "; + position: absolute; + left: 0; + right: 0; + margin-top: 15px; + border-bottom: 1px solid @fl-body-secondary-color; + } + + & > ul > li, & .dropdown-menu > li { + display: inline-block; + margin-right: 25px; + } + + & .dropdown-select .dropdown-menu > li > a .fa { + margin-right: 3px; + } + + & .affix { + position: static; + } + } +} + +@media @desktop, @desktop-hd { + .side-nav { + float: left; + + &, & > ul { + width: 175px; + } + & > ul { + margin-top: 30px; + + &.affix { + top: 56px; + } + & > li { + margin-bottom: 10px; + } + } + } +} diff --git a/framework/core/less/forum/app.less b/framework/core/less/forum/app.less index 7e7221cd1..3aa89a23b 100644 --- a/framework/core/less/forum/app.less +++ b/framework/core/less/forum/app.less @@ -21,6 +21,7 @@ @import "@{common-path}/alerts.less"; @import "@{common-path}/modals.less"; @import "@{common-path}/layout.less"; +@import "@{common-path}/side-nav.less"; @import "composer.less"; @import "notifications.less"; diff --git a/framework/core/less/forum/index.less b/framework/core/less/forum/index.less index 9bc72e96a..5089f5d42 100644 --- a/framework/core/less/forum/index.less +++ b/framework/core/less/forum/index.less @@ -1,81 +1,7 @@ // ------------------------------------ // Sidebar -.side-nav > ul { - margin: 0; - padding: 0; - list-style: none; -} - -// On phones, the index sidebar will pretty much take care of itself. The -// navigation list is a .dropdown-select and will be shown as the title- -// control; the new discussion button is the primary-control. On anything -// larger than a phone, however, we need to affix the sidebar and expand the -// .dropdown-select into a plain list. -@media @tablet, @desktop, @desktop-hd { - .side-nav { - // Expand the dropdown-select component into a normal nav list. - & .dropdown-select { - display: block; - - .expand-dropdown(); - - & .dropdown-menu { - .nav-list(); - } - } - } -} - -@media @tablet { - .side-nav { - padding: 15px 0; - white-space: nowrap; - overflow: auto; - -webkit-overflow-scrolling: touch; - - &:after { - content: " "; - position: absolute; - left: 0; - right: 0; - margin-top: 15px; - border-bottom: 1px solid @fl-body-secondary-color; - } - - & > ul > li, & .dropdown-menu > li { - display: inline-block; - margin-right: 25px; - } - - & .dropdown-select .dropdown-menu > li > a .fa { - margin-right: 3px; - } - - & .affix { - position: static; - } - } -} - @media @desktop, @desktop-hd { - .side-nav { - float: left; - - &, & > ul { - width: 175px; - } - & > ul { - margin-top: 30px; - - &.affix { - top: 56px; - } - & > li { - margin-bottom: 10px; - } - } - } .index-nav { & .new-discussion { display: block;