npm - @wizishop/angular-components - Versions diffs - 0.0.236 → 0.0.239 - Mend

@wizishop/angular-components 0.0.236 → 0.0.239

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 (13) hide show

package/angular-components.scss CHANGED Viewed

@@ -7,7 +7,7 @@ $wac-table-background-color: #fafafa!default;
 $wac-bleu-color: #52aecd!default;
 $wac-red-color: #ff1800!default;
 $wac-border-color: #cfd4e4!default;
-$wac-border-form: #cfd4e4!default;
+$wac-border-form: #DEE2ED!default;
 $wac-border-light: #cfd4e4!default;
 $wac-color-loader2: #a2c739!default;
 $wac-color-loader: #4baed0!default;
@@ -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;
@@ -846,241 +990,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;
-      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 {
-      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;
+    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;
+      }
+      &__button {
+        height: rem(40);
+        width: fit-content;
+        margin-left: auto;
+        &__mobile {
+          @include media('>=1024px') {
+            display: none;
+          }
+        }
+        &__notMobile {
+          @include media('<1024px') {
+            display: none;
+          }
+        }
       }
     }
-    &__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-block {
+}.wac-block {
   background-color: $white;
   @include padding(rem(30));
   box-shadow: 0 rem(2) rem(5) rgba(45, 62, 85, 0.05);
@@ -3328,6 +3328,9 @@ $wac-subtitle-color: #7A87A1!default;
         transform: translateY(-50%);
         margin: 0!important;
       }
+      .input {
+        padding-right: 2.5em!important;
+      }
     }
   }
@@ -4212,6 +4215,11 @@ span.wac-tooltip {
         color: $wac-white;
       }
     }
