Merge pull request #11391 from roiLeo/chore/bulma/container.is-fluid

🔧 .container.is-fluid to tailwind

Author: vikiival

assets/styles/global.scss

@@ -92,23 +92,6 @@ body {
   }
 }
 
-.container.is-fluid {
-  padding-left: $fluid-container-padding;
-  padding-right: $fluid-container-padding;
-}
-
-@include mobile {
-  .column-padding {
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-    margin: 0 -12px !important;
-  }
-  .container.is-fluid {
-    padding-left: $fluid-container-padding-mobile;
-    padding-right: $fluid-container-padding-mobile;
-  }
-}
-
 /* move to global */
 .is-ellipsis {
   @apply overflow-hidden whitespace-nowrap text-ellipsis;
@@ -217,4 +200,4 @@ table th {
     -1px 0px 0 rgb(var(--text-color)),
     0px -1px 0 rgb(var(--text-color)),
     4px 4px rgb(var(--text-color));
-}
+}

components/ExploreLayoutWithSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="container is-fluid"
+    class="container-fluid"
     :class="{ '!pl-0': isSidebarOpen }"
   >
     <slot />

components/Navbar.vue

@@ -8,11 +8,11 @@
     }"
   >
     <div
-      class="container items-center max-lg:!px-0"
-      :class="{ 'is-fluid': !isTouch }"
+      class="grow relative mx-auto my-0 max-lg:!px-0 items-stretch flex min-h-[3.25rem] w-full"
+      :class="{ 'w-full max-w-none md:!px-10 !px-5': !isTouch }"
     >
       <!-- BRAND -->
-      <div class="navbar-brand">
+      <div class="navbar-brand ml-[-0.75rem]">
         <nuxt-link
           v-if="!isMobile || !openMobileSearchBar"
           to="/"

components/collection/CollectionHeader.vue

@@ -5,7 +5,7 @@
       :collection="collection"
     />
     <section class="pt-5">
-      <div class="container is-fluid">
+      <div class="container-fluid">
         <CollectionInfo
           ref="collectionInfo"
           :collection-id="collectionId"

components/collection/CollectionHeader/CollectionBanner.vue

@@ -9,7 +9,7 @@
 
     <section class="h-full py-8">
       <div
-        class="container is-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
+        class="container-fluid collection-banner-content flex flex-col md:flex-row items-start md:items-end md:justify-between h-full"
       >
         <div class="lg:flex-1">
           <div class="flex flex-col items-start">

components/landing/HeroBanner.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="!pt-8 md:!pt-[3rem]">
-    <div class="container is-fluid flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
+    <div class="container-fluid flex max-md:flex-col max-md:gap-8 justify-center md:justify-between items-center">
       <h1
         class="text-3xl md:text-[39px] md:leading-9 font-bold flex max-md:flex-col max-md:text-center md:gap-3 md:flex-wrap"
       >
@@ -24,7 +24,7 @@
 
     <div
       :key="usePrefix().urlPrefix.value"
-      class="container is-fluid !mt-8 md:!mt-[3rem] mb-16"
+      class="container-fluid !mt-8 md:!mt-[3rem] mb-16"
     >
       <CarouselTypeDrops />
     </div>

components/landing/LandingPage.vue

@@ -10,20 +10,20 @@
         v-if="showTopCollections"
         class="py-8 instance"
       >
-        <div class="container is-fluid">
+        <div class="container-fluid">
           <LandingTopCollections class="my-5" />
         </div>
       </section>
 
       <section class="py-8 instance">
-        <div class="container is-fluid">
+        <div class="container-fluid">
           <!-- generative  -->
           <LazyCarouselTypeGenerative />
         </div>
       </section>
 
       <section class="py-8 instance">
-        <div class="container is-fluid">
+        <div class="container-fluid">
           <!-- latest sales -->
           <LazyCarouselTypeLatestSales />
 

components/swap/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="container is-fluid flex flex-col">
+  <section class="container-fluid flex flex-col">
     <div class="flex my-14 flex-wrap gap-10 justify-between">
       <slot name="title" />
 

components/swap/review.vue

@@ -72,7 +72,7 @@
     <hr class="m-0">
 
     <div
-      class="container is-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
+      class="container-fluid flex flex-col gap-6 justify-between items-center !my-6 md:flex-row md:my-[3.5rem]"
     >
       <div class="w-[300px]">
         <TradeExpirationSelector

layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="min-h-full flex flex-col overflow-hidden">
     <Navbar />
     <main class="flex-grow py-8">
-      <div class="container is-fluid">
+      <div class="container-fluid">
         <Error
           v-if="$nuxt.isOffline"
           :has-img="false"