@wizishop/img-manager 0.2.79 → 0.2.83

package/wz-img-manager.scss

@@ -791,6 +791,9 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
 
 .wz-img-manager .wz-img-manager__module:not(.wz-img-manager__module--window) .pexels-lib__scroll .ng-scroll-content {
   padding-right: 20px;
+  @include media('<tablet') {
+    padding: 0;
+  }
 }
 
 .tabs--notWindow ul {
@@ -953,7 +956,34 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
   margin-right: 33px;
 }
 
+.img-tabs__tabsFirst__list {
+  .mosaic__container__cards {
+    @include media('<tablet') {
+      width: calc(100% - 10px) !important;
+      transform: translateX(5px);
+      & > * {
+        width: calc(50% - 20px) !important;
+        margin: 0 10px 20px !important;
+        display: none!important;
+        &:nth-child(1), &:nth-child(2) {
+          display: block!important;
+        }
+      }
+    }
+  }
+}
+
+.ng-scrollbar-wrapper {
+  @include media('<tablet') {
+    --vertical-scrollbar-size: 0!important;
+  }
+}
 
+.ng-scroll-viewport {
+  @include media('<tablet') {
+    overflow: scroll;
+  }
+}
 .img-upload {
   position: relative;
   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");
@@ -1302,6 +1332,10 @@ $tag-radius: rem(20px)!default;
 
         &--smallDisplay {
             max-height: 275px!important;
+          @include media('<tablet') {
+            max-height: calc(100vh - 90px)!important;
+            min-height: calc(100vh - 90px) !important;
+          }
         }
 
         &--smallUploadDisplay {
@@ -1328,6 +1362,9 @@ $tag-radius: rem(20px)!default;
         .ng-scroll-content {
             min-width: calc(100% - 1rem) !important;
             width: calc(100% - 1rem) !important;
+            @include media('<tablet') {
+              min-width: 100%!important;
+            }
         }
     }
 
@@ -1466,6 +1503,7 @@ $tag-radius: rem(20px)!default;
             margin-right: calc(0.8rem - 20px);
             margin-left: 0.3rem;
             margin-bottom: 30px;
+
         }
     }
 
@@ -1849,11 +1887,17 @@ $green-color: #2ecc71;
     // .wz-img-manager__module--small
     &--small {
       height: 320px;
+      @include media('<tablet') {
+        height: calc(100vh - 35px);
+      }
     }
 
     // .wz-img-manager__module--full
     &--full {
       height: calc(100vh - 50px);
+      @include media('<tablet') {
+        height: calc(100vh - 35px);
+      }
     }
 
     // .wz-img-manager__module--window
@@ -1886,6 +1930,11 @@ $green-color: #2ecc71;
       right: 30px;
       width: 101px;
 
+      @include media('<tablet') {
+        width: 45px;
+        right: 0;
+      }
+
       // .wz-img-manager__module__header button
       button {
         width: 45px;
@@ -1897,6 +1946,12 @@ $green-color: #2ecc71;
         cursor: pointer;
         outline: none!important;
 
+        &:first-child {
+          @include media('<tablet') {
+            display: none;
+          }
+        }
+
         span {
           display: none;
         }
@@ -1922,6 +1977,10 @@ $green-color: #2ecc71;
         &:last-child {
           margin: 0 0 0 1px;
           border-radius: 0 3px 0 0;
+          @include media('<tablet') {
+            margin: 0;
+            border-radius: 0;
+          }
         }
       }
     }
@@ -1933,6 +1992,10 @@ $green-color: #2ecc71;
     box-shadow: 0 0.125rem 0.3125rem rgba(45,62,85,.1);
     padding: 0 0.575rem 0 1.075rem;
 
