Merge pull request #127 from primer/select-boxes

Custom select box styling

css/.primer-stats.md

@@ -7,17 +7,17 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 27264
+- **Total Stylesheet Size:** 28454
 - **Total Media Queries:** 1
-- **Total Rules:** 361
+- **Total Rules:** 366
-- **Selectors Per Rule:** 1.481994459833795
+- **Selectors Per Rule:** 1.489071038251366
-- **Total Selectors:** 535
+- **Total Selectors:** 545
-- **Identifiers Per Selector:** 2.1252336448598133
+- **Identifiers Per Selector:** 2.1247706422018346
-- **Specificity Per Selector:** 16.452336448598132
+- **Specificity Per Selector:** 16.387155963302753
 - **Top Selector Specificity:** 50
 - **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
 - **Total Id Selectors:** 0
-- **Total Identifiers:** 1137
+- **Total Identifiers:** 1158
-- **Total Declarations:** 896
+- **Total Declarations:** 921
 - **Total Unique Colors:** 79
 - **Total Important Keywords:** 1

docs/docs.scss

@@ -293,6 +293,19 @@ body {
     margin-bottom: 0;
   }
 
+  dl.form {
+    margin: 15px 0;
+
+    > dt {
+      margin: 0 0 6px;
+      font-style: normal;
+    }
+
+    > dd {
+      padding: 0;
+    }
+  }
+
   // Flex table
   .flex-table-item > .btn {
     margin-left: 10px;

docs/forms.md

@@ -87,19 +87,81 @@ Make inputs smaller, larger, or full-width with an additional class.
 </form>
 {% endexample %}
 
+## Selects
+
+Primer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
+
+{% example html %}
+<form>
+  <select>
+    <option>Choose an option</option>
+    <option>Git</option>
+    <option>Subversion</option>
+    <option>Social Coding</option>
+    <option>Beets</option>
+    <option>Bears</option>
+    <option>Battlestar Galactica</option>
+  </select>
+</form>
+{% endexample %}
+
+### Custom
+
+Custom `<select>`s are also available—just add `.select`. **Only available in latest WebKit, Firefox, and IE browsers.**
+
+{% example html %}
+<form>
+  <select class="select">
+    <option>Choose an option</option>
+    <option>Git</option>
+    <option>Subversion</option>
+    <option>Social Coding</option>
+    <option>Beets</option>
+    <option>Bears</option>
+    <option>Battlestar Galactica</option>
+  </select>
+</form>
+{% endexample %}
+
+### Small
+
+Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).
+
+{% example html %}
+<select class="select-sm">
+  <option>Choose an option</option>
+  <option>Git</option>
+  <option>Subversion</option>
+  <option>Social Coding</option>
+  <option>Beets</option>
+  <option>Bears</option>
+  <option>Battlestar Galactica</option>
+</select>
+
+<select class="select select-sm">
+  <option>Choose an option</option>
+  <option>Git</option>
+  <option>Subversion</option>
+  <option>Social Coding</option>
+  <option>Beets</option>
+  <option>Bears</option>
+  <option>Battlestar Galactica</option>
+</select>
+{% endexample %}
+
 ## Form groups
 
 {% example html %}
 <form>
   <dl class="form">
     <dt><label>Example Text</label></dt>
-    <dd><input type="text" class="textfield" value="Example Value"></dd>
+    <dd><input type="text" value="Example Value"></dd>
   </dl>
 
   <dl class="form">
     <dt><label>Example Label</label></dt>
     <dd>
-      <select>
+      <select class="select">
         <option>Choose an option</option>
         <option>Git</option>
         <option>Subversion</option>
@@ -113,8 +175,6 @@ Make inputs smaller, larger, or full-width with an additional class.
 </form>
 {% endexample %}
 
-## Notes
-
 ## Checkboxes and radios
 
 Utilities to spice up the alignment and styling of checkbox and radio controls.

scss/.scss-lint.yml

@@ -400,6 +400,8 @@ linters:
     additional_identifiers: []
     excluded_identifiers: []
     severity: error
+    exclude:
+      - 'scss/_forms.scss'
 
   ZeroUnit:
     enabled: true

scss/_forms.scss

@@ -20,6 +20,7 @@ input[type="email"],
 input[type="number"],
 input[type="tel"],
 input[type="url"],
+select,
 textarea {
   min-height: 34px;
   padding: 7px 8px;
@@ -41,6 +42,13 @@ textarea {
   }
 }
 
+select {
+  &:not([multiple]) {
+    height: 34px;
+    vertical-align: middle;
+  }
+}
+
 // Inputs with contrast for easy light gray backgrounds against white.
 // input.class is needed here to increase specificity over input[…]
 input.input-contrast,
@@ -91,6 +99,7 @@ dl.form {
   input[type="password"],
   input[type="email"],
   input[type="url"],
+  select,
   textarea {
     background-color: #fafafa;
 
@@ -469,3 +478,40 @@ input::-webkit-inner-spin-button {
   color: $brand-red;
   content: "\f02d"; // octicon-x
 }
+
+
+// Custom select
+//
+// Apply `.select` to any `<select>` element for custom styles.
+
+.select {
+  display: inline-block;
+  padding: 7px 24px 7px 8px;
+  vertical-align: middle;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAMAAACNQ/wIAAAAYFBMVEUzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMS2aZBAAAAH3RSTlMAAQYNDg8VJDQ2N0JbdXZ4h4mKpL3Iycvb6vDx8vn+GLdSCAAAAHBJREFUeNq90TcSgDAMRFGRMwZMTnv/W+IBm6BxzSt/pUBGURKT73v+LdkGbNm7xDOUOXlKNOE0RaaEI7QxvIrX4db5pLgtXlqXyJH4kA5VYCr6Xw2msYxqWUgJetyGwH4cfkIjXaCsqfUd/GmMEKQdADIVzQIQilIAAAAASUVORK5CYII=) no-repeat right 8px center;
+  background-size: 9px 13px;
+  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
+  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &:focus {
+    outline: none;
+    border-color: #51a7e8;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
+  }
+
+  // Hides the caret in IE11
+  &::-ms-expand {
+    opacity: 0;
+  }
+}
+
+.select-sm {
+  height: 26px;
+  min-height: 26px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+}