From 578c51eb1a0df4d2b572c2c3d79f2c015ce14874 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 26 Apr 2020 19:23:18 +0200
Subject: [PATCH] almost finish tailwind transform

---
 resources/js/components/App.vue              |   8 +-
 resources/js/components/Avatar.vue           |   4 +-
 resources/js/components/InputField.vue       |   8 +-
 resources/js/components/Loader.vue           |   2 +-
 resources/js/components/TextAreaField.vue    |   6 +-
 resources/js/components/TopBar.vue           |   2 +-
 resources/js/views/DashBoard.vue             |   8 +-
 resources/js/views/Games/GameIndex.vue       |   8 +-
 resources/js/views/Games/HangMan/Hangman.vue |   6 +-
 resources/js/views/Memo/MemoCreate.vue       |  10 +-
 resources/js/views/Memo/MemoEdit.vue         |  10 +-
 resources/js/views/Memo/MemoIndex.vue        |  18 ++--
 resources/js/views/Memo/MemoShow.vue         |  16 +--
 resources/js/views/User/ProfileUser.vue      |   8 +-
 resources/js/views/User/UserAdmin.vue        |  10 +-
 resources/sass/app.scss                      |   5 +-
 resources/sass/components/_btn.scss          |  24 ++++-
 resources/sass/components/_elements.scss     | 104 ++++++++++++++-----
 resources/sass/components/_transitions.scss  |  10 ++
 resources/sass/components/modal.scss         |  26 +++--
 20 files changed, 188 insertions(+), 105 deletions(-)

diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index 64b82c7..8a80cbe 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="flex">
+    <div class="flex bg-orange-200 h-screen overflow-y-hidden">
         <Nav />
-        <div v-if="authUser" class="w-full">
+        <div v-if="authUser" class="w-full overflow-y-auto">
             <TopBar />
-            <main class="bg-orange-200">
-                <router-view :key="$route.fullPath" class="main"></router-view>
+            <main>
+                <router-view :key="$route.fullPath"></router-view>
             </main>
         </div>
     </div>
diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index 759a057..1683f02 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex justify-center items-center">
+    <div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
         <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
-        <span v-else class="text-2xl font-bold"  v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
+        <span v-else class="text-2xl font-bold"  v-bind:class="'text-' + size">{{ alt[0] }}</span>
     </div>
 
 </template>
diff --git a/resources/js/components/InputField.vue b/resources/js/components/InputField.vue
index 17b92b6..8cc8758 100644
--- a/resources/js/components/InputField.vue
+++ b/resources/js/components/InputField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative mt-1">
-        <label :for="name" class="pb-1">{{ label }}</label>
-        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
-        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
+    <div class="relative mb-2">
+        <label :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
+        <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()" class="w-full rounded p-2">
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
diff --git a/resources/js/components/Loader.vue b/resources/js/components/Loader.vue
index 2473068..fdb4c2d 100644
--- a/resources/js/components/Loader.vue
+++ b/resources/js/components/Loader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="loading" class="flex-center">
+    <div v-if="loading" class="flex items-center">
         <svg-vue icon="loader" class="loader"/>
     </div>
 </template>
diff --git a/resources/js/components/TextAreaField.vue b/resources/js/components/TextAreaField.vue
index 2f87898..02f5f5b 100644
--- a/resources/js/components/TextAreaField.vue
+++ b/resources/js/components/TextAreaField.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="relative mt-1">
+    <div class="relative mb-2">
         <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
-        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
-        <p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
+        <textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
diff --git a/resources/js/components/TopBar.vue b/resources/js/components/TopBar.vue
index 26059bd..e006e5e 100644
--- a/resources/js/components/TopBar.vue
+++ b/resources/js/components/TopBar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="top-bar flex justify-between bg-orange-300">
         <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
-            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="bg-orange-600 hover:bg-orange-800 w-10 h-10 rounded-full"/>
+            <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
             <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
         </router-link>
         <form v-if="authUser && search" class="m-2">
