From 363bf2f9fc6dbbedca367d2ea56901ccea054f69 Mon Sep 17 00:00:00 2001 From: Viktor Miller Date: Fri, 16 Jan 2026 12:30:49 +0900 Subject: [PATCH] feat(07-01): add error styling - Red border and background for invalid fields - Error message styling (red text) - Validation summary box with red border - Captcha widget margin spacing - Consistent error color (#d32f2f) Co-Authored-By: Claude Sonnet 4.5 --- assets/css/form.css | 325 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 assets/css/form.css diff --git a/assets/css/form.css b/assets/css/form.css new file mode 100644 index 0000000..bc07bd0 --- /dev/null +++ b/assets/css/form.css @@ -0,0 +1,325 @@ +/** + * Umzugsliste Form Styles + * + * Basic Foundation-inspired grid and form styles + */ + +/* Grid System */ +.umzugsliste-wrapper .row { + max-width: 100%; + margin: 0 auto 1rem auto; + width: 100%; +} + +.umzugsliste-wrapper .row:before, +.umzugsliste-wrapper .row:after { + content: " "; + display: table; +} + +.umzugsliste-wrapper .row:after { + clear: both; +} + +.umzugsliste-wrapper .columns { + padding-left: 0.9375rem; + padding-right: 0.9375rem; + width: 100%; + float: left; +} + +/* Column Widths */ +@media only screen and (min-width: 40.063em) { + .umzugsliste-wrapper .medium-6.columns { + width: 50%; + } +} + +@media only screen and (min-width: 64.063em) { + .umzugsliste-wrapper .large-6.columns { + width: 50%; + } + .umzugsliste-wrapper .large-12.columns { + width: 100%; + } +} + +.umzugsliste-wrapper .small-3.columns { + width: 25%; +} + +.umzugsliste-wrapper .small-4.columns { + width: 33.33333%; +} + +.umzugsliste-wrapper .small-9.columns { + width: 75%; +} + +.umzugsliste-wrapper .small-11.columns { + width: 91.66667%; +} + +.umzugsliste-wrapper .small-12.columns { + width: 100%; +} + +/* Panel */ +.umzugsliste-wrapper .panel { + background: #f2f2f2; + border: 1px solid #d9d9d9; + padding: 1.25rem; + margin-bottom: 1.25rem; +} + +.umzugsliste-wrapper .panel h3 { + margin: 0; + font-size: 1.5rem; +} + +/* Form Elements */ +.umzugsliste-wrapper input[type="text"], +.umzugsliste-wrapper select { + display: block; + width: 100%; + height: 2.3125rem; + padding: 0.5rem; + border: 1px solid #ccc; + background-color: #fff; + font-size: 0.875rem; + margin: 0 0 1rem 0; + box-sizing: border-box; +} + +.umzugsliste-wrapper input[type="radio"] { + margin-right: 0.25rem; +} + +.umzugsliste-wrapper label { + display: block; + font-size: 0.875rem; + font-weight: normal; + line-height: 1.5; + margin-bottom: 0; +} + +.umzugsliste-wrapper label.inline { + margin-top: 0.5rem; +} + +.umzugsliste-wrapper label.left { + text-align: left; +} + +.umzugsliste-wrapper fieldset { + border: 1px solid #ddd; + padding: 1.25rem; + margin: 1.125rem 0; +} + +.umzugsliste-wrapper legend { + background: #fff; + padding: 0 0.3rem; + font-weight: bold; +} + +/* Tables */ +.umzugsliste-wrapper table { + width: 100%; + border-collapse: collapse; + margin-bottom: 1.25rem; +} + +.umzugsliste-wrapper table thead { + background: #f5f5f5; +} + +.umzugsliste-wrapper table th, +.umzugsliste-wrapper table td { + padding: 0.5625rem 0.625rem; + text-align: left; + line-height: 1.125rem; +} + +.umzugsliste-wrapper table th { + font-weight: bold; + background: #ccc; +} + +.umzugsliste-wrapper table tbody tr { + border-bottom: 1px solid #ddd; +} + +.umzugsliste-wrapper table tbody tr:nth-child(even) { + background-color: #f9f9f9; +} + +.umzugsliste-wrapper table input[type="text"] { + margin: 0; + width: auto; + display: inline-block; +} + +/* Button */ +.umzugsliste-wrapper .button { + display: inline-block; + padding: 1rem 2rem; + border: none; + background-color: #008CBA; + color: #fff; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + margin: 0 0 1rem 0; +} + +.umzugsliste-wrapper .button:hover { + background-color: #007095; +} + +/* Label Badge */ +.umzugsliste-wrapper .label { + display: inline-block; + padding: 0.25rem 0.5rem; + font-size: 0.6875rem; + font-weight: bold; + line-height: 1; + white-space: nowrap; + text-align: center; +} + +.umzugsliste-wrapper .label.secondary { + background-color: #e7e7e7; + color: #333; +} + +.umzugsliste-wrapper .label.radius { + border-radius: 3px; +} + +/* Responsive table */ +@media only screen and (max-width: 40em) { + .umzugsliste-wrapper table, + .umzugsliste-wrapper thead, + .umzugsliste-wrapper tbody, + .umzugsliste-wrapper th, + .umzugsliste-wrapper td, + .umzugsliste-wrapper tr { + display: block; + } + + .umzugsliste-wrapper thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + .umzugsliste-wrapper tr { + border: 1px solid #ccc; + margin-bottom: 0.625rem; + } + + .umzugsliste-wrapper td { + border: none; + position: relative; + padding-left: 50%; + } + + .umzugsliste-wrapper td:before { + position: absolute; + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + font-weight: bold; + } +} + +/* Totals Rows */ +.umzugsliste-wrapper .room-totals th { + background-color: #ccc; + font-weight: bold; + padding: 0.75rem 0.625rem; +} + +.umzugsliste-wrapper .room-total-quantity, +.umzugsliste-wrapper .room-total-cbm { + font-size: 1.1em; +} + +/* Grand Totals Section */ +.umzugsliste-wrapper #grand-total-section { + background-color: #e8e8e8; + border: 2px solid #ccc; + margin-top: 2rem; +} + +.umzugsliste-wrapper #grand-total-section h3 { + color: #333; + font-size: 1.75rem; + margin-bottom: 1rem; +} + +.umzugsliste-wrapper .grand-totals th { + background-color: #b8b8b8; + font-weight: bold; + padding: 1rem 0.625rem; + font-size: 1.2em; +} + +.umzugsliste-wrapper #grand-total-quantity, +.umzugsliste-wrapper #grand-total-cbm { + color: #000; + font-size: 1.3em; +} + +/* Utility classes */ +.umzugsliste-wrapper .Stil2 { + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; +} + +/* Validation Errors */ +.umzugsliste-wrapper .field-error { + border-color: #d32f2f !important; + background-color: #ffebee !important; +} + +.umzugsliste-wrapper .error-message { + color: #d32f2f; + font-size: 0.875rem; + margin-top: 0.25rem; + display: block; + font-weight: normal; +} + +.umzugsliste-wrapper .validation-summary { + background-color: #ffebee; + border-left: 4px solid #d32f2f; + padding: 1rem; + margin-bottom: 1.5rem; +} + +.umzugsliste-wrapper .validation-summary h3 { + color: #d32f2f; + margin-top: 0; + margin-bottom: 0.5rem; + font-size: 1.25rem; +} + +.umzugsliste-wrapper .validation-summary ul { + margin: 0; + padding-left: 1.5rem; + color: #d32f2f; +} + +.umzugsliste-wrapper .validation-summary li { + margin-bottom: 0.25rem; +} + +/* Captcha Widget */ +.umzugsliste-wrapper .captcha-widget { + margin-bottom: 1rem; +}