From 6ce54e57335cf98a012fcc11fa57d632704ab9f1 Mon Sep 17 00:00:00 2001 From: Julian Maurice Date: Fri, 29 Jul 2022 12:29:40 +0200 Subject: [PATCH] Bug 30952: Fix "rows" forms Issue #7 --- .../intranet-tmpl/prog/css/src/_forms.scss | 39 ++ .../prog/css/src/staff-global.scss | 355 +----------------- 2 files changed, 40 insertions(+), 354 deletions(-) create mode 100644 koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss new file mode 100644 index 0000000000..8928834db5 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_forms.scss @@ -0,0 +1,39 @@ +fieldset.rows ol { + $label-width: 12rem; + $gap-width: 1rem; + + padding: 0; + + li { + display: flex; + flex-wrap: wrap; + align-items: center; + + & > * { + margin: 0 $gap-width 0 0; + } + + label { + font-weight: bold; + + &:first-child { + flex-basis: $label-width; + flex-shrink: 0; + flex-grow: 0; + text-align: right; + } + + &.error { + order: -1; + width: 100%; + padding-left: $label-width + $gap-width; + } + } + + div.hint { + width: 100%; + margin-top: .25rem; + padding-left: $label-width + $gap-width; + } + } +} diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 9a90ef38f1..28b2003a25 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -982,277 +982,11 @@ fieldset { } } - &.rows { - border: 0; - clear: left; - float: left; - font-size: 90%; - width: 100%; - - fieldset { - background-color: transparent; - border-width: 1px; - margin: 1em; - padding: .3em; - - &.action { - padding: 1em; - } - } - - &.inputnote { - clear: left; - float: left; - margin: 1em 0 0 11em; - } - - - &.left { - label { - text-align: left; - width: 8em; - } - - li { - padding-bottom: .4em; - } - - span { - label { - text-align: left; - width: 8em; - } - } - } - - &.ui-accordion-content { - border-top-left-radius: 0; - border-top-right-radius: 0; - margin: 0; - padding: 0; - width: 100%; - - table { - margin: 0; - } - } - - &.unselected { - background-color: #FFFFFF; - border: 0; - border-width: 0; - } - - caption { - font-size: 120%; - } - - div { - &.hint { - font-size: 105%; - margin: .5rem 0; - margin-left: 10.5rem; - } - } - - label { - float: left; - font-weight: bold; - margin-right: 1rem; - text-align: right; - width: auto; - min-width: 9rem; - - &.error { - float: none; - margin-left: 1rem; - width: auto; - } - - &.inline { - display: inline; - float: none; - margin-left: 1rem; - } - - &.radio { - display: inline-block; - margin: 0 1rem 0 0; - padding: 0; - width: auto; - } - - &.yesno { - float: none; - width: auto; - } - } - - li { - clear: left; - float: left; - list-style-type: none; - padding-bottom: 1em; - width: 100%; - - &[aria-disabled="true"] { - color: #999; - } - - &.radio { - margin: 0; - padding-left: 9em; - width: auto; - - input + label { - margin-left: 0; - padding-left: 0; - } - - label { - float: none; - margin: 0 0 0 1em; - width: auto; - } - } - - input + label { - margin-left: 0; - padding-left: 0; - } - - fieldset { - label { - width: 6em; - } - - li.radio { - padding-left: 0; - } - } - } - - ol { - list-style-type: none; - padding: 1em 1em 0; - - &.radio { - label { - float: none; - margin-left: 20px; - margin-right: 30px; - padding-left: 0; - vertical-align: middle; - width: auto; - - &.radio { - float: left; - margin-right: 1em; - margin-top: 0; - width: 9em; - } - } - - input { - &[type="checkbox"], - &[type="radio"] { - margin-left: -20px; - } - } - } - - table { - display: inline-block; - font-size: 105%; - margin: 0; - } - } - - p { - margin: 1em 0 1em 1em; - } - - span { - &.label { - float: left; - font-weight: bold; - margin-right: 1em; - text-align: right; - width: 9em; - } - - &.hint { - font-size: 105%; - } - } - - table { - clear: both; - font-size: 105%; - margin: 1em 0 1em 1em; - - &.dataTable { - margin: 0; - } - - &.mceListBox { - margin: 0; - } - } - - td { - label { - float: none; - font-weight: normal; - width: auto; - } - } - - .inputnote { - clear: left; - float: left; - margin: 1em 0 0 11em; - } - - + h3 { - clear: both; - padding-top: .5em; - } - - .dataTables_wrapper { - label { - font-weight: normal; - width: unset; - } - } - - .dropdown-menu { - li { - padding-bottom: 0; - } - } - - .toptabs { - clear: both; - margin: 1em; - } - } - fieldset { box-shadow: none; } } -#multi_receiving { - fieldset { - &.rows { - label { - width: 50%; - } - } - } -} - details { > summary { cursor: pointer; @@ -1452,55 +1186,6 @@ div { } } - &.rows { - clear: left; - float: left; - margin: 0; - padding: 0; - width: 100%; - - + div { - &.rows { - margin-top: .6em; - } - } - - li { - border-bottom: 1px solid #EEE; - clear: left; - float: left; - list-style-type: none; - padding: .275em; - width: 100%; - } - - ol { - list-style-type: none; - padding: .5em 1em 0 0; - - li { - li { - border-bottom: 0; - } - } - } - - p { - margin-left: 10em; - } - - span { - &.label { - float: left; - font-weight: bold; - margin-right: 1em; - padding-top: 0; - text-align: left; - width: 9em; - } - } - } - &.pages { margin: .5em 0; @@ -1650,10 +1335,6 @@ dd { .patroninfo-section { padding: .5em; margin: .5em; - - .rows { - padding: .5em; - } } .patroninfo-heading { @@ -1769,12 +1450,6 @@ dd { } -.rows { - .label { - white-space: normal; - } -} - .readonly, input[type='text']:read-only { background: #EEE url("../img/locked.png") center left no-repeat; @@ -2813,16 +2488,6 @@ td.bundle { margin-left: 20px; padding: 10px; - fieldset { - &.rows { - li { - label { - width: 16em; - } - } - } - } - .importing { background: none; padding: inherit; @@ -2830,16 +2495,6 @@ td.bundle { } .form_import { - fieldset { - &.rows { - li { - label { - width: auto; - } - } - } - } - .input_import { border: 1px solid #BCBCBC; } @@ -4574,15 +4229,6 @@ input.renew { } } -#payForm { - fieldset { - &.rows { - padding-left: 1em; - padding-right: 2em; - } - } -} - #helper { span { display: none; @@ -4866,6 +4512,7 @@ div .suggestion_note { @import "header"; @import "toolbar"; +@import "forms"; @media (min-width: 200px) { -- 2.30.2