apply custom elixforms styling

This commit is contained in:
2026-07-17 15:19:55 +02:00
parent fefb45505c
commit bad919a98a
4 changed files with 27 additions and 65 deletions
+19 -57
View File
@@ -1,62 +1,24 @@
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/css/bootstrap-italia.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/js/bootstrap-italia.bundle.min.js");
:root {
--font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
}
/* elixForms styles customizations */
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
body {
font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
}
.it-brand-wrapper .icon {
width: 120px;
height: auto;
}
.page-shell-card {
border: 1px solid #e6e6e6;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}
/* Submit button styling (elixForms main submit) */
.mainview .container .submit {
width: auto;
text-align: right;
}
.mainview .container form input[type="submit"] {
background-color: #0066cc;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
box-shadow: none;
transition:
transform 120ms ease,
opacity 120ms ease;
display: inline-block;
}
.mainview .container form input[type="submit"]:hover {
background-color: #0053a6;
}
.mainview .container form input[type="submit"]:active {
opacity: 0.5;
}
@media (max-width: 480px) {
.mainview .container form input[type="submit"] {
width: 100%;
padding-left: 18px;
padding-right: 18px;
}
}
/* These are here for future imports...
@import url("https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css");
*/
@@ -218,9 +218,9 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
{cardDescription && <p className="lead text-secondary">{cardDescription}</p>}
{(alertInfoTitle || alertInfoMessage) &&
<div className="alert alert-warning" role="status">
{alertInfoTitle && <p className="h6 mb-1">{alertInfoTitle}</p>}
{alertInfoMessage &&<p className="text-secondary mb-0">{alertInfoMessage}</p>}
<div className="custom-alert custom-alert-warning" role="status">
{alertInfoTitle && <div><b>{alertInfoTitle}</b></div>}
{alertInfoMessage && <div className='small'>{alertInfoMessage}</div>}
</div>}
{hasAuthenticationError ? (
@@ -230,9 +230,9 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
{this.renderExtraContentPre()}
{(instructionsTitle || instructionsMessage) &&
<div className="alert alert-info" role="status">
{instructionsTitle && <p className="h6 mb-1">{instructionsTitle}</p>}
{instructionsMessage && <p className="text-secondary mb-0">{instructionsMessage}</p>}
<div className="custom-alert custom-alert-info" role="status">
{instructionsTitle && <div><b>{instructionsTitle}</b></div>}
{instructionsMessage && <div className='small'>{instructionsMessage}</div>}
</div>
}
<form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
+1 -1
View File
@@ -19,7 +19,7 @@ export class ElixFormsElement {
return (
<div className="row mb-3 align-items-start">
<div className="col-12 col-md-4">
<div className="text-md-end pe-md-3">
<div className="text-md-end pe-md-3 mt-2">
{this.label}{this.separator}
</div>
</div>