selects

src/scss/_statements.scss

@@ -9,6 +9,12 @@
     @include forms--md-form-label($value, $flags);
   } @elseif $mixin == 'forms--checkbox-native-margin' {
     @include forms--checkbox-native-margin($value, $flags);
+  } @elseif $mixin == 'forms--select-caret-switch' {
+    @include forms--select-caret-switch($value, $flags);
+  } @elseif $mixin == 'forms--select-caret-margin-top' {
+    @include forms--select-caret-margin-top($value, $flags);
+  } @elseif $mixin == 'forms--select-padding-right' {
+    @include forms--select-padding-right($value, $flags);
   }
 };
 
@@ -242,3 +248,67 @@ $radio-indicator-checked--selector: selector--append-parent($radio-indicator--se
 
   @include block-generation($radio-indicator-checked--selector);
 }
+
+
+
+$select--selector: selector--constructor($form--synthax, 'select');
+
+@include selector($select--selector) {
+  @include declaration(position, relative);
+  @include declaration(display, inline-block);
+  @include declaration(font-size, $select--font-size);
+  @include declaration(font-family, $select--font-family);
+  @include declaration(border-radius, $select--border-radius);
+  @include declaration(border-width, $select--border-width);
+  @include declaration(border-style, $select--border-style);
+  @include declaration(border-color, $select--border-color);
+  @include declaration(box-shadow, $select--box-shadow);
+  @include declaration(width, $select--width);
+  @include declaration(height, $select--height);
+  @include declaration(margin, $select--margin);
+
+  @include block-generation($select--selector);
+}
+
+
+$select-native--selector: selector--set-element($select--selector, 'native');
+
+@include selector($select-native--selector) {
+  @include declaration(display, inline-block);
+  @include declaration(font-size, 1em);
+  @include declaration(width, 100%);
+  @include declaration(margin, 0);
+  @include declaration(padding-top, $select--padding-y);
+  @include declaration(padding-bottom, $select--padding-y);
+  @include declaration(padding-left, $select--padding-x);
+  @include declaration('-include-forms--select-padding-right', $select--padding-x);
+  @include declaration(line-height, $select--line-height);
+  @include declaration(color, $select--color);
+  @include declaration(background-color, $select--background-color);
+  @include declaration(border, 0);
+  @include declaration(border-radius, $select--border-radius);
+  @include declaration(cursor, $select--cursor);
+  @include declaration(outline, 0);
+  @include declaration(appearance, none);
+
+  // Undo the Firefox inner focus ring
+  @include declaration(color, transparent, (':focus', ':-moz-focusring'));
+  @include declaration(text-shadow, 0 0 0 #000, (':focus', ':-moz-focusring'));
+
+  @include block-generation($select-native--selector);
+}
+
+
+$select-caret--selector: selector--set-pseudo-element($select--selector, 'after');
+
+@include selector($select-caret--selector) {
+  @include declaration(content, '');
+  @include declaration(position, absolute);
+  @include declaration(top, 50%);
+  @include declaration(right, $select--padding-x);
+  @include declaration(display, inline-block);
+  @include declaration('-include-forms--select-caret-switch', $select-caret--method);
+  @include declaration('-include-forms--select-caret-margin-top', $select-caret--height);
+
+  @include block-generation($select-caret--selector);
+}

src/scss/forms.scss

@@ -1,5 +1,6 @@
 @import 'mixins/forms--md';
 @import 'mixins/forms--checkbox';
+@import 'mixins/forms--select';
 
 @import 'variables/synthax';
 @import 'variables/theme-trowel';

src/scss/mixins/_forms--select.scss

@@ -0,0 +1,33 @@
+@mixin forms--select-caret-switch($value, $flags) {
+  $width: value($select-caret--width, $flags);
+  $height: value($select-caret--height, $flags);
+  $background-color: value($select-caret--background-color, $flags);
+
+
+  @if $value == 'image' {
+    @include declaration(width, $width, $flags);
+    @include declaration(height, $height, $flags);
+    @include declaration(background-color, $background-color, $flags);
+    @include declaration(border-left, 0);
+    @include declaration(border-right, 0);
+    @include declaration(border-top, 0);
+  } @elseif $value == 'css' {
+    @include declaration(width, 0, $flags);
+    @include declaration(height, 0, $flags);
+    @include declaration(border-left, ($width / 2) solid transparent, $flags);
+    @include declaration(border-right, ($width / 2) solid transparent, $flags);
+    @include declaration(border-top, $height solid $background-color, $flags);
+  }
+}
+
+@mixin forms--select-caret-margin-top($value, $flags) {
+  @include declaration(margin-top, (-$value / 2), $flags);
+}
+
+@mixin forms--select-padding-right($value, $flags) {
+  $padding-right: $value;
+  $caret--width: value($select-caret--width, $flags);
+  $caret--margin-left: value($select-caret--margin-left, $flags);
+
+  @include declaration(padding-right, $caret--margin-left + $caret--width + $padding-right, $flags);
+}

src/scss/variables/_theme-trowel.scss

@@ -115,3 +115,28 @@ $radio-indicator-checked--background-size: null !default;
 $radio-indicator-checked--background-position: null !default;
 $radio-indicator-checked--border-color: null !default;
 $radio-indicator-checked--box-shadow: null !default;
+
+
+
+$select--color: black !default;
+$select--font-size: 1rem !default;
+$select--font-family: null !default;
+$select--border-radius: 0.1875em !default;
+$select--border-width: 1px !default;
+$select--border-style: solid !default;
+$select--border-color: null !default;
+$select--box-shadow: null !default;
+$select--width: null !default;
+$select--height: null !default;
+$select--margin: null !default;
+$select--padding-x: 1em !default;
+$select--padding-y: 0.5em !default;
+$select--line-height: 1.5 !default;
+$select--background-color: #eee !default;
+$select--cursor: pointer !default;
+
+$select-caret--method: 'css'; // 'image' or 'css'
+$select-caret--width: 0.7em;
+$select-caret--height: 0.4em;
+$select-caret--margin-left: 0.5em;
+$select-caret--background-color: currentColor;

test/src/index.html.twig

@@ -64,6 +64,17 @@
                 </label>
             </div>
 
+            <div class="c-form-group">
+                <div class="c-select">
+                    <select class="c-select__native">
+                        <option selected>Open this select menu</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </div>
+            </div>
+
         </div>
 
         <script src="./javascript/forms.js"></script>