From 98ae013e901927bc2ce4fffd6d10b4b964c49cd6 Mon Sep 17 00:00:00 2001 From: Patrick G 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 5721d8e9b..b4d734158 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 7008b5c91..757da2a66 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; + } +}