@wizishop/angular-components 0.0.168 → 14.0.3

package/angular-components.scss

@@ -64,7 +64,6 @@ $wac-wizishop-blue-button-darken: #3596b7!default;
 $wac-wizishop-blue-button-focus: #2f8baa!default;
 $wac-wizishop-blue-button-disabled: #94cde0!default;
 $wac-wizishop-blue-button: #52aecd!default;
-$wac-wizishop-blue-button-light: #52AECD1A!default;
 $wac-wizishop-blue: #4baed0!default;
 $wac-color-icon-search-multiple-search: #b4bdd0!default;
 $wac-hover-multiple-search: #edf7fa!default;
@@ -85,7 +84,6 @@ $wac-calendar-box-shadow: #0000001a!default;
 
 $wac-tag-default: #f5f8fa!default;
 $wac-tag-success: #2ecc71!default;
-$wac-tag-success-light: #2ECC711A!default;
 $wac-tag-waring: #f5b226!default;
 $wac-tag-gray: #526384!default;
 
@@ -112,10 +110,6 @@ $wac-color-success-popup-alert: #6DCC95!default;
 
 $wac-background-indication: #EDEFF2!default;
 
-$wac-grey: #F5F8FA!default;
-$wac-round-breadcrumbs: #DEE2ED!default;
-$wac-breadcrumbs-color: #647391!default;
-$wac-subtitle-color: #7A87A1!default;
 .zindexToggle {
   z-index: 9!important;
   position: relative;
@@ -573,261 +567,6 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
-.block-with-checkbox {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  background-color: $wac-white;
-  box-shadow: 0px 2px 6px #0000000D;
-  border-radius: 3px;
-  margin: 0 0 15px;
-  padding: 30px;
-  border: 2px solid transparent;
-  transition: .3s ease;
-  opacity: .45;
-  &.selected, &:hover, &:focus {
-    border-color: $wac-input-active-color;
-    opacity: 1!important;
-  }
-  &.firstWacRadioBLock {
-    opacity: 1!important;
-  }
-  @include media('<tablet') {
-    padding: 20px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  &__left {
-    width: 30px;
-    margin: 0 20px 0 0;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  &__center {
-    width: 100%;
-    cursor: pointer;
-  }
-  &__right {
-    display: flex;
-    align-items: center;
-    width: auto;
-    div {
-      margin: 0 0 0 20px;
-    }
-  }
-  &:hover, &:focus {
-    input + label {
-      &:before {
-        border-color: $wac-input-active-color !important;
-      }
-    }
-  }
-}
-
-.wac-radio-block {
-  height: 22px;
-  input {
-    outline: 0 !important;
-    display: none;
-    & + label {
-      padding-left: 30px;
-      padding-right: 5px;
-      position: relative;
-      cursor: pointer;
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 22px;
-        height: 22px;
-        border: 1px solid $wac-border-form;
-        border-radius: 23px;
-        top: 3px;
-      }
-      &:after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        border-radius: 23px;
-        background: $wac-input-active-color;
-        top: 6px;
-        left: 2.5px;
-        opacity: 0;
-      }
-      &:before,
-      &:after {
-        outline: 0 !important;
-      }
-      &:hover,
-      &:focus {
-        &:before {
-          border-color: $wac-input-active-color !important;
-        }
-      }
-    }
-    &:hover {
-      & + label {
-        color: $wac-input-radio-color-active-label;
-        &:before {
-          border-color: $wac-input-active-color !important;
-        }
-      }
-      &:not([disabled]) {
-        & + label {
-          &:before {
-            border-color: $wac-input-active-color !important;
-          }
-        }
-      }
-    }
-    &:checked + label {
-      color: $wac-input-radio-color-active-label;
-      &:before {
-        border-color: $wac-input-active-color!important;
-      }
-      &:after {
-        opacity: 1;
-      }
-    }
-  }
-
-
-  .wac-radio__row {
-    min-width: 100%;
-    margin: 0 0 7px;
-  }
-
-  label {
-    padding-left: 7px;
-    margin-right: 0;
-  }
-}
-.wac-breadcrumbs {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  margin: 0 0 10px;
-  border-radius: 3px;
-
-  @include media('<desktop') {
-    max-width: 100%;
-    overflow: hidden;
-  }
-
-  &__wrapper {
-    width: 100%;
-    display: flex;
-    align-items: center;
-
-    @include media('<desktop') {
-      width: auto;
-      overflow-x: scroll;
-    }
-  }
-
-  &__item {
-    width: 100%;
-    max-width: 33.33%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    padding: 10px;
-    cursor: pointer;
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: -5px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: calc(100% - 5px);
-      height: 3px;
-      background-color: $wac-round-breadcrumbs;
-    }
-    &.current, &.valid {
-      &:before {
-        background-color: $wac-wizishop-blue;
-      }
-    }
-
-    &.current {
-      &:before {
-        height: 5px;
-      }
-    }
-    @include media('<desktop') {
-      width: auto;
-      min-width: unset;
-      max-width: unset;
-      padding: 10px 30px;
-      .name {
-        white-space: nowrap;
-      }
-    }
-    .round {
-      min-width: 30px;
-      height: 30px;
-      border-radius: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 2px solid $wac-round-breadcrumbs;
-      background-color: $wac-round-breadcrumbs;
-      transition: .3s ease;
-      margin: 0 15px 0 0;
-      > span {
-        font-size: rem(12);
-        font-weight: 500;
-        color: $wac-second-color;
-        line-height: 1;
-      }
-      > i {
-        font-size: rem(14);
-        color: $wac-wizishop-blue;
-      }
-      &.valid {
-        background-color: transparent;
-        border-color: $wac-wizishop-blue;
-        color: $wac-wizishop-blue;
-      }
-      &.current:not(.valid) {
-        background-color: $wac-wizishop-blue;
-        border-color: $wac-wizishop-blue;
-        > span, > i {
-          color: $wac-white;
-        }
-      }
-    }
-    .name {
-      font-size: rem(14);
-      font-weight: 500;
-      color: $wac-second-color;
-      line-height: 1;
-      transition: .3s ease;
-      &.valid, &.current {
-        color: $wac-wizishop-blue;
-      }
-    }
-    &:hover:not(.valid), &:focus:not(.valid) {
-      .round {
-        background-color: $wac-wizishop-blue;
-        border-color: $wac-wizishop-blue;
-        > span, > i {
-          color: $wac-white;
-        }
-      }
-      .name {
-        color: $wac-wizishop-blue;
-      }
-    }
-  }
-}
 .wac-button {
   @include flexbox();
   @include justify-content(center);
@@ -854,42 +593,6 @@ $wac-subtitle-color: #7A87A1!default;
     white-space: nowrap;
   }
 
