@licklist/design 0.78.5-dev.88 → 0.78.5-gen.90

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

@@ -1,116 +0,0 @@
-$snippet-template-card-background-color: color('white');
-$snippet-template-card-transition: $btn-transition !default;
-
-$snippet-template-card-button-background-color-hover: theme-color(
-  'primary'
-) !default;
-$snippet-template-card-button-border-radius: $border-radius !default;
-$snippet-template-card-button-box-shadow-focus: $product-set-card-box-shadow-focus !default;
-$snippet-template-card-button-icon-color: adjust-color(
-  theme-color('primary'),
-  $alpha: -1/3
-) !default;
-$snippet-template-card-button-icon-color-hover: $product-set-card-background-color !default;
-$snippet-template-card-button-icon-color-container-hover: adjust-color(
-  theme-color('primary'),
-  $alpha: calc(-1 / 12)
-) !default;
-$snippet-template-card-button-icon-size: sp(4) !default;
-$snippet-template-card-button-inset: sp(2) !default;
-$snippet-template-card-button-size: sp(8) !default;
-$snippet-template-card-button-transition: $product-set-card-transition !default;
-
-.snippet-template-card {
-  display: flex;
-  background-color: $snippet-template-card-background-color;
-  transition: $snippet-template-card-transition;
-  flex-direction: column;
-  border: 1px solid #ccc;
-  border-radius: $border-radius;
-  height: 10rem;
-  min-width: 15rem;
-  padding: 1rem;
-
-  @include media-breakpoint-down(sm) {
-    height: 100%;
-    max-height: 10rem;
-    width: 100%;
-  }
-
-  p {
-    font-size: 0.9rem;
-    color: $gray-500;
-  }
-
-  .snippet-template-card-header {
-    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 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: $snippet-template-card-button-icon-color;
-    top: $snippet-template-card-button-inset;
-    right: $snippet-template-card-button-inset;
-    height: $snippet-template-card-button-size;
-    width: $snippet-template-card-button-size;
-    border-radius: $snippet-template-card-button-border-radius;
-    transition: $snippet-template-card-button-transition;
-
-    &:hover {
-      background-color: $snippet-template-card-button-background-color-hover;
-      color: $snippet-template-card-button-icon-color-hover;
-    }
-
-    &:focus {
-      outline: 0;
-      box-shadow: $snippet-template-card-button-box-shadow-focus;
-    }
-
-    > svg {
-      height: $snippet-template-card-button-icon-size;
-    }
-  }
-
-  .snippet-template-card-color-container {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .snippet-template-card-color-block {
-    width: 3rem;
-    height: 2rem;
-    border-radius: $border-radius;
-    border: 1px solid #ccc;
-  }
-}
-
-.selected-snippet-type {
-  border: 2px solid $blue;
-
-  &:hover {
-    border: 2px solid $blue;
-  }
-}

package/dist/styles/snippet-templates/_index.scss

@@ -1,2 +0,0 @@
-@import './SnippetTemplate.scss';
-@import './SnippetTemplateCard.scss';

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

@@ -1,265 +0,0 @@
-// @TODO move colors in variables --start
-$separator-color: #d8d8d8;
-
-$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-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-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;
-// 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-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-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;
-
-// Heading text color variable mapping
-$snippet-elements-heading-text-color: var(
-  --snippet-elements-heading-text-color,
-  #333333
-) !default;

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

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

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

@@ -1 +0,0 @@
-@import './SortableField';

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

@@ -1,162 +0,0 @@
-$sortable-tree-line-btn-color: gray('500') !default;
-$sortable-tree-line-btn-margin: 0.85rem 0.05rem 0 !default;
-$sortable-tree-line-btn-padding: 0.25rem !default;
-
-$sortable-tree-item-margin: 0.25rem 0 !default;
-
-$sortable-tree-item-header-height: sp(12) !default;
-$sortable-tree-item-header-icon-height: sp(6) !default;
-
-$sortable-tree-item-handle-color: adjust-color($black, $alpha: -0.8) !default;
-$sortable-tree-item-handle-hover-color: theme-color('primary') !default;
-
-$sortable-tree-item-toggle-text-color: $black !default;
-$sortable-tree-item-toggle-text-hover-color: theme-color('primary') !default;
-$sortable-tree-item-toggle-text-font-weight: $font-weight-semibold !default;
-
-$sortable-tree-item-body-padding: sp(6) !default;
-
-.sortable-tree-root {
-  display: flex;
-  flex-direction: row;
-
-  .sortable-tree-wrapper,
-  .sortable-tree-item-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-  }
-
-  .sortable-tree-item-wrapper {
-    flex-direction: column;
-  }
-
-  .sortable-tree-line {
-    position: relative;
-
-    .expand-icon-container {
-      margin-right: 0.2rem;
-
-      div {
-        width: 1.125rem;
-        height: 3px;
-        margin-bottom: 3px;
-        background-color: #b5ccde;
-        border-radius: 1px;
-      }
-    }
-
-    .btn-link {
-      color: $sortable-tree-line-btn-color;
-      margin: $sortable-tree-line-btn-margin;
-      padding: $sortable-tree-line-btn-padding;
-    }
-
-    .sortable-tree-line-icon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      padding: 3rem 0 0;
-
-      .sortable-tree-line-icon-path {
-        fill: none;
-        stroke: rgb(223, 225, 230);
-        stroke-width: 5;
-        stroke-miterlimit: 10;
-      }
-      .sortable-tree-line-product-element.sortable-tree-line-icon-path {
-        stroke-width: 14;
-      }
-    }
-  }
-
-  .sortable-tree-item {
-    border-bottom: 1px solid #fafafa;
-    margin: $sortable-tree-item-margin;
-
-    &.invalid {
-      // @TODO: need to reworke UI with new design
-      // border-color: theme-color("danger");
-    }
-
-    .sortable-tree-item-header {
-      display: flex;
-      height: $sortable-tree-item-header-height;
-
-      .sortable-tree-item-handle {
-        color: $sortable-tree-item-handle-color;
-
-        &:hover,
-        &:focus {
-          color: $sortable-tree-item-handle-hover-color;
-        }
-
-        svg {
-          height: $sortable-tree-item-header-icon-height;
-        }
-      }
-
-      .sortable-tree-item-toggle {
-        display: flex;
-        text-decoration: none;
-        text-align: start;
-        font-weight: $sortable-tree-item-toggle-text-font-weight;
-        color: $sortable-tree-item-toggle-text-color;
-        justify-content: space-between;
-        align-items: center;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        width: 100%;
-
-        &:hover,
-        &:focus {
-          color: $sortable-tree-item-toggle-text-hover-color;
-        }
-      }
-
-      .sortable-tree-item-badge {
-        margin-right: 1rem;
-      }
-
-      .sortable-tree-item-title {
-        flex-grow: 1;
-      }
-
-      .sortable-tree-title-container {
-        width: 100%;
-      }
-
-      .sortable-tree-product-set-title-container {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .sortable-tree-item-title.sortable-tree-product-set-element-title {
-        color: #000000;
-        font-size: 0.875rem;
-        font-weight: 600;
-      }
-
-      @include media-breakpoint-down(sm) {
-        .sortable-tree-item-title {
-          font-size: 0.9rem;
-          margin-right: 0.5rem;
-        }
-      }
-
-      .sortable-tree-item-subtitle {
-        line-height: 1rem;
-        font-size: 0.8rem;
-      }
-    }
-
-    .sortable-tree-item-body {
-      padding: $sortable-tree-item-body-padding;
-    }
-
-    .sortable-tree-subitems {
-    }
-  }
-}

