@licklist/design 0.44.486-dev.83 → 0.44.486

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -64,11 +64,6 @@
   font-weight: 400;
   font-size: 0.875rem;
 
-  b {
-    display: block;
-    font-size: 1rem;
-  }
-
   .accordion > button {
     width: 100%;
     border: 0;
@@ -198,7 +193,7 @@
 }
 
 .steps-wrapper {
-  margin: 0 3rem;
+  margin-left: 1rem;
   flex: 1;
   display: flex;
   align-items: center;
@@ -207,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin: 0 1rem;
+    margin-left: 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -230,7 +225,6 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
-    flex-grow: 1;
 
     .step {
       display: flex;
@@ -239,13 +233,11 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
-      flex-grow: 1;
 
       .number {
         text-align: center;
-        max-width: 17rem;
-        width: 100%;
-        height: 0.35rem;
+        width: 3rem;
+        height: 0.25rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;

package/src/styles/iframe-page/PageBody.scss

@@ -60,7 +60,6 @@
 
     .left-block-container {
       height: calc(100svh - 12rem);
-      scrollbar-width: none;
       overflow: scroll;
 
       .iframe-event-card {
@@ -120,7 +119,6 @@
 
         &.show {
           overflow: scroll;
-          scrollbar-width: none;
           overflow-x: hidden;
         }
 
@@ -199,8 +197,7 @@
         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 {
@@ -235,7 +232,7 @@
     font-weight: 500;
     border-radius: 0.25rem;
     font-size: 0.875rem;
-    min-height: 2.25rem;
+    height: 2.25rem;
 
     &:focus {
       box-shadow: unset;

package/src/styles/notification/Notification.scss

@@ -15,10 +15,6 @@
       display: none !important;
     }
   }
-
-  &.is-invalid {
-    border-color: theme-color("danger");
-  }
 }
 
 .placeholder-row {

package/src/styles/packages.scss

@@ -8,11 +8,9 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
-@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";
-@import "./back-button";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -31,15 +29,9 @@
 @import "./iframe-page";
 @import "./affiliate";
 @import "./zones";
+@import "./widgets/";
 @import "./resources-blocking";
 @import "./ryft-payment-form";
 @import "./skeleton";
 @import "./virtualized/";
 @import "./error";
-@import "./customers/";
-@import "./striped-static-table/";
-@import "./image-radio-input/";
-@import "./radio-card/";
-@import "./activity-card/";
-@import "./date-time-button/";
-@import "./availability-indicator/";

package/src/styles/resources-blocking/_index.scss

@@ -7,47 +7,6 @@
     overflow: auto;
   }
 
-
-  .modal-form-content {
-    max-height: 21rem;
-    overflow-x: hidden;
-
-    .error-content {
-      min-width: 25rem;
-    }
-  }
-
-  .reccurrence-interval-container {
-    .form-group {
-      margin-bottom: 0.5rem;
-      .form-control {
-        height: 1.5rem;
-        font-size: 0.625rem;
-        border: 2px solid #dcdcdc;
-        border-radius: 0.5rem;
-      }
-    }
-  }
-
-  .custom-checkbox .custom-control-label::before {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 0.5rem;
-    border: 2px solid #0e8ce2;
-    margin-top: -0.3rem;
-  }
-  .custom-checkbox .custom-control-label::after {
-    width: 1.5rem;
-    height: 1.5rem;
-    top: 0;
-  }
-
-  .custom-control-label {
-    padding-left: 0.5rem;
-    font-weight: 400;
-    font-size: 0.875rem;
-  }
-
   label,
   header,
   button {
@@ -55,10 +14,6 @@
     font-size: 0.875rem;
   }
 
-  .title {
-    margin-left: 0.25rem;
-  }
-
   header {
     display: flex;
     justify-content: space-between;
@@ -76,7 +31,6 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
-
   }
 
   .custom-checkbox {
@@ -92,7 +46,6 @@
     display: flex;
     align-items: center;
     gap: 1rem;
-    margin-bottom: 1rem;
 
     span {
       font-weight: 600;
@@ -105,7 +58,6 @@
     justify-content: space-between;
     align-items: center;
     gap: 0.25rem;
-    margin-bottom: 0.5rem;
   }
 
   .text-input.form-group {
@@ -138,15 +90,11 @@
       font-weight: 600;
     }
 
-    .resource {
+    .lane {
       margin-bottom: 0.25rem;
     }
   }
 
-  .footer-with-short-notes {
-    min-width: 18rem;
-  }
-
   footer {
     display: flex;
     gap: 1.25rem;
@@ -163,4 +111,3 @@
     }
   }
 }
-

package/src/styles/sales/BookingFilter.scss

@@ -33,7 +33,7 @@
             margin: 0.875rem;
             z-index: 3;
           }
-
+          
           .form-control {
             height: 2.75rem;
             color: $blue;
@@ -57,11 +57,7 @@
         margin-right: 0.5rem;
       }
 
-      .cancel-button,
-      .add-filters-button,
-      .refresh-button,
-      .fullscreen-button,
-      .minimize-button {
+      .cancel-button, .add-filters-button, .refresh-button, .fullscreen-button, .minimize-button {
         display: flex;
         color: $gray-800;
 
@@ -96,14 +92,11 @@
         }
       }
 
-      .fullscreen-button,
-      .minimize-button {
+      .fullscreen-button, .minimize-button {
         min-width: 7.25rem;
       }
 
-      .refresh-button,
-      .fullscreen-button,
-      .minimize-button {
+      .refresh-button, .fullscreen-button, .minimize-button {
         .icon {
           background-color: transparent;
 
@@ -152,37 +145,13 @@
   .additional-filter-section {
     margin-top: 1.25rem;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md){
       .form-group {
         margin-bottom: 0;
       }
     }
   }
 
-  .additional-filter-container {
-    flex-wrap: nowrap;
-
-    @include media-breakpoint-down(md) {
-      flex-wrap: wrap;
-      .date-container {
-        width: 100%;
-        flex: 1;
-      }
-      .btn-primary {
-        margin-top: 1rem;
-      }
-    }
-
-    @include media-breakpoint-between(md, lg) {
-      flex-wrap: nowrap;
-
-      .date-container {
-        width: auto;
-        flex: 0 0 35%;
-      }
-    }
-  }
-
   .searching-for-section {
     .tags {
       display: flex;
@@ -192,9 +161,8 @@
       p {
         margin: 0;
       }
-
-      .label,
-      .search-query-param {
+      
+      .label, .search-query-param {
         font-size: 1.125rem;
         font-weight: 600;
       }
@@ -207,20 +175,18 @@
       .result-tag {
         display: flex;
         align-items: center;
-        border: 1px solid #dcdcdc;
-        background-color: #f5f5f5;
+        border: 1px solid #DCDCDC;
+        background-color: #F5F5F5;
         padding: 0.5rem 0.75rem;
         font-size: 0.75rem;
         text-transform: capitalize;
 
         .icon {
           margin-left: 0.5rem;
-          border: none;
-          padding: 0;
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;
-          background-color: #dcdcdc;
+          background-color: #DCDCDC;
           border-radius: 1rem;
           display: flex;
           align-items: center;
@@ -230,4 +196,4 @@
       }
     }
   }
-}
+}

package/src/styles/sales/BookingResults.scss

@@ -5,14 +5,14 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 11.125rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);
       transition: ease-in 0.25s;
       border-radius: 0.25rem;
       box-shadow: 0px 0px 0.125rem 0px rgb(0 0 0 / 20%);
-
+      
       .card-content {
         width: 100%;
         height: 100%;
@@ -28,7 +28,7 @@
           position: absolute;
           left: 0.5rem;
           top: 0.125rem;
-          font-weight: 600;
+          font-weight: 600;   
         }
 
         .order-people {
@@ -43,7 +43,7 @@
           height: 1.75rem;
           font-size: 0.625rem;
           line-height: 0.625rem;
-          color: #6d6d6d;
+          color: #6D6D6D;
           font-weight: 600;
 
           svg {
@@ -62,19 +62,11 @@
             font-size: 0.6875rem;
           }
         }
-
-        .products {
-          display: block;
-          width: 80%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
       }
 
       &:hover {
         box-shadow: 0px 0px 0.5rem 0px rgb(0 0 0 / 20%);
-        cursor: pointer;
+        cursor: pointer; 
       }
     }
 
@@ -93,4 +85,4 @@
       }
     }
   }