+    .wac-button__tooltips {
+      background-color: $wac-wizishop-blue-button!important;
+      color: $white!important;
+    }
   }
   &.animationText {
@@ -4414,6 +4422,59 @@ span.wac-tooltip {
       background-color: $wac-main-text;
     }
+    .wac-button__tooltips {
+      background-color: $wac-main-text-lighten!important;
+      color: $wac-white!important;
+      &.right {
+        &:before {
+          border-color: transparent $wac-main-text-lighten transparent transparent;
+        }
+      }
+      &.left {
+        &:before {
+          border-color: transparent transparent transparent $wac-main-text-lighten;
+        }
+      }
+      &.top-center {
+        &:before {
+          border-color: $wac-main-text-lighten transparent transparent transparent;
+        }
+      }
+      &.top-right {
+        &:before {
+          border-color: $wac-main-text-lighten transparent transparent transparent;
+        }
+      }
+      &.top-left {
+        &:before {
+          border-color: $wac-main-text-lighten transparent transparent transparent;
+        }
+      }
+      &.bottom-center {
+        &:before {
+          border-color: transparent transparent $wac-main-text-lighten transparent;
+        }
+      }
+      &.bottom-right {
+        &:before {
+          border-color: transparent transparent $wac-main-text-lighten transparent;
+        }
+      }
+      &.bottom-left {
+        &:before {
+          border-color: transparent transparent $wac-main-text-lighten transparent;
+        }
+      }
+    }
     &:hover,
     &.hover {
       background-color: $wac-main-text-lighten;
@@ -4697,6 +4758,59 @@ span.wac-tooltip {
       background-color: $wac-background-color-darken;
     }
+    .wac-button__tooltips {
+      background-color: $wac-background-color-darken!important;
+      color: $wac-main-text!important;
+      &.right {
+        &:before {
+          border-color: transparent $wac-background-color-darken transparent transparent;
+        }
+      }
+      &.left {
+        &:before {
+          border-color: transparent transparent transparent $wac-background-color-darken;
+        }
+      }
+      &.top-center {
+        &:before {
+          border-color: $wac-background-color-darken transparent transparent transparent;
+        }
+      }
+      &.top-right {
+        &:before {
+          border-color: $wac-background-color-darken transparent transparent transparent;
+        }
+      }
+      &.top-left {
+        &:before {
+          border-color: $wac-background-color-darken transparent transparent transparent;
+        }
+      }
+      &.bottom-center {
+        &:before {
+          border-color: transparent transparent $wac-background-color-darken transparent;
+        }
+      }
+      &.bottom-right {
+        &:before {
+          border-color: transparent transparent $wac-background-color-darken transparent;
+        }
+      }
+      &.bottom-left {
+        &:before {
+          border-color: transparent transparent $wac-background-color-darken transparent;
+        }
+      }
+    }
     .wac-button__wrapper, .wac-button__animation {
       color: $wac-second-color;
       transition: color 0.3s ease-in-out;
@@ -4761,6 +4875,58 @@ span.wac-tooltip {
       background-color: $wac-primary-button-darken;
     }
+    .wac-button__tooltips {
+      background-color: $wac-primary-button-darken!important;
+      color: $wac-white!important;
+      &.right {
+        &:before {
+          border-color: transparent $wac-primary-button-darken transparent transparent;
+        }
+      }
+      &.left {
+        &:before {
+          border-color: transparent transparent transparent $wac-primary-button-darken;
+        }
+      }
+      &.top-center {
+        &:before {
+          border-color: $wac-primary-button-darken transparent transparent transparent;
+        }
+      }
+      &.top-right {
+        &:before {
+          border-color: $wac-primary-button-darken transparent transparent transparent;
+        }
+      }
+      &.top-left {
+        &:before {
+          border-color: $wac-primary-button-darken transparent transparent transparent;
+        }
+      }
+      &.bottom-center {
+        &:before {
+          border-color: transparent transparent $wac-primary-button-darken transparent;
+        }
+      }
+      &.bottom-right {
+        &:before {
+          border-color: transparent transparent $wac-primary-button-darken transparent;
+        }
+      }
+      &.bottom-left {
+        &:before {
+          border-color: transparent transparent $wac-primary-button-darken transparent;
+        }
+      }
+    }
     &:hover,
     &.hover {
       background-color: $wac-primary-button-darken;
@@ -4825,6 +4991,58 @@ span.wac-tooltip {
       background-color: $wac-green-color-darken;
     }
+    .wac-button__tooltips {
+      background-color: $wac-green-color-darken!important;
+      color: $wac-white!important;
+      &.right {
+        &:before {
+          border-color: transparent $wac-green-color-darken transparent transparent;
+        }
+      }
+      &.left {
+        &:before {
+          border-color: transparent transparent transparent $wac-green-color-darken;
+        }
+      }
+      &.top-center {
+        &:before {
+          border-color: $wac-green-color-darken transparent transparent transparent;
+        }
+      }
+      &.top-right {
+        &:before {
+          border-color: $wac-green-color-darken transparent transparent transparent;
+        }
+      }
+      &.top-left {
+        &:before {
+          border-color: $wac-green-color-darken transparent transparent transparent;
+        }
+      }
+      &.bottom-center {
+        &:before {
+          border-color: transparent transparent $wac-green-color-darken transparent;
+        }
+      }
+      &.bottom-right {
+        &:before {
+          border-color: transparent transparent $wac-green-color-darken transparent;
+        }
+      }
+      &.bottom-left {
+        &:before {
+          border-color: transparent transparent $wac-green-color-darken transparent;
+        }
+      }
+    }
     &:hover,
     &.hover {
       background-color: $wac-green-color-darken;
@@ -4996,16 +5214,21 @@ span.wac-tooltip {
   &__tooltips {
     position: absolute;
     width: auto;
-    padding: 8px;
+    padding: 4px;
     border-radius: 3px;
-    background: $wac-second-color !important;
+    background: $wizishop-blue;
     color: $wac-white;
     min-width: 100%;
     visibility: hidden;
-    font-size: 14px;
+    font-size: 12px;
     opacity: 0;
     transition: opacity .3s ease 0s, visibility 0s linear .35s;
+    &.oneline {
+      width: auto!important;
+      white-space: nowrap;
+    }
     @include media('>=tablet') {
       min-width: 600px;
     }
@@ -5023,7 +5246,7 @@ span.wac-tooltip {
       height: 0;
       border-style: solid;
       border-width: 10px 10px 0 10px;
-      border-color: transparentize($wac-second-color, .1) transparent transparent transparent;
+      border-color: $wizishop-blue transparent transparent transparent;
     }
     &.right {
@@ -6907,6 +7130,9 @@ div.wac-field-input-search {
       .icon {
         height: rem(39);
       }
+      .input {
+        padding-right: 2.5em!important;
+      }
     }
   }