fix(style): add white overlay on empty-user-manager when invitation-f…

…orm is open
bimdata · Apr 16, 2021 · 9f7ab9b · 9f7ab9b
1 parent 2f68079
commit 9f7ab9b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/src/components/specific/users/empty-users-manager/EmptyUsersManager.scss b/src/components/specific/users/empty-users-manager/EmptyUsersManager.scss
@@ -12,11 +12,18 @@
     gap: $spacing-unit;
   }
 
-  &__invitation-form {
+  &__overlay {
     position: absolute;
-    top: $spacing-unit * 2;
+    width: 100%;
+    height: 100%;
     padding: $spacing-unit;
-    padding-top: $spacing-unit * 2;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    background-color: rgba(255, 255, 255, 0.5);
+
+    &__invitation-form {
+      position: relative;
+      padding: $spacing-unit;
+      padding-top: $spacing-unit * 2;
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    }
   }
 }
diff --git a/src/components/specific/users/empty-users-manager/EmptyUsersManager.vue b/src/components/specific/users/empty-users-manager/EmptyUsersManager.vue
@@ -20,13 +20,14 @@
       </BIMDataButton>
     </div>
     <transition name="fade">
-      <InvitationForm
-        v-show="showInvitationForm"
-        class="empty-users-manager__invitation-form"
-        :project="project"
-        @close="closeInvitationForm"
-        @success="closeInvitationForm"
-      />
+      <div v-show="showInvitationForm" class="empty-users-manager__overlay">
+        <InvitationForm
+          class="empty-users-manager__overlay__invitation-form"
+          :project="project"
+          @close="closeInvitationForm"
+          @success="closeInvitationForm"
+        />
+      </div>
     </transition>
   </div>
 </template>