Feat/tailwind (#1179)

components/environments/add-environment.vue

@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("new_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">

components/environments/edit-environment.vue

@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("edit_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -27,7 +27,7 @@
       </ul>
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <label for="variableList">{{ $t("env_variable_list") }}</label>
             <div>
               <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
@@ -90,7 +90,7 @@
       </ul>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">

components/environments/environment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-wrap">
+  <div class="row-wrapper">
     <div>
       <button
         class="icon"
@@ -32,19 +32,6 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-ul {
-  display: flex;
-  flex-direction: column;
-}
-
-ul li {
-  display: flex;
-  padding-left: 16px;
-  border-left: 1px solid var(--brd-color);
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 import deleteIcon from "~/static/icons/delete-24px.svg?inline"

components/environments/import-export-environment.vue

@@ -3,7 +3,7 @@
     <div slot="header">
       <ul>
         <li>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
@@ -11,7 +11,7 @@
               </button>
             </div>
           </div>
-          <div class="flex-wrap">
+          <div class="row-wrapper">
             <span
               v-tooltip="{
                 content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
@@ -60,7 +60,7 @@
       <textarea v-model="environmentJson" rows="8"></textarea>
     </div>
     <div slot="footer">
-      <div class="flex-wrap">
+      <div class="row-wrapper">
         <span></span>
         <span>
           <button class="icon" @click="hideModal">

components/environments/index.vue

@@ -11,7 +11,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="flex-wrap">
+    <div class="row-wrapper">
       <div>
         <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
@@ -28,7 +28,7 @@
       <i class="material-icons">help_outline</i> {{ $t("create_new_environment") }}
     </p>
     <div class="virtual-list">
-      <ul>
+      <ul class="flex-col">
         <li v-for="(environment, index) in environments" :key="environment.name">
           <environment
             :environmentIndex="index"
@@ -46,11 +46,6 @@
 .virtual-list {
   max-height: calc(100vh - 245px);
 }
-
-ul {
-  display: flex;
-  flex-direction: column;
-}
 </style>
 
 <script>