[FEATURE] Make CSS for sysext form configurable
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Configuration / TypoScript / setup.txt
1 tt_content.mailform.20 >
2 tt_content.mailform.20 = FORM
3 tt_content.mailform.20 {
4 stdWrap.wrap = <div class="csc-mailform"> | </div>
5 stdWrap {
6 editIcons = tt_content: bodytext
7 editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.xml:eIcon.form
8
9 prefixComment = 2 | Mail form inserted:
10 }
11 }
12
13 #tt_content.login.20 >
14 #tt_content.login.20 = FORM
15 #tt_content.login.20 {
16 # prefix = login
17 # method = post
18 # 10 = FIELDSET
19 # 10 {
20 # legend = TEXT
21 # legend {
22 # data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.username
23 # }
24 # 10 = TEXTLINE
25 # 10 {
26 # name = user
27 # id = mailformuser
28 # size = 20
29 # label = TEXT
30 # label {
31 # data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.username
32 # }
33 # }
34 # 20 = PASSWORD
35 # 20 {
36 # name = pass
37 # id = mailformpass
38 # size = 20
39 # label = TEXT
40 # label {
41 # data = LLL:EXT:css_styled_content/pi1/locallang.xml:login.password
42 # }
43 # }
44 # }
45 # 30 = HIDDEN
46 # 30 {
47 # name = logintype
48 # id = mailformlogintype
49 # }
50 # 20 = SUBMIT
51 # 20 {
52 # name = submit
53 # id = mailformsubmit
54 # value = login
55 # }
56 #}
57
58
59 plugin.tx_form._CSS_DEFAULT_STYLE (
60 div.csc-mailform ol,
61 div.csc-mailform ol li {
62 margin: 0;
63 padding: 0;
64 }
65
66 div.csc-mailform ol li {
67 overflow: hidden;
68 }
69
70 div.csc-mailform fieldset {
71 margin: 0;
72 padding: 0;
73 position: relative;
74 }
75
76 div.csc-mailform legend {
77 margin-left: 1em;
78 color: #000000;
79 font-weight: bold;
80 }
81
82 div.csc-mailform fieldset ol {
83 padding: 1em 1em 0 1em;
84 }
85
86 div.csc-mailform fieldset li {
87 padding: 0.5em;
88 margin-bottom: 0.5em;
89 list-style: none;
90 }
91
92 div.csc-mailform fieldset.submit {
93 border-style: none;
94 }
95
96 /**
97 * Normal label
98 * Left aligned, in front of input
99 */
100 div.csc-mailform li label {
101 float: left;
102 width: 13em;
103 margin-right: 1em;
104 vertical-align: baseline;
105 }
106
107 div.csc-mailform li input + label,
108 div.csc-mailform li textarea + label,
109 div.csc-mailform li select + label {
110 float: none;
111 width: auto;
112 margin-right: 0;
113 margin-left: 1em;
114 }
115
116 div.csc-mailform li textarea + label {
117 vertical-align: top;
118 }
119
120 label em,
121 legend em {
122 display: block;
123 color: #060;
124 font-size: 85%;
125 font-style: normal;
126 text-transform: uppercase;
127 }
128
129 legend em {
130 position: absolute;
131 }
132
133 label strong,
134 legend strong {
135 display: block;
136 color: #C00;
137 font-size: 85%;
138 font-weight: normal;
139 text-transform: uppercase;
140 }
141
142 legend strong {
143 position: absolute;
144 top: 1.4em;
145 }
146
147 /**
148 * Labels alignment right
149 */
150 .labels-alignment-right label,
151 .labels-alignment-right .fieldset-subgroup legend,
152 .labels-alignment-right.fieldset-subgroup legend {
153 text-align: right;
154 }
155
156 /**
157 * Horizontal fieldset
158 */
159 fieldset.fieldset-horizontal {
160 border-width: 0;
161 }
162
163 fieldset.fieldset-horizontal ol {
164 padding: 0;
165 }
166
167 fieldset.fieldset-horizontal li {
168 float: left;
169 padding: 0;
170 margin-right: 1em;
171 }
172
173 fieldset.fieldset-horizontal.label-below label {
174 display: block;
175 margin-left: 0;
176 margin-top: 0.2em;
177 font-size: 90%;
178 color: #999999;
179 text-align: left;
180 }
181
182 fieldset.fieldset-horizontal label em {
183 display: inline;
184 }
185
186 /**
187 * Subgroup fieldset
188 */
189 fieldset.fieldset-subgroup {
190 margin-bottom: -2em;
191 border-style: none;
192 }
193
194 fieldset.fieldset-subgroup legend {
195 margin-left: 0;
196 padding: 0;
197 font-weight: normal;
198 width: 13em;
199 }
200
201 fieldset.fieldset-subgroup ol {
202 position: relative;
203 top: -1.4em;
204 margin: 0 0 0 14em;
205 padding: 0;
206 }
207
208 fieldset.fieldset-subgroup li {
209 padding: 0;
210 }
211
212 fieldset.fieldset-subgroup input + label {
213 float: none;
214 width: auto;
215 display: inline;
216 margin: 0 0 0 1em;
217 }
218
219 /**
220 * Labels as block
221 * Labels displayed above or below the input fields
222 */
223 .labels-block label {
224 display: block;
225 float: none;
226 margin: 0 0 0.5em;
227 width: auto;
228 }
229
230 .labels-block input + label,
231 .labels-block textarea + label {
232 margin: 0.5em 0 0;
233 }
234
235 .labels-block fieldset.fieldset-subgroup,
236 fieldset.labels-block.fieldset-subgroup {
237 margin-bottom: 0;
238 }
239
240 .labels-block .fieldset-subgroup legend,
241 .labels-block.fieldset-subgroup legend {
242 width: auto;
243 }
244
245 .labels-block .fieldset-subgroup legend em,
246 .labels-block.fieldset-subgroup legend em {
247 position: relative;
248 }
249
250 .labels-block .fieldset-subgroup legend strong,
251 .labels-block.fieldset-subgroup legend strong {
252 position: relative;
253 top: 0;
254 }
255
256 .labels-block .fieldset-subgroup ol,
257 .labels-block.fieldset-subgroup ol {
258 top: 0;
259 margin: 0;
260 padding: 0.5em 0 0;
261 }
262 )