From 402d06d40f80f83cb2f68df1650389c438e83746 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Sun, 10 Nov 2019 18:20:56 +0100 Subject: [PATCH] themes: add necessary styles for ComboButton Signed-off-by: Jo-Philipp Wich (cherry picked from commit 3a82faf21ab2bd69a5ce9e3bdb8083a22b458e99) --- .../htdocs/luci-static/bootstrap/cascade.css | 56 ++++++++++++++----- .../htdocs/luci-static/bootstrap/mobile.css | 3 +- .../luci-static/openwrt.org/cascade.css | 17 ++++-- 3 files changed, 56 insertions(+), 20 deletions(-) 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 f61e7b02d..f5bdd3f90 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -448,7 +448,7 @@ label > input[type="radio"] { input, textarea, select, -.cbi-dropdown, +.cbi-dropdown:not(.btn):not(.cbi-button), .uneditable-input { display: inline-block; width: 210px; @@ -470,7 +470,7 @@ select, color: #808080; } -.cbi-dropdown, +.cbi-dropdown:not(.btn):not(.cbi-button), .cbi-dynlist { min-width: 210px; max-width: 400px; @@ -563,7 +563,7 @@ select[multiple] { .td > input[type=text], .td > input[type=password], .td > select, -.td > .cbi-dropdown, +.td > .cbi-dropdown:not(.btn):not(.cbi-button), .cbi-dynlist > .add-item > .cbi-dropdown { width: 100%; } @@ -1348,7 +1348,7 @@ body.modal-overlay-active #modal_overlay { clear: both; } -.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) { +.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) { float: left; margin-right: .4em; } @@ -1375,21 +1375,25 @@ body.modal-overlay-active #modal_overlay { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.cbi-page-actions .cbi-button-apply + .cbi-button-save { +.cbi-page-actions .cbi-button-apply + .cbi-button-save, +.cbi-page-actions .cbi-button-negative + .cbi-button-save { background: linear-gradient(#fff, #fff 25%, #e6e6e6); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); color: #4a4; } .cbi-dropdown { - border: 1px solid #ccc; - border-radius: 3px; - display: inline-flex; - padding: 0; + display: inline-flex !important; cursor: pointer; height: auto; - background: linear-gradient(#fff 0%, #e9e8e6 100%); position: relative; + padding: 0 !important; +} + +.cbi-dropdown:not(.btn):not(.cbi-button) { + background: linear-gradient(#fff 0%, #e9e8e6 100%); + border: 1px solid #ccc; + border-radius: 3px; color: #404040; } @@ -1408,6 +1412,16 @@ body.modal-overlay-active #modal_overlay { width: 100%; } +.cbi-dropdown.btn > ul:not(.dropdown), +.cbi-dropdown.cbi-button > ul:not(.dropdown) { + margin: 0 0 0 13px !important; +} + +.cbi-dropdown.btn.spinning > ul:not(.dropdown), +.cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) { + margin: 0 !important; +} + .cbi-dropdown > ul.preview { display: none; } @@ -1424,8 +1438,15 @@ body.modal-overlay-active #modal_overlay { padding: 0 .25em; } +.cbi-dropdown.btn > .open, +.cbi-dropdown.cbi-button > .open { + padding: 0 .5em; + margin-left: .5em; + border-left: 1px solid; +} + .cbi-dropdown > .more, -.cbi-dropdown > ul > li[placeholder] { +.cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] { color: #777; font-weight: bold; text-shadow: 1px 1px 0px #fff; @@ -1435,7 +1456,6 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown > ul > li { display: none; - padding: .25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1443,8 +1463,14 @@ body.modal-overlay-active #modal_overlay { flex-grow: 1; align-items: center; align-self: center; - color: #404040; + color: inherit; +} + +.cbi-dropdown > ul.dropdown > li, +.cbi-dropdown:not(.btn):not(.cbi-button) > ul > li { min-height: 20px; + padding: .25em; + color: #404040; } .cbi-dropdown > ul > li .hide-open { display: block; display: initial; } @@ -1503,13 +1529,13 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown[multiple][more] > .more, .cbi-dropdown[multiple][empty] > .more { flex-grow: 1; - display: flex; + display: flex !important; } .cbi-dropdown[empty] > ul > li, .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], .cbi-dropdown[multiple][open] > ul.dropdown > li > form { - display: block; + display: block !important; } .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } 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 047bd8013..466573b26 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -340,13 +340,14 @@ header h3 a, header .brand { padding: 0; } - .cbi-page-actions .cbi-button { + .cbi-page-actions .cbi-button:not(.cbi-dropdown) { flex: 1 1 calc(50% - 2px); margin: 1px !important; overflow: hidden; text-overflow: ellipsis; } + .cbi-page-actions .cbi-button-negative, .cbi-page-actions .cbi-button-primary, .cbi-page-actions .cbi-button-apply { flex-basis: calc(100% - -2px); diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index 9708f0663..faaaf220a 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -567,7 +567,7 @@ input[type=password] { select, input[type=text], input[type=password], -.cbi-dropdown { +.cbi-dropdown:not(.btn):not(.cbi-button) { width: 20em; height: 22px; font-family: inherit; @@ -692,7 +692,8 @@ img.cbi-image-button { background: #a22; } -.cbi-page-actions .cbi-button-apply + .cbi-button-save { +.cbi-page-actions .cbi-button-apply + .cbi-button-save, +.cbi-page-actions .cbi-button-negative + .cbi-button-save { background: #fff; color: #595; } @@ -926,6 +927,7 @@ div.cbi-optionals { } .cbi-page-actions > .cbi-button-apply + .cbi-button-save, +.cbi-page-actions > .cbi-button-negative + .cbi-button-save, .cbi-page-actions > .cbi-button-save + form[method="post"], .cbi-page-actions > form[method="post"] + form[method="post"] { margin-left: 3px; @@ -1094,11 +1096,14 @@ ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after { position: relative; padding: 0; color: #000; - min-width: 20em; max-width: 100%; } -.cbi-dropdown:hover { +.cbi-dropdown:not(.btn):not(.cbi-button) { + min-width: 20em; +} + +.cbi-dropdown:not(.btn):not(.cbi-button):hover { background: #fff; } @@ -1235,6 +1240,10 @@ ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); } +.cbi-dropdown[open] > ul.dropdown > li { + color: #444; +} + .cbi-dropdown[open] > ul.dropdown > li:last-child { margin-bottom: 0; border-bottom: none; -- 2.25.1