You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
7.9 KiB
182 lines
7.9 KiB
/* Single Column Layout */ |
|
/**********************************************************************************************************************/ |
|
/*** columns == 'auto' ***/ |
|
@media all and (max-width: 500px) { |
|
.mblFormLayout.mblFormLayoutAuto fieldset { |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
/* A gap between rows */ |
|
.mblFormLayout.mblFormLayoutAuto > * + * { |
|
margin-top: 0.6em; |
|
} |
|
/* Text widgets */ |
|
.mblFormLayout.mblFormLayoutAuto .mblTextArea, |
|
.mblFormLayout.mblFormLayoutAuto .mblExpandingTextArea, |
|
.mblFormLayout.mblFormLayoutAuto .mblTextBox, |
|
.mblFormLayout.mblFormLayoutAuto .mblSearchBox { |
|
width: 100%; |
|
box-sizing: border-box; |
|
} |
|
} |
|
/*** columns == 'single' ***/ |
|
.mblFormLayout.mblFormLayoutSingleCol fieldset { |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
/* A gap between rows */ |
|
.mblFormLayout.mblFormLayoutSingleCol > * + * { |
|
margin-top: 0.6em; |
|
} |
|
/* Text widgets */ |
|
.mblFormLayout.mblFormLayoutSingleCol .mblTextArea, |
|
.mblFormLayout.mblFormLayoutSingleCol .mblExpandingTextArea, |
|
.mblFormLayout.mblFormLayoutSingleCol .mblTextBox, |
|
.mblFormLayout.mblFormLayoutSingleCol .mblSearchBox { |
|
width: 100%; |
|
box-sizing: border-box; |
|
} |
|
/* Two Columns Layout */ |
|
/**********************************************************************************************************************/ |
|
/*** columns == 'auto' ***/ |
|
@media all and (min-width: 500px) { |
|
/* Form layout selector*/ |
|
.mblFormLayout.mblFormLayoutAuto { |
|
display: table; |
|
width: 100%; |
|
} |
|
/* Form rows */ |
|
.mblFormLayout.mblFormLayoutAuto > * { |
|
display: table-row; |
|
} |
|
/* Form cells */ |
|
.mblFormLayout.mblFormLayoutAuto > * > * { |
|
display: table-cell; |
|
vertical-align: top; |
|
padding: 0.5em 0; |
|
} |
|
/* Left cells */ |
|
.mblFormLayout.mblFormLayoutAuto > * > *:first-child { |
|
width: 20%; |
|
padding-right: 0.5em; |
|
} |
|
/* mblFormLayoutRightAlign optional selector definition */ |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child { |
|
text-align: right; |
|
} |
|
/* Force right margin of last elements of the right column, no way to select elements followed by a <br> */ |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblButton:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblToggleButton:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblCheckBox:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSwitch:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblRadioButton:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblTextArea:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblExpandingTextArea:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblTextBox:last-child, |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSearchBox:last-child { |
|
margin-right: 0; |
|
} |
|
/* The Slider sticks to its bounds when margin=10px */ |
|
.mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSlider:last-child { |
|
display: inline-block; |
|
margin-right: 10px; |
|
margin-top: 0px; |
|
} |
|
/* Text widgets */ |
|
.mblFormLayout.mblFormLayoutAuto .mblTextArea, |
|
.mblFormLayout.mblFormLayoutAuto .mblExpandingTextArea, |
|
.mblFormLayout.mblFormLayoutAuto .mblTextBox, |
|
.mblFormLayout.mblFormLayoutAuto .mblSearchBox { |
|
width: 50%; |
|
box-sizing: border-box; |
|
} |
|
} |
|
/*** columns == 'two' ***/ |
|
/* Form layout selector*/ |
|
.mblFormLayout.mblFormLayoutTwoCol { |
|
display: table; |
|
width: 100%; |
|
} |
|
/* Form rows */ |
|
.mblFormLayout.mblFormLayoutTwoCol > * { |
|
display: table-row; |
|
} |
|
/* Form cells */ |
|
.mblFormLayout.mblFormLayoutTwoCol > * > * { |
|
display: table-cell; |
|
vertical-align: top; |
|
padding: 0.5em 0; |
|
} |
|
/* Left cells */ |
|
.mblFormLayout.mblFormLayoutTwoCol > * > *:first-child { |
|
width: 20%; |
|
padding-right: 0.5em; |
|
} |
|
/* mblFormLayoutRightAlign optional selector definition */ |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child { |
|
text-align: right; |
|
} |
|
/* Force right margin of last elements of the right column, no way to select elements followed by a <br> */ |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblButton:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblToggleButton:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblCheckBox:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSwitch:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblRadioButton:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblTextArea:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblExpandingTextArea:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblTextBox:last-child, |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSearchBox:last-child { |
|
margin-right: 0; |
|
} |
|
/* The Slider sticks to its bounds when margin=10px */ |
|
.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSlider:last-child { |
|
display: inline-block; |
|
margin-right: 10px; |
|
margin-top: 0px; |
|
} |
|
/* Text widgets */ |
|
.mblFormLayout.mblFormLayoutTwoCol .mblTextArea, |
|
.mblFormLayout.mblFormLayoutTwoCol .mblExpandingTextArea, |
|
.mblFormLayout.mblFormLayoutTwoCol .mblTextBox, |
|
.mblFormLayout.mblFormLayoutTwoCol .mblSearchBox { |
|
width: 50%; |
|
box-sizing: border-box; |
|
} |
|
/* Common Rules*/ |
|
/**********************************************************************************************************************/ |
|
.mblFormLayout fieldset { |
|
border: none; |
|
margin: 0; |
|
} |
|
/* Bold widget labels */ |
|
.mblFormLayout > * > *:first-child { |
|
font-weight: bold; |
|
} |
|
/* Whatever the screen width, force left margin of first elements and elements following a <br> */ |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblButton:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblToggleButton:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblCheckBox:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSwitch:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblRadioButton:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblTextArea:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblExpandingTextArea:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblTextBox:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSearchBox:first-child, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblButton, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblToggleButton, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblCheckBox, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblSwitch, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblRadioButton, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblTextArea, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblExpandingTextArea, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblTextBox, |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblSearchBox { |
|
margin-left: 0; |
|
} |
|
/* The Slider sticks to its bounds when margin=10px */ |
|
.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSlider:first-child { |
|
display: inline-block; |
|
margin-left: 10px; |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
}
|
|
|