Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-bootstrap: fix cbi-value caption alignment

Browse source 
Since the removal of the clearfix styles, overlong captions will displace
subsequent input field rows.

Fix the issue by replace floating label + field margin with flexbox styles.

Fixes: #5535
Fixes: 8055acc9be ("luci-theme-bootstrap: overhaul styles")
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2021-11-21 22:51:04 +01:00
parent b186ff9c90
commit 4720a025e8
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -502,11 +502,6 @@ pre {
/* Forms.less /* Forms.less
* Base styles for various input types, form layouts, and states * Base styles for various input types, form layouts, and states
* ------------------------------------------------------------- */ * ------------------------------------------------------------- */
form,
.cbi-value {
margin-bottom: 18px;
}
fieldset { fieldset {
margin-bottom: 9px; margin-bottom: 9px;
padding-top: 9px; padding-top: 9px;
@ -536,17 +531,20 @@ textarea {
line-height: normal; line-height: normal;
} }
form .input, .cbi-value {
display: flex;
margin-bottom: 18px;
}
.cbi-value-field { .cbi-value-field {
margin-left: 200px; margin-left: 20px;
} }
.cbi-value label.cbi-value-title { .cbi-value label.cbi-value-title {
padding-top: 6px; padding-top: 6px;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
float: left; flex: 0 0 180px;
width: 180px;
text-align: right; text-align: right;
color: var(--text-color-high); color: var(--text-color-high);
} }

6
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
View file

@ -161,6 +161,11 @@ header h3 a, header .brand {
padding-bottom: .5em; padding-bottom: .5em;
border-bottom: 1px solid var(--border-color-high); border-bottom: 1px solid var(--border-color-high);
margin-bottom: .5em; margin-bottom: .5em;
display: block;
}
.cbi-value.hidden {
display: none;
} }
.cbi-value .cbi-value:last-child { .cbi-value .cbi-value:last-child {
@ -170,7 +175,6 @@ header h3 a, header .brand {
} }
.cbi-value label.cbi-value-title { .cbi-value label.cbi-value-title {
float: none;
font-weight: bold; font-weight: bold;
} }