-}
+}

package/src/styles/sales/ManualBooking.scss

@@ -158,12 +158,6 @@
     font-weight: 600;
   }
 
-  .category-start-time {
-    font-size: 1rem;
-    width: 11rem;
-    margin-top: 1rem;
-  }
-
   .accordion-form-control {
     border: none;
     border-bottom: 2px solid $gray-400;
@@ -285,7 +279,7 @@
   .small-sizes-input {
     font-size: 1.5rem;
     padding: 0;
-    padding-left: 1.5rem;
+    padding-left: 1.7rem;
     padding-right: 1rem;
     margin: 0 auto;
     width: 7rem;

package/src/styles/sales/RandomColors.scss

@@ -1,20 +1,17 @@
 .random-color {
   &-blue {
-    background-color: #e4f9ff;
+    background-color: #E4F9FF;
   }
 
   &-yellow {
-    background-color: #f7f4c1;
+    background-color: #F7F4C1;
   }
 
   &-green {
-    background-color: #e4fff3;
+    background-color: #E4FFF3;
   }
 
   &-pink {
-    background-color: #ffe4f8;
-  }
-  &-violet {
-    background-color: #e4e4ff;
+    background-color: #FFE4F8;
   }
 }

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

@@ -45,22 +45,6 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    a {
-      white-space: nowrap;
-      display: inline-block;
-      text-overflow: ellipsis;
-      width: 85%;
-      overflow: hidden;
-    }
-  }
-
-  .snippet-template-card-subject {
-    white-space: nowrap;
-    display: inline-block;
-    text-overflow: ellipsis;
-    width: 100%;
-    overflow: hidden;
   }
 
   .snippet-template-card-button {

package/src/styles/static/DateRangeInput.scss

@@ -5,10 +5,6 @@
 
   .date-range-input[readonly] {
     background-color: transparent;
-
-    &:disabled {
-      background-color: #ebebeb;
-    }
   }
 
   .date-range-input-icon {
@@ -17,4 +13,4 @@
     bottom: 1rem;
     color: $gray-500;
   }
-}
+}

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