-  &.is-green.opacity {
-    background-color: $wac-tag-success-light;
-    border-color: $wac-tag-success-light;
-    transition: .3s;
-    i {
-      color: $wac-tag-success;
-    }
-    &:hover, &:focus {
-      background-color: $wac-tag-success;
-      i {
-        color: $wac-white;
-      }
-    }
-  }
-
-  &.static-width {
-    width: 40px;
-    min-width: 40px;
-    max-width: 40px;
-  }
-
-  &.is-blue.opacity {
-    background-color: $wac-wizishop-blue-button-light;
-    border-color: $wac-wizishop-blue-button-light;
-    transition: .3s;
-    i {
-      color: $wac-wizishop-blue-button;
-    }
-    &:hover, &:focus {
-      background-color: $wac-wizishop-blue-button;
-      i {
-        color: $wac-white;
-      }
-    }
-  }
-
   &.animationText {
     width: rem(40);
     height: rem(40);
@@ -931,31 +634,6 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 
-  &__coin {
-    margin: 0 0 0 rem(15);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 40px;
-    padding: 4px 6px;
-    background-color: #F8EDD2;
-    float: right;
-    z-index: 2;
-    position: relative;
-    i {
-      font-size: rem(18);
-      color: #FDCD52;
-      margin: 0 5px 0 0;
-    }
-    > span {
-      font-size: rem(14);
-      line-height: 1;
-      color: #E0B146;
-      font-weight: 600;
-      letter-spacing: 0;
-    }
-  }
-
   &__animation {
     overflow: hidden;
     max-width: 0;
@@ -2290,94 +1968,6 @@ $wac-subtitle-color: #7A87A1!default;
 .datetimepicker .datetimepicker-footer {
   display: none;
 }
-.wac-card-price {
-  width: 100%;
-  padding: 50px;
-  border-radius: 3px;
-  background-color: $wac-white;
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
-
-  &:hover {
-    box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.2);
-  }
-
-  @include media('<desktop') {
-    padding: 30px;
-  }
-
-  @include media('<tablet') {
-    padding: 20px;
-  }
-
-  .cta {
-    height: 40px;
-  }
-
-  > strong {
-    font-size: rem(40);
-    line-height: rem(47);
-    text-align: center;
-    display: block;
-    width: 100%;
-    font-weight: 600;
-    margin: 0 0 -5px;
-  }
-
-  > p {
-    font-size: rem(20);
-    text-transform: uppercase;
-    margin: 0 0 20px;
-    text-align: center;
-    display: block;
-    width: 100%;
-    font-weight: 600;
-  }
-
-  .price {
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    justify-content: center;
-    position: relative;
-    color: $wac-tag-success;
-    margin: 0 0 5px;
-
-    .amount {
-      font-size: rem(50);
-      font-weight: 600;
-      margin: 0 5px 0 0;
-      position: relative;
-      line-height: 1;
-      span {
-        position: absolute;
-        top: 5px;
-        left: 100%;
-        margin: 0 0 0 3px;
-        display: block;
-        font-size: rem(20);
-      }
-    }
-
-    .month {
-      font-size: rem(20);
-      margin: 0;
-      font-weight: 500;
-      line-height: 1;
-      transform: translateY(-5px);
-    }
-  }
-
-  .subtitle {
-    font-size: rem(12);
-    color: $wac-subtitle-color;
-    margin: 0 0 30px;
-    text-align: center;
-    font-style: italic;
-  }
-}
 .wac-field-checkbox {
   &.disable-wt {
     .wac-field-checkbox__row {
@@ -2547,61 +2137,6 @@ $wac-subtitle-color: #7A87A1!default;
   }
 
 }
-.wac-confirm-delete {
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  z-index: 999;
-  width: auto;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  background-color: $wac-white;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateX(100%);
-  transition: 0s visibility .35s, opacity .3s ease 0s, transform .3s ease 0s;
-  &.is-open {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(0);
-    transition: 0s visibility, opacity .3s ease .05s, transform .3s ease .05s;
-  }
-  > div {
-    width: auto;
-    display: flex;
-    align-items: center;
-    &:first-child {
-      position: relative;
-      margin: 0 20px 0 0;
-      padding: 0 0 0 30px;
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 10px;
-        width: 1px;
-        height: 100%;
-        background-color: $wac-border-form;
-      }
-      span {
-        font-size: rem(16);
-        line-height: 1.4;
-        color: $wac-second-color;
-      }
-    }
-    &:last-child {
-      > div {
-        width: auto;
-        &:first-child {
-          margin: 0 10px 0 0;
-        }
-      }
-    }
-  }
-}
 .wac-delete {
   width: 40px;
   height: 40px;
@@ -3129,9 +2664,6 @@ $wac-subtitle-color: #7A87A1!default;
         align-items: flex-start;
         margin: 0;
       }
-      &.center {
-        justify-content: center;
-      }
       &__left {
         width: auto;
         display: flex;
@@ -3142,11 +2674,6 @@ $wac-subtitle-color: #7A87A1!default;
           width: 100%;
           margin: 0 0 30px;
         }
-        &.fullsize {
-          width: 100%;
-          margin: 0;
-          justify-content: center;
-        }
         a {
           display: flex;
           min-width: 40px;
@@ -3434,60 +2961,6 @@ a.wac-link {
     }
   }
 }
