Add form styles and update button classes for consistency

- Introduced a new CSS file for form styles (forms.css) to enhance form layout and design.
- Removed deprecated button styles from imports.css and updated button classes across templates to use the new utility classes.
- Updated various templates to reflect the new button styles, ensuring a consistent look and feel throughout the application.
- Refactored form-related styles in main.css and removed redundant styles from projects.css and scenarios.css.
- Ensured responsive design adjustments for form actions in smaller viewports.
This commit is contained in:
2025-11-13 21:18:32 +01:00
parent 4d0e1a9989
commit fb6816de00
20 changed files with 282 additions and 214 deletions

View File

@@ -20,16 +20,16 @@
</div>
<div class="header-actions">
{% if scenario_url %}
<a class="btn" href="{{ scenario_url }}">Scenario Overview</a>
<a class="btn btn--secondary" href="{{ scenario_url }}">Scenario Overview</a>
{% elif project_url %}
<a class="btn" href="{{ project_url }}">Project Overview</a>
<a class="btn btn--secondary" href="{{ project_url }}">Project Overview</a>
{% elif cancel_url %}
<a class="btn" href="{{ cancel_url }}">Back</a>
<a class="btn btn--secondary" href="{{ cancel_url }}">Back</a>
{% endif %}
{% if scenario_portfolio_url %}
<a class="btn" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
<a class="btn btn--secondary" href="{{ scenario_portfolio_url }}">Scenario Portfolio</a>
{% endif %}
<button class="btn primary" type="submit" form="capex-form">Save &amp; Calculate</button>
<button class="btn btn--primary" type="submit" form="capex-form">Save &amp; Calculate</button>
</div>
</header>
@@ -66,7 +66,7 @@
</header>
<div class="table-actions">
<button class="btn secondary" type="button" data-action="add-component">Add Component</button>
<button class="btn btn--secondary" type="button" data-action="add-component">Add Component</button>
</div>
{% if component_errors is defined and component_errors %}
@@ -131,7 +131,7 @@
<input type="text" name="components[{{ loop.index0 }}][notes]" value="{{ component.notes or '' }}" />
</td>
<td class="row-actions">
<button class="btn link" type="button" data-action="remove-component">Remove</button>
<button class="btn btn--link" type="button" data-action="remove-component">Remove</button>
</td>
</tr>
{% endfor %}