Add .input-icon-wrapper class for wrapping embedded input icons

4 files changed, 14 insertions, 14 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index da254184546..c46b0b5db09 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -17,7 +17,6 @@
 @import 'framework/callout';
 @import 'framework/common';
 @import 'framework/dropdowns';
-@import 'framework/datepicker';
 @import 'framework/files';
 @import 'framework/filters';
 @import 'framework/flash';
diff --git a/app/assets/stylesheets/framework/datepicker.scss b/app/assets/stylesheets/framework/datepicker.scss
deleted file mode 100644
index f17ca6d96bc..00000000000
--- a/app/assets/stylesheets/framework/datepicker.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.datepicker-container {
-  position: relative;
-
-  .datepicker-icon {
-    position: absolute;
-    right: 0.9em;
-    top: 0.4em;
-    color: $theme-gray-600;
-  }
-}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2b2e6d69e33..81207c0a4c7 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -243,3 +243,15 @@ label {
     }
   }
 }
+
+.input-icon-wrapper {
+  position: relative;
+
+  .input-icon {
+    position: absolute;
+    right: 0.8em;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $theme-gray-600;
+  }
+}
diff --git a/app/views/shared/_personal_access_tokens_form.html.haml b/app/views/shared/_personal_access_tokens_form.html.haml
index b32379518b0..a6d291e6171 100644
--- a/app/views/shared/_personal_access_tokens_form.html.haml
+++ b/app/views/shared/_personal_access_tokens_form.html.haml
@@ -17,10 +17,9 @@
   .row
     .form-group.col-md-6
       = f.label :expires_at, class: 'label-light'
-      .datepicker-container
+      .input-icon-wrapper
         = f.text_field :expires_at, class: "datepicker form-control", placeholder: 'YYYY-MM-DD'
-        .datepicker-icon
-          = icon('calendar')
+        = icon('calendar', { class: 'input-icon' })
 
   .form-group
     = f.label :scopes, class: 'label-light'