package/dist/styles/sortable-tree/_index.scss

@@ -1 +0,0 @@
-@import './Item';

package/dist/styles/static/CountrySelect.scss

@@ -1,31 +0,0 @@
-.PhoneInputCountry {
-  position: relative;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-
-  &::after {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: 0.255em;
-    vertical-align: 0.255em;
-    content: '';
-    border-top: 0.3em solid;
-    border-right: 0.3em solid transparent;
-    border-bottom: 0;
-    border-left: 0.3em solid transparent;
-  }
-}
-
-.PhoneInputCountrySelect {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 1;
-  border: 0;
-  opacity: 0;
-  cursor: pointer;
-}

package/dist/styles/static/CurrencyNumberInput.scss

@@ -1,13 +0,0 @@
-.currency-number-input {
-  .currency {
-    position: absolute;
-    left: 0.75rem;
-    top: 0.65rem;
-    font-size: 1.125rem;
-    align-self: center;
-  }
-
-  .form-control {
-    padding: 1rem 2rem;
-  }
-}

package/dist/styles/static/DateRangeInput.scss

@@ -1,20 +0,0 @@
-.date-range-input-wrapper {
-  position: relative;
-  background-color: $white;
-  border-radius: 1rem;
-
-  .date-range-input[readonly] {
-    background-color: transparent;
-
-    &:disabled {
-      background-color: #ebebeb;
-    }
-  }
-
-  .date-range-input-icon {
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    color: $gray-500;
-  }
-}

package/dist/styles/static/FormCard.scss

@@ -1,3 +0,0 @@
-.form-card {
-  //background-color: $primary-card-color
-}

package/dist/styles/static/Loader.scss

@@ -1,57 +0,0 @@
-@import '../snippet-templates/snippetVariables';
-
-.block-loader {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  &__wrapper {
-    height: 100%;
-    width: 100%;
-    border-radius: 1rem;
-    background-color: $white;
-  }
-}
-
-.button-loader {
-  display: flex;
-  align-self: center;
-  margin-top: 0.75rem;
-}
-
-.snippet-loaderd {
-  @extend .block-loader;
-
-  &__wrapper {
-    background-color: $snippet-page-background-color;
-  }
-}
-
-.fullscreen-loader {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  z-index: 5000;
-  top: 0;
-  left: 0;
-}
-
-.payment-loader {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 500;
-
-  .payment-loader-text {
-    position: absolute;
-    top: -1.3rem;
-    text-align: center;
-    left: -6rem;
-    z-index: 500;
-    width: 12rem;
-  }
-
-  .spinner {
-    position: static;
-  }
-}