@licklist/design 0.45.0-dev.0 → 0.45.0

package/dist/styles/back-button/BackButton.scss

@@ -0,0 +1,33 @@
+$base-height: 2.5rem;
+
+.button-wrapper {
+    background-color: $snippet-page-header-steps-close-button-background-color;
+    height: $base-height;
+    width: $base-height;
+    border-radius: $base-height;
+    transition: $color-transition;
+
+
+    .back-button {
+      font-size: 2rem;
+      width: $base-height;
+      height: $base-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: lighter;
+      color: $snippet-page-header-steps-close-button-border-color;
+      transition: $color-transition;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &.back-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 1rem;
+    }
+  }

package/dist/styles/back-button/_index.scss

@@ -0,0 +1 @@
+@import "./BackButton.scss";

package/dist/styles/company-user-form/UserForm.scss

@@ -33,15 +33,11 @@
         }
 
         &.active {
-          color: #0e8ce2;
-          background: linear-gradient(
-            149.72deg,
-            #d9efff 50.04%,
-            #e9f4fe 107.75%
-          );
+          color: #0E8CE2;
+          background: linear-gradient(149.72deg, #D9EFFF 50.04%, #E9F4FE 107.75%);
 
           svg path {
-            stroke: #0e8ce2;
+            stroke: #0E8CE2;
           }
         }
       }
@@ -66,3 +62,4 @@
     }
   }
 }
+

package/dist/styles/company-user-form/_index.scss

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

package/dist/styles/custom-fields/CreateSortableListItem.scss

@@ -1,3 +1,4 @@
+ 
 $sortable-list-item-hover-bg-color: #d9efff !default;
 
 .sortable-list-item-wrapper {
@@ -25,4 +26,4 @@ $sortable-list-item-hover-bg-color: #d9efff !default;
   &:hover {
     background-color: $sortable-list-item-hover-bg-color;
   }
-}
+}

package/dist/styles/custom-fields/_index.scss

@@ -1,3 +1,3 @@
 @import "./FieldItem.scss";
 @import "./SelectFieldModal.scss";
-@import "./CreateSortableListItem.scss";
+@import "./CreateSortableListItem.scss";

package/dist/styles/customers/Filter.scss

@@ -4,13 +4,13 @@
       font-size: 0.8rem;
     }
   }
-
+  
   @include media-breakpoint-up(md) {
     label {
       font-size: 0.9rem;
     }
   }
-
+  
   @include media-breakpoint-up(lg) {
     label {
       font-size: 1rem;
@@ -28,7 +28,7 @@
       flex: 0 0 33.33%;
       max-width: 33.33%;
     }
-
+  
     @include media-breakpoint-down(xs) {
       flex-direction: column;
 
@@ -43,11 +43,11 @@
         &:first-child {
           padding-left: 0;
         }
-
+  
         &:last-child {
           padding-right: 0;
         }
       }
     }
-  }
+  } 
 }

package/dist/styles/date-time-button/DateTimeButton.scss

