@wizishop/img-manager 0.2.97 → 0.2.100

package/wz-img-manager.scss

@@ -2433,7 +2433,7 @@ $green-color: #2ecc71;
             display: block;
             margin: 0 0 20px;
             padding: 0;
-            width: 100%;
+            width: 97%;
             wz-input-search {
               display: block;
               width: 100%;
@@ -2479,6 +2479,9 @@ $green-color: #2ecc71;
   }
   &__pagination {
     width: 100%;
+    @include media('<tablet') {
+      width: 97%;
+    }
   }
   &__container {
     &__loader {
@@ -2844,6 +2847,10 @@ $card-img-size-small: 140px;
     width: 100%;
     overflow: hidden;
 
+  @include media('<720px') {
+    width: 97%;
+  }
+
     &__container {
         width: 100%!important;
         height: auto!important;
@@ -3261,6 +3268,151 @@ $card-img-size-small: 140px;
 .wz-img-manager .addCssPriority .smallNameDisplay .img-card__nameContainer__name {
   width: $card-img-size-small;
 }
+.wz-img-manager .wz-table {
+  width: 100%;
+
+  &__head {
+    @include flexbox();
+    @include flex-flow(row nowrap);
+    width: 100%;
+    border-top: 1px solid $textarea-border-color;
+    border-bottom: 1px solid $textarea-border-color;
+    background-color: $gray-background;
+
+    &__cell {
+      @include flexbox();
+      @include flex(1);
+      padding: 15px 20px;
+      font-size: 14px;
+      line-height: 20px;
+      color: $main-text;
+      font-weight: 600;
+
+      &--checkbox {
+        @include flex(none);
+        width: 80px;
+        padding: 10px 20px 6px 20px;
+        > * {
+          transform: translateX(15px);
+        }
+      }
+
+      &__search {
+        color: $main-text;
+        padding-right: 23px;
+        transition: background-image 0.3s ease-in-out;
+        cursor: text;
+
+        &:hover {
+          color: $main-text;
+        }
+
+        &--idle {
+          background: transparent
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort' viewBox='0 0 320 512' class='svg-inline--fa fa-sort fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E")
+            center right / 14px 14px no-repeat;
+          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+            transition: color 0.3s ease-in-out;
+          }
+        }
+
+        &--up {
+          background: transparent
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-up' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-up fa-w-10 fa-5x'%3E%3Cpath fill='currentColor' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3C/svg%3E")
+            center right / 14px 14px no-repeat;
+          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+            transition: color 0.3s ease-in-out;
+          }
+        }
+
+        &--down {
+          background: transparent
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-down' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E")
+            center right / 14px 14px no-repeat;
+          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
+          cursor: pointer;
+
+          &:hover {
+            transition: color 0.3s ease-in-out;
+          }
+        }
+      }
+
+      &--center--left {
+        @include align-items(center);
+        @include justify-content(left);
+      }
+      &--center--center {
+        @include align-items(center);
+        @include justify-content(center);
+      }
+      &--center--right {
+        @include align-items(center);
+        @include justify-content(right);
+      }
+    }
+  }
+
+  // TODO delete __search
+  &__search {
+    height: 100px;
+    margin-top: 10px;
+  }
+
+  &__body {
+    width: 100%;
+    margin-top: -10px;
+
+    &__loader {
+      position: relative;
+      min-height: 200px;
+    }
+
+    &__line {
+      @include flexbox();
+      @include flex-flow(row nowrap);
+      width: 100%;
+      border-bottom: 1px solid $textarea-border-color;
+
+      &__cell {
+        @include flexbox();
+        @include flex(1);
+        padding: 20px 20px 20px 20px;
+        font-size: 14px;
+        line-height: 25px;
+        color: $secondary-color;
+
+        &--checkbox {
+          @include flexbox();
+          @include flex(none);
+          @include justify-content(center);
+          @include align-items(center);
+          width: 80px;
+          padding: 8px 20px;
+        }
+
+        &--center--left {
+          @include align-items(center);
+          @include justify-content(left);
+        }
+        &--center--center {
+          @include align-items(center);
+          @include justify-content(center);
+        }
+        &--center--right {
+          @include align-items(center);
+          @include justify-content(right);
+        }
+      }
+    }
+  }
+}
 
 
 .wac {
@@ -3554,151 +3706,6 @@ $card-img-size-small: 140px;
     }
   }
 }
