Mostly to have checkboxes and radio buttons in neighboring sections.
Before:
1. Inputs
2. Buttons
3. Forms
4. Icons
5. Checkbox
6. Text & anchors
7. Radio
After:
1. Text inputs
2. Buttons
3. Checkbox
4. Radio
5. Forms
6. Icons
7. Text & anchors
Change-Id: I6b067eb90f5f05d7773c4879b87317436554701e
//
// Markup:
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5">
-// <label for="kss-example-5">Standard checkbox</label>
+// <input type="checkbox" id="kss-example-3">
+// <label for="kss-example-3">Standard checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-checked" checked>
-// <label for="kss-example-5-checked">Standard checked checkbox</label>
+// <input type="checkbox" id="kss-example-3-checked" checked>
+// <label for="kss-example-3-checked">Standard checked checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-disabled" disabled>
-// <label for="kss-example-5-disabled">Disabled checkbox</label>
+// <input type="checkbox" id="kss-example-3-disabled" disabled>
+// <label for="kss-example-3-disabled">Disabled checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-disabled-checked" disabled checked>
-// <label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
+// <input type="checkbox" id="kss-example-3-disabled-checked" disabled checked>
+// <label for="kss-example-3-disabled-checked">Disabled checked checkbox</label>
// </div>
//
-// Styleguide 5.
+// Styleguide 3.
.mw-ui-checkbox {
display: inline-block;
vertical-align: middle;
// Forms
//
-// Styleguide 3.
+// Styleguide 5.
// VForm
//
// </div>
// </form>
//
-// Styleguide 3.1.
+// Styleguide 5.1.
.mw-ui-vform {
.box-sizing(border-box);
// </div>
// </form>
//
- // Styleguide 3.2.
+ // Styleguide 5.2.
.error,
.errorbox,
.warningbox,
// However, icon-only elements do not yet degrade to text-only elements in these
// browsers.
//
-// Styleguide 4.
+// Styleguide 6.
.mw-ui-icon {
position: relative;
// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
// <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
//
- // Styleguide 4.1.1.
+ // Styleguide 6.1.1.
&.mw-ui-icon-element {
@width: @iconSize + ( 2 * @gutterWidth );
// <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
// <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
//
- // Styleguide 4.1.2
+ // Styleguide 6.1.2
&.mw-ui-icon-before {
&:before {
position: relative;
// Markup:
// <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
//
- // Styleguide 4.1.3
+ // Styleguide 6.1.3
&.mw-ui-icon-after {
&:after {
position: relative;
font-style: italic;
font-weight: normal;
}
-// Inputs
+// Text inputs
//
// Apply the mw-ui-input class to input and textarea fields.
//
//
// Markup:
// <div class="mw-ui-radio">
-// <input type="radio" id="kss-example-7" name="kss-example-7">
-// <label for="kss-example-7">Standard radio</label>
+// <input type="radio" id="kss-example-4" name="kss-example-4">
+// <label for="kss-example-4">Standard radio</label>
// </div>
// <div class="mw-ui-radio">
-// <input type="radio" id="kss-example-7-checked" name="kss-example-7" checked>
-// <label for="kss-example-7-checked">Standard checked radio</label>
+// <input type="radio" id="kss-example-4-checked" name="kss-example-4" checked>
+// <label for="kss-example-4-checked">Standard checked radio</label>
// </div>
// <div class="mw-ui-radio">
-// <input type="radio" id="kss-example-7-disabled" name="kss-example-7-disabled" disabled>
-// <label for="kss-example-7-disabled">Disabled radio</label>
+// <input type="radio" id="kss-example-4-disabled" name="kss-example-4-disabled" disabled>
+// <label for="kss-example-4-disabled">Disabled radio</label>
// </div>
// <div class="mw-ui-radio">
-// <input type="radio" id="kss-example-7-disabled-checked" name="kss-example-7-disabled" disabled checked>
-// <label for="kss-example-7-disabled-checked">Disabled checked radio</label>
+// <input type="radio" id="kss-example-4-disabled-checked" name="kss-example-4-disabled" disabled checked>
+// <label for="kss-example-4-disabled-checked">Disabled checked radio</label>
// </div>
//
-// Styleguide 7.
+// Styleguide 4.
.mw-ui-radio {
display: inline-block;
vertical-align: middle;