NeoStickyModal to tailwindcss

libs/ui/src/components/NeoStickyModal/NeoStickyModal.scss

@@ -1,44 +1,8 @@
-@import '../../scss/variable.scss';
-// mobile mixin
-@import "bulma/sass/utilities/_all";
-
 .confirm-modal {
-  @include mobile {
-    position: fixed !important;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: 0.75rem 0.75rem 0 0 !important;
-
-    &.mobile-modal-height {
-      height: 90vh;
-    }
+  @media (max-width: 768px) {
+    @apply fixed #{!important};
+    @apply bottom-0 left-0 right-0 shadow-none;
+    @apply rounded-t-xl rounded-b-none #{!important};
+    @apply border-r-0 border-l-0 border-b-0 #{!important};
   }
-
-  &.only-top-border {
-    border-right: none !important;
-    border-left: none !important;
-    border-bottom: none !important;
-  }
-
-  .scroll-height {
-    height: 50vh;
-
-    @include mobile {
-      height: 60vh;
-    }
-  }
-
-  .modal-width {
-    width: 28rem;
-  }
-
-  .position-right {
-    position: absolute;
-    right: 0;
-  }
-
-  .is-scrollable {
-    overflow-y: auto;
-  }
-}
+}

libs/ui/src/components/NeoStickyModal/NeoStickyModal.vue

@@ -1,42 +1,29 @@
 <template>
   <NeoModal
     :value="modelValue"
-    :no-shadow="isMobile"
-    :content-class="[
-      'confirm-modal',
-      isMobile ? 'only-top-border' : '',
-      isExpanded ? 'mobile-modal-height' : '',
-    ]"
+    :content-class="['confirm-modal', isExpanded ? 'h-[90vh] md:h-auto' : '']"
     max-height="90vh"
     scroll="clip"
     @close="closeModal"
     @update:active="updateActive">
-    <div
-      :class="[
-        'is-flex is-flex-direction-column is-justify-content-space-between',
-        {
-          'modal-width': !isMobile,
-          'h-full pb-6': isMobile,
-        },
-      ]">
+    <div class="flex flex-col justify-between pb-tw-8 md:w-[28rem] md:pb-0">
       <header
         :class="{
-          'is-flex is-justify-content-center is-align-items-center is-relative px-6 py-3':
-            !isBoxedHeader,
-          'py-5 px-6 is-flex is-justify-content-space-between border-bottom':
+          'flex justify-center items-center relative px-6 py-3': !isBoxedHeader,
+          'py-5 px-6 flex justify-between items-center border-b border-b-border-color':
             isBoxedHeader,
         }">
         <div
           :class="{
-            'modal-card-title is-size-6 has-text-weight-bold': isBoxedHeader,
-            'is-size-5 has-text-weight-bold': !isBoxedHeader,
+            'modal-card-title text-base font-bold': isBoxedHeader,
+            'text-xl/normal font-bold': !isBoxedHeader,
           }">
           <slot name="header" />
         </div>
 
         <NeoButton
           :class="{
-            'position-right mr-6 py-1 px-2': !isBoxedHeader,
+            'absolute right-0 mr-6 py-1 px-2': !isBoxedHeader,
           }"
           variant="text"
           no-shadow
@@ -48,20 +35,15 @@
       <div>
         <div
           :class="[
-            { 'border-top-k-shade scroll-height': isExpanded },
-            'px-6 is-scrollable',
+            { 'border-t border-t-k-shade h-[60vh] md:h-[50vh]': isExpanded },
+            'px-6 overflow-auto',
           ]">
           <slot name="body" />
         </div>
       </div>
 
       <div
-        :class="[
-          'is-flex is-flex-direction-column px-6 py-5 border-top-k-shade',
-          {
-            'pb-6': isMobile,
-          },
-        ]">
+        class="flex flex-col px-6 py-5 pb-tw-8 md:pb-0 border-t border-t-k-shade">
         <slot name="footer" />
       </div>
     </div>
@@ -70,15 +52,17 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
 import NeoModal from '../NeoModal/NeoModal.vue'
 import NeoButton from '../NeoButton/NeoButton.vue'
 
+const { width } = useWindowSize()
+
 const emit = defineEmits(['close', 'confirm', 'update:modelValue'])
 
 const props = withDefaults(
   defineProps<{
     modelValue: boolean
-    isMobile: boolean
     isExpanded?: boolean
     withBoxedHeader?: boolean
   }>(),
@@ -91,7 +75,7 @@ const updateActive = (value: boolean) => {
   emit('update:modelValue', value)
 }
 
-const isBoxedHeader = computed(() => !props.isMobile && props.withBoxedHeader)
+const isBoxedHeader = computed(() => width.value > 768 && props.withBoxedHeader)
 
 const closeModal = () => {
   emit('close')