@wizishop/img-manager 0.2.38 → 0.2.42

package/wz-img-manager.scss

@@ -738,6 +738,10 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
     min-height: 145px;
 }
 
+.wz-img-manager .canva .smallScroll {
+  min-height: 238px;
+}
+
 .wz-img-manager .dropDownShadow {
     background-color: white;
     border-radius: 4px;
@@ -780,18 +784,21 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
     display: none;
   }
 }
+
+.wz-img-manager .wz-img-manager__module:not(.wz-img-manager__module--window) .img-tabs__tabsThird > .column {
+  padding: 0;
+}
+
+.wz-img-manager .wz-img-manager__module:not(.wz-img-manager__module--window) .pexels-lib__scroll .ng-scroll-content {
+  padding-right: 20px;
+}
+
+.tabs--notWindow ul {
+  transform: translateY(5px);
+}
 .img-upload {
   position: relative;
-  background-position:  0 0, 0 0, 100% 0, 0 100%;
-  background-size: 1px 100%, 100% 1px, 1px 100% , 100% 1px;
-  background-repeat: no-repeat;
-  background-image:
-    repeating-linear-gradient(0deg, $border-upload-color, $border-upload-color 10px, transparent 10px, transparent 20px), // left
-    repeating-linear-gradient(90deg, $border-upload-color, $border-upload-color 10px, transparent 10px, transparent 20px), // top
-    repeating-linear-gradient(180deg, $border-upload-color, $border-upload-color 10px, transparent 10px, transparent 20px), // right
-    repeating-linear-gradient(270deg, $border-upload-color, $border-upload-color 10px, transparent 10px, transparent 20px) // bottom
-;
-  border-image: repeating-linear-gradient(0deg, $border-upload-color, $border-upload-color 10px, transparent 10px, transparent 20px);
+  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' rx='3' ry='3' stroke='%2352AECD' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   border-radius: 3px;
   &:before {
     content: '';
@@ -848,6 +855,7 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
         display: block;
         max-width: rem(65);
         margin: 0 auto rem(15);
+        transform: translate(10px);
       }
       p {
         color: $border-upload-color;
@@ -1042,6 +1050,9 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
       width: 100%;
       display: flex;
       flex-wrap: wrap;
+      &--padding {
+        padding-right: 20px;
+      }
     }
   }
 }
@@ -1090,6 +1101,39 @@ $card-img-size-small: 140px;
           }
         }
 
+        &__valid {
+          display: flex;
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          transform: translate(-50%,0);
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          background-color: $img-green-color;
+          border-radius: 3px;
+          padding: 5px;
+          transition: .3s ease;
+          i {
+            font-size: rem(10);
+            color: $white;
+            margin: 0 5px 0 0;
+          }
+          span {
+            color: $white;
+            font-weight: 500;
+            font-size: rem(10);
+          }
+        }
+
+        &:hover, &:focus {
+          .img-card__container {
+            &__valid {
+              transform: translate(-50%, -40px);
+            }
+          }
+        }
+
         &__img {
             width: auto!important;
             height: auto!important;
@@ -1333,6 +1377,7 @@ $card-img-size-small: 140px;
             }
 
             &__container {
+              border-color: $wizishop-blue;
               &__img {
                 transform: scale(1.02) translate(-50%,-50%);
               }
@@ -1370,10 +1415,6 @@ $card-img-size-small: 140px;
 .wz-img-manager .addCssPriority .smallNameDisplay .img-card__nameContainer__name {
   width: $card-img-size-small;
 }
-
-.addCssPriority:not(.fullSize) {
-
-}
 //.wz-img-manager useful to keep the css priority
 .wz-img-manager .table-view {
 
@@ -1449,7 +1490,7 @@ $card-img-size-small: 140px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                color: $img-grey-color;
+                color: $main-text;
                 font-size: 14px;
                 cursor: initial;
             }
@@ -1486,6 +1527,10 @@ $card-img-size-small: 140px;
     width: 5rem;
 }
 
+.table-view .wzImgMngInput {
+  border-radius: 3px;
+}
+
 .table-view .wzImgMngInput:active.desabled, .table-view .wzImgMngInput:focus.desabled {
     border: solid transparent 1px;
 }
