@wizishop/img-manager 0.2.74 → 0.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizishop/img-manager",
-  "version": "0.2.74",
+  "version": "0.2.75",
   "description": "The best and the most beautiful image manager.",
   "repository": {
     "type": "git",

package/wz-img-manager.scss

@@ -2154,113 +2154,63 @@ image-cropper {
 .trash {
   display: none!important;
 }
-.wz-img-manager .is-checkradio[type='checkbox'] {
-  outline: 0 !important;
-  & + label {
-    font-size: rem(14);
-    line-height: rem(24);
-    color: $input-radio-color-label;
-    padding-left: 26px;
-    outline: 0 !important;
-    &:before {
-      width: 16px;
-      height: 16px;
-      border: 1px solid $border-color;
-      top: 4px;
-      transition: all 0.3s ease-in-out;
-    }
-    &:after {
-      top: 6.3px !important;
-      left: 3px !important;
-      width: 10px;
-      height: 12px;
-      border: none !important;
-      background: transparent
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='check' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-5x'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E")
-        center center / 8px 8px no-repeat;
-      transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
-      transition: all 0.3s ease-in-out;
-    }
-    &:hover,
-    &:focus {
-      &:before {
-        border-color: $input-active-color !important;
+$default-color-p-alert: #1e5568;
+$success-color-p-alert: #11552e;
+$warning-color-p-alert: #3a0505;
+$primary-button: #e95656;
+$link-color: #52aecd;
+$green-color: #2ecc71;
+
+.wz-alert {
+  width: 100%;
+  background-color: transparentize($link-color, 0.85);
+  color: $link-color;
+  border-radius: 3px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 20px;
+  &.success {
+    background-color: transparentize($green-color, 0.85);
+    p {
+      color: $success-color-p-alert;
+      > * {
+        color: $success-color-p-alert;
       }
     }
-    &:before,
-    &:after {
-      outline: 0 !important;
+    i {
+      color: $green-color;
     }
   }
-  &:hover {
-    & + label {
-      color: $input-radio-color-active-label;
-      &:before {
-        border-color: $input-active-color !important;
-      }
-      &:after {
-        border-color: $white !important;
+  &.warning {
+    background-color: transparentize($primary-button, 0.85);
+    p {
+      color: $warning-color-p-alert;
+      > * {
+        color: $warning-color-p-alert;
       }
     }
-    &:not([disabled]) {
-      & + label {
-        &:before {
-          border-color: $input-active-color !important;
-        }
-      }
+    i {
+      color: $primary-button;
     }
   }
-  &:checked + label {
-    color: $input-radio-color-active-label;
-    &:before {
-      border: 1px solid $input-active-color;
-      background-color: $input-active-color;
-      transition: all 0.3s ease-in-out;
-    }
-    &:after {
-      left: 7px;
-      top: 8px;
-      transition: all 0.3s ease-in-out;
+  p {
+    width: 100%;
+    font-size: rem(14);
+    line-height: rem(25);
+    margin: 0;
+    padding: 0;
+    color: $default-color-p-alert;
+    > * {
+      color: $default-color-p-alert;
     }
   }
-}
-
-.wz-img-manager .field {
-  &__row {
-    min-width: 100%;
-    margin: 0 0 10px;
-  }
-  &--nowrap {
-    display: inline-block;
+  i {
     width: auto;
-    min-width: 0;
-    margin: 0 10px 10px 0;
-    .field {
-      &__row {
-        width: auto;
-        display: inline-block;
-        margin: 0;
-      }
-    }
-  }
-  &.alone {
-    .is-checkradio[type='checkbox'] {
-      & + label {
-        padding: 0;
-        &:before {
-          border-width: 1px;
-          width: 16px;
-          height: 16px;
-          border-radius: 2px;
-        }
-      }
-      &:checked + label {
-        &:after {
-          top: 7px;
-          transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
-        }
-      }
-    }
+    margin: 0 10px 0 0;
+    color: inherit;
+    font-size: rem(14);
+    line-height: rem(25);
   }
 }
 .wz-img-manager {
@@ -2401,121 +2351,116 @@ image-cropper {
 .nwb-snack-bar .column {
   box-sizing: border-box;
 }
-.wz-img-manager .dropdownWizi {
-    padding: 10px;
-
-    &.is-hoverable {
-        .rotate {
-            i {
-                @include simple_transition();
-                transform: rotate(90deg);
-                cursor: pointer;
-            }
-        }
-        &:hover,
-        &:active {
-            .rotate:not(.rotate--disable) {
-                i {
-                    @include simple_transition();
-                    transform: rotate(0deg);
-                }
-            }
-        }
+.wz-img-manager .is-checkradio[type='checkbox'] {
+  outline: 0 !important;
+  & + label {
+    font-size: rem(14);
+    line-height: rem(24);
+    color: $input-radio-color-label;
+    padding-left: 26px;
+    outline: 0 !important;
+    &:before {
+      width: 16px;
+      height: 16px;
+      border: 1px solid $border-color;
+      top: 4px;
+      transition: all 0.3s ease-in-out;
     }
-
-    &:not(.is-hoverable) {
-        .rotate {
-            i {
-                @include simple_transition();
-                transform: rotate(90deg);
-            }
-        }
+    &:after {
+      top: 6.3px !important;
+      left: 3px !important;
+      width: 10px;
+      height: 12px;
+      border: none !important;
+      background: transparent
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-prefix='fas' data-icon='check' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-5x'%3E%3Cpath fill='%23ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E")
+        center center / 8px 8px no-repeat;
+      transform: scale(1) translateY(0px) translateX(0px) rotate(0deg) !important;
+      transition: all 0.3s ease-in-out;
     }
-
-    .dropdown-item.active-item {
-        background-color: #F5F8FA;
-
-        p, i {
-            color: #1D2A3B;
-        }
+    &:hover,
+    &:focus {
+      &:before {
+        border-color: $input-active-color !important;
+      }
     }
-
-    .dropdown-item {
-        margin-left: 10px;
-        margin-right: 10px;
-        cursor: pointer;
-
-        i {
-            margin-right: 8px;
-        }
-        p, i {
-            color: #526384;
-            display: inline-block;
-        }
-
-        p {
-            margin-top: 0;
-            margin-bottom: 0;
-        }
-
-        > * {
-            -webkit-touch-callout: none; /* iOS Safari */
-            -webkit-user-select: none; /* Safari */
-            -khtml-user-select: none; /* Konqueror HTML */
-            -moz-user-select: none; /* Old versions of Firefox */
-            -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-        }
-
-        &:hover {
-            background-color: #F5F8FA;
-            p, i {
-                color: $img-main-color;
-            }
+    &:before,
+    &:after {
+      outline: 0 !important;
+    }
+  }
+  &:hover {
+    & + label {
+      color: $input-radio-color-active-label;
+      &:before {
+        border-color: $input-active-color !important;
+      }
+      &:after {
+        border-color: $white !important;
+      }
+    }
+    &:not([disabled]) {
+      & + label {
+        &:before {
+          border-color: $input-active-color !important;
         }
+      }
+    }
+  }
+  &:checked + label {
+    color: $input-radio-color-active-label;
+    &:before {
+      border: 1px solid $input-active-color;
+      background-color: $input-active-color;
+      transition: all 0.3s ease-in-out;
+    }
+    &:after {
+      left: 7px;
+      top: 8px;
+      transition: all 0.3s ease-in-out;
     }
+  }
+}
 
-    .dropdown-content {
+.wz-img-manager .field {
+  &__row {
+    min-width: 100%;
+    margin: 0 0 10px;
+  }
+  &--nowrap {
+    display: inline-block;
+    width: auto;
+    min-width: 0;
+    margin: 0 10px 10px 0;
+    .field {
+      &__row {
+        width: auto;
+        display: inline-block;
+        margin: 0;
+      }
+    }
+  }
+  &.alone {
+    .is-checkradio[type='checkbox'] {
+      & + label {
+        padding: 0;
         &:before {
-            content: '';
-            display: block;
-            position: absolute;
-            bottom: 100%;
-            left: 90%;
-            transform: translateX(-50%) translateY(5px);
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 0 6px 8px 6px;
-            border-color: transparent transparent #fff transparent;
-            z-index: 2;
+          border-width: 1px;
+          width: 16px;
+          height: 16px;
+          border-radius: 2px;
         }
+      }
+      &:checked + label {
         &:after {
-            content: '';
-            display: block;
-            position: absolute;
-            bottom: 100%;
-            left: 90%;
-            transform: translateX(-50%) translateY(4px);
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 0 6px 8px 6px;
-            border-color: transparent transparent #dddddd transparent;
-            opacity: 0.5;
-            z-index: 1;
+          top: 7px;
+          transform: scale(1.1) translateY(1px) translateX(6px) rotate(45deg);
         }
+      }
     }
-
-    .dropdown-menu {
-        top: 80%;
-    }
+  }
 }
-
-.dropdownWizi:not(.is-hoverable) {
-    cursor: not-allowed;
-}// .pexels-lib
+// .pexels-lib
 //.wz-img-manager useful to keep the css priority
 .wz-img-manager .pexels-lib {
   width: 100%;
@@ -3137,66 +3082,121 @@ image-cropper {
   padding: 0;
   background-color: transparent;
 }
-$default-color-p-alert: #1e5568;
-$success-color-p-alert: #11552e;
-$warning-color-p-alert: #3a0505;
-$primary-button: #e95656;
-$link-color: #52aecd;
-$green-color: #2ecc71;
+.wz-img-manager .dropdownWizi {
+    padding: 10px;
 
-.wz-alert {
-  width: 100%;
-  background-color: transparentize($link-color, 0.85);
-  color: $link-color;
-  border-radius: 3px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding: 20px;
-  &.success {
-    background-color: transparentize($green-color, 0.85);
-    p {
-      color: $success-color-p-alert;
-      > * {
-        color: $success-color-p-alert;
-      }
+    &.is-hoverable {
+        .rotate {
+            i {
+                @include simple_transition();
+                transform: rotate(90deg);
+                cursor: pointer;
+            }
+        }
+        &:hover,
+        &:active {
+            .rotate:not(.rotate--disable) {
+                i {
+                    @include simple_transition();
+                    transform: rotate(0deg);
+                }
+            }
+        }
     }
-    i {
-      color: $green-color;
+
+    &:not(.is-hoverable) {
+        .rotate {
+            i {
+                @include simple_transition();
+                transform: rotate(90deg);
+            }
+        }
     }
-  }
-  &.warning {
-    background-color: transparentize($primary-button, 0.85);
-    p {
-      color: $warning-color-p-alert;
-      > * {
-        color: $warning-color-p-alert;
-      }
+
+    .dropdown-item.active-item {
+        background-color: #F5F8FA;
+
+        p, i {
+            color: #1D2A3B;
+        }
     }
-    i {
-      color: $primary-button;
+
+    .dropdown-item {
+        margin-left: 10px;
+        margin-right: 10px;
+        cursor: pointer;
+
+        i {
+            margin-right: 8px;
+        }
+        p, i {
+            color: #526384;
+            display: inline-block;
+        }
+
+        p {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        > * {
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+        }
+
+        &:hover {
+            background-color: #F5F8FA;
+            p, i {
+                color: $img-main-color;
+            }
+        }
     }
-  }
-  p {
-    width: 100%;
-    font-size: rem(14);
-    line-height: rem(25);
-    margin: 0;
-    padding: 0;
-    color: $default-color-p-alert;
-    > * {
-      color: $default-color-p-alert;
+
+    .dropdown-content {
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            bottom: 100%;
+            left: 90%;
+            transform: translateX(-50%) translateY(5px);
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 6px 8px 6px;
+            border-color: transparent transparent #fff transparent;
+            z-index: 2;
+        }
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            bottom: 100%;
+            left: 90%;
+            transform: translateX(-50%) translateY(4px);
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 6px 8px 6px;
+            border-color: transparent transparent #dddddd transparent;
+            opacity: 0.5;
+            z-index: 1;
+        }
+    }
+
+    .dropdown-menu {
+        top: 80%;
     }
-  }
-  i {
-    width: auto;
-    margin: 0 10px 0 0;
-    color: inherit;
-    font-size: rem(14);
-    line-height: rem(25);
-  }
 }
-.wz-img-manager .img-editor {
+
+.dropdownWizi:not(.is-hoverable) {
+    cursor: not-allowed;
+}.wz-img-manager .img-editor {
     &__scroll {
         position: relative;
         height: 100%;