diff --git a/resources/js/views/DashBoard.vue b/resources/js/views/DashBoard.vue
index 092e88c..6f757d0 100644
--- a/resources/js/views/DashBoard.vue
+++ b/resources/js/views/DashBoard.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="m-2">
-        <div class="flex-between">
-            <h1 class="mb-3">Administration</h1>
-            <a href="#" @click.prevent="logout" class="btn btn-icon">
+    <div class="p-4">
+        <div class="flex justify-between">
+            <h1 class="page-title">Administration</h1>
+            <a href="#" @click.prevent="logout" class="btn">
                 <svg-vue icon="logout" /> Déconnexion
             </a>
         </div>
diff --git a/resources/js/views/Games/GameIndex.vue b/resources/js/views/Games/GameIndex.vue
index f632881..7ba23e1 100644
--- a/resources/js/views/Games/GameIndex.vue
+++ b/resources/js/views/Games/GameIndex.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="p-2">
-        <h1>Liste des jeux</h1>
-        <div class="container-cards-list mt-2">
-            <HangmanIndex link="/jeux/pendu" class="card" />
+    <div class="p-4">
+        <h1 class="page-title">Liste des jeux</h1>
+        <div class="flex flex-wrap mt-4">
+            <HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 card" />
         </div>
     </div>
 </template>
diff --git a/resources/js/views/Games/HangMan/Hangman.vue b/resources/js/views/Games/HangMan/Hangman.vue
index b3cb848..cb5900d 100644
--- a/resources/js/views/Games/HangMan/Hangman.vue
+++ b/resources/js/views/Games/HangMan/Hangman.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="p-2 game-container">
-        <h1 class="text-center">Pendu</h1>
-        <p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
-        <div class="flex-center dic-select">
+        <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
+        <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
+        <div class="flex justify-center dic-select">
             <div v-for="(dic, key) in dictionary">
                 <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
             </div>
diff --git a/resources/js/views/Memo/MemoCreate.vue b/resources/js/views/Memo/MemoCreate.vue
index 7c0a74f..7a7e9c7 100755
--- a/resources/js/views/Memo/MemoCreate.vue
+++ b/resources/js/views/Memo/MemoCreate.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="memo-edit p-2">
-        <div class="flex-between mb-1">
+    <div class="p-4">
+        <div class="flex justify-between flex-center mb-4">
             <router-link to="/memos/" class="btn">< Back</router-link>
-            <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
+            <button @click="$router.back()" class="btn-alert">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
-            <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
+            <TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
 
-            <div class="flex-end mt-1">
+            <div class="flex justify-end mt-2">
                 <button class="btn-primary">Add New Memo</button>
             </div>
         </form>
diff --git a/resources/js/views/Memo/MemoEdit.vue b/resources/js/views/Memo/MemoEdit.vue
index 746449d..4c94a10 100755
--- a/resources/js/views/Memo/MemoEdit.vue
+++ b/resources/js/views/Memo/MemoEdit.vue
@@ -12,15 +12,15 @@
                 :model="form.type"
                 classes="cover"
                 :alt="form.name"/>
-            <div class="flex-between ml-2 mt-1 absolute t-0">
-                <router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
-            </div>
         </div>
-        <div class="p-2">
+        <div class="p-4">
+            <div class="flex justify-between mb-4">
+                <router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
+            </div>
             <form @submit.prevent="submitForm">
                 <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
                 <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
-                <div class="flex-end mt-1">
+                <div class="flex justify-end mt-2">
                     <button class="btn-primary">Save</button>
                 </div>
 
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index 14f9df0..ee49c71 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -5,17 +5,19 @@
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <Loader v-if="loading" />
-        <div v-else class="flex flex-wrap mb-4">
+        <div v-else class="flex flex-wrap -m-2">
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="lg:w-1/4 p-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
-                <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
-                <div class="px-6 py-4">
-                    <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
-                </div>
-                <div class="px-6 py-4">
-                    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+            <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
+                <div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
+                    <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
+                    <div class="px-6 py-4">
+                        <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                    </div>
+                    <div class="flex justify-end py-2">
+                        <span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+                    </div>
                 </div>
             </router-link>
         </div>
diff --git a/resources/js/views/Memo/MemoShow.vue b/resources/js/views/Memo/MemoShow.vue
index acfce01..b0b0672 100755
--- a/resources/js/views/Memo/MemoShow.vue
+++ b/resources/js/views/Memo/MemoShow.vue
@@ -4,8 +4,8 @@
         <div v-else>
             <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
             <div v-if="modal" class="modal">
