File tree Expand file tree Collapse file tree 7 files changed +52
-15
lines changed
source/_patterns/01-elements Expand file tree Collapse file tree 7 files changed +52
-15
lines changed Original file line number Diff line number Diff line change 110
110
--formElement---borderColor : #{$db-color-red-500 } ;
111
111
}
112
112
}
113
+
114
+ // counter styling
115
+ %form-element-counter {
116
+ margin-top : to-rem ($pxValue : 12 );
117
+
118
+ // TODO: add CSS anchor positioning
119
+
120
+ // Description styles
121
+ // TODO: This probably still needs to get further changed to a general "hint" pattern or similar
122
+ & ,
123
+ & + .description {
124
+ color : $db-color-cool-gray-500 ;
125
+ font-size : to-rem ($pxValue : 14 );
126
+ padding : to-rem ($pxValue : 6 ) to-rem ($pxValue : 10 );
127
+ }
128
+ }
Original file line number Diff line number Diff line change 11
11
{{{ validation }}}
12
12
{{ #if datalist }} list =" datalist{{ id }} " {{ /if }}
13
13
aria-labelledby =" {{ id }} -label"
14
- {{ #if variant }} data-variant =" {{ variant }} " {{ /if }} >
14
+ {{ #if variant }} data-variant =" {{ variant }} " {{ /if }}
15
+ {{ #if maxlength }} maxlength =" {{ maxlength }} "
16
+ oninput =" result_{{ id }} .value=this.value.length+'/'+this.attributes.maxlength.value" {{ /if }} >
15
17
<label class =" elm-label"
16
18
for =" {{ id }} "
17
19
aria-hidden =" true"
23
25
<option {{ #if value }} value =" {{ value }} " {{ /if }} >{{ text }} </option >
24
26
{{ /each }}
25
27
</datalist >{{ /if }}
28
+ {{ #if maxlength }} <output for =" {{ id }} " id =" result_{{ id }} " ></output >{{ /if }}
Original file line number Diff line number Diff line change 145
145
@extend %form-element-validation ;
146
146
@extend %form-element-validation-programmatic ;
147
147
/* stylelint-enable order/order */
148
+
149
+ & :is(
150
+ [type = " email" ],
151
+ [type = " password" ],
152
+ [type = " search" ],
153
+ [type = " tel" ],
154
+ [type = " text" ],
155
+ [type = " url" ]
156
+ )
157
+ + label
158
+ + output {
159
+ @extend %form-element-counter ;
160
+ }
148
161
}
149
162
150
163
& [type = " search" ] {
Original file line number Diff line number Diff line change
1
+ {
2
+ "type" : " text" ,
3
+ "placeholder" : " Projekt Name" ,
4
+ "id" : " input16" ,
5
+ "label" : " Textlabel" ,
6
+ "maxlength" : " 100"
7
+ }
Original file line number Diff line number Diff line change
1
+ ---
2
+ title : Input - maxlength
3
+ order : 12
4
+ hidden : true
5
+ ---
6
+
7
+ To set the maximum length of allowed characters on an input element, you could use the ` maxlength ` -attribute on the input field. This would additionally provide a visual counter.
8
+
9
+ Please keep in mind that you'll probably have to position the output element yourself in relation to the context of e.g. a wrapping HTML element; we'll have a future solution by CSS Anchor Positioning as well.
Original file line number Diff line number Diff line change 6
6
{{ #if disabled }} disabled{{ /if }}
7
7
{{ #if describedbyid }} aria-describedby =" {{ describedbyid }} " {{ /if }}
8
8
{{{ validation }}}
9
- {{ #if maxlength }} maxlength =" {{ maxlength }} "
10
9
{{ #if invalid }} aria-invalid =" {{ invalid }} " {{ /if }}
10
+ {{ #if maxlength }} maxlength =" {{ maxlength }} "
11
11
oninput =" result_{{ id }} .value=this.value.length+'/'+this.attributes.maxlength.value" {{ /if }}
12
12
{{ #if variant }} data-variant =" {{ variant }} " {{ /if }} >{{ value }} </textarea >
13
13
{{ #if maxlength }} <output for =" {{ id }} " id =" result_{{ id }} " ></output >{{ /if }}
Original file line number Diff line number Diff line change 61
61
}
62
62
}
63
63
64
- // TODO: Evaluate whether those could get moved to ../_form-elements.scss
65
64
& + output {
66
- // amount of signs output
67
- float : right ;
68
-
69
- margin-top : to-rem ($pxValue : 12 );
65
+ @extend %form-element-counter ;
70
66
71
- // Description styles
72
- // TODO: This probably still needs to get further changed to a general "hint" pattern or similar
73
- & ,
74
- & + .description {
75
- color : $db-color-cool-gray-500 ;
76
- font-size : to-rem ($pxValue : 14 );
77
- padding : to-rem ($pxValue : 6 ) to-rem ($pxValue : 10 );
78
- }
67
+ float : right ;
79
68
}
80
69
81
70
// ### Style variations
You can’t perform that action at this time.
0 commit comments