Merge branch 'ce-1979-fe-settings-empty' into 'master'

CE Port of "(Part 1) FE multiple approval rules settings - empty state"

See merge request gitlab-org/gitlab-ce!24087

2 files changed, 25 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/callout.vue b/app/assets/javascripts/vue_shared/components/callout.vue
index ddbb14ae812..56bafebf4ce 100644
--- a/app/assets/javascripts/vue_shared/components/callout.vue
+++ b/app/assets/javascripts/vue_shared/components/callout.vue
@@ -11,13 +11,14 @@ export default {
     },
     message: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
 };
 </script>
 <template>
   <div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive">
-    {{ message }}
+    {{ message }} <slot></slot>
   </div>
 </template>
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 549a8730301..43d4044033f 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -260,3 +260,25 @@ $skeleton-line-widths: (
 .slide-down-leave-to {
   transform: translateY(-30%);
 }
+
+@keyframes spin {
+  0% { transform: rotate(0deg);}
+  100% { transform: rotate(360deg);}
+}
+
+/** COMMON ANIMATION CLASSES **/
+.transform-origin-center { @include webkit-prefix(transform-origin, 50% 50%); }
+.animate-n-spin { @include webkit-prefix(animation-name, spin); }
+.animate-c-infinite { @include webkit-prefix(animation-iteration-count, infinite); }
+.animate-t-linear { @include webkit-prefix(animation-timing-function, linear); }
+.animate-d-1 { @include webkit-prefix(animation-duration, 1s); }
+.animate-d-2 { @include webkit-prefix(animation-duration, 2s); }
+
+/** COMPOSITE ANIMATION CLASSES **/
+.gl-spinner {
+  @include webkit-prefix(animation-name, spin);
+  @include webkit-prefix(animation-iteration-count, infinite);
+  @include webkit-prefix(animation-timing-function, linear);
+  @include webkit-prefix(animation-duration, 1s);
+  transform-origin: 50% 50%;
+}