@@ -0,0 +1,107 @@
+.date-time-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.82rem;
+  background-color: $snippet-calendar-button-background-color;
+  border-radius: 0.4rem;
+  text-align: center;
+  border: 2px solid $snippet-calendar-button-border-color;
+  color: $snippet-calendar-button-font-color;
+  transition: $color-transition;
+  min-width: 6rem;
+  min-height: 3rem;
+  max-width: max-content;
+  padding: 0.5rem;
+
+  .weekday-info {
+    div:first-child {
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    div:last-child {
+      color: $snippet-calendar-active-button-background-color;
+    }
+  }
+
+  .descriptions {
+    font-size: 0.7rem;
+  }
+
+  &.today:first-of-type {
+    min-width: 7.5rem;
+  }
+
+  &.disabled {
+    border: 2px solid $snippet-calendar-disabled-button-border-color;
+    background-color: $snippet-calendar-disabled-button-background-color;
+    color: $snippet-calendar-disabled-button-font-color;
+
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-disabled-button-font-color;
+      }
+    }
+
+    .price {
+      color: $snippet-calendar-disabled-button-font-color;
+    }
+  }
+
+  &.selected {
+    border: 2px solid $snippet-calendar-active-button-border-color;
+    background-color: $snippet-calendar-active-button-background-color;
+    color: $snippet-calendar-active-button-font-color;
+    transition: $color-transition;
+
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-active-button-font-color;
+      }
+    }
+
+    .price {
+      color: $snippet-calendar-active-button-font-color;
+      background-color: $snippet-calendar-active-button-background-color;
+      font-weight: 600;
+      transition: $color-transition;
+    }
+
+    .time {
+      font-weight: 600;
+    }
+  }
+
+  &.time-button {
+    min-width: 4.75rem;
+    max-width: 4.75rem;
+    min-height: 2.75rem;
+  }
+
+  &.only-time-container {
+    min-width: 5.3rem;
+    max-width: 5.3rem;
+    min-height: 2.75rem;
+  }
+
+  &.calendar-view {
+    min-width: auto;
+    max-width: none;
+    min-height: auto;
+  }
+}
+
+.time {
+  font-size: 0.875rem;
+  font-weight: 300;
+}
+
+.price {
+  font-size: 0.7rem;
+  line-height: 1.03rem;
+  font-weight: 300;
+  color: $snippet-calendar-button-font-color;
+}

package/dist/styles/date-time-button/_index.scss

@@ -0,0 +1 @@
+@import "./DateTimeButton.scss";

package/dist/styles/events/EditEventModal.scss

@@ -5,9 +5,7 @@
   padding: 1rem 2rem;
   border-radius: 1rem;
   margin-bottom: 1.5rem;
-  transition:
-    color 0.2s ease-out,
-    background-color 0.2s ease-out;
+  transition: color 0.2s ease-out, background-color 0.2s ease-out;
   margin-left: 1rem;
 
   &:hover {

package/dist/styles/events/EventCard.scss

@@ -34,20 +34,27 @@ $event-card-views-gutter: sp(3) !default;
   transition: ease-in 0.25s;
   border-radius: $event-card-border-radius;
 
-  > * + * {
+  >*+* {
     margin-top: $event-card-contents-gutter;
   }
 
   .card-body {
-    padding: 0;
+    padding: 0 0 3rem 0;
 
     .event-description {
       min-height: 8rem;
+      max-height: 21rem;
+      overflow: hidden;
+
+      &:last-child {
+        text-overflow: ellipsis;
+      }
 
       &.no-image {
         min-height: 13.75rem;
+        max-height: 22rem;
       }
-    }
+  }
   }
 
   .card-title {
@@ -168,4 +175,4 @@ $event-card-views-gutter: sp(3) !default;
     color: #504f4f;
     width: 1.7rem;
   }
-}
+}

package/dist/styles/events/EventVenueMap.scss

@@ -5,44 +5,44 @@
     overflow: hidden;
     background-color: $gray-600;
   }
