npm - @wizishop/angular-components - Versions diffs - 0.0.181 → 0.0.185 - Mend

@wizishop/angular-components 0.0.181 → 0.0.185

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/angular-components.scss CHANGED Viewed

@@ -534,97 +534,241 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
-.selected-list {
+.wac-search {
   width: 100%;
+  min-height: 50px;
+  border-radius: 3px;
+  background-color: $wac-white;
+  position: relative;
+  z-index: 2;
+  border: 1px solid $wac-border-light;
+  transition: 0.3s ease;
+  &.open {
+    border-color: $wac-wizishop-blue;
+  }
   &__wrapper {
+    position: relative;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    &__head {
+    justify-content: space-between;
+    align-items: stretch;
+    align-content: stretch;
+    flex-wrap: nowrap;
+    width: 100%;
+    min-height: 50px;
+    @include media('<tablet') {
+      padding: 0 12px;
+    }
+    input {
+      background: transparent;
+      border: none;
+      color: $wac-main-text;
+      font-size: rem(14);
+      height: 50px;
+      line-height: 50px;
+      padding: 0 20px 0 48px;
+      font-weight: 400;
       width: 100%;
-      min-height: rem(60);
-      display: flex;
-      justify-content: space-between;
-      padding: 10px 20px;
-      background-color: $wac-gray-background;
-      margin: 0 0 10px;
-      > p {
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-        font-size: rem(16);
-        line-height: rem(19);
-        font-weight: 500;
+      @include media('<tablet') {
+        padding: 0 0 0 10px;
       }
-      &__button {
-        height: rem(40);
-        width: fit-content;
-        margin-left: auto;
-        &__mobile {
-          @include media('>=1024px') {
-            display: none;
-          }
+      &::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
         }
-        &__notMobile {
-          @include media('<1024px') {
-            display: none;
-          }
+      }
+      &::-moz-placeholder {
+        /* Firefox 19+ */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &:-ms-input-placeholder {
+        /* IE 10+ */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &:-moz-placeholder {
+        /* Firefox 18- */
+        color: $wac-multiple-search-input-color;
+        opacity: 1;
+        font-weight: 400;
+        @include media('<tablet') {
+          font-size: rem(11);
+        }
+      }
+      &:focus {
+        & + button i {
+          color: $wac-main-text;
+        }
+        &::-webkit-input-placeholder {
+          /* Chrome/Opera/Safari */
+          color: $wac-white;
+          opacity: 1;
+        }
+        &::-moz-placeholder {
+          /* Firefox 19+ */
+          color: $wac-white;
+          opacity: 1;
+        }
+        &:-ms-input-placeholder {
+          /* IE 10+ */
+          color: $wac-white;
+          opacity: 1;
+        }
+        &:-moz-placeholder {
+          /* Firefox 18- */
+          color: $wac-white;
+          opacity: 1;
         }
       }
     }
-    &__content {
+    button {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 3px;
+      position: absolute;
+      left: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      border: none;
+      cursor: pointer;
+      background-color: $wac-white;
+      i {
+        font-size: rem(18);
+        color: $wac-color-icon-search-multiple-search;
+        transition: 0.3s ease;
+      }
+      &:hover {
+        i {
+          color: $wac-wizishop-blue !important;
+        }
+      }
+    }
+  }
+  &__absolute {
+    position: absolute;
+    top: 100%;
+    margin-top: rem(14);
+    left: -1px;
+    width: auto;
+    min-width: calc(100% - 38px);
+    max-width: calc(100% + 2px);
+    border: 1px solid $wac-border-light;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    background-color: $wac-white;
+    max-height: 260px;
+    height: auto;
+    visibility: visible;
+    opacity: 1;
+    box-shadow: 3px 3px 20px $wac-select-box-shadow;
+    padding: 10px;
+    &.hidden {
+      visibility: hidden;
+      opacity: 0;
+      & > * {
+        opacity: 0;
+        transition: 0s;
+      }
+    }
+    .ps {
+      max-height: 240px;
+    }
+    &.open,
+    &.open.hidden {
+      position: relative;
+      left: auto;
+      top: 0;
+      transform: translateX(-1px);
+      visibility: visible;
+      opacity: 1;
+      & > * {
+        opacity: 1;
+        transition: 0s;
+      }
+    }
+    &__item {
       width: 100%;
+      font-size: rem(14);
+      line-height: rem(30);
+      cursor: pointer;
+      transition: 0.3s ease;
+      position: relative;
       display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      align-content: flex-start;
       justify-content: flex-start;
-      &__item {
-        white-space: nowrap;
-        margin: 0 10px 10px 0;
-        border: 1px solid $wac-border-form;
-        border-radius: 2px;
-        color: $wac-second-color;
-        height: rem(40);
+      align-content: center;
+      align-items: center;
+      color: $wac-second-color;
+      > div {
+        width: 100%;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding: 0 20px;
-        transition: .3s ease;
-        font-size: rem(16);
-        line-height: rem(19);
-        font-weight: 500;
-        cursor: pointer;
-        &:hover, &:focus {
-          border: 1px solid $wac-main-text;
-        }
-        > i {
-          color: $wac-green-color;
-          max-width: 0;
-          display: block;
-          transition: .3s ease;
-          overflow: hidden;
-        }
-        &.active {
+        align-content: center;
+      }
+      .icon {
+        width: 24px;
+        margin: 0 10px 0 0;
+        height: auto;
+        max-height: 24px;
+      }
+      &:not(:last-child) {
+        margin: 0 0 rem(10);
+      }
+      &:empty {
+        display: none;
+      }
+      &:first-child {
+        border-width: 1px 0 1px;
+      }
+      &:hover,
+      &:focus {
+        background-color: $wac-gray-background;
+        color: $wac-main-text;
+      }
+      > div {
+        padding: 0 10px;
+        &.selected {
+          background-color: $wac-gray-background;
           color: $wac-main-text;
-          > i {
-            max-width: unset;
-            margin: 0 0 0 10px;
-          }
-        }
-        &:first-child {
-          margin-left: 18px;
         }
       }
     }
+    &__empty {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      span {
+        font-size: rem(16);
+        font-weight: 400;
+        text-align: center;
+        color: $wac-second-color;
+        display: inline-block;
+        line-height: rem(25);
+      }
+    }
   }
-}.wac-alert-popup {
+}
+.wac-alert-popup {
   .alert {
     z-index: 999999;
     position: fixed;
@@ -827,260 +971,116 @@ $wac-subtitle-color: #7A87A1!default;
       font-size: rem(20);
       color: $white;
     }
-    .is-success & {
-      background-color: darken($wac-color-success-popup-alert, 20%);
-      &:hover, &:focus {
-        background-color: darken($wac-color-success-popup-alert, 30%);
-      }
-    }
-    .is-danger & {
-      background-color: darken($wac-primary-button, 10%);
-      &:hover, &:focus {
-        background-color: darken($wac-primary-button, 15%);
-      }
-    }
-    .fullsize & {
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-}
-.wac-search {
-  width: 100%;
-  min-height: 50px;
-  border-radius: 3px;
-  background-color: $wac-white;
-  position: relative;
-  z-index: 2;
-  border: 1px solid $wac-border-light;
-  transition: 0.3s ease;
-  &.open {
-    border-color: $wac-wizishop-blue;
-  }
-  &__wrapper {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    align-content: stretch;
-    flex-wrap: nowrap;
-    width: 100%;
-    min-height: 50px;
-    @include media('<tablet') {
-      padding: 0 12px;
-    }
-    input {
-      background: transparent;
-      border: none;
-      color: $wac-main-text;
-      font-size: rem(14);
-      height: 50px;
-      line-height: 50px;
-      padding: 0 20px 0 48px;
-      font-weight: 400;
-      width: 100%;
-      @include media('<tablet') {
-        padding: 0 0 0 10px;
-      }
-      &::-webkit-input-placeholder {
-        /* Chrome/Opera/Safari */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &::-moz-placeholder {
-        /* Firefox 19+ */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &:-ms-input-placeholder {
-        /* IE 10+ */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &:-moz-placeholder {
-        /* Firefox 18- */
-        color: $wac-multiple-search-input-color;
-        opacity: 1;
-        font-weight: 400;
-        @include media('<tablet') {
-          font-size: rem(11);
-        }
-      }
-      &:focus {
-        & + button i {
-          color: $wac-main-text;
-        }
-        &::-webkit-input-placeholder {
-          /* Chrome/Opera/Safari */
-          color: $wac-white;
-          opacity: 1;
-        }
-        &::-moz-placeholder {
-          /* Firefox 19+ */
-          color: $wac-white;
-          opacity: 1;
-        }
-        &:-ms-input-placeholder {
-          /* IE 10+ */
-          color: $wac-white;
-          opacity: 1;
-        }
-        &:-moz-placeholder {
-          /* Firefox 18- */
-          color: $wac-white;
-          opacity: 1;
-        }
+    .is-success & {
+      background-color: darken($wac-color-success-popup-alert, 20%);
+      &:hover, &:focus {
+        background-color: darken($wac-color-success-popup-alert, 30%);
       }
     }
-    button {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
-      border-radius: 3px;
-      position: absolute;
-      left: 20px;
+    .is-danger & {
+      background-color: darken($wac-primary-button, 10%);
+      &:hover, &:focus {
+        background-color: darken($wac-primary-button, 15%);
+      }
+    }
+    .fullsize & {
       top: 50%;
       transform: translateY(-50%);
-      border: none;
-      cursor: pointer;
-      background-color: $wac-white;
-      i {
-        font-size: rem(18);
-        color: $wac-color-icon-search-multiple-search;
-        transition: 0.3s ease;
-      }
-      &:hover {
-        i {
-          color: $wac-wizishop-blue !important;
-        }
-      }
     }
   }
-  &__absolute {
-    position: absolute;
-    top: 100%;
-    margin-top: rem(14);
-    left: -1px;
-    width: auto;
-    min-width: calc(100% - 38px);
-    max-width: calc(100% + 2px);
-    border: 1px solid $wac-border-light;
-    border-radius: 3px;
+}
+.selected-list {
+  width: 100%;
+  &__wrapper {
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: flex-start;
-    background-color: $wac-white;
-    max-height: 260px;
-    height: auto;
-    visibility: visible;
-    opacity: 1;
-    box-shadow: 3px 3px 20px $wac-select-box-shadow;
-    padding: 10px;
-    &.hidden {
-      visibility: hidden;
-      opacity: 0;
-      & > * {
-        opacity: 0;
-        transition: 0s;
-      }
-    }
-    .ps {
-      max-height: 240px;
-    }
-    &.open,
-    &.open.hidden {
-      position: relative;
-      left: auto;
-      top: 0;
-      transform: translateX(-1px);
-      visibility: visible;
-      opacity: 1;
-      & > * {
-        opacity: 1;
-        transition: 0s;
-      }
-    }
-    &__item {
+    justify-content: flex-start;
+    &__head {
       width: 100%;
-      font-size: rem(14);
-      line-height: rem(30);
-      cursor: pointer;
-      transition: 0.3s ease;
-      position: relative;
+      min-height: rem(60);
       display: flex;
-      justify-content: flex-start;
-      align-content: center;
-      align-items: center;
-      color: $wac-second-color;
-      > div {
-        width: 100%;
+      justify-content: space-between;
+      padding: 10px 20px;
+      background-color: $wac-gray-background;
+      margin: 0 0 10px;
+      > p {
         display: flex;
         align-items: center;
-        align-content: center;
-      }
-      .icon {
-        width: 24px;
-        margin: 0 10px 0 0;
-        height: auto;
-        max-height: 24px;
-      }
-      &:not(:last-child) {
-        margin: 0 0 rem(10);
-      }
-      &:empty {
-        display: none;
-      }
-      &:first-child {
-        border-width: 1px 0 1px;
-      }
-      &:hover,
-      &:focus {
-        background-color: $wac-gray-background;
-        color: $wac-main-text;
+        white-space: nowrap;
+        font-size: rem(16);
+        line-height: rem(19);
+        font-weight: 500;
       }
-      > div {
-        padding: 0 10px;
-        &.selected {
-          background-color: $wac-gray-background;
-          color: $wac-main-text;
+      &__button {
+        height: rem(40);
+        width: fit-content;
+        margin-left: auto;
+        &__mobile {
+          @include media('>=1024px') {
+            display: none;
+          }
+        }
+        &__notMobile {
+          @include media('<1024px') {
+            display: none;
+          }
         }
       }
     }
-    &__empty {
-      display: flex;
+    &__content {
       width: 100%;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      span {
-        font-size: rem(16);
-        font-weight: 400;
-        text-align: center;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      align-content: flex-start;
+      justify-content: flex-start;
+      &__item {
+        white-space: nowrap;
+        margin: 0 10px 10px 0;
+        border: 1px solid $wac-border-form;
+        border-radius: 2px;
         color: $wac-second-color;
-        display: inline-block;
-        line-height: rem(25);
+        height: rem(40);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 20px;
+        transition: .3s ease;
+        font-size: rem(16);
+        line-height: rem(19);
+        font-weight: 500;
+        cursor: pointer;
+        &:hover, &:focus {
+          border: 1px solid $wac-main-text;
+        }
+        > i {
+          color: $wac-green-color;
+          max-width: 0;
+          display: block;
+          transition: .3s ease;
+          overflow: hidden;
+        }
+        &.active {
+          color: $wac-main-text;
+          > i {
+            max-width: unset;
+            margin: 0 0 0 10px;
+          }
+        }
+        &:first-child {
+          margin-left: 18px;
+        }
       }
     }
   }
-}
-.wac-block {
+}.wac-block {
   background-color: $white;
   @include padding(rem(30));
   box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
@@ -2170,6 +2170,51 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
+.wac-content-with-buttons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  @include media('<tablet') {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  &__text {
+    width: 100%;
+    &__count {
+      margin: 10px 0 0;
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+      > span {
+        &:first-child {
+          font-size: rem(12);
+          font-style: italic;
+          color: $wac-color-text-grey;
+          line-height: rem(16);
+          display: inline-block;
+          transform: translateY(-3px);
+        }
+        &:last-child {
+          display: inline-block;
+          margin: 0 0 0 20px;
+        }
+      }
+    }
+  }
+  &__cta {
+    display: flex;
+    align-items: center;
+    width: auto;
+   > div {
+     margin: 0 0 0 20px;
+   }
+    @include media('<tablet') {
+      margin: 15px 0 0;
+    }
+  }
+}
 .wac-switch {
   input {
@@ -2743,6 +2788,7 @@ $wac-subtitle-color: #7A87A1!default;
       &__left {
         width: auto;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         align-content: center;
         margin: 0 10px 0 0;
@@ -2784,6 +2830,31 @@ $wac-subtitle-color: #7A87A1!default;
             }
           }
         }
+        &__nowrap {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          .center & {
+            justify-content: center;
+          }
+        }
+        .subtitle {
+          padding: 0 0 0 60px;
+          .center & {
+            padding: 0;
+            display: flex;
+            justify-content: center;
+          }
+          &:empty {
+            display: none;
+          }
+          &:not(:empty) {
+            margin: 12px 0 0;
+          }
+        }
+        > *:not(a) {
+          width: 100%;
+        }
       }
       &__right {
         width: 100%;
@@ -3943,6 +4014,12 @@ span.wac-tooltip {
     font-style: italic;
   }
+  .subtitle {
+    &:last-child {
+      margin: 0;
+    }
+  }
   .package-subtitle {
    margin: 10px 0 30px;
   }