Merge pull request #3804 from roiLeo/chore/refactor/scss

🎩 refactoring scss archi

components/CookieBanner.vue

@@ -20,25 +20,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-@import '@/styles/variables';
-
-.snackbar {
-  border: 2px solid $primary;
-  background-color: #202225;
-  box-shadow: $dropdown-content-shadow;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  transition: opacity 0.5s;
-}
-.slide-enter,
-.slide-leave-to {
-  opacity: 0;
-}
-</style>
-
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 
@@ -62,3 +43,13 @@ export default class CookieBanner extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.snackbar {
+  border: 2px solid $primary;
+  background-color: #202225;
+  box-shadow: $dropdown-content-shadow;
+}
+</style>

components/Footer.vue

@@ -125,60 +125,3 @@ export default class Footer extends Vue {
   ]
 }
 </script>
-
-<style scoped lang="scss">
-@import '@/styles/variables';
-
-.footer {
-  opacity: 0.3;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &__wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-    padding: 16px;
-    height: 135px;
-
-    @include desktop {
-      flex-direction: row;
-    }
-  }
-
-  &__list {
-    display: flex;
-    align-items: center;
-    list-style: none;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  &__list-item {
-    position: relative;
-    padding: 0 8px;
-
-    &:not(:last-child) {
-      &:after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0;
-        width: 1px;
-        height: 12px;
-        background: #fff;
-      }
-    }
-  }
-}
-
-.icons {
-  &__list-item {
-    padding: 0 2px;
-  }
-}
-</style>

components/Navbar.vue

@@ -298,143 +298,3 @@ export default class NavbarMenu extends mixins(PrefixMixin) {
   }
 }
 </script>
-
-<style lang="scss">
-@import '@/styles/variables';
-
-// Reserved for future adjustments
-
-//@media only screen and (min-width: 1024px) and (max-width: 1200px) {
-//  a#NavCreate {
-//    display: none;
-//  }
-//}
-
-//@media only screen and (min-width: 1024px) and (max-width: 1250px) {
-//  div#NavChainSelect {
-//    display: none;
-//  }
-//}
-
-//@media only screen and (min-width: 1024px) and (max-width: 1340px) {
-//  div#NavLocaleChanger {
-//    display: none;
-//  }
-//}
-
-@include touch {
-  .navbar {
-    .custom-navbar-item {
-      margin-left: 0 !important;
-    }
-    .navbar-dropdown .b-tooltip {
-      width: 100%;
-    }
-    #NavProfile {
-      margin-left: 0;
-      .dropdown-trigger .button {
-        width: 100vw;
-        background: $primary;
-      }
-    }
-    .dropdown.is-mobile-modal > .dropdown-menu {
-      -webkit-transform: translate3d(-50%, 10%, 0);
-      transform: translate3d(-50%, 10%, 0);
-    }
-  }
-}
-
-.navbar {
-  background-color: inherit;
-  backdrop-filter: blur(20px);
-  transform: translateZ(0px);
-  transition: 0.3s ease;
-  -webkit-transition: 0.3s ease;
-  &.is-spaced {
-    & > .container {
-      .navbar-menu {
-        margin-right: 0;
-        .button {
-          height: 40px;
-        }
-      }
-    }
-  }
-
-  &.navbar-shrink {
-    box-shadow: none;
-    max-height: 70px;
-    padding-top: 6px !important;
-    padding-bottom: 6px !important;
-    background-color: rgba(12, 12, 12, 0.7) !important;
-  }
-
-  .navbar-item {
-    text-transform: capitalize;
-    font-weight: 500;
-    margin: 0.5em;
-  }
-
-  .custom-navbar-item {
-    margin-left: 0.5em;
-  }
-
-  .navbar-brand {
-    align-items: center;
-    .navbar-burger {
-      height: 2.5em;
-      width: 2.5em;
-      margin-left: 0.5em;
-      &:hover {
-        border-top: 1px solid #ff47ac !important;
-      }
-    }
-  }
-
-  .navbar-start {
-    flex: 1;
-    margin-top: 24px;
-  }
-
-  .navbar-dropdown {
-    border: 2px solid $primary-light !important;
-    box-shadow: $dropdown-content-shadow !important;
-  }
-
-  .search-navbar {
-    background-color: transparent;
-    box-shadow: none;
-    width: min-content;
-    min-width: 140px;
-    margin: 0 1rem;
-    .gallery-search .control .icon {
-      color: $placeholder-color !important;
-    }
-    input {
-      border: inherit;
-      background-color: #e5e5e5;
-      &::placeholder {
-        color: $placeholder-color !important;
-      }
-      &:focus {
-        box-shadow: none !important;
-        border-top: $sleek-primary-border;
-      }
-    }
-  }
-  .search-navbar-container-mobile {
-    width: 100%;
-
-    input {
-      background-color: $search-navbar-background-color;
-      padding: 0;
-      z-index: 1;
-      &:focus {
-        box-shadow: none !important;
-        border-top: 2px solid $primary;
-        background: $search-navbar-background-color;
-      }
-    }
-  }
-}
-</style>

