elixForms/elixforms-web-pages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add custom styling to common component

Browse Source
This commit is contained in:
pierpaolo.mammi
2026-07-16 16:09:33 +02:00
parent e404bf0954
commit beee00bee3
8 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/common/src/App.css
+50
View File
@@ -0,0 +1,50 @@
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
@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/design-bs/util.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css");
/* Submit button styling (elixForms main submit) */
.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;
}
}
react/common/src/ElixFormsComponentAbstract.tsx
+5 -2
View File
@@ -1,3 +1,4 @@
import './App.css'
import * as FluentUI from '@fluentui/react';
import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
@@ -132,6 +133,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
headerTitle,
pageTitle,
pageDescription,
submitDescription,
heroImageSrc
} = this.props;
@@ -173,7 +175,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
</div>
</div>
)}
<div className="receipt">
<div className="mainview">
<div className="container">
{pageTitle && <h1>{pageTitle}</h1>}
{heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
@@ -194,7 +196,8 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
{this.createMandatoryFormFields(queryParams)}
{this.createAdditionalFormFields()}
{this.renderCustomFormFields()}
<input type="submit" value="Submit" />
<br/>
<input type="submit" value={submitDescription ?? 'Submit'} />
</form>
{this.renderExtraContentPost()}
react/common/src/IElixFormsComponentProperties.ts
+1 -3
View File
@@ -1,6 +1,3 @@
import type { JSX } from "react";
import type { IElixFormsComponentCustomFormFieldFactory } from "./IElixFormsComponentCustomFormFieldFactory";
export interface IElixFormsComponentProperties {
description: string;
isDarkTheme: boolean;
@@ -13,6 +10,7 @@ export interface IElixFormsComponentProperties {
headerTitle?: string;
pageTitle?: string;
pageDescription?: string;
submitDescription?: string;
heroImageSrc?: string;
}
react/common/src/global.d.ts
Vendored
+3
View File
@@ -0,0 +1,3 @@
declare module "*.css";
declare module "*.svg";
declare module "*.png";
react/recupero-proposta-cct-da-contratti/src/App.css
-17
View File
@@ -1,20 +1,3 @@
@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/design-bs/util.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css');
@import url('https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css');
/* ===== Autocomplete Component Styles ===== */
.autocomplete-wrapper {
react/recupero-proposta-cct-da-contratti/src/App.jsx
+1
View File
@@ -12,6 +12,7 @@ function App() {
headerTitle="Modulo - Placeholder Titolo Modulo"
pageTitle="Recupero Proposta CCT da Contratti"
pageDescription=""
submitDescription='CONFERMA E PROSEGUI'
/>
);
}