@@ -46,7 +46,6 @@
 .header {
   background-color: color("white");
   padding: 0 2.5rem;
-  z-index: 2;
   min-height: 4rem;
   border-bottom: 1px solid #f0f0f0;
 }

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

@@ -38,7 +38,7 @@ $blue: #0e8ce2;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #e83e8c !default;
-$dark-pink: #e20e58 !default;
+$dark-pink: #E20E58 !default;
 $red: #f94b25;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
@@ -65,7 +65,7 @@ $colors: (
   "gray": $gray-600,
   "gray-dark": $gray-800,
   "light-yellow": $light-yellow,
-  "dark-pink": $dark-pink,
+  "dark-pink": $dark-pink
 );
 
 $primary: $blue !default;
@@ -231,7 +231,6 @@ $line-height-lg: 1.5 !default;
 $line-height-sm: 1.5 !default;
 
 $border-width: 1px !default;
-$calendar-border: 2px solid #f2f2f2;
 $border-color: $gray-300 !default;
 
 $border-radius: 1rem;

package/src/styles/widgets/BookingStyleSelector.scss

@@ -0,0 +1,14 @@
+.widget-booking-style-selector {
+  margin-bottom: 2rem;
+
+  h4 {
+    margin-bottom: 1.5rem;
+  }
+
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+}

package/src/styles/widgets/CalendarStyleSelector.scss

@@ -0,0 +1,17 @@
+.widget-calendar-style-selector {
+  margin-bottom: 2rem;
+
+  p {
+    font-size: 0.8125rem;
+  }
+
+  .controls {
+    display: flex;
+    gap: 2rem;
+    margin-top: 0.75rem;
+
+    .form-check {
+      padding-left: 0;
+    }
+  }
+}

package/src/styles/widgets/CheckboxGroup.scss

@@ -0,0 +1,15 @@
+.widgets-checkbox-group {
+  h3 {
+    margin-bottom: 0.75rem;
+  }
+
+  .custom-checkbox {
+    margin-top: 0;
+  }
+
+  .divider {
+    height: 2px;
+    margin-bottom: 1.5rem;
+    background-color: #e7e7e7;
+  }
+}

package/src/styles/{image-radio-input/_index.scss → widgets/ImageRadioInput.scss}

@@ -1,5 +1,4 @@
 .image-radio-input {
-  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -10,16 +9,9 @@
     cursor: pointer;
   }
 
-  &-image-wrapper {
-    display: flex;
-    max-width: 7.5rem;
-    max-height: 4.25rem;
-  }
-
   &-label {
     display: flex;
     justify-content: center;
-    align-items: center;
     gap: 0.5rem;
 
     input {
@@ -27,8 +19,4 @@
       margin: 0;
     }
   }
-
-  .disabled {
-    opacity: 0.5;
-  }
 }

package/src/styles/widgets/ProductSetSelector.scss

@@ -0,0 +1,19 @@
+.widget-builder-product-set-selector {
+  button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    color: #000;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: transparent !important;
+      color: #0e8ce2 !important;
+    }
+  }
+}

package/src/styles/widgets/SnippetCode.scss

@@ -0,0 +1,18 @@
+.widget-designer-snippet-code {
+  .code-container {
+    padding: 1rem;
+    background: #fff;
+    border: 2px solid #dcdcdc;
+    border-radius: 0.5rem;
+    word-break: break-all;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    border: 2px solid #0e8ce2;
+    background: #fff;
+    color: #0e8ce2;
+  }
+}

package/src/styles/widgets/WidgetBuilderForm.scss

@@ -0,0 +1,51 @@
+.widget-builder-form {
+  justify-content: space-between;
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+
+  p {
+    font-size: 0.8125rem;
+  }
+
+  input[type="text"],
+  select {
+    height: 2.5rem;
+    border-radius: 0.5rem;
+  }
+
+  button {
+    border-radius: 0.75rem;
+  }
+
+  .form-label {
+    font-size: 0.875rem;
+  }
+
+  &-customizations {
+    margin-bottom: 1rem;
+  }
+
+  &-right-column {
+    padding: 0;
+  }
+
+  &-grey {
+    height: fit-content;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background-color: #fafafa;
+    border-radius: 0.75rem;
+  }
+}