fix remaining scss lint errors

scss/.scsslint.yml

@@ -102,6 +102,9 @@ linters:
       "bottom",
       "left",
       "z-index",
+      "-webkit-box-sizing",
+      "-moz-box-sizing",
+      "box-sizing",
       "display",
       "float",
       "width",
@@ -110,10 +113,6 @@ linters:
       "height",
       "min-height",
       "max-height",
-      "-webkit-box-sizing",
-      "-moz-box-sizing",
-      "box-sizing",
-      "-webkit-appearance",
       "flex",
       "flex-direction",
       "flex-flow",

scss/_custom-forms.scss

@@ -126,23 +126,22 @@
 //
 // Replaces the browser default select with a custom one, mostly pulled from
 // http://primercss.io.
+//
+// Includes IE9-specific hacks (noted by ` \9`).
 
 .c-select {
   display: inline-block;
   max-width: 100%;
   padding: .375rem 1.75rem .375rem .75rem;
+  padding-right: .75rem \9;
   vertical-align: middle;
   background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
+  background-image: none \9;
   background-size: 8px 10px;
   border: 1px solid $input-border;
-
+  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
-  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
-  -webkit-appearance: none;
   -moz-appearance: none;
-
+  -webkit-appearance: none;
-  // IE9 hacks to hide the background-image and reduce padding
-  padding-right: .75rem \9;
-  background-image: none \9;
 
   &:focus {
     border-color: #51a7e8;

scss/_dropdown.scss

@@ -51,20 +51,20 @@
 }
 
 // Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// for <button>s`
 .dropdown-item {
   display: block;
+  width: 100%; // For `<button>`s
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
   line-height: $line-height;
   color: $dropdown-link-color;
+  text-align: inherit; // For `<button>`s
   white-space: nowrap; // prevent links from randomly breaking onto new lines
-
+  background: none; // For `<button>`s
-  // For `<button>`s
+  border: 0; // For `<button>`s
-  text-align: inherit;
-  width: 100%;
-  background: none;
-  border: 0;
 
   @include hover-focus {
     color: $dropdown-link-hover-color;

scss/_navbar.scss

@@ -89,8 +89,8 @@
   width: 1px;
   padding-top: .425rem;
   padding-bottom: .425rem;
-  margin-left:  $navbar-padding-horizontal;
   margin-right: $navbar-padding-horizontal;
+  margin-left:  $navbar-padding-horizontal;
   overflow: hidden;
 
   &:before {