nova-forms 0.1.11

Build online forms with ease.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

/* --------------------
 * Variables
 * --------------------
 *
 * To get a nice style, it should suffice to simply change the following variables.
 */

/* Default values */
:root {
    /* Color Pallette */
    --primary: white;
    --secondary: black;
    --error: red;
    --error-light: var(--error);
    --warning: orange; 
    --warning-light: var(--warning);
    --success: green;
    --success-light: var(--success);
    --info: blue;
    --info-light: var(--info);
    --text: black;
    --disabled: gray;
    --background: white;

    /* General Settings */
    --header-background: var(--background);
    --header-text-color: var(--text);
    --header-border: 1px solid var(--text);
    --header-backdrop-filter: none;
    --main-background: var(--background);
    --main-text-color: var(--text);
    --footer-background: var(--background);
    --footer-text-color: var(--text);
    --footer-border: 1px solid var(--text);
    --preview-background: var(--background);
    --preview-text-color: var(--text);
    --preview-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    --general-padding: 16px;
    --general-line-height: 1.5;

    /* General Component Settings */
    --component-vertical-margin: 1em;
    --component-transition-duration: 0.2s;

    /* Grid Settings */
    --column-gap: calc(var(--general-padding) * 2);

    /* Fonts */
    --text-font: sans-serif;
    --heading-font: var(--text-font);
    --input-font: var(--text-font);
    --text-font-size: 16px;
    --input-font-size: var(--text-font-size);
    --label-font-size: var(--text-font-size);
    --label-font-weight: normal;

    /* Page Settings */
    --page-margin: 2cm;
    --page-layout: A4;
    --page-width: 210mm;
    --page-height: 297mm;
    
    /* Field Settings */
    --field-padding: 8px;
    --field-border-radius: var(--field-padding);
    --field-label-margin-bottom: 2px;
    --field-background: none;
    --field-background-ok: var(--field-background);
    --field-background-error: var(--field-background);
    --field-background-hover: var(--field-background);
    --field-background-focus: var(--field-background-hover);
    --field-background-disabled: var(--field-background);
    --field-border: 1px solid var(--text);
    --field-border-ok: 1px solid var(--text);
    --field-border-error: 1px solid var(--error);
    --field-border-hover: var(--field-border);
    --field-border-focus: var(--field-border-hover);
    --field-border-disabled: 1px solid var(--disabled);
    --field-outline-hover: none;
    --field-outline-focus: 1px solid var(--primary);
    --field-shadow-hover: none;
    --field-shadow-focus: none;
    --field-text-color: var(--text);
    --field-text-color-hover: var(--field-text-color);
    --field-text-color-focus: var(--field-text-color-hover);
    --field-text-color-disabled: var(--disabled);

    /* Button Settings */
    --button-group-gap: calc(var(--general-padding) / 2);
    --icon-width: 24px;
    --icon-height: 24px;
    --button-padding: var(--field-padding);
    --button-border-radius: var(--field-border-radius);
    --button-background: var(--field-background);
    --button-background-hover: var(--button-background);
    --button-background-focus: var(--button-background-hover);
    --button-background-disabled: var(--field-background-disabled);
    --button-border: var(--field-border);
    --button-border-hover: var(--button-border);
    --button-border-focus: var(--button-border-hover);
    --button-border-disabled: var(--field-border-disabled);
    --button-outline-hover: var(--field-outline-hover);
    --button-outline-focus: var(--field-outline-focus);
    --button-shadow-hover: var(--field-shadow-hover);
    --button-shadow-focus: var(--field-shadow-focus);
    --button-text-color: var(--text);
    --button-text-color-hover: var(--button-text-color);
    --button-text-color-focus: var(--button-text-color-hover);
    --button-text-color-disabled: var(--disabled);

    /* Dialog Settings */
    --dialog-info-background: var(--info-light);
    --dialog-info-text-color: var(--text);
    --dialog-warning-background: var(--warning-light);
    --dialog-warning-text-color: var(--text);
    --dialog-error-background: var(--error-light);
    --dialog-error-text-color: var(--text);
    --dialog-success-background: var(--success-light);
    --dialog-success-text-color: var(--tex);
}