...
Example 6 - Example helper class implementation for xs-lower-one-col. Can be used as example 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 { .xs-lower-one-col > fieldset { > .dhxform_base_nested > .f-2-col { grid-template-columns: 1fr; > .col1, > .col2 { @include grid-column(1); } } } .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); } } } } } |
...