@licklist/design 0.52.0 → 0.53.0-dev.1

package/src/styles/sales/ManualBooking.scss

@@ -361,10 +361,11 @@
   width: inherit;
 
   @include media-breakpoint-down(sm) {
-    padding: 0 0.5rem;
-    padding-top: 2rem;
+    display: none;
   }
 
+
+
   .form-control {
     margin-bottom: 1.5rem;
   }
@@ -411,6 +412,64 @@
   }
 }
 
+.manual-booking-summary-mobile {
+  display: none;
+
+  @include media-breakpoint-down(sm) {
+    display: block;
+    padding: 0 1.5rem;
+    padding-top: 2rem;
+    height: max-content;
+    margin-bottom: 1.5rem;
+    width: inherit;
+
+    .form-control {
+      margin-bottom: .5rem;
+    }
+    .receipt-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      padding-bottom: 0.4rem;
+      margin-bottom: 1rem;
+      border-bottom: 2px solid $gray-400;
+    }
+    .event-name {
+      font-size: 0.94rem;
+      font-weight: 600;
+    }
+
+    .border-summary-item {
+      padding-bottom: 0.9rem;
+      margin-bottom: 1%;
+      border-bottom: 2px solid $gray-100;
+      flex-wrap: wrap;
+    }
+
+    .total-container {
+      display: flex;
+      justify-content: space-between;
+      font-size: 1rem;
+      font-weight: 600;
+
+      @include media-breakpoint-down(lg) {
+        flex-wrap: wrap;
+      }
+      .total-amount {
+        padding-left: 1rem;
+        @include media-breakpoint-down(lg) {
+          padding-left: 0;
+        }
+      }
+    }
+
+    .summary-item-container {
+      .border-summary-item:nth-last-child(2) {
+        border-bottom: 2px solid $gray-400;
+      }
+    }
+  }
+}
+
 .menu-list-manual-booking {
   display: flex;
   align-items: center;
@@ -437,4 +496,4 @@
       color: $blue;
     }
   }
-}
+}

package/src/styles/sales/SourceOfSales.scss

@@ -13,6 +13,9 @@
 
   &__pie-chart {
     height: 100%;
+    @include media-breakpoint-down(sm) {
+      height: 12rem;
+    }
   }
 
   .colors-0 {

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

@@ -59,7 +59,8 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width
+            $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -72,14 +73,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: .7;
+          opacity: 0.7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -90,7 +91,7 @@
   }
 
   &__label {
-    font-size: .8rem;
+    font-size: 0.8rem;
     margin-top: 1rem;
     margin-bottom: 0.2rem;
   }
@@ -103,8 +104,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin-right: .5rem;
-    margin-top: .5rem;
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
   }
 
   .form-label {
@@ -181,7 +182,8 @@
           color: $snippet-elements-button-color;
           border: none;
           background-color: $snippet-elements-button-background-color;
-          box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+          box-shadow: 0 0 0 $input-btn-focus-width
+            $snippet-elements-button-background-color;
         }
 
         &:disabled {
@@ -194,14 +196,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity:  .7;
+          opacity: 0.7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: .8;
+          opacity: 0.8;
         }
       }
     }
@@ -336,7 +338,8 @@
       }
     }
 
-    .bottom-wrapper, .snippet-template__form {
+    .bottom-wrapper,
+    .snippet-template__form {
       .btn {
         border-radius: 0.25rem;
         width: 100%;
@@ -381,6 +384,10 @@
   }
 }
 
+.disabled-number-input-button {
+  background-color: $snippet-calendar-disabled-button-font-color !important;
+  border-color: $snippet-calendar-disabled-button-font-color !important;
+}
 .color-picker {
   &__color {
     position: absolute;
@@ -442,7 +449,6 @@
       }
     }
   }
-    
 }
 
 @include media-breakpoint-down(xs) {

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

@@ -28,12 +28,13 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   border: 1px solid #ccc;
   border-radius: $border-radius;
   height: 10rem;
-  width: 15rem;
+  min-width: 15rem;
   padding: 1rem;
 
   @include media-breakpoint-down(sm) {
     height: 100%;
     max-height: 10rem;
+    width: 100%;
   }
 
   p {
@@ -109,4 +110,4 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   &:hover {
     border: 2px solid $blue;
   }
-}
+}

package/src/styles/static/Tabs.scss

@@ -11,6 +11,12 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
   margin-left: -1.25rem;
   border-bottom: 1px solid $nav-tabs-border-color;
 
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
   .nav-link {
     color: $tab-nav-link-color;
     background-color: transparent;

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

@@ -98,7 +98,8 @@
       color: gray("600");
 
       &.sortable {
-        &::before, &::after {
+        &::before,
+        &::after {
           opacity: 1;
         }
 
@@ -132,20 +133,20 @@
     width: 2.5rem;
     height: 2.5rem;
     background-color: transparent;
-  
+
     svg {
       margin-bottom: 2.5px;
     }
 
     &:hover {
       cursor: pointer;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
       background-color: lighten($primary, 40);
     }
   }
 
   .page-item {
-    margin-left: .4rem;
+    margin-left: 0.4rem;
     min-width: 15px;
     width: 2.5rem;
     height: 2.5rem;
@@ -153,7 +154,7 @@
     .page-link {
       border: 0;
       padding: 0;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
       height: 100%;
       display: flex;
       align-items: center;
@@ -162,13 +163,13 @@
       color: $black;
       font-weight: 600;
       font-size: 0.875rem;
-      
+
       &:hover {
-        border-radius: .5rem;
+        border-radius: 0.5rem;
         background-color: lighten($primary, 40);
       }
     }
-    
+
     &.active {
       .page-link {
         border: 2px solid $primary;