Label and field componentAvailable since EcoComposer 2.2
Classical Label and field example :
The default values are :
$-default--light--field--color : #333;
$-default--light--field--color--hover : #33b;
$-default--light--field--color--focus : #55b;
$-default--light--field--color--focus-visible : #55b;
$-default--light--field--color--valid : #3b3;
$-default--light--field--color--invalid : #b33;
$-default--dark--field--color : #eee;
$-default--dark--field--color--hover : #55d;
$-default--dark--field--color--focus : #77e;
$-default--dark--field--color--focus-visible : #77e;
$-default--dark--field--color--valid : #5d5;
$-default--dark--field--color--invalid : #d55;
border-radius : 5px,
horizontal-gap : 1rem * theming.$font-size,
field-padding : .5rem * theming.$font-size 1rem * theming.$font-size,
font-family : theming.$font-family,
label-width : 9.5rem * theming.$font-size,
label-and-field--border : 'label-and-field--border',
label-and-field--border--hover : 'label-and-field--border--hover',
label-and-field--border--focus : 'label-and-field--border--focus',
label-and-field--border--focus-visible : 'label-and-field--border--focus-visible',
label-and-field--border--valid : 'label-and-field--border--valid',
label-and-field--border--invalid : 'label-and-field--border--invalid',
label-and-field--box-shadow : 'label-and-field--box-shadow',
label-and-field--box-shadow--hover : 'label-and-field--box-shadow--hover',
label-and-field--box-shadow--focus : 'label-and-field--box-shadow--focus',
label-and-field--box-shadow--focus-visible : 'label-and-field--box-shadow--focus-visible',
label-and-field--box-shadow--valid : 'label-and-field--box-shadow--valid',
label-and-field--box-shadow--invalid : 'label-and-field--box-shadow--invalid',
label-and-field--color : 'label-and-field--color',
print : false,
required-label : '*',
suffix : '',
themes : (
light : (
default--label-and-field--border : 1px solid lighten($-default--light--field--color, 0.3),
default--label-and-field--border--hover : 1px solid lighten($-default--light--field--color--hover, 0.3),
default--label-and-field--border--focus : 1px solid lighten($-default--light--field--color--focus, 0.3),
default--label-and-field--border--focus-visible : 1px solid lighten($-default--light--field--color--focus-visible, 0.3),
default--label-and-field--border--valid : 1px solid lighten($-default--light--field--color--valid, 0.3),
default--label-and-field--border--invalid : 1px solid lighten($-default--light--field--color--invalid, 0.3),
default--label-and-field--box-shadow : 0 0 .5rem * theming.$font-size $-default--light--field--color,
default--label-and-field--box-shadow--hover : 0 0 .75rem * theming.$font-size $-default--light--field--color--hover,
default--label-and-field--box-shadow--focus : 0 0 .5rem * theming.$font-size $-default--light--field--color--focus,
default--label-and-field--box-shadow--focus-visible : 0 0 .5rem * theming.$font-size $-default--light--field--color--focus-visible,
default--label-and-field--box-shadow--valid : 0 0 .5rem * theming.$font-size $-default--light--field--color--valid,
default--label-and-field--box-shadow--invalid : 0 0 .5rem * theming.$font-size $-default--light--field--color--invalid,
default--label-and-field--color : #333,
),
dark : (
default--label-and-field--border : 1px solid lighten($-default--dark--field--color, 0.3),
default--label-and-field--border--hover : 1px solid lighten($-default--dark--field--color--hover, 0.3),
default--label-and-field--border--focus : 1px solid lighten($-default--dark--field--color--focus, 0.3),
default--label-and-field--border--focus-visible : 1px solid lighten($-default--dark--field--color--focus-visible, 0.3),
default--label-and-field--border--valid : 1px solid lighten($-default--dark--field--color--valid, 0.3),
default--label-and-field--border--invalid : 1px solid lighten($-default--dark--field--color--invalid, 0.3),
default--label-and-field--box-shadow : 0 0 .5rem * theming.$font-size $-default--dark--field--color,
default--label-and-field--box-shadow--hover : 0 0 .5rem * theming.$font-size $-default--dark--field--color--hover,
default--label-and-field--box-shadow--focus : 0 0 .5rem * theming.$font-size $-default--dark--field--color--focus,
default--label-and-field--box-shadow--focus-visible : 0 0 .5rem * theming.$font-size $-default--dark--field--color--focus-visible,
default--label-and-field--box-shadow--valid : 0 0 .5rem * theming.$font-size $-default--dark--field--color--valid,
default--label-and-field--box-shadow--invalid : 0 0 .5rem * theming.$font-size $-default--dark--field--color--invalid,
default--label-and-field--color : #ccc
)
)
We can implement it that way :
@include labelAndField.init();
@include labelAndField.create(
(
'border-radius' : 5px,
'horizontal-gap' : 1rem,
'field-padding' : .5rem 1rem,
'label-width' : 9.5rem,
'suffix' : '-2',
'themes': $themes
)
);
We can implement it that way :
<div class=field-group>
<label for=my-field class="label required">Name</label>
<input id=my-field class=field required />
</div>