-                <p class="m-1 text-center">Are you sure you want to delete this record ?</p>
-                <div class="flex-center m-1 mt-2">
+                <p class="m-2 text-center">Are you sure you want to delete this record ?</p>
+                <div class="flex justify-center mx-2 my-4">
                     <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
                     <button class="btn-alert" @click="destroy"> Delete</button>
                 </div>
@@ -16,22 +16,22 @@
                     class="cover"
                     :src="memo.attributes.cover_image.data.attributes.path"
                 />
-                <div class="flex-col flex-between absolute memo-cover">
-                    <div class="flex-between px-2 py-1">
+                <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
+                    <div class="flex items-center justify-between p-4">
                         <router-link to="/memos/" class="btn-secondary">< Back</router-link>
                         <div class="flex-middle">
                             <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
                             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
                         </div>
                     </div>
-                    <h1 class="memo-title flex-center">{{ memo.name }}</h1>
+                    <h1 class="flex justify-center text-white text-3xl px-4 font-bold text-shadow">{{ memo.name }}</h1>
                 </div>
             </div>
     <!--           <TagBox :memo="memo" />-->
-            <div class="p-2">
+            <div class="p-4">
 
-                <p class="memo-style pt-1" v-html="memoMarkdown"></p>
-                <div class="memo-change">@last update : {{ memo.last_updated }}</div>
+                <p class="pt-2" v-html="memoMarkdown"></p>
+                <div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>
diff --git a/resources/js/views/User/ProfileUser.vue b/resources/js/views/User/ProfileUser.vue
index 76ee3f3..374ba78 100644
--- a/resources/js/views/User/ProfileUser.vue
+++ b/resources/js/views/User/ProfileUser.vue
@@ -9,9 +9,9 @@
                 :author="authUser"
                 :id="authUser.data.user_id"
                 :model="authUser.data.type"
-                classes="cover"
+                classes=""
                 :alt="authUser.data.attributes.name"/>
-            <div class="absolute b-0">
+            <div class="absolute w-64 bottom-0">
                 <UploadableImage
                     :image-width=750
                     :image-height=750
@@ -20,9 +20,9 @@
                     :author="authUser"
                     :id="authUser.data.user_id"
                     :model="authUser.data.type"
-                    classes="profile absolute"
+                    classes="absolute w-64 h-64 -bottom-12 left-8 rounded-full"
                     :alt="authUser.data.attributes.name"/>
-                <h1 class="profile-title">{{ authUser.data.attributes.name }}</h1>
+                <h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1>
             </div>
         </div>
     </div>
diff --git a/resources/js/views/User/UserAdmin.vue b/resources/js/views/User/UserAdmin.vue
index 7a798ff..983f8ac 100644
--- a/resources/js/views/User/UserAdmin.vue
+++ b/resources/js/views/User/UserAdmin.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="authUser">
-    <div class="flex mb-4">
+    <div class="flex m-4">
       <div class="avatar mr-2">
-        <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
+        <Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
       </div>
-      <div class="flex-col flex-center">
+      <div class="flex flex-col justify-center ml-2">
         <div><strong>{{ authUser.data.attributes.name }}</strong></div>
         <div><strong>{{ authUser.data.attributes.email }}</strong></div>
       </div>
@@ -18,10 +18,10 @@
             <transition name="fade">
               <form @submit.prevent="addMember" v-if="userAddToggle"  class="box-toggle-content" >
                   <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
-                  <div class="flex mb-1">
+                  <div class="flex mb-2">
                       <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
                       <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
-                      <div class="flex-middle mt-4">
+                      <div class="flex items-end mb-2">
                           <button class="btn-primary">Ajouter</button>
                       </div>
                   </div>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 6da9a1a..01bfe22 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -10,11 +10,10 @@
 //@import "setup/containers";
 //@import "setup/effects";
 //
-//@import "components/transitions";
+@import "components/transitions";
 @import "components/btn";
-//@import "components/elements";
+@import "components/elements";
 //@import "components/loader";
