Add loading buttonadd-shared-vue-loading-button

Encompasses designs from
 - https://gitlab.com/gitlab-org/gitlab-ce/issues/23206#note_43355199
 - https://gitlab.com/gitlab-org/gitlab-ce/issues/29985#note_30417407

4 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index aa61ddc6a2c..a0bb9e61436 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -5,6 +5,7 @@
 @import "framework/layout";
 
 @import "framework/animations";
+@import "framework/vue_transitions";
 @import "framework/avatar";
 @import "framework/asciidoctor";
 @import "framework/banner";
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index b131e2d57ee..00a0e9cef67 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -292,6 +292,11 @@
   }
 }
 
+.btn-align-content {
+  display: flex;
+  align-items: center;
+}
+
 .btn-group {
   &.btn-grouped {
     @include btn-with-margin;
diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss
new file mode 100644
index 00000000000..e07a177e153
--- /dev/null
+++ b/app/assets/stylesheets/framework/vue_transitions.scss
@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity $sidebar-transition-duration $general-hover-transition-curve;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index ea37ccf5e3d..97ca01f0f54 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1,8 +1,3 @@
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity $sidebar-transition-duration;
-}
-
 .monaco-loader {
   position: absolute;
   top: 0;