+    @include media('<tablet') {
+      padding: 0 20px;
+    }
+
     &--window {
       padding: rem(30);
       overflow: hidden;
@@ -1952,6 +2015,40 @@ $green-color: #2ecc71;
 .nwb-snack-bar .column {
   box-sizing: border-box;
 }
+
+.wrapper-tabs {
+  .tabs {
+    @include media('<tablet') {
+      display: none!important;
+    }
+  }
+  .select-mobile-page {
+    @include media('>=tablet') {
+      display: none;
+    }
+    select {
+      margin: 20px 0;
+      width: 100%;
+      min-height: 40px;
+      background-color: $img-white;
+      border: 1px solid $img-input-border;
+      border-radius: 3px;
+      box-shadow: none;
+      font-size: rem(12);
+      color: $img-second-color;
+      padding: 0 30px 0 20px;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      text-indent: 1px;
+      text-overflow: '';
+      background: no-repeat center right 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
+      background-size: 10px;
+    }
+    select::-ms-expand {
+      display: none;
+    }
+  }
+}
 .wz-img-manager .dropdownWizi {
     padding: 10px;
 
@@ -2078,6 +2175,10 @@ $green-color: #2ecc71;
 
     &--smallDisplay {
         max-height: 275px!important;
+      @include media('<tablet') {
+        max-height: calc(100vh - 90px)!important;
+        min-height: calc(100vh - 90px) !important;
+      }
     }
   }
 
@@ -2101,11 +2202,20 @@ $green-color: #2ecc71;
       justify-content: space-between;
       margin-left: -5px;
 
+      @include media('<tablet') {
+        flex-wrap: wrap;
+      }
+
       // .pexels-lib__wrapper__result__column
       &__column {
         flex: 1;
         margin: 0 5px;
 
+        @include media('<tablet') {
+          width: calc(50% - 10px);
+          flex: unset;
+        }
+
         // .pexels-lib__wrapper__result__column__element
         &__element {
           display: flex;
@@ -2227,11 +2337,13 @@ $green-color: #2ecc71;
       // .pexels-lib__wrapper__result-nb
       &-nb {
         font-size: 14px;
-        line-height: 25px;
         margin-top: 30px;
         margin-bottom: 15px;
         font-weight: 600;
         line-height: 40px;
+        @include media('<tablet') {
+         margin: 20px auto;
+        }
       }
     }
   }
@@ -2350,6 +2462,12 @@ $green-color: #2ecc71;
       .mosaic {
         &__search {
           display: none;
+          @include media('<tablet') {
+            display: block;
+            margin: 0 0 20px;
+            padding: 0;
+            width: 100%;
+          }
         }
         &__container {
           &__cards {
@@ -2409,10 +2527,22 @@ $green-color: #2ecc71;
       flex-wrap: wrap;
       &--padding {
         padding-right: 20px;
+        @include media('<tablet') {
+          width: calc(100% + 24px);
+          padding: 0;
+        }
       }
     }
   }
 }
+
+.mosaic__container__cards {
+  z-index: 1;
+  & + .mosaic__pagination {
+    position: relative;
+    z-index: 2;
+  }
+}
 $card-img-size: 100%;
 $card-img-size-small: 140px;
 
@@ -2516,6 +2646,15 @@ $card-img-size-small: 140px;
             opacity: 0;
             transition: .3s ease;
 
+            &--small {
+              .show-edit {
+                transition: .3s ease!important;
+                &:hover, &:focus {
+                  background-color: darken(#1E2E43, 15%) !important;
+                }
+              }
+            }
+
             button {
                 box-shadow: 0 0.125rem 0.3125rem rgba(45,62,85,.1);
                 margin: 0;
@@ -2579,7 +2718,7 @@ $card-img-size-small: 140px;
                 &:not(:last-child) {
                   margin: 0 0 5px;
                 }
-                &.size {
+                &.size, &.show-edit {
                   background-color: #1E2E43;
                   transition: transform .3s ease .6s;
                   span, &:before {
@@ -2623,7 +2762,7 @@ $card-img-size-small: 140px;
                     color: $img-bleu-color;
                   }
                 }
-                &:hover, &:focus {
+                &:hover, &:focus, &.show-instant {
                   border-radius: 3px 0 0 3px;
                   &:before {
                     border-radius: 3px 0 0 3px;
@@ -2797,6 +2936,9 @@ $card-img-size-small: 140px;
                 transform: scale(1.02) translate(-50%,-50%);
               }
               &__config {
+                @include media('<tablet') {
+                  display: none;
+                }
                   opacity: 1;
                   button {
                       transform: translateX(0);
@@ -3078,6 +3220,10 @@ $card-img-size-small: 140px;
 .wz-img-manager  .input-search.field {
   padding: 10px 20px;
   background-color: $gray-background;
+  @include media('<tablet') {
+    padding: 0!important;
+    background-color: $white;
+  }
   &.small-padding {
     padding: 10px 20px;
   }
@@ -3548,6 +3694,9 @@ $card-img-size-small: 140px;
 
   &__canva {
     margin: 0 0 0 rem(30);
+    @include media('<tablet') {
+      display: none;
+    }
   }
 
   &__tabsEdit {
@@ -3569,6 +3718,10 @@ $card-img-size-small: 140px;
       margin: rem(28) 0 0 0;
       padding: 0;
       max-width: 33.3%;
+      @include media('<tablet') {
+        max-width: 100%;
+        margin: 0;
+      }
     }
 
     &__list {
@@ -3579,6 +3732,10 @@ $card-img-size-small: 140px;
       }
       //height: calc(100vh - 70px);
       //height: 100vh;
+      @include media('<tablet') {
+        width: 100%;
+        margin: 40px 0 0 0;
+      }
     }
   }
 
@@ -3638,6 +3795,10 @@ $card-img-size-small: 140px;
 
         &--smallDisplay {
             max-height: 275px!important;
+          @include media('<tablet') {
+            max-height: calc(100vh - 90px)!important;
+            min-height: calc(100vh - 90px) !important;
+          }
         }
 
         &--window {