mirror of
https://github.com/flarum/framework.git
synced 2024-12-04 16:23:37 +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}/alerts.less";
|
||||||
@import "@{common-path}/modals.less";
|
@import "@{common-path}/modals.less";
|
||||||
@import "@{common-path}/layout.less";
|
@import "@{common-path}/layout.less";
|
||||||
|
@import "@{common-path}/side-nav.less";
|
||||||
|
|
||||||
@import "composer.less";
|
@import "composer.less";
|
||||||
@import "notifications.less";
|
@import "notifications.less";
|
||||||
|
|
|
@ -1,81 +1,7 @@
|
||||||
// ------------------------------------
|
// ------------------------------------
|
||||||
// Sidebar
|
// 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 {
|
@media @desktop, @desktop-hd {
|
||||||
.side-nav {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
&, & > ul {
|
|
||||||
width: 175px;
|
|
||||||
}
|
|
||||||
& > ul {
|
|
||||||
margin-top: 30px;
|
|
||||||
|
|
||||||
&.affix {
|
|
||||||
top: 56px;
|
|
||||||
}
|
|
||||||
& > li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.index-nav {
|
.index-nav {
|
||||||
& .new-discussion {
|
& .new-discussion {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user