-
+  
   .canvas-scrollbars {
     .scrollbar-wrapper {
       position: absolute;
       z-index: 5;
       overflow: hidden;
-
+      
       .scroll-element {
         position: absolute;
         display: block;
         border-radius: 0.375rem;
         background: rgba(0, 0, 0, 0.3);
         outline: 1px solid rgba(255, 255, 255, 0.3);
-
+  
         &:hover {
           background: rgba(0, 0, 0, 0.5);
           transition: background-color 500ms linear;
           cursor: pointer;
         }
       }
-
+  
       .horizontal-scroll {
         width: 100%;
         height: 0.375rem;
       }
-
+  
       .vertical-scroll {
         height: 100%;
         width: 0.375rem;
       }
-
+  
       &-vertical {
         right: 0.1rem;
         height: calc(100% - 1rem);
         margin: 0.5rem 0;
         width: 0.5rem;
       }
-
+  
       &-horizontal {
         bottom: 0.1rem;
         width: calc(100% - 1rem);
@@ -55,7 +55,7 @@
   .zoom-buttons {
     position: absolute;
     top: calc((100% - 10rem) / 2);
-    right: 0.75rem;
+    right: 1.75rem;
     z-index: 5;
 
     .buttons-wrapper {

package/dist/styles/form/CustomCheckbox.scss

@@ -1,6 +1,7 @@
 .custom-checkbox {
   margin-top: 1rem;
   display: flex;
+  z-index: 2;
   align-items: center;
 
   .custom-checkbox .custom-control-label::before {
@@ -20,5 +21,10 @@
     padding-left: 0.5rem;
     font-weight: 400;
     font-size: 0.875rem;
+    min-height: 3rem;
+  }
+
+  .checkbox-input {
+    z-index: 2;
   }
 }

package/dist/styles/form/Input.scss

@@ -33,4 +33,4 @@ input[type="date"].date-input-with-value::-webkit-datetime-edit-year-field {
 .invalid-feedback-message {
   font-size: 80%;
   color: #f94b25;
-}
+}

package/dist/styles/header/Header.scss

@@ -5,16 +5,12 @@
     justify-content: space-between;
     display: flex;
     flex-direction: row;
-
+    
     @include media-breakpoint-down(sm) {
       width: 100%;
     }
   }
 
-  svg {
-    max-height: 1rem;
-  }
-
   .navbar-nav {
     line-height: 1;
     margin-top: 4px;

package/dist/styles/header/elements/CompanySelector.scss

@@ -1,4 +1,4 @@
-$company-selector-font-size: 0.85rem !default;
+$company-selector-font-size: .85rem !default;
 $company-selector-font-weight: $font-weight-semibold !default;
 
 .header-company-selector-container {
@@ -20,7 +20,7 @@ $company-selector-font-weight: $font-weight-semibold !default;
 .header-company-selector {
   border-color: transparent;
   background: transparent;
-  padding: 0 0.25rem;
+  padding: 0 .25rem;
   font-size: $company-selector-font-size;
   font-weight: $company-selector-font-weight;
 }

package/dist/styles/iframe-events/Calendar.scss

@@ -96,11 +96,11 @@
         margin-top: 0.75rem;
 
         .calendar-date {
-          height: 2rem;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 0;
+          padding: 0.25rem;
           border-radius: 0.25rem;
           background-color: $snippet-calendar-button-background-color;
           color: $snippet-calendar-button-font-color;

package/dist/styles/iframe-events/CalendarSelect.scss

@@ -15,4 +15,4 @@
       box-shadow: 0 0 0 0;
     }
   }
-}
+}

package/dist/styles/iframe-events/Card.scss

@@ -82,8 +82,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 {
@@ -96,14 +95,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: 0.8;
+        opacity: .8;
       }
     }
   }
@@ -143,6 +142,7 @@
     .card-body {
       padding: 0;
       margin: 0 0 auto;
+      margin-top: 1rem;
     }
   }
 
@@ -202,6 +202,7 @@
 
   @media (max-width: 576px) {
     &.list-view {
+
       .card-image {
         margin-right: 0.5rem;
       }

package/dist/styles/iframe-events/CategoryStepsForm.scss

@@ -44,15 +44,15 @@
         background-color: $snippet-canvas-background-color;
         transition: $color-transition;
       }
-
+  
       .zoom-buttons {
         bottom: 0;
         top: unset;
-
+  
         .buttons-wrapper {
           background-color: transparent;
-        }
-
+        }      
+  
         .icon-wrapper {
           display: none;
         }
@@ -65,8 +65,7 @@
           background-color: $snippet-elements-button-background-color;
           border-color: $snippet-elements-button-border-color;
 
-          &:hover,
-          &:focus {
+          &:hover, &:focus {
             box-shadow: none;
             transition: $color-transition;
             color: $snippet-elements-button-color;
@@ -92,4 +91,4 @@
       padding: 1rem;
     }
   }
-}
+}

