...
Example 6 - Example helper class implementation for xs-lower-one-col. Can be used as example reference for a new helper class.
| Code Block | ||||
|---|---|---|---|---|
| ||||
// RESPONSIVE STYLES FOR Responsive UI Forms
// SIZES: xs, xxs
@include panel-w(('xs', 'xxs')) { // xs and xxs
// helper classes for responsive forms
.dhxform_obj_material {
// apply the changes for a fieldset here
.xs-lower-one-col > fieldset {
> .dhxform_base_nested > .f-2-col {
grid-template-columns: 1fr;
> .col1, > .col2 {
@include grid-column(1);
}
}
}
// apply the changes for the blocks here
.block_dhxform_item_label_left.xs-lower-one-col {
> .dhxform_block > .in_block > .f-2-col {
grid-template-columns: 1fr;
> .col1, > .col2 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-3-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-4-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3, > .col4 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-5-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3, > .col4, > .col5 {
@include grid-column(1);
}
}
> .dhxform_block > .in_block > .f-6-col {
grid-template-columns: 1fr;
> .col1, > .col2, > .col3 {
@include grid-column(1);
}
}
}
}
}
|
...