-.wac-mosaic {
-  &__loader {
-    min-height: 400px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  &__wrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    @include media('>tablet') {
-      flex-direction: row;
-      width: calc(100% + 10px);
-      transform: translateX(-5px);
-    }
-    &__column {
-      width: 100%;
-      margin: 0;
-      @include media('>tablet') {
-        margin: 0 5px;
-      }
-      &__image {
-        width: 100%;
-        margin: 0 0 10px;
-        position: relative;
-        overflow: hidden;
-        .hover {
-          position: absolute;
-          top: 100%;
-          transform: translateY(50px);
-          margin-bottom: 50px;
-          transition: .3s ease;
-          left: 0;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-        }
-        img {
-          display: block;
-          width: 100%;
-          height: auto;
-          margin: 0;
-        }
-        &:hover, &:focus {
-          .hover {
-            transform: translateY(calc(-100% + -10px));
-          }
-        }
-      }
-    }
-  }
-}
 .wac-multiple-search {
   width: 100%;
   min-height: 50px;
@@ -5465,11 +4938,10 @@ a.wac-link {
 }
 .wac-text-area {
   label {
-    padding: 0!important;
-    font-size: rem(14)!important;
-    line-height: rem(16)!important;
-    margin: 0 0 rem(12)!important;
-    font-weight: 500!important;
+    font-size: rem(14);
+    color: $wac-main-text;
+    font-weight: 500 !important;
+    margin-bottom: 0;
   }
 
   textarea {
@@ -5549,43 +5021,6 @@ a.wac-link {
   .icon.is-small.is-right {
     margin-top: rem(5);
   }
-
-  &.dynamic {
-    label {
-      font-size: rem(16);
-      margin: 0 0 8px;
-    }
-    .textarea {
-      height: 71px;
-      min-height: 71px;
-      max-height: unset;
-      resize: none;
-      padding: 15px 20px;
-      font-size: rem(14);
-      line-height: 1.4;
-    }
-  }
-}
-.wac-token-check {
- display: inline-block;
-  position: relative;
-  padding: 12px 20px;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  border-color: $wac-border-light;
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: 400;
-  > span:nth-child(2), > strong {
-    font-weight: 600;
-  }
-  > span {
-    &.warning {
-      color: $wac-primary-button;
-    }
-  }
 }
 span.wac-tooltip {
   position: relative;
@@ -5732,68 +5167,10 @@ span.wac-tooltip {
     }
   }
 }
-.wac-wrapper-sidebar {
-  width: 100%;
-  display: flex;
-
-  @include media('<desktop') {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  &.reverse {
-    flex-direction: row-reverse;
-
-    @include media('<desktop') {
-      flex-direction: column-reverse;
-
-      > div {
-        &:nth-child(1) {
-          @include media('<desktop') {
-            margin: 20px 0 0;
-          }
-        }
-      }
-    }
-  }
-
-  > div {
-    width: 100%;
-    padding-right: 30px;
-
-    @include media('<tablet') {
-      padding-right: 20px;
-    }
-
-    &:nth-child(1) {
-      background-color: $wac-white;
-
-      @include media('<desktop') {
-        margin: 0 0 20px;
-      }
-
-      @include media('>=desktop') {
-        width: 33%;
-        min-width: 33%;
-      }
-    }
-
-    &:nth-child(2) {
-      background-color: $wac-grey;
-
-      @include media('>=desktop') {
-        width: 67%;
-        min-width: 67%;
-        padding: 80px 30px;
-      }
-    }
-  }
-}
 h1.wac-h1 {
   font-size: rem(30);
   line-height: rem(35);
-  font-weight: 500;
+  font-weight: 600;
   color: $wac-main-text;
   @include media('<desktop') {
     font-size: rem(22);
@@ -5803,17 +5180,6 @@ h1.wac-h1 {
     display: flex;
     align-items: center;
   }
-  &.center {
-    text-align: center;
-  }
-
-  small {
-    font-size: rem(18);
-    display: inline-block;
-    margin-left: rem(5);
-    font-style: italic;
-    font-weight: normal;
-  }
 }
 h2.wac-h2 {
   font-size: rem(18);
@@ -6847,7 +6213,7 @@ div.wac-field-input-search {
           bottom: -3px;
           left: 0;
           width: 100%;
-          height: 1.5px;
+          height: 1px;
           background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23e95656' stroke-width='1' stroke-dasharray='3%2c 6' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e");
           background-position: left top;
         }