components/base/BaseTokenForm.vue

@@ -9,24 +9,24 @@
     <CollectionSelect
       v-model="vSelectedCollection"
       :collections="collections"
-      :showExplainerText="showExplainerText" />
+      :show-explainer-text="showExplainerText" />
 
     <transition-group name="fade">
       <template v-if="vSelectedCollection">
         <MetadataUpload
           ref="upload"
-          :required="true"
-          v-model="vFile"
           key="file"
+          v-model="vFile"
+          :required="true"
           label="Drop your NFT here or click to upload or simply paste image from clipboard. We support various media types (BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP, MP4, OGV, QUICKTIME, WEBM, GLB, FLAC, MP3, JSON)"
           expanded
           preview />
 
         <BasicInput
           ref="nftName"
-          required
-          v-model="vName"
           key="name"
+          v-model="vName"
+          required
           :label="$t('mint.nft.name.label')"
           :message="$t('mint.nft.name.message')"
           :placeholder="$t('mint.nft.name.placeholder')"
@@ -35,8 +35,8 @@
           maxlength="60" />
 
         <BasicInput
-          v-model="vDescription"
           key="description"
+          v-model="vDescription"
           maxlength="500"
           class="my-5"
           type="textarea"
@@ -47,8 +47,8 @@
 
         <BasicNumberInput
           v-if="hasEdition"
-          v-model="vEdition"
           key="edition"
+          v-model="vEdition"
           :label="$t('mint.nft.edition.label')"
           :message="$t('mint.nft.edition.message')"
           :placeholder="$t('mint.nft.edition.placeholder')"
@@ -126,15 +126,3 @@ export default class BaseTokenForm extends Vue {
   }
 }
 </script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

components/base/CarouselCardList.vue

@@ -150,8 +150,7 @@ export default class CarouselList extends mixins(AuthMixin, PrefixMixin) {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/variables';
-
+// move to scss component
 .carousel-card-list {
   overflow-x: auto;
   mask: linear-gradient(90deg, rgb(255, 255, 255) 75%, transparent);

components/bsx/Gallery/Item/ActionList.vue

@@ -13,8 +13,8 @@
         outlined
         expanded
         class="only-border-top"
-        @click="handleActionSelect(action)"
-        :data-cy="action">
+        :data-cy="action"
+        @click="handleActionSelect(action)">
         {{ actionLabel(action) }}
       </b-button>
     </b-tooltip>
@@ -24,10 +24,10 @@
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'nuxt-property-decorator'
 import {
+  ShoppingActionToolTips,
+  ShoppingActions,
   getActionButtonColor,
   getActionButtonLabelKey,
-  ShoppingActions,
-  ShoppingActionToolTips,
 } from '~/utils/shoppingActions'
 import { TranslateResult } from 'vue-i18n/types'
 
@@ -59,7 +59,3 @@ export default class ActionList extends Vue {
   }
 }
 </script>
-
-<style scoped lang="scss">
-@import '@/styles/border';
-</style>

components/bsx/Gallery/Item/GalleryItem.vue

@@ -529,6 +529,3 @@ export default class GalleryItem extends mixins(
   }
 }
 </script>
-<style scoped lang="scss">
-@import '@/styles/border';
-</style>

components/bsx/Offer/StatsOverview.vue

@@ -3,8 +3,8 @@
     <div class="level my-4 collection is-align-items-center mb-5">
       <div
         v-for="key in keysObject"
-        class="level-item has-text-centered"
-        v-bind:key="key">
+        :key="key"
+        class="level-item has-text-centered">
         <div>
           <p class="title">{{ returnTotalCounts(key, statsResponse) }}</p>
           <p class="heading">
@@ -15,9 +15,9 @@
     </div>
     <div class="level my-4 collection is-align-items-center mb-5">
       <div
-        class="level-item has-text-centered"
         v-for="data in offerStats"
-        v-bind:key="data.status">
+        :key="data.status"
+        class="level-item has-text-centered">
         <div>
           <p class="title">
             {{ `${data.totalCount} /` }}
@@ -80,8 +80,6 @@ export default class BsxStats extends mixins(PrefixMixin) {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/variables';
-
 .collection {
   display: grid;
   grid-gap: 0.7rem;