mosys mobiie: handler styling

partials/CellHandlerMobile.vue

 <template lang="pug">
-  .handler-new-cell.justify-center.row(ref="targetHandler")
-    q-btn.text-dark.bg-grey-3.shadow-2(@click="onDoubleTap", flat, size="sm", no-ripple, style="max-width: 100%; border-radius: .5rem;")
+  .handler-new-cell.justify-center.row.bg-grey-3(ref="targetHandler")
+    q-btn.text-dark(@click="onDoubleTap", flat, size="sm", no-ripple, style="max-width: 100%;")
       slot
 </template>
 
@@ -61,5 +61,6 @@
   .handler-new-cell
     width handler-width
     height handler-width
-    border-radius 1000px
+    // border-radius 1000px
+    border-radius .5rem
 </style>

partials/GridEditor.vue

@@ -144,7 +144,7 @@
 
           //----------------------------------------------------------------------------------------------- move handler
           //----- (main)
-          cell-handler-mobile.main-handler(
+          cell-handler-mobile.main-handler.shadow-1(
           v-if="!handlerNewCell.resize.pushed",
           @onIntersectionChange="intersectionChanged",
           :element="'move'",
@@ -155,7 +155,7 @@
 
           //----- (temp)
           //----- (when main move handler is outside of viewport)
-          cell-handler-mobile.temp-handler(
+          cell-handler-mobile.temp-handler.shadow-1(
           v-touch-pan="handleMoveCell",
           :doubleTap="{el: $el, type: 'scroll', oLeft: mobileTempCell.left}",
           :class="[(!mobileTempCell.onGrid || tempHandler.move.intersectingMain || handlerNewCell.resize.pushed || handlerNewCell.move.pushed ? 'hide': 'show'), (tempHandler.move.side === 'left' ? 'left-side' : 'right-side')]",
@@ -164,7 +164,7 @@
 
           //--------------------------------------------------------------------------------------------- resize handler
           //----- (main)
-          cell-handler-mobile.main-handler(
+          cell-handler-mobile.main-handler.shadow-1(
           v-if="!handlerNewCell.move.pushed",
           @onIntersectionChange="intersectionChanged",
           :element="'resize'",
@@ -175,7 +175,7 @@
 
           //----- (temp)
           //----- (when main resize handler is outside of viewport)
-          cell-handler-mobile.temp-handler(
+          cell-handler-mobile.temp-handler.shadow-1(
           v-touch-pan="handleResizeCell",
           :class="[(!mobileTempCell.onGrid || tempHandler.resize.intersectingMain || handlerNewCell.move.pushed || handlerNewCell.resize.pushed ? 'hide': 'show'), (tempHandler.resize.side === 'left' ? 'left-side' : 'right-side')]",
           :style="{top: handlerNewCell.resize.y + 59 - 20 + 'px'}",)
@@ -1289,7 +1289,8 @@
 
   //************************************************** mobile: new cell
   handler-width = 40px
-  gap = 4px
+  // gap = 4px
+  gap = 0px
 
   .main-handler
     position absolute
@@ -1298,9 +1299,11 @@
       overflow hidden
 
   .handler-new-cell
+    /*
     width handler-width
     height handler-width
     border-radius 1000px
+    */
 
     &.pushed
       transition top ease 200ms, left ease 200ms
@@ -1322,10 +1325,12 @@
       &.left-side
         left gap
         right auto
+        border-radius 0 .5rem .5rem 0
       &.right-side
         // left 'calc(100vw - %s)' % handler-width
         left auto
         right gap
+        border-radius .5rem 0 0 .5rem
 
 </style>