diff --git a/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss b/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss index 61d0b2cf..74c2221e 100644 --- a/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss +++ b/fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss @@ -94,9 +94,12 @@ } .o_field_widget select { cursor: pointer; } - // Native checkboxes inside Express cells — keep them visible at - // a comfortable size. Boolean toggle widget retains its own look. - .o_field_widget input[type="checkbox"] { + // Native (non-switch) checkboxes inside Express cells — keep + // them visible at a comfortable size. EXCLUDES the boolean_toggle + // widget (.o_field_boolean_toggle) which uses Bootstrap's + // .form-switch slider styling that breaks if we set a fixed + // width on the input. + .o_field_widget:not(.o_field_boolean_toggle) input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; @@ -105,9 +108,35 @@ accent-color: $xpr-accent; } - // Ensure Boolean/toggle aligns visually with the underline - .o_field_boolean, + // Boolean toggle widget — preserve Bootstrap's slider proportions + // (2em × 1em). Just centre vertically with the row height. .o_field_boolean_toggle { + padding: 5px 0; + min-height: 30px; + display: inline-flex; + align-items: center; + + // Bootstrap form-switch styling — accent the slider + .form-check-input { + width: 2em !important; + height: 1.2em !important; + min-height: 1.2em !important; + cursor: pointer; + margin: 0; + + &:checked { + background-color: $xpr-accent; + border-color: $xpr-accent; + } + &:focus { + box-shadow: 0 0 0 0.15rem $xpr-accent-bg; + border-color: $xpr-accent; + } + } + } + + // Non-switch Boolean + .o_field_boolean:not(.o_field_boolean_toggle) { padding: 5px 0; min-height: 30px; display: flex;