-.wz-img-manager .wz-table {
-  width: 100%;
-
-  &__head {
-    @include flexbox();
-    @include flex-flow(row nowrap);
-    width: 100%;
-    border-top: 1px solid $textarea-border-color;
-    border-bottom: 1px solid $textarea-border-color;
-    background-color: $gray-background;
-
-    &__cell {
-      @include flexbox();
-      @include flex(1);
-      padding: 15px 20px;
-      font-size: 14px;
-      line-height: 20px;
-      color: $main-text;
-      font-weight: 600;
-
-      &--checkbox {
-        @include flex(none);
-        width: 80px;
-        padding: 10px 20px 6px 20px;
-        > * {
-          transform: translateX(15px);
-        }
-      }
-
-      &__search {
-        color: $main-text;
-        padding-right: 23px;
-        transition: background-image 0.3s ease-in-out;
-        cursor: text;
-
-        &:hover {
-          color: $main-text;
-        }
-
-        &--idle {
-          background: transparent
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort' viewBox='0 0 320 512' class='svg-inline--fa fa-sort fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z'/%3E%3C/svg%3E")
-            center right / 14px 14px no-repeat;
-          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
-          cursor: pointer;
-
-          &:hover {
-            transition: color 0.3s ease-in-out;
-          }
-        }
-
-        &--up {
-          background: transparent
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-up' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-up fa-w-10 fa-5x'%3E%3Cpath fill='currentColor' d='M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'/%3E%3C/svg%3E")
-            center right / 14px 14px no-repeat;
-          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
-          cursor: pointer;
-
-          &:hover {
-            transition: color 0.3s ease-in-out;
-          }
-        }
-
-        &--down {
-          background: transparent
-            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='sort-down' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-7x'%3E%3Cpath fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'/%3E%3C/svg%3E")
-            center right / 14px 14px no-repeat;
-          transition: background-image 0.3s ease-in-out, color 0.3s ease-in-out;
-          cursor: pointer;
-
-          &:hover {
-            transition: color 0.3s ease-in-out;
-          }
-        }
-      }
-
-      &--center--left {
-        @include align-items(center);
-        @include justify-content(left);
-      }
-      &--center--center {
-        @include align-items(center);
-        @include justify-content(center);
-      }
-      &--center--right {
-        @include align-items(center);
-        @include justify-content(right);
-      }
-    }
-  }
-
-  // TODO delete __search
-  &__search {
-    height: 100px;
-    margin-top: 10px;
-  }
-
-  &__body {
-    width: 100%;
-    margin-top: -10px;
-
-    &__loader {
-      position: relative;
-      min-height: 200px;
-    }
-
-    &__line {
-      @include flexbox();
-      @include flex-flow(row nowrap);
-      width: 100%;
-      border-bottom: 1px solid $textarea-border-color;
-
-      &__cell {
-        @include flexbox();
-        @include flex(1);
-        padding: 20px 20px 20px 20px;
-        font-size: 14px;
-        line-height: 25px;
-        color: $secondary-color;
-
-        &--checkbox {
-          @include flexbox();
-          @include flex(none);
-          @include justify-content(center);
-          @include align-items(center);
-          width: 80px;
-          padding: 8px 20px;
-        }
-
-        &--center--left {
-          @include align-items(center);
-          @include justify-content(left);
-        }
-        &--center--center {
-          @include align-items(center);
-          @include justify-content(center);
-        }
-        &--center--right {
-          @include align-items(center);
-          @include justify-content(right);
-        }
-      }
-    }
-  }
-}
 .wz-img-manager  .wz-pagination {
   width: 100%;
   padding: 0;
@@ -4427,5 +4434,3 @@ $card-img-size-small: 140px;
 .nwb-snack-bar .column {
   box-sizing: border-box;
 }
-
-