@licklist/design 0.67.5 → 0.68.0-dev.0

package/src/styles/snippet-templates/_snippetVariables.scss

@@ -1,259 +1,78 @@
 // @TODO move colors in variables --start
-$separator-color: #d8d8d8;
+$separator-color: #D8D8D8;
 
-$snippet-page-background-color: var(
-  --snippet-page-background-color,
-  #ffffff
-) !default;
+$snippet-page-background-color: var(--snippet-page-background-color, #FFFFFF) !default;
 
-$snippet-page-header-background-gradient-color-1: var(
-  --snippet-page-header-background-gradient-color-1,
-  #55c3e8
-) !default;
-$snippet-page-header-background-gradient-color-2: var(
-  --snippet-page-header-background-gradient-color-2,
-  #55c3e8
-) !default;
-$snippet-page-header-background-gradient-color-3: var(
-  --snippet-page-header-background-gradient-color-3,
-  #6b01e3
-) !default;
-$snippet-page-header-background-gradient-color-4: var(
-  --snippet-page-header-background-gradient-color-4,
-  #6b01e3
-) !default;
+$snippet-page-header-background-gradient-color-1: var(--snippet-page-header-background-gradient-color-1, #55C3E8) !default;
+$snippet-page-header-background-gradient-color-2: var(--snippet-page-header-background-gradient-color-2, #55C3E8) !default;
+$snippet-page-header-background-gradient-color-3: var(--snippet-page-header-background-gradient-color-3, #6B01E3) !default;
+$snippet-page-header-background-gradient-color-4: var(--snippet-page-header-background-gradient-color-4, #6B01E3) !default;
 
-$snippet-page-header-steps-active-step-background-color: var(
-  --snippet-page-header-steps-active-step-background-color,
-  #0e8ce2
-) !default;
-$snippet-page-header-steps-active-step-border-color: var(
-  --snippet-page-header-steps-active-step-border-color,
-  #0e8ce2
-) !default;
-$snippet-page-header-steps-active-step-body-color: var(
-  --snippet-page-header-steps-active-step-body-color,
-  #0e8ce2
-) !default;
-$snippet-page-header-steps-inactive-step-background-color: var(
-  --snippet-page-header-steps-inactive-step-background-color,
-  #ffffff
-) !default;
-$snippet-page-header-steps-inactive-step-border-color: var(
-  --snippet-page-header-steps-inactive-step-border-color,
-  #ffffff
-) !default;
-$snippet-page-header-steps-inactive-step-body-color: var(
-  --snippet-page-header-steps-inactive-step-body-color,
-  #525252
-) !default;
-$snippet-page-header-steps-timer-background-color: var(
-  --snippet-page-header-steps-timer-background-color,
-  #ffffff
-) !default;
-$snippet-page-header-steps-timer-border-color: var(
-  --snippet-page-header-steps-timer-border-color,
-  #f0f0f0
-) !default;
-$snippet-page-header-steps-timer-body-color: var(
-  --snippet-page-header-steps-timer-body-color,
-  #0e8ce2
-) !default;
-$snippet-page-header-steps-body-color: var(
-  --snippet-page-header-steps-body-color,
-  #1a182b
-) !default;
-$snippet-page-header-steps-close-button-background-color: var(
-  --snippet-page-header-steps-close-button-background-color,
-  #ffffff
-) !default;
-$snippet-page-header-steps-close-button-border-color: var(
-  --snippet-page-header-steps-close-button-border-color,
-  #0e8ce2
-) !default;
-$snippet-steps-background-color: var(
-  --snippet-steps-background-color,
-  #ffffff
-) !default;
+$snippet-page-header-steps-active-step-background-color: var(--snippet-page-header-steps-active-step-background-color, #0E8CE2) !default;
+$snippet-page-header-steps-active-step-border-color: var(--snippet-page-header-steps-active-step-border-color, #0E8CE2) !default;
+$snippet-page-header-steps-active-step-body-color: var(--snippet-page-header-steps-active-step-body-color, #0E8CE2) !default;
+$snippet-page-header-steps-inactive-step-background-color: var(--snippet-page-header-steps-inactive-step-background-color, #FFFFFF) !default;
+$snippet-page-header-steps-inactive-step-border-color: var(--snippet-page-header-steps-inactive-step-border-color, #FFFFFF) !default;
+$snippet-page-header-steps-inactive-step-body-color: var(--snippet-page-header-steps-inactive-step-body-color, #525252) !default;
+$snippet-page-header-steps-timer-background-color: var(--snippet-page-header-steps-timer-background-color, #FFFFFF) !default;
+$snippet-page-header-steps-timer-border-color: var(--snippet-page-header-steps-timer-border-color, #F0F0F0) !default;
+$snippet-page-header-steps-timer-body-color: var(--snippet-page-header-steps-timer-body-color, #0E8CE2) !default;
+$snippet-page-header-steps-body-color: var(--snippet-page-header-steps-body-color, #1A182B) !default;
+$snippet-page-header-steps-close-button-background-color: var(--snippet-page-header-steps-close-button-background-color, #FFFFFF) !default;
+$snippet-page-header-steps-close-button-border-color: var(--snippet-page-header-steps-close-button-border-color, #0E8CE2) !default;
+$snippet-steps-background-color: var(--snippet-steps-background-color, #FFFFFF) !default;
 
-$snippet-page-body-left-block-background-color: var(
-  --snippet-page-body-left-block-background-color,
-  #ffffff
-) !default;
-$snippet-page-body-left-block-back-button-background-color: var(
-  --snippet-page-body-left-block-back-button-background-color,
-  #f3f3f3
-) !default;
-$snippet-page-body-left-block-back-button-border-color: var(
-  --snippet-page-body-left-block-back-button-border-color,
-  #f0f0f0
-) !default;
-$snippet-page-body-left-block-back-button-body-color: var(
-  --snippet-page-body-left-block-back-button-body-color,
-  #1a182b
-) !default;
+$snippet-page-body-left-block-background-color: var(--snippet-page-body-left-block-background-color, #FFFFFF) !default;
+$snippet-page-body-left-block-back-button-background-color: var(--snippet-page-body-left-block-back-button-background-color, #F3F3F3) !default;
+$snippet-page-body-left-block-back-button-border-color: var(--snippet-page-body-left-block-back-button-border-color, #F0F0F0) !default;
+$snippet-page-body-left-block-back-button-body-color: var(--snippet-page-body-left-block-back-button-body-color, #1A182B) !default;
 
-$snippet-page-body-right-block-background-color: var(
-  --snippet-page-body-right-block-background-color,
-  #f3f3f3
-) !default;
+$snippet-page-body-right-block-background-color: var(--snippet-page-body-right-block-background-color, #F3F3F3) !default;
 
-$snippet-elements-body-color: var(
-  --snippet-elements-body-color,
-  #000000
-) !default;
-$snippet-elements-input-border-color: var(
-  --snippet-elements-input-border-color,
-  #525252
-) !default;
-$snippet-elements-input-background-color: var(
-  --snippet-elements-input-background-color,
-  #ffffff
-) !default;
-$snippet-elements-input-body-color: var(
-  --snippet-elements-input-body-color,
-  #000000
-) !default;
-$snippet-elements-number-input-background-color: var(
-  --snippet-elements-number-input-background-color,
-  #f3f3f3
-) !default;
-$snippet-elements-number-input-border-color: var(
-  --snippet-elements-number-input-border-color,
-  #ffffff
-) !default;
-$snippet-elements-number-input-body-color: var(
-  --snippet-elements-number-input-body-color,
-  #1a182b
-) !default;
-$snippet-elements-number-input-button-border-color: var(
-  --snippet-elements-number-input-button-border-color,
-  #0e8ce2
-) !default;
-$snippet-elements-number-input-button-background-color: var(
-  --snippet-elements-number-input-button-background-color,
-  #0e8ce2
-) !default;
-$snippet-elements-button-color: var(
-  --snippet-elements-button-color,
-  #ffffff
-) !default;
-$snippet-elements-button-background-color: var(
-  --snippet-elements-button-background-color,
-  #0e8ce2
-) !default;
-$snippet-elements-button-border-color: var(
-  --snippet-elements-button-border-color,
-  #0e8ce2
-) !default;
-$snippet-form-link-color: var(--snippet-form-link-color, #0e8ce2) !default;
-$snippet-dropdown-background-color: var(
-  --snippet-dropdown-background-color,
-  #ffffff
-) !default;
-$snippet-dropdown-border-color: var(
-  --snippet-dropdown-border-color,
-  #1a182b
-) !default;
-$snippet-dropdown-font-color: var(
-  --snippet-dropdown-font-color,
-  #000000
-) !default;
+$snippet-elements-body-color: var(--snippet-elements-body-color, #000000) !default;
+$snippet-elements-input-border-color: var(--snippet-elements-input-border-color, #525252) !default;
+$snippet-elements-input-background-color: var(--snippet-elements-input-background-color, #FFFFFF) !default;
+$snippet-elements-input-body-color: var(--snippet-elements-input-body-color, #000000) !default;
+$snippet-elements-number-input-background-color: var(--snippet-elements-number-input-background-color, #F3F3F3) !default;
+$snippet-elements-number-input-border-color: var(--snippet-elements-number-input-border-color, #FFFFFF) !default;
+$snippet-elements-number-input-body-color: var(--snippet-elements-number-input-body-color, #1A182B) !default;
+$snippet-elements-number-input-button-border-color: var(--snippet-elements-number-input-button-border-color, #0E8CE2) !default;
+$snippet-elements-number-input-button-background-color: var(--snippet-elements-number-input-button-background-color, #0E8CE2) !default;
+$snippet-elements-button-color: var(--snippet-elements-button-color, #FFFFFF) !default;
+$snippet-elements-button-background-color: var(--snippet-elements-button-background-color, #0E8CE2) !default;
+$snippet-elements-button-border-color: var(--snippet-elements-button-border-color, #0E8CE2) !default;
+$snippet-form-link-color: var(--snippet-form-link-color, #0E8CE2) !default;
+$snippet-dropdown-background-color: var(--snippet-dropdown-background-color, #FFFFFF) !default;
+$snippet-dropdown-border-color: var(--snippet-dropdown-border-color, #1A182B) !default;
+$snippet-dropdown-font-color: var(--snippet-dropdown-font-color, #000000) !default;
 // Always will be a string with generated
 // by snippet template provider background-image url
 $snippet-dropdown-background-icon: var(--snippet-dropdown-background-icon);
 
-$snippet-calendar-button-border-color: var(
-  --snippet-calendar-button-border-color,
-  #ffffff
-);
-$snippet-calendar-button-background-color: var(
-  --snippet-calendar-button-background-color,
-  #ffffff
-);
-$snippet-calendar-button-font-color: var(
-  --snippet-calendar-button-font-color,
-  #000000
-);
-$snippet-calendar-disabled-button-border-color: var(
-  --snippet-calendar-disabled-button-border-color,
-  #f6f6f6
-);
-$snippet-calendar-disabled-button-background-color: var(
-  --snippet-calendar-disabled-button-background-color,
-  #f6f6f6
-);
-$snippet-calendar-disabled-button-font-color: var(
-  --snippet-calendar-disabled-button-font-color,
-  #9e9e9e
-);
-$snippet-calendar-active-button-border-color: var(
-  --snippet-calendar-active-button-border-color,
-  #0e8ce2
-);
-$snippet-calendar-active-button-background-color: var(
-  --snippet-calendar-active-button-background-color,
-  #0e8ce2
-);
-$snippet-calendar-active-button-font-color: var(
-  --snippet-calendar-active-button-font-color,
-  #ffffff
-);
+$snippet-calendar-button-border-color: var(--snippet-calendar-button-border-color, #FFFFFF);
+$snippet-calendar-button-background-color: var(--snippet-calendar-button-background-color, #FFFFFF);
+$snippet-calendar-button-font-color: var(--snippet-calendar-button-font-color, #000000);
+$snippet-calendar-disabled-button-border-color: var(--snippet-calendar-disabled-button-border-color, #F6F6F6);
+$snippet-calendar-disabled-button-background-color: var(--snippet-calendar-disabled-button-background-color, #F6F6F6);
+$snippet-calendar-disabled-button-font-color: var(--snippet-calendar-disabled-button-font-color, #9E9E9E);
+$snippet-calendar-active-button-border-color: var(--snippet-calendar-active-button-border-color, #0E8CE2);
+$snippet-calendar-active-button-background-color: var(--snippet-calendar-active-button-background-color, #0E8CE2);
+$snippet-calendar-active-button-font-color: var(--snippet-calendar-active-button-font-color, #FFFFFF);
 
-$snippet-product-set-border-color: var(
-  --snippet-product-set-border-color,
-  #f2f2f2
-);
-$snippet-product-set-background-color: var(
-  --snippet-product-set-background-color,
-  #f2f2f2
-);
+$snippet-product-set-border-color: var(--snippet-product-set-border-color, #F2F2F2);
+$snippet-product-set-background-color: var(--snippet-product-set-background-color, #F2F2F2);
 $snippet-product-set-font-color: var(--snippet-product-set-font-color, #000000);
-$snippet-active-product-set-border-color: var(
-  --snippet-active-product-set-border-color,
-  #0e8ce2
-);
-$snippet-active-product-set-background-color: var(
-  --snippet-active-product-set-background-color,
-  #d9efff
-);
-$snippet-active-product-set-font-color: var(
-  --snippet-active-product-set-font-color,
-  #0e8ce2
-);
+$snippet-active-product-set-border-color: var(--snippet-active-product-set-border-color, #0E8CE2);
+$snippet-active-product-set-background-color: var(--snippet-active-product-set-background-color, #D9EFFF);
+$snippet-active-product-set-font-color: var(--snippet-active-product-set-font-color, #0E8CE2);
 
-$snippet-canvas-background-color: var(
-  --snippet-canvas-background-color,
-  #ffffff
-);
-$snippet-canvas-border-color: var(--snippet-canvas-border-color, #f3f3f3);
-$snippet-canvas-point-border-color: var(
-  --snippet-canvas-point-border-color,
-  #ffffff
-);
-$snippet-canvas-point-background-color: var(
-  --snippet-canvas-point-background-color,
-  #ffffff
-);
-$snippet-canvas-point-font-color: var(
-  --snippet-canvas-point-font-color,
-  #0e8ce2
-);
-$snippet-canvas-active-point-border-color: var(
-  --snippet-canvas-active-point-border-color,
-  #ffffff
-);
-$snippet-canvas-active-point-background-color: var(
-  --snippet-canvas-active-point-background-color,
-  #0e8ce2
-);
-$snippet-canvas-active-point-font-color: var(
-  --snippet-canvas-active-point-font-color,
-  #ffffff
-);
+$snippet-canvas-background-color: var(--snippet-canvas-background-color, #FFFFFF);
+$snippet-canvas-border-color: var(--snippet-canvas-border-color, #F3F3F3);
+$snippet-canvas-point-border-color: var(--snippet-canvas-point-border-color, #FFFFFF);
+$snippet-canvas-point-background-color: var(--snippet-canvas-point-background-color, #FFFFFF);
+$snippet-canvas-point-font-color: var(--snippet-canvas-point-font-color, #0E8CE2);
+$snippet-canvas-active-point-border-color: var(--snippet-canvas-active-point-border-color, #FFFFFF);
+$snippet-canvas-active-point-background-color: var(--snippet-canvas-active-point-background-color, #0E8CE2);
+$snippet-canvas-active-point-font-color: var(--snippet-canvas-active-point-font-color, #FFFFFF);
 
-$color-transition:
-  color 0.15s ease-in-out,
-  background-color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
+$color-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

package/src/styles/sortable-field/SortableField.scss

@@ -1,21 +1,21 @@
 .sortable-field-list {
-  display: flex;
+    display: flex;
 
-  .icon-container {
-    margin-right: 0.8rem;
-    margin-left: 0.2rem;
-    margin-top: 1rem;
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
 
-    div {
-      width: 0.75rem;
-      height: 2px;
-      margin-bottom: 2px;
-      background-color: #b5ccde;
-      border-radius: 1px;
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
     }
-  }
 
-  .form-group {
-    width: 80%;
-  }
-}
+    .form-group {
+        width: 80%;
+    }
+}

package/src/styles/sortable-field/_index.scss

@@ -1 +1 @@
-@import "./SortableField";
+@import "./SortableField";

package/src/styles/sortable-tree/Item.scss

@@ -36,12 +36,12 @@ $sortable-tree-item-body-padding: sp(6) !default;
 
     .expand-icon-container {
       margin-right: 0.2rem;
-
+    
       div {
         width: 1.125rem;
         height: 3px;
         margin-bottom: 3px;
-        background-color: #b5ccde;
+        background-color: #B5CCDE;
         border-radius: 1px;
       }
     }
@@ -72,11 +72,11 @@ $sortable-tree-item-body-padding: sp(6) !default;
   }
 
   .sortable-tree-item {
-    border-bottom: 1px solid #fafafa;
+    border-bottom: 1px solid #FAFAFA;
     margin: $sortable-tree-item-margin;
 
     &.invalid {
-      // @TODO: need to reworke UI with new design
+      // @TODO: need to reworke UI with new design 
       // border-color: theme-color("danger");
     }
 

package/src/styles/table/Table.scss

@@ -7,7 +7,7 @@
       align-items: center;
 
       .per-page-control {
-        margin: 0 0.5rem;
+        margin: 0 .5rem;
         border: 0;
       }
     }

package/src/styles/themes/bookedit/_variables.scss

@@ -267,21 +267,9 @@ $iframe-border-radius: 0.25rem;
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:
-  Poppins,
-  -apple-system,
-  BlinkMacSystemFont,
-  "Segoe UI",
-  Roboto,
-  "Helvetica Neue",
-  Arial,
-  "Noto Sans",
-  "Liberation Sans",
-  sans-serif,
-  "Apple Color Emoji",
-  "Segoe UI Emoji",
-  "Segoe UI Symbol",
-  "Noto Color Emoji";
+$font-family-sans-serif: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
   "Liberation Mono", "Courier New", monospace !default;
 $font-family-base: $font-family-sans-serif !default;
@@ -436,9 +424,7 @@ $btn-line-height-lg: $input-btn-line-height-lg !default;
 $btn-border-width: $input-btn-border-width !default;
 
 $btn-font-weight: $font-weight-normal !default;
-$btn-box-shadow:
-  inset 0 1px 0 rgba($white, 0.15),
-  0 1px 1px rgba($black, 0.075) !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
 $btn-focus-width: $input-btn-focus-width !default;
 $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $btn-disabled-opacity: 0.65 !default;
@@ -453,11 +439,8 @@ $btn-border-radius: $border-radius !default;
 $btn-border-radius-lg: $border-radius-lg !default;
 $btn-border-radius-sm: $border-radius-sm !default;
 
-$btn-transition:
-  color 0.15s ease-in-out,
-  background-color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
 // Forms
 
@@ -529,9 +512,7 @@ $input-height-lg: add(
   add($input-padding-y-lg * 2, $input-height-border, false)
 ) !default;
 
-$input-transition:
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
 $form-text-margin-top: 0.25rem !default;
 
@@ -549,10 +530,8 @@ $input-group-addon-color: $input-color !default;
 $input-group-addon-bg: $gray-200 !default;
 $input-group-addon-border-color: $input-border-color !default;
 
-$custom-forms-transition:
-  background-color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out,
-  box-shadow 0.15s ease-in-out !default;
+$custom-forms-transition: background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
 $custom-control-gutter: 0.5rem !default;
 $custom-control-spacer-x: 1rem !default;
@@ -674,8 +653,7 @@ $custom-range-thumb-bg: $component-active-bg !default;
 $custom-range-thumb-border: 0 !default;
 $custom-range-thumb-border-radius: 1rem !default;
 $custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
-$custom-range-thumb-focus-box-shadow:
-  0 0 0 1px $body-bg,
+$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
   $input-focus-box-shadow !default;
 $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge
 $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;

package/src/styles/themes/licklist/_variables.scss

@@ -71,4 +71,4 @@ $spacers: (
 );
 
 // Iframe border
-$iframe-border-radius: 0.25rem;
+$iframe-border-radius: 0.25rem;

package/src/styles/tiptap-editor/TiptapEditor.scss

@@ -2,7 +2,7 @@
   width: 100%;
   padding: 0.5rem;
   background-color: $white;
-  border-radius: 1rem 1rem 0 0;
+  border-radius: 1rem 1rem 0  0;
   border: 1px solid $gray-400;
   border-bottom: none;
   margin-left: 0;
@@ -24,15 +24,14 @@
     align-items: center;
     color: $black;
   }
-
-  .icon-btn-active,
-  .icon-btn:hover {
+  
+  .icon-btn-active, .icon-btn:hover {
     background-color: $gray-700;
     svg {
       color: $white;
     }
   }
-
+  
   .icon-btn:hover {
     cursor: pointer;
   }
@@ -47,8 +46,7 @@
   }
 }
 
-.editor.editor-disabled,
-.editor-menu-disabled {
+.editor.editor-disabled, .editor-menu-disabled {
   background-color: $gray-200;
 }
 
@@ -66,7 +64,7 @@
   > * + * {
     margin-top: 0.75em;
   }
-
+  
   img.emoji {
     width: 1.2rem;
     height: 1.2rem;
@@ -89,8 +87,8 @@
 
   pre {
     background: $black;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
 
@@ -129,6 +127,7 @@
       margin-top: 0;
     }
   }
+  
 }
 
 .ProseMirror:focus {

package/src/styles/tiptap-editor/_index.scss

@@ -1 +1 @@
-@import "./TiptapEditor.scss";
+@import "./TiptapEditor.scss";

package/src/styles/venue-map-sets/VenueMapSetForm.scss

@@ -14,10 +14,11 @@
     width: 50%;
     justify-content: space-between;
 
-    color: #ed2c92;
+    color: #ED2C92;
     background-color: rgba(249, 37, 151, 0.2);
     border: 1px solid transparent;
 
+
     .name-wrapper {
       display: inline-flex;
       align-items: center;
@@ -36,7 +37,7 @@
       color: #fff;
       margin-right: 0.5rem;
 
-      background-color: #f92597;
+      background-color: #F92597;
     }
 
     &.is-invalid {
@@ -71,7 +72,7 @@
   .top-label-container {
     background-color: rgba(249, 37, 151, 0.2);
     span {
-      color: #ed2c92;
+      color: #ED2C92;
     }
   }
 
@@ -118,7 +119,7 @@
 @include media-breakpoint-down(sm) {
   .venue-map-element-control-btns {
     flex-direction: column;
-
+    
     .delete-btn {
       .btn {
         width: 100%;

package/src/styles/virtualized/_index.scss

@@ -1,3 +1,3 @@
 .virtualized-grid-container {
   width: 0;
-}
+}

package/src/styles/zones/ZoneForm.scss

@@ -1,4 +1,5 @@
 .zone-available-times {
+  overscroll-behavior: contain;
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;

package/src/styles/zones/ZoneRecurrencesControl.scss

@@ -1,10 +1,10 @@
 .zone-recurrences {
   .zone-recurrence {
     border: 1px solid #d4d4d4;
-    border-radius: 0.5rem;
+    border-radius: .5rem;
 
     .zone-recurrence-icon-calendar {
-      margin-right: 0.5rem;
+      margin-right: .5rem;
     }
 
     .zone-recurrence-title {
@@ -12,18 +12,16 @@
     }
 
     .zone-recurrence-description {
-      font-size: 0.85rem;
+      font-size: .85rem;
     }
   }
 
   .zone-recurrence-icon-wrapper {
     font-weight: bold;
-    font-size: 0.95rem;
+    font-size: .95rem;
   }
 
-  .zone-recurrence-icon-add,
-  .zone-recurrence-icon-calendar,
-  .zone-recurrence-icon-more {
+  .zone-recurrence-icon-add, .zone-recurrence-icon-calendar, .zone-recurrence-icon-more {
     color: $primary;
   }
-}
+}