@@ -1493,29 +1538,144 @@ $card-img-size-small: 140px;
 .wz-img-manager .table-view .dropdown-menu {
     left: -165px;
 }
-$green: $really-bad-bad-bad-green !default;
-$primary: $primary-button !default;
-$light: $img-placeholder !default;
-$info: $wizishop-blue !default;
-$danger: $img-red-color !default;
-$dark: $img-dark !default;
 
-$button-padding-vertical: rem(7) !default;
-$radius: rem(3) !default;
+.grey {
+  color: $img-grey-color;
+}
+.wz-img-manager {
 
-$button-color: white!default;
-$button-hover-color: white !default;
-$button-focus-color: white !default;
-$button-active-color: white !default;
-$button-background-color: $primary !default;
-$button-disabled-background-color: $primary !default;
-$button-border-color: $primary-button-hover !default;
-$button-hover-border-color: $primary-button-hover !default;
-$button-active-border-color: $primary-button-hover !default;
-$button-focus-border-color: $primary-button-hover !default;
-$button-disabled-border-color: $primary-button-hover !default;
+  &__selectionHandler {
+    margin-top: -50px;
+  }
 
-$tag-radius: rem(20px)!default;
+  &__module {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    transition: height .3s ease;
+    z-index: 2147483647; // snackbar 10
+    transform: translateZ(0);
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background-color: $img-main-color;
+    }
+
+    &--closed {
+      height: 0;
+    }
+
+    // .wz-img-manager__module--small
+    &--small {
+      height: 320px;
+    }
+
+    // .wz-img-manager__module--full
+    &--full {
+      height: calc(100vh - 50px);
+    }
+
+    // .wz-img-manager__module--window
+    &--window {
+      position: relative;
+      width: auto;
+      bottom: unset;
+      left: unset;
+      z-index: 29!important;
+      height: auto!important;
+      padding-bottom: 6.25rem;
+
+      &:before {
+        content: none;
+        height: 0px;
+      }
+
+      // .wz-img-manager__module--edit
+      &--edit {
+        .wrapper-tabs {
+          display: none;
+        }
+      }
+    }
+
+    // .wz-img-manager__module__header
+    &__header {
+      position: absolute;
+      bottom: 100%;
+      right: 30px;
+      width: 101px;
+
+      // .wz-img-manager__module__header button
+      button {
+        width: 45px;
+        height: 35px;
+        background-color: $img-main-color;
+        transition: background-color .3s ease;
+        border: none;
+        box-shadow: none;
+        cursor: pointer;
+        outline: none!important;
+
+        span {
+          display: none;
+        }
+
+        i {
+          color: #fff;
+          font-size: 20px;
+        }
+
+        &:hover, &:focus {
+          background-color: darken($img-main-color, 15%);
+        }
+
+        // .wz-img-manager__module__header button:first-child
+        &:first-child {
+          border-radius: 3px 0 0 0;
+        }
+
+        // .wz-img-manager__module__header button:last-child
+        &:last-child {
+          margin: 0 0 0 1px;
+          border-radius: 0 3px 0 0;
+        }
+      }
+    }
+  }
+}
+
+.wz-img-manager__module .wz-block {
+    background-color: #fff;
+    box-shadow: 0 0.125rem 0.3125rem rgba(45,62,85,.1);
+    padding: 0 0.575rem 0 1.075rem;
+
+    &--window {
+      padding: rem(30);
+      overflow: hidden;
+      max-width: 1450px;
+      margin: 0 auto;
+    }
+}
+
+.wz-img-manager__module  .wz-block:hover {
+  box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
+}
+
+.nwb-snack-bar .notification {
+  z-index: 10002!important;
+}
+
+.nwb-snack-bar .column {
+  box-sizing: border-box;
+}
 image-cropper {
     max-height: 60vh;
   }.wz-img-manager .images-view {
@@ -1598,6 +1758,7 @@ image-cropper {
             margin-right: 13px;
             height: 40px;
             align-items: center;
+            transform: translate(-41px,-3px);
 
             &__confirmSup {
                 display: flex;
@@ -1611,14 +1772,14 @@ image-cropper {
                 opacity: 0;
                 transition: width .3s ease, opacity .3s ease-in-out;
                 visibility: hidden;
+                z-index: 2;
 
                 &--visible {
                     max-width: unset;
                     width: auto;
                     opacity: 1;
-                    transition: width .3s ease, opacity .3s ease-in-out;
-                    transition-delay: 250ms;
-                    visibility: initial;
+                    transition: width .3s ease .05s, opacity .3s ease-in-out .05s, visibility 0s linear 0s;
+                    visibility: visible;
 
                     p {
                         transition:  left .3s ease-in-out;
@@ -1659,8 +1820,10 @@ image-cropper {
             margin: 0;
             width: rem(40);
             height: rem(40);
-            border: 1px solid $img-light-white-color;
-            border-radius: 3px;
+            border: solid $img-light-white-color;
+            border-width: 1px 0 1px 1px;
+
+            border-radius: 3px 0 0 3px;
             outline: none!important;
 
             p {
@@ -1668,7 +1831,8 @@ image-cropper {
                 margin-bottom: 0;
                 height: 40px;
                 &:nth-child(2) {
-                  border: 1px solid $img-input-border;
+                  border: solid $img-light-white-color;
+                  border-width: 1px 1px 1px 0;
                   transform: translateY(-1px);
                   border-radius: 0 3px 3px 0;
                 }
@@ -1893,140 +2057,29 @@ $green-color: #2ecc71;
     line-height: rem(25);
   }
 }
-.wz-img-manager {
-
-  &__selectionHandler {
-    margin-top: -50px;
-  }
-
-  &__module {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 0;
-    transition: height .3s ease;
-    z-index: 2147483647; // snackbar 10
-    transform: translateZ(0);
-
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      background-color: $img-main-color;
-    }
-
-    &--closed {
-      height: 0;
-    }
-
-    // .wz-img-manager__module--small
-    &--small {
-      height: 320px;
-    }
-
-    // .wz-img-manager__module--full
-    &--full {
-      height: calc(100vh - 40px);
-    }
-
-    // .wz-img-manager__module--window
-    &--window {
-      position: relative;
-      width: auto;
-      bottom: unset;
-      left: unset;
-      z-index: 29!important;
-      height: auto!important;
-      padding-bottom: 6.25rem;
-
-      &:before {
-        content: none;
-        height: 0px;
-      }
-
-      // .wz-img-manager__module--edit
-      &--edit {
-        .wrapper-tabs {
-          display: none;
-        }
-      }
-    }
-
-    // .wz-img-manager__module__header
-    &__header {
-      position: absolute;
-      bottom: 100%;
-      right: 30px;
-      width: 101px;
-
-      // .wz-img-manager__module__header button
-      button {
-        width: 50px;
-        height: 40px;
-        background-color: $img-main-color;
-        transition: background-color .3s ease;
-        border: none;
-        box-shadow: none;
-        cursor: pointer;
-        outline: none!important;
-
-        span {
-          display: none;
-        }
-
-        i {
-          color: #fff;
-          font-size: 20px;
-        }
-
-        &:hover, &:focus {
-          background-color: darken($img-main-color, 15%);
-        }
-
-        // .wz-img-manager__module__header button:first-child
-        &:first-child {
-          border-radius: 3px 0 0 0;
-        }
-
-        // .wz-img-manager__module__header button:last-child
-        &:last-child {
-          margin: 0 0 0 1px;
-          border-radius: 0 3px 0 0;
-        }
-      }
-    }
-  }
-}
-
-.wz-img-manager__module .wz-block {
-    background-color: #fff;
-    box-shadow: 0 0.125rem 0.3125rem rgba(45,62,85,.1);
-    padding: 0 0.575rem 0 1.075rem;
-
-    &--window {
-      padding: rem(30);
-      overflow: hidden;
-      max-width: 1450px;
-      margin: 0 auto;
-    }
-}
+$green: $really-bad-bad-bad-green !default;
+$primary: $primary-button !default;
+$light: $img-placeholder !default;
+$info: $wizishop-blue !default;
+$danger: $img-red-color !default;
+$dark: $img-dark !default;
 
-.wz-img-manager__module  .wz-block:hover {
-  box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
-}
+$button-padding-vertical: rem(7) !default;
+$radius: rem(3) !default;
 
-.nwb-snack-bar .notification {
-  z-index: 10002!important;
-}
+$button-color: white!default;
+$button-hover-color: white !default;
+$button-focus-color: white !default;
+$button-active-color: white !default;
+$button-background-color: $primary !default;
+$button-disabled-background-color: $primary !default;
+$button-border-color: $primary-button-hover !default;
+$button-hover-border-color: $primary-button-hover !default;
+$button-active-border-color: $primary-button-hover !default;
+$button-focus-border-color: $primary-button-hover !default;
+$button-disabled-border-color: $primary-button-hover !default;
 
-.nwb-snack-bar .column {
-  box-sizing: border-box;
-}
+$tag-radius: rem(20px)!default;
 .wz-img-manager .is-checkradio[type='checkbox'] {
   outline: 0 !important;
   & + label {
@@ -2149,21 +2202,10 @@ $green-color: #2ecc71;
     &--smallDisplay {
         max-height: 275px!important;
     }
-
-    .ng-scroll-content {
-      margin-left: 0.5rem !important;
-      margin-right: 0.5rem !important;
-      min-width: calc(100% - 1rem) !important;
-      width: calc(100% - 1rem) !important;
-      min-height: 100vh !important;
-    }
   }
 
   &__search {
-    margin-right: 0.8rem;
-    margin-left: 0.3rem;
-    margin-bottom: 30px;
-    margin-top: 30px;
+   margin: 30px 0;
 
     &--smallDisplay {
       margin-top: 10px;
@@ -2172,23 +2214,20 @@ $green-color: #2ecc71;
 
   // .pexels-lib__wrapper
   &__wrapper {
-    margin-right: 0.8rem;
-    margin-left: 0.3rem;
-    margin-bottom: 30px;
-    margin-top: 30px;
+    margin: 30px 0;
 
     // .pexels-lib__wrapper__result
     &__result {
-      width: calc(100% + 20px);
+      width: calc(100% + 10px);
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      margin-left: -10px;
+      margin-left: -5px;
 
       // .pexels-lib__wrapper__result__column
       &__column {
         flex: 1;
-        margin: 0 10px;
+        margin: 0 5px;
 
         // .pexels-lib__wrapper__result__column__element
         &__element {
@@ -2206,7 +2245,7 @@ $green-color: #2ecc71;
 
           // .pexels-lib__wrapper__result__column__element:not(:last-child)
           &:not(:last-child) {
-            margin-bottom: 20px;
+            margin-bottom: 10px;
           }
 
           // .pexels-lib__wrapper__result__column__element__img
@@ -2222,9 +2261,9 @@ $green-color: #2ecc71;
             position: absolute;
             display: flex;
             justify-content: space-between;
-            width: calc(100% - 20px);
-            bottom: 10px;
-            left: 10px;
+            width: calc(100% - 10px);
+            bottom: 5px;
+            left: 5px;
             opacity: 0;
             transition: opacity .3s ease-in-out;
             align-items: flex-end;
@@ -2334,14 +2373,19 @@ $green-color: #2ecc71;
     background-color: #fafafa;
     cursor: pointer;
   }
-}//.wz-img-manager useful to keep the css priority
+}
+//.wz-img-manager useful to keep the css priority
 .wz-img-manager .canva-btn {
     background-color: $img-main-color;
-    border: none;
+    border: 2px solid $img-main-color;
     padding: 0;
     height: fit-content;
     color: white;
     padding-left: rem(9);
+    transition: .3s ease;
+    &:hover, &:focus {
+      border-color: darken($img-main-color, 15%);
+    }
     > span {
       &:first-child {
         z-index: 2;
@@ -2360,6 +2404,18 @@ $green-color: #2ecc71;
 }
 
 .wz-img-manager .canva.dropdown {
+    .dropdown-menu {
+      margin-top: 10px!important;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        width: 100%;
+        height: 10px;
+      }
+    }
 
     .dropdown-menu:hover {
         display: block;
@@ -2388,19 +2444,25 @@ $green-color: #2ecc71;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 12px 20px;
+          margin: 0 0 5px;
+          &:last-child {
+            margin: 0;
+          }
 
             p {
                 margin: 0;
+              line-height: rem(16);
             }
 
             p:first-child {
                 color: #1D2A3B;
-                font-size: 16px;
+                font-size: rem(14);
             }
 
             p:last-child {
                 color: #526384;
-                font-size: 14px;
+                font-size: rem(14);
             }
         }
 
@@ -2417,24 +2479,27 @@ $green-color: #2ecc71;
         .dropdownTitle {
             font-size: 14px;
             background-color: $img-main-color;
-            padding: 0.8rem 0;
+            padding: rem(9.5) 0;
             text-align: center;
 
             p {
                 font-size: 14px;
                 color: white;
                 margin: 0;
+                font-weight: 500;
             }
         }
 
         .infoItem {
-            padding: 12px 1rem;
+            padding: 18px 20px 11px 20px;
             line-height: 1.5;
             font-weight: 500;
 
             p {
                 margin: 0;
-                font-size: 14px;
+                font-size: rem(16);
+              line-height: rem(19);
+              font-weight: 500;
             }
         }
 
@@ -2456,8 +2521,8 @@ $green-color: #2ecc71;
     @include flexbox();
     @include flex-flow(row nowrap);
     width: 100%;
-    border-top: 1px solid $border-form;
-    border-bottom: 1px solid $border-form;
+    border-top: 1px solid $textarea-border-color;
+    border-bottom: 1px solid $textarea-border-color;
     background-color: $gray-background;
 
     &__cell {
@@ -2473,6 +2538,9 @@ $green-color: #2ecc71;
         @include flex(none);
         width: 80px;
         padding: 10px 20px 6px 20px;
+        > * {
+          transform: translateX(15px);
+        }
       }
 
       &__search {
@@ -2593,12 +2661,12 @@ $green-color: #2ecc71;
 }
 .wz-img-manager  .wz-pagination {
   width: 100%;
-  padding: 0 0 30px;
+  padding: 0;
 
   &__wrapper {
     @include flexbox();
     @include justify-content(flex-end);
-    padding: 30px 17px 30px 0;
+    padding: 0 17px 0 0;
 
     &__page {
       margin-right: 30px;
@@ -2614,11 +2682,11 @@ $green-color: #2ecc71;
       }
 
       select {
-        width: 80px;
+        width: 50px;
         font-size: 14px;
         line-height: 24px;
         color: $second-color;
-        padding: 3px 26px 3px 25px;
+        padding: 3px 26px 3px 15px;
         border: 1px solid $border-form;
         border-radius: 3px;
         -webkit-appearance: none;
@@ -2737,6 +2805,11 @@ $green-color: #2ecc71;
     height: rem(18);
   }
 }
+
+.wz-img-manager .wz-img-manager__module:not(.wz-img-manager__module--window) .pexels-lib__search  .input-search.field {
+  padding: 0;
+  background-color: transparent;
+}
 .wz-img-manager .dropdownWizi {
     padding: 10px;
 
@@ -2959,6 +3032,16 @@ $green-color: #2ecc71;
                   padding: 10px;
                   border-radius: 3px;
                   transition: .3s ease;
+                  white-space: nowrap;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  position: absolute;
+                  top: 80px;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  height: 35px;
+                  margin: 0;
                   &:hover, &:focus {
                     background-color: darken($img-green-color, 15%);
                     color: $img-white!important;
@@ -2966,6 +3049,9 @@ $green-color: #2ecc71;
                   p {
                     color: $white!important;
                   }
+                  i {
+                    margin: 0 5px 0 0;
+                  }
                 }
                 &:hover {
                     color: $img-main-color;
@@ -3057,6 +3143,7 @@ $green-color: #2ecc71;
               color: $img-bleu-color;
               & + i {
                 color: $img-bleu-color;
+                font-weight: 600;
               }
             }
         }
@@ -3378,8 +3465,7 @@ $green-color: #2ecc71;
     overflow: visible!important;
 
     &--notWindow {
-      background-color: transparentize($img-main-color, .9);
-      padding: rem(15) rem(30) rem(10);
+      padding: rem(20) rem(30) rem(20);
       margin-left: -1.075rem;
       margin-right: -0.575rem;
       margin-bottom: rem(20);
@@ -3408,7 +3494,7 @@ $green-color: #2ecc71;
               display: block;
               position: absolute;
               width: 100%;
-              height: 3px;
+              height: 2px;
               background-color: $img-main-color;
               bottom: 0;
               left: 0;