mirror of
https://github.com/flarum/framework.git
synced 2024-12-03 15:43:59 +08:00
Extract .side-nav into a common file
This commit is contained in:
parent
8604ed99ec
commit
4678603f55
76
framework/core/less/common/side-nav.less
Normal file
76
framework/core/less/common/side-nav.less
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue
Block a user