adds comments

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index 03bd6feff4d8b92187c57f8ef10cce147291880b..ae641c85c18da5e615a87a01c3b26be73d118713 100644 (file)
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -306,8 +306,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 @mixin form-select  {
   -webkit-appearance: none !important;
   background-color: $select-bg-color;
+  
+  // The custom arrow have some fake horizontal padding so we can align it
+  // from the right side of the element without relying on CSS3
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
+  
+  // We can safely use leftmost and rightmost now
   background-position: if($text-direction == 'rtl', 0%, 100%) center;
+  
   background-repeat: no-repeat;
   border: $input-border-width $input-border-style $input-border-color;
   padding: $form-spacing / 2;