1 2@media all and (max-width: 500px) { 3 .mblFormLayout.mblFormLayoutAuto fieldset { 4 padding-left: 0; 5 padding-right: 0; 6 } 7 8 .mblFormLayout.mblFormLayoutAuto > * + * { 9 margin-top: 0.6em; 10 } 11 12 .mblFormLayout.mblFormLayoutAuto .mblTextArea, 13 .mblFormLayout.mblFormLayoutAuto .mblExpandingTextArea, 14 .mblFormLayout.mblFormLayoutAuto .mblTextBox, 15 .mblFormLayout.mblFormLayoutAuto .mblSearchBox { 16 width: 100%; 17 box-sizing: border-box; 18 } 19} 20.mblFormLayout.mblFormLayoutSingleCol fieldset { 21 padding-left: 0; 22 padding-right: 0; 23} 24.mblFormLayout.mblFormLayoutSingleCol > * + * { 25 margin-top: 0.6em; 26} 27.mblFormLayout.mblFormLayoutSingleCol .mblTextArea, 28.mblFormLayout.mblFormLayoutSingleCol .mblExpandingTextArea, 29.mblFormLayout.mblFormLayoutSingleCol .mblTextBox, 30.mblFormLayout.mblFormLayoutSingleCol .mblSearchBox { 31 width: 100%; 32 box-sizing: border-box; 33} 34@media all and (min-width: 500px) { 35 36 .mblFormLayout.mblFormLayoutAuto { 37 display: table; 38 width: 100%; 39 } 40 41 .mblFormLayout.mblFormLayoutAuto > * { 42 display: table-row; 43 } 44 45 .mblFormLayout.mblFormLayoutAuto > * > * { 46 display: table-cell; 47 vertical-align: top; 48 padding: 0.5em 0; 49 } 50 51 .mblFormLayout.mblFormLayoutAuto > * > *:first-child { 52 width: 20%; 53 padding-right: 0.5em; 54 } 55 56 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child { 57 text-align: right; 58 } 59 60 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblButton:last-child, 61 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblToggleButton:last-child, 62 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblCheckBox:last-child, 63 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSwitch:last-child, 64 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblRadioButton:last-child, 65 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblTextArea:last-child, 66 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblExpandingTextArea:last-child, 67 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblTextBox:last-child, 68 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSearchBox:last-child { 69 margin-right: 0; 70 } 71 72 .mblFormLayout.mblFormLayoutAuto.mblFormLayoutRightAlign > * > *:last-child > .mblSlider:last-child { 73 display: inline-block; 74 margin-right: 10px; 75 margin-top: 0px; 76 } 77 78 .mblFormLayout.mblFormLayoutAuto .mblTextArea, 79 .mblFormLayout.mblFormLayoutAuto .mblExpandingTextArea, 80 .mblFormLayout.mblFormLayoutAuto .mblTextBox, 81 .mblFormLayout.mblFormLayoutAuto .mblSearchBox { 82 width: 50%; 83 box-sizing: border-box; 84 } 85} 86.mblFormLayout.mblFormLayoutTwoCol { 87 display: table; 88 width: 100%; 89} 90.mblFormLayout.mblFormLayoutTwoCol > * { 91 display: table-row; 92} 93.mblFormLayout.mblFormLayoutTwoCol > * > * { 94 display: table-cell; 95 vertical-align: top; 96 padding: 0.5em 0; 97} 98.mblFormLayout.mblFormLayoutTwoCol > * > *:first-child { 99 width: 20%; 100 padding-right: 0.5em; 101} 102.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child { 103 text-align: right; 104} 105.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblButton:last-child, 106.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblToggleButton:last-child, 107.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblCheckBox:last-child, 108.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSwitch:last-child, 109.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblRadioButton:last-child, 110.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblTextArea:last-child, 111.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblExpandingTextArea:last-child, 112.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblTextBox:last-child, 113.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSearchBox:last-child { 114 margin-right: 0; 115} 116.mblFormLayout.mblFormLayoutTwoCol.mblFormLayoutRightAlign > * > *:last-child > .mblSlider:last-child { 117 display: inline-block; 118 margin-right: 10px; 119 margin-top: 0px; 120} 121.mblFormLayout.mblFormLayoutTwoCol .mblTextArea, 122.mblFormLayout.mblFormLayoutTwoCol .mblExpandingTextArea, 123.mblFormLayout.mblFormLayoutTwoCol .mblTextBox, 124.mblFormLayout.mblFormLayoutTwoCol .mblSearchBox { 125 width: 50%; 126 box-sizing: border-box; 127} 128.mblFormLayout fieldset { 129 border: none; 130 margin: 0; 131} 132.mblFormLayout > * > *:first-child { 133 font-weight: bold; 134} 135.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblButton:first-child, 136.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblToggleButton:first-child, 137.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblCheckBox:first-child, 138.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSwitch:first-child, 139.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblRadioButton:first-child, 140.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblTextArea:first-child, 141.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblExpandingTextArea:first-child, 142.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblTextBox:first-child, 143.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSearchBox:first-child, 144.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblButton, 145.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblToggleButton, 146.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblCheckBox, 147.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblSwitch, 148.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblRadioButton, 149.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblTextArea, 150.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblExpandingTextArea, 151.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblTextBox, 152.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > br + .mblSearchBox { 153 margin-left: 0; 154} 155.mblFormLayout:not(.mblFormLayoutRightAlign) > * > *:last-child > .mblSlider:first-child { 156 display: inline-block; 157 margin-left: 10px; 158 margin-top: 0; 159 margin-bottom: 0; 160} 161