package/dist/styles/iframe-events/Event.scss

@@ -171,8 +171,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 {
@@ -228,8 +227,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 {

package/dist/styles/iframe-events/EventForm.scss

@@ -1,69 +1,69 @@
 @import "../snippet-templates/snippetVariables";
 
 .iframe-event-form {
-  background-color: transparent;
-  border-color: transparent;
-  border-width: 1px;
-  border-style: solid;
-  transition: $color-transition;
-  padding: 1.5rem;
-  border-radius: $iframe-border-radius;
-  width: 100%;
-
-  &__title {
-    transition: $color-transition;
-    color: $snippet-elements-body-color;
-  }
-
-  .btn.btn-primary {
-    transition: $color-transition;
-    color: $snippet-elements-button-color;
     background-color: transparent;
-    border: none;
+    border-color: transparent;
+    border-width: 1px;
+    border-style: solid;
+    transition: $color-transition;
+    padding: 1.5rem;
     border-radius: $iframe-border-radius;
-
-    &:active,
-    &.active,
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      &:not(:disabled) {
-        color: $snippet-elements-button-color;
-        border: none;
-        background-color: transparent;
-        box-shadow: 0 0 0 $input-btn-focus-width transparent;
+    width: 100%;
+  
+    &__title {
+      transition: $color-transition;
+      color: $snippet-elements-body-color;
+    }
+  
+    .btn.btn-primary {
+      transition: $color-transition;
+      color: $snippet-elements-button-color;
+      background-color: transparent;
+      border: none;
+      border-radius: $iframe-border-radius;
+  
+      &:active,
+      &.active,
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        &:not(:disabled) {
+          color: $snippet-elements-button-color;
+          border: none;
+          background-color: transparent;
+          box-shadow: 0 0 0 $input-btn-focus-width transparent;
+        }
+  
+        &:disabled {
+          border: none;
+        }
       }
-
-      &:disabled {
-        border: none;
+  
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        &:not(:disabled) {
+          opacity: .7;
+        }
       }
-    }
-
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      &:not(:disabled) {
-        opacity: 0.7;
+  
+      &:active,
+      &.active {
+        &:not(:disabled) {
+          opacity: .8;
+        }
       }
     }
 
-    &:active,
-    &.active {
-      &:not(:disabled) {
-        opacity: 0.8;
-      }
+    input {
+      border-radius: $iframe-border-radius;
     }
-  }
-
-  input {
-    border-radius: $iframe-border-radius;
-  }
 }
 
 @include media-breakpoint-down(sm) {
-  .iframe-event-form {
-    margin-bottom: 5rem;
-  }
+    .iframe-event-form {
+      margin-bottom: 5rem;
+    }
 }

package/dist/styles/iframe-events/EventNavigationFooter.scss

@@ -0,0 +1 @@
+

package/dist/styles/iframe-events/PoweredBy.scss

@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/dist/styles/iframe-events/TicketDescription.scss

@@ -58,4 +58,4 @@
       }
     }
   }
-}
+}

package/dist/styles/iframe-external-modal/IframeExternalModal.scss

@@ -4,8 +4,7 @@ html[bkdt-scrollable="false"] {
   overflow: hidden !important;
 }
 
-body[bkdt-scrollable="false"] .bkdt-modal,
-body[bkdt-scrollable="false"] .bkdt-mask {
+body[bkdt-scrollable="false"] .bkdt-modal, body[bkdt-scrollable="false"] .bkdt-mask {
   display: block;
 }
 
@@ -16,7 +15,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
   width: 100%;
   height: 100%;
   z-index: 1000000;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0,0,0,0.5);
   display: none;
 }