@wizishop/angular-components 0.0.244 → 0.0.245

package/angular-components.scss

@@ -534,241 +534,97 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
-.wac-search {
+.selected-list {
   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;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    &__head {
       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;
-        }
-      }
-    }
-    button {
+      min-height: rem(60);
       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;
+      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;
       }
-      &:hover {
-        i {
-          color: $wac-wizishop-blue !important;
+
+      &__button {
+        height: rem(40);
+        width: fit-content;
+        margin-left: auto;
+
+        &__mobile {
+          @include media('>=1024px') {
+            display: none;
+          }
         }
+
+        &__notMobile {
+          @include media('<1024px') {
+            display: none;
+          }
+        }
+
       }
+
     }
-  }
-  &__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 {
+    &__content {
       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;
-      align-content: center;
-      align-items: center;
-      color: $wac-second-color;
-      > div {
-        width: 100%;
+      &__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);
         display: flex;
+        justify-content: center;
         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;
-      }
-      > div {
-        padding: 0 10px;
-        &.selected {
-          background-color: $wac-gray-background;
+        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;
         }
-      }
-    }
-    &__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;
@@ -927,160 +783,304 @@ $wac-subtitle-color: #7A87A1!default;
           white-space: nowrap;
           font-weight: 600;
         }
-        &__close {
-          display: none;
+        &__close {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__title {
+    font-size: rem(24);
+    line-height: 1.4;
+    margin: 0;
+    font-weight: 700;
+    text-align: center;
+    width: 100%;
+  }
+
+  &__text {
+    font-size: rem(16);
+    font-weight: 500;
+    text-align: center;
+    width: 100%;
+    margin: 0;
+  }
+
+  &__close {
+    cursor: pointer;
+    display: flex;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: rem(40);
+    height: rem(40);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    background-color: darken($wac-primary-button, 10%);
+    transition: .3s ease;
+    &:hover, &:focus {
+      background-color: darken($wac-primary-button, 15%);
+    }
+    i {
+      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;
         }
       }
     }
-  }
-
-  &__title {
-    font-size: rem(24);
-    line-height: 1.4;
-    margin: 0;
-    font-weight: 700;
-    text-align: center;
-    width: 100%;
-  }
-
-  &__text {
-    font-size: rem(16);
-    font-weight: 500;
-    text-align: center;
-    width: 100%;
-    margin: 0;
-  }
-
-  &__close {
-    cursor: pointer;
-    display: flex;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: rem(40);
-    height: rem(40);
-    border-radius: 50%;
-    justify-content: center;
-    align-items: center;
-    background-color: darken($wac-primary-button, 10%);
-    transition: .3s ease;
-    &:hover, &:focus {
-      background-color: darken($wac-primary-button, 15%);
-    }
-    i {
-      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 & {
+    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;
+        }
+      }
     }
   }
-
-}
-.selected-list {
-  width: 100%;
-  &__wrapper {
+  &__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;
-    align-items: flex-start;
     justify-content: flex-start;
-    &__head {
-      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;
+    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;
       }
-
-      &__button {
-        height: rem(40);
-        width: fit-content;
-        margin-left: auto;
-
-        &__mobile {
-          @include media('>=1024px') {
-            display: none;
-          }
-        }
-
-        &__notMobile {
-          @include media('<1024px') {
-            display: none;
-          }
-        }
-
+    }
+    .ps {
+      max-height: 240px;
+    }
+    &.open,
+    &.open.hidden {
+      position: relative;
+      left: auto;
+      top: 0;
+      transform: translateX(-1px);
+      visibility: visible;
+      opacity: 1;
+      & > * {
+        opacity: 1;
+        transition: 0s;
       }
-
     }
-    &__content {
+    &__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-block {
+}
+.wac-block {
   background-color: $white;
   @include padding(rem(30));
   box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
@@ -5303,6 +5303,7 @@ span.wac-tooltip {
     &.oneline {
       width: auto!important;
       white-space: nowrap;
+      min-width: unset!important;
     }
 
     @include media('>=tablet') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/angular-components",
-  "version": "0.0.244",
+  "version": "0.0.245",
   "peerDependencies": {
     "@angular/common": "^11.2.12",
     "@angular/core": "^11.2.12",