-//@import "components/events";
 //@import "components/main";
 @import "components/nav";
 //@import "components/topbar";
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index 4ef7eef..38afde8 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -68,11 +68,15 @@
 //}
 
 .btn {
-    @apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md;
+    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;
 
     &:hover {
         @apply text-white bg-orange-600 transition-all duration-300;
     }
+
+    svg {
+        @apply w-4 fill-current mr-2 inline;
+    }
 }
 
 .btn-primary {
@@ -83,3 +87,21 @@
         @apply bg-orange-800;
     }
 }
+
+.btn-secondary {
+    @extend .btn;
+    @apply bg-orange-600;
+
+    &:hover {
+        @apply bg-orange-800;
+    }
+}
+
+.btn-alert {
+    @extend .btn;
+    @apply bg-red-600 text-white;
+
+    &:hover {
+        @apply bg-red-800;
+    }
+}
diff --git a/resources/sass/components/_elements.scss b/resources/sass/components/_elements.scss
index dfa71dd..3edc9bf 100644
--- a/resources/sass/components/_elements.scss
+++ b/resources/sass/components/_elements.scss
@@ -1,42 +1,94 @@
 // Elements
 
-label {
-    display: block;
+.text-shadow {
+    text-shadow: 1px 1px 2px #000;
 }
 
-textarea,
-input {
-    width: 100%;
-    border: 1px solid $light;
-    background-color: $greyLight;
-    font-size: 1.6rem;
-    font-family: $fontMain;
-    padding: 0.5rem 1rem;
-    border-radius: 0.2rem;
-
-    &:focus {
-        background-color: $white;
-        border-color: $dark;
-    }
+.left-8 {
+    left: 2rem;
 }
 
-input[type="checkbox"] {
-    width: unset;
+.left-80 {
+    left: 20rem;
+}
 
-    & + label {
-        display: inline;
-    }
+.-bottom-12 {
+    bottom: -3rem;
+}
+
+.max-h-64 {
+    max-height: 16rem;
+}
+
+.page-title {
+    @apply text-3xl font-bold text-orange-900;
 }
 
 a {
-    color: $mediumDark;
+    @apply text-orange-700;
 
-    &:focus,
-    &:visited {
-        color: $dark;
+    &:hover {
+        @apply text-orange-900;
     }
 }
 
-pre {
+$modal-duration: 1s;
 
+.modal-container {
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
+}
+
+.modal {
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    animation-name: modalopen;
+    animation-duration: $modal-duration;
+}
+
+.box-toggle {
+    @apply shadow;
+
+    &-header {
+        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+
+        svg {
+            @apply w-8 text-orange-600 fill-current;
+        }
+    }
+
+    svg {
+        transform: rotate(270deg);
+        transition: transform 0.3s;
+
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+
+    &-content {
+        padding: 0.5rem 1rem;
+    }
+}
+
+.card {
+    @apply bg-orange-300 rounded;
+
+    svg {
+        @apply max-w-full max-h-64 m-auto fill-current;
+    }
+
+    h2 {
+        @apply text-2xl text-center font-bold;
+    }
+
+    &:hover {
+        @apply bg-orange-500;
+
+        h2 {
+            @apply text-orange-700;
+        }
+    }
 }
diff --git a/resources/sass/components/_transitions.scss b/resources/sass/components/_transitions.scss
index 824567d..8ad2ac5 100644
--- a/resources/sass/components/_transitions.scss
+++ b/resources/sass/components/_transitions.scss
@@ -4,3 +4,13 @@
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
diff --git a/resources/sass/components/modal.scss b/resources/sass/components/modal.scss
index a0b0e2e..22c7da5 100644
--- a/resources/sass/components/modal.scss
+++ b/resources/sass/components/modal.scss
@@ -1,27 +1,25 @@
 $modal-duration: 1s;
 
 .modal-container {
-    background-color: rgba(0,0,0,0.6);
-    position: fixed;
-    z-index: 10;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
 }
 
 .modal {
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    position: absolute;
-    z-index: 20;
-    overflow: hidden;
+    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-width: 100%;
     width: 400px;
     animation-name: modalopen;
     animation-duration: $modal-duration;
 }
+
+@keyframes modalopen {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}