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