/* 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;
|
}
|
