From: Jo-Philipp Wich Date: Tue, 27 Nov 2018 12:57:32 +0000 (+0100) Subject: luci-theme-bootstrap: allow tabmenus to wrap (#2333) X-Git-Url: http://git.cdn.openwrt.org/?a=commitdiff_plain;h=9cd5f6befdbc1011c10da309940fe7efa73f8fc3;p=project%2Fluci.git luci-theme-bootstrap: allow tabmenus to wrap (#2333) Allow the tab menu line to wrap around on narrow screens to fix the issue reported in PR #2333. Also add the .nowrap utility class to the Bootstrap theme while we're touching it. Signed-off-by: Jo-Philipp Wich --- diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index 394361ecde..98f6022ca0 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -174,6 +174,10 @@ a:hover { float: left; } +.nowrap { + white-space: nowrap; +} + /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ @@ -1020,8 +1024,9 @@ header .dropdown-menu a.hover, padding: 0 2px; list-style: none; display: flex; - background: linear-gradient(#ddd 0%, #ddd 100%) repeat-x; - background-size: 1px 1px; + flex-wrap: wrap; + background: linear-gradient(#fff 28px, #ddd 28px); + background-size: 1px 29px; background-position: left bottom; } diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css index 2e1ffb035b..062d274b75 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -11,7 +11,6 @@ header h3 a, header .brand { background: linear-gradient(#fff 20%, #ddd 100%); background-size: 1px 34px; margin-bottom: 10px; - flex-wrap: wrap; } .tabs > li, .cbi-tabmenu > li {