From 98ae013e901927bc2ce4fffd6d10b4b964c49cd6 Mon Sep 17 00:00:00 2001
From: Patrick G <geek1011@outlook.com>
Date: Wed, 24 May 2017 02:00:40 -0400
Subject: [PATCH] Make navbar scroll on overflow (#1777)
* Scrollbars on overflow of horizontal nav
* Update _base.less
* Add fade out on right side of overflowing nav
* Update _base.less
---
public/css/index.css | 36 ++++++++++++++++++++++++++++++++++++
public/less/_base.less | 37 +++++++++++++++++++++++++++++++++++++
2 files changed, 73 insertions(+)
diff --git a/public/css/index.css b/public/css/index.css
index 5721d8e9bc..b4d7341585 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -428,6 +428,42 @@ footer .ui.language .menu {
background-color: #FAFAFA !important;
border-width: 1px !important;
}
+@media only screen and (max-width: 1200px) {
+ .ui.menu.new-menu {
+ overflow-x: auto !important;
+ justify-content: left !important;
+ padding-bottom: 5px;
+ }
+ .ui.menu.new-menu::-webkit-scrollbar {
+ height: 8px;
+ display: none;
+ }
+ .ui.menu.new-menu:hover::-webkit-scrollbar {
+ display: block;
+ }
+ .ui.menu.new-menu::-webkit-scrollbar-track {
+ background: rgba(0,0,0,0.01);
+ }
+ .ui.menu.new-menu::-webkit-scrollbar-thumb {
+ background:rgba(0,0,0,0.2);
+ }
+ .ui.menu.new-menu:after {
+ position: absolute;
+ margin-top: -15px;
+ display: block;
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
+ content: ' ';
+ right: 0;
+ height: 53px;
+ z-index: 1000;
+ width: 60px;
+ clear: none;
+ visibility: visible;
+ }
+ .ui.menu.new-menu a.item:last-child {
+ padding-right: 30px !important;
+ }
+}
.markdown:not(code) {
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
diff --git a/public/less/_base.less b/public/less/_base.less
index 7008b5c918..757da2a66b 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -420,3 +420,40 @@ footer {
background-color: #FAFAFA !important;
border-width: 1px !important;
}
+
+@media only screen and (max-width: 1200px) {
+ .ui.menu.new-menu {
+ overflow-x: auto !important;
+ justify-content: left !important;
+ padding-bottom: 5px;
+ }
+ .ui.menu.new-menu::-webkit-scrollbar {
+ height: 8px;
+ display: none;
+ }
+ .ui.menu.new-menu:hover::-webkit-scrollbar {
+ display: block;
+ }
+ .ui.menu.new-menu::-webkit-scrollbar-track {
+ background: rgba(0,0,0,0.01);
+ }
+ .ui.menu.new-menu::-webkit-scrollbar-thumb {
+ background:rgba(0,0,0,0.2);
+ }
+ .ui.menu.new-menu:after {
+ position: absolute;
+ margin-top: -15px;
+ display: block;
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
+ content: ' ';
+ right: 0;
+ height: 53px;
+ z-index: 1000;
+ width: 60px;
+ clear: none;
+ visibility: visible;
+ }
+ .ui.menu.new-menu a.item:last-child {
+ padding-right: 30px !important;
+ }
+}