Added form normalisation and button style. Removed IE 7 fixes.

sass/base/forms/_forms.scss

@@ -0,0 +1,237 @@
+// sass-lint:disable no-vendor-prefixes, no-css-comments
+
+// Form defaults
+//
+// These are the default base styles applied to HTML form elements.
+//
+// Component classes can override these styles, but if no class applies a style
+// to an HTML form element, these styles will be the ones displayed.
+//
+// Weight: -1
+//
+// Style guide: forms.base
+
+//
+// The following rules are from normalize.css and help to fix inconsistencies
+// across various browsers. You should probably leave these rules as is and jump
+// to the "Buttons" rule on line 92 before you start editing this file.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  // Keep form elements constrained in their containers.
+  box-sizing: border-box;
+  max-width: 100%;
+  // Change font properties to `inherit` in all browsers (opinionated).
+  font: inherit;
+  // Remove the margin in Firefox and Safari.
+  margin: 0;
+}
+
+// Show the overflow in IE.
+button {
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+button,
+select {
+  text-transform: none;
+}
+
+// Show the overflow in Edge.
+input {
+  overflow: visible;
+  @if support-for(firefox, 29) {
+    // Firefox sets `line-height` using `!important` in the UA stylesheet.
+    line-height: normal;
+  }
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  // Correct the odd appearance in Chrome and Safari.
+  -webkit-appearance: textfield;
+  // Correct the outline style in Safari.
+  outline-offset: -2px;
+
+  // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+// Correct the text style of placeholders in Chrome, Edge, and Safari.
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54;
+}
+
+::-webkit-file-upload-button {
+  // Correct the inability to style clickable types in iOS and Safari.
+  -webkit-appearance: button;
+  // Change font properties to `inherit` in Safari.
+  font: inherit;
+}
+
+// The %text-form-element can be used to style `<input>` text types and
+// `<textarea>` elements at the same time.
+%text-form-element {
+  // Add your styles.
+}
+
+// Inputs
+//
+// The `<input>` element is mostly used for text-based inputs that include the
+// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
+// `time`, `number`, `range`, `color`, and `file`.
+//
+// Markup: forms-input.twig
+//
+// Style guide: forms.base.input
+
+[type='text'],
+[type='search'],
+[type='tel'],
+[type='url'],
+[type='email'],
+[type='password'],
+[type='date'],
+[type='time'],
+[type='number'] {
+  @extend %text-form-element !optional;
+}
+
+[type='range'] {
+  // Add your styles.
+}
+
+[type='color'] {
+  // Add your styles.
+}
+
+[type='file'] {
+  // Add your styles.
+}
+
+// Checkboxes
+//
+// If an `<input>` element has the `type='checkbox'` attribute set, the form
+// field is displayed as a checkbox.
+//
+// It's recommended that you don't attempt to style these elements. Firefox's
+// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+//
+// Markup: forms-input-checkbox.twig
+//
+// Style guide: forms.base.input-checkbox
+
+// Radio buttons
+//
+// If an `<input>` element has the `type='radio'` attribute set, the form field
+// is displayed as a radio button.
+//
+// It's recommended that you don't attempt to style these elements. Firefox's
+// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+//
+// Markup: forms-input-radio.twig
+//
+// Style guide: forms.base.input-radio
+
+[type='checkbox'],
+[type='radio'] {
+  // Add the correct box sizing in IE <11.
+  box-sizing: border-box;
+  // Remove the padding in IE <11.
+  padding: 0;
+}
+
+// Fieldsets
+//
+// The `<fieldset>` element groups a set of form fields, optionally under a
+// common name given by the `<legend>` element.
+//
+// Markup: forms-fieldset.twig
+//
+// Style guide: forms.base.fieldset
+
+fieldset {
+  // Change the border, margin, and padding in all browsers (opinionated).
+  @include padding(.35 .625 .65);
+  border: 1px solid color(border);
+  margin: 0 2px;
+}
+
+legend {
+  // Correct the text wrapping in Edge and IE.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  // Correct the color inheritance from `fieldset` elements in IE.
+  color: inherit;
+  // Align legend text with a fieldset's text while removing left padding so
+  // people aren't caught out if they zero out fieldset padding.
+  margin-left: -5px;
+  padding: 0 5px;
+}
+
+// Labels
+//
+// The `<label>` element represents a caption of a form field. The label can be
+// associated with a specific form control by using the `for` attribute or by
+// putting the form control inside the label element itself.
+//
+// Markup: forms-label.twig
+//
+// Style guide: forms.base.label
+
+label {
+  // Drupal-style form labels.
+  display: block;
+  font-weight: bold;
+}
+
+// Select list
+//
+// The `<select>` element represents a form field for selecting amongst a set of
+// options.
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `<select>`, unless a `border` property is set.
+//
+// Markup: forms-select.twig
+//
+// Style guide: forms.base.select
+
+select {
+  // Add your styles.
+}
+
+optgroup {
+  // Restore the font weight unset by a previous rule.
+  font-weight: bold;
+}
+
+// Text areas
+//
+// The `<textarea>` element represents a multi-line plain text form field.
+//
+// Markup: forms-textarea.twig
+//
+// Style guide: forms.base.textarea
+
+textarea {
+  @extend %text-form-element !optional;
+  // Remove the default vertical scrollbar in IE.
+  overflow: auto;
+}

sass/base/forms/forms-button.twig

@@ -0,0 +1,24 @@
+<p>
+  <button type="button" class="{{modifier_class}}">Standard button</button>
+  <button type="button" class="{{modifier_class}}" disabled>disabled button</button>
+</p>
+<p>
+  <button type="submit" class="{{modifier_class}}">Submit button</button>
+  <button type="submit" class="{{modifier_class}}" disabled>Disabled submit button</button>
+</p>
+<p>
+  <button type="reset" class="{{modifier_class}}">Reset button</button>
+  <button type="reset" class="{{modifier_class}}" disabled>Disabled reset button</button>
+</p>
+<p>
+  <input type="button" class="{{modifier_class}}" value="Input button">
+  <input type="button" class="{{modifier_class}}" value="Disabled input button" disabled>
+</p>
+<p>
+  <input type="submit" class="{{modifier_class}}" value="Input submit button">
+  <input type="submit" class="{{modifier_class}}" value="Disabled input submit button" disabled>
+</p>
+<p>
+  <input type="reset" class="{{modifier_class}}" value="Input reset button">
+  <input type="reset" class="{{modifier_class}}" value="Disabled input reset button" disabled>
+</p>

sass/base/forms/forms-fieldset.twig

@@ -0,0 +1,22 @@
+<fieldset class="{{modifier_class}}">
+  <legend>A fieldset</legend>
+  <label for="fieldsetText">Text input</label>
+  <input type="text" id="fieldsetText" placeholder="Text input">
+</fieldset>
+
+<fieldset class="{{modifier_class}}" disabled>
+  <legend>A disabled fieldset</legend>
+  <div>
+    <label for="fieldsetText2">Disabled text input</label>
+    <input type="text" id="fieldsetText2" placeholder="Disabled input">
+  </div>
+  <div>
+    <label for="fieldsetSelect">Disabled select menu</label>
+    <select id="fieldsetSelect">
+      <option>Disabled select</option>
+    </select>
+  </div>
+  <div>
+    <label><input type="checkbox"> Can't check this</label>
+  </div>
+</fieldset>

sass/base/forms/forms-input-checkbox.twig

@@ -0,0 +1,7 @@
+<div>
+  <label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
+</div>
+
+<div>
+  <label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
+</div>

sass/base/forms/forms-input-radio.twig

@@ -0,0 +1,11 @@
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
+</div>
+
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
+</div>
+
+<div>
+  <label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
+</div>

sass/base/forms/forms-input.twig

@@ -0,0 +1,97 @@
+<div>
+  <label for="inputText">Text</label>
+  <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputSearch">Search</label>
+  <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
+</div>
+<div>
+  <label for="inputTel">Telephone</label>
+  <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
+</div>
+<div>
+  <label for="inputURL">URL</label>
+  <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
+</div>
+<div>
+  <label for="inputEmail">Email address</label>
+  <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
+</div>
+<div>
+  <label for="inputPassword">Password</label>
+  <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
+</div>
+<div>
+  <label for="inputDate">Date</label>
+  <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
+</div>
+<div>
+  <label for="inputTime">Time</label>
+  <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
+</div>
+<div>
+  <label for="inputNumber">Number</label>
+  <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
+</div>
+<div>
+  <label for="inputRange">Range</label>
+  <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
+</div>
+<div>
+  <label for="inputColor">Color</label>
+  <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
+</div>
+<div>
+  <label for="inputFile">File input</label>
+  <input type="file" class="{{modifier_class}}" id="inputFile">
+</div>
+
+<div>
+  <label for="inputText">Disabled text</label>
+  <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
+</div>
+<div>
+  <label for="inputSearch">Disabled search</label>
+  <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
+</div>
+<div>
+  <label for="inputTel">Disabled telephone</label>
+  <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
+</div>
+<div>
+  <label for="inputURL">Disabled URL</label>
+  <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
+</div>
+<div>
+  <label for="inputEmail">Disabled email address</label>
+  <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
+</div>
+<div>
+  <label for="inputPassword">Disabled password</label>
+  <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
+</div>
+<div>
+  <label for="inputDate">Disabled date</label>
+  <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
+</div>
+<div>
+  <label for="inputTime">Disabled time</label>
+  <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
+</div>
+<div>
+  <label for="inputNumber">Disabled number</label>
+  <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
+</div>
+<div>
+  <label for="inputRange">Disabled range</label>
+  <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
+</div>
+<div>
+  <label for="inputColor">Disabled color</label>
+  <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
+</div>
+<div>
+  <label for="inputFile">Disabled file input</label>
+  <input type="file" class="{{modifier_class}}" disabled id="inputFile">
+</div>

sass/base/forms/forms-label.twig

@@ -0,0 +1,8 @@
+<div>
+  <label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
+  <input type="text" id="lableInputText" placeholder="Enter some text">
+</div>
+
+<div>
+  <label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
+</div>

sass/base/forms/forms-select.twig

@@ -0,0 +1,38 @@
+<div>
+  <label for="selectDropdown">A standard drop-down</label>
+  <select class="{{modifier_class}}" id="selectDropdown">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectMultiItem">A multi-item select field</label>
+  <select class="{{modifier_class}}" id="selectMultiItem" multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>
+
+<div>
+  <label for="selectDisabled">A disabled drop-down</label>
+  <select class="{{modifier_class}}" id="selectDisabled" disabled>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <optgroup label="More options">
+      <option>Option 4</option>
+      <option>Option 5</option>
+    </optgroup>
+  </select>
+</div>

sass/base/forms/forms-textarea.twig

@@ -0,0 +1,8 @@
+<div>
+  <label for="exampleTextarea">Text area</label>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
+</div>
+<div>
+  <label for="exampleTextarea">Disabled text area</label>
+  <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
+</div>