@wizishop/img-manager 15.0.2 → 15.0.3
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.
- package/esm2020/lib/components/pexels-lib/pexels-lib.component.mjs +8 -7
- package/esm2020/lib/components/upload-list/upload-list.component.mjs +3 -3
- package/esm2020/lib/services/pexels.service.mjs +2 -2
- package/fesm2015/wizishop-img-manager.mjs +7 -7
- package/fesm2015/wizishop-img-manager.mjs.map +1 -1
- package/fesm2020/wizishop-img-manager.mjs +7 -7
- package/fesm2020/wizishop-img-manager.mjs.map +1 -1
- package/package.json +1 -1
- package/wizishop-img-manager-15.0.3.tgz +0 -0
- package/wz-img-manager.scss +153 -144
- package/wizishop-img-manager-15.0.2.tgz +0 -0
package/package.json
CHANGED
|
Binary file
|
package/wz-img-manager.scss
CHANGED
|
@@ -787,12 +787,151 @@ $button-focus-border-color: $primary-button-hover !default;
|
|
|
787
787
|
$button-disabled-border-color: $primary-button-hover !default;
|
|
788
788
|
|
|
789
789
|
$tag-radius: rem(20px)!default;
|
|
790
|
+
//.wz-img-manager useful to keep the css priority
|
|
791
|
+
.wz-img-manager .canva-btn {
|
|
792
|
+
background-color: $img-main-color;
|
|
793
|
+
border: 2px solid $img-main-color;
|
|
794
|
+
padding: 0;
|
|
795
|
+
height: fit-content;
|
|
796
|
+
color: white;
|
|
797
|
+
padding-left: rem(9);
|
|
798
|
+
transition: .3s ease;
|
|
799
|
+
margin: 0!important;
|
|
800
|
+
&:hover, &:focus {
|
|
801
|
+
border-color: darken($img-main-color, 15%);
|
|
802
|
+
}
|
|
803
|
+
> span {
|
|
804
|
+
&:first-child {
|
|
805
|
+
z-index: 2;
|
|
806
|
+
position: relative;
|
|
807
|
+
transform: translateX(7px);
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
&__logo {
|
|
811
|
+
z-index: 1;
|
|
812
|
+
}
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.wz-img-manager .canva-btn .btnLoadingAnnimation {
|
|
816
|
+
background-color: $img-main-color;
|
|
817
|
+
cursor: not-allowed;
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
.wz-img-manager .canva.dropdown {
|
|
821
|
+
z-index: 9999;
|
|
822
|
+
.dropdown-menu {
|
|
823
|
+
display: none!important;
|
|
824
|
+
margin-top: 10px!important;
|
|
825
|
+
&:before {
|
|
826
|
+
content: '';
|
|
827
|
+
display: block;
|
|
828
|
+
position: absolute;
|
|
829
|
+
bottom: 100%;
|
|
830
|
+
left: 0;
|
|
831
|
+
width: 100%;
|
|
832
|
+
height: 10px;
|
|
833
|
+
}
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.displayDropDownMenu {
|
|
837
|
+
display: block!important;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
.dropdown-menu.dropDownShadow {
|
|
841
|
+
padding-bottom: 0;
|
|
842
|
+
padding-top: 0;
|
|
843
|
+
margin-top: 1px;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.dropdown-menu {
|
|
847
|
+
min-width: 300px;
|
|
848
|
+
width: 300px;
|
|
849
|
+
|
|
850
|
+
.dropdown-content {
|
|
851
|
+
padding-top: 0px;
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
.dropdown-item {
|
|
855
|
+
color: $img-grey-color;
|
|
856
|
+
display: flex;
|
|
857
|
+
justify-content: space-between;
|
|
858
|
+
align-items: center;
|
|
859
|
+
padding: 12px 20px;
|
|
860
|
+
margin: 0 0 5px;
|
|
861
|
+
&:last-child {
|
|
862
|
+
margin: 0;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
p {
|
|
866
|
+
margin: 0;
|
|
867
|
+
line-height: rem(16);
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
p:first-child {
|
|
871
|
+
color: #1D2A3B;
|
|
872
|
+
font-size: rem(14);
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
p:last-child {
|
|
876
|
+
color: #526384;
|
|
877
|
+
font-size: rem(14);
|
|
878
|
+
}
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
.dropdown-item:hover {
|
|
882
|
+
background-color: whitesmoke;
|
|
883
|
+
cursor: pointer;
|
|
884
|
+
color: black;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
.dropdown-item.expectedSizes {
|
|
888
|
+
font-weight: 500;
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
.dropdownTitle {
|
|
892
|
+
font-size: 14px;
|
|
893
|
+
background-color: $img-main-color;
|
|
894
|
+
padding: rem(9.5) 0;
|
|
895
|
+
text-align: center;
|
|
896
|
+
|
|
897
|
+
p {
|
|
898
|
+
font-size: 14px;
|
|
899
|
+
color: white;
|
|
900
|
+
margin: 0;
|
|
901
|
+
font-weight: 500;
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.infoItem {
|
|
906
|
+
padding: 18px 20px 11px 20px;
|
|
907
|
+
line-height: 1.5;
|
|
908
|
+
font-weight: 500;
|
|
909
|
+
|
|
910
|
+
p {
|
|
911
|
+
margin: 0;
|
|
912
|
+
font-size: rem(16);
|
|
913
|
+
line-height: rem(19);
|
|
914
|
+
font-weight: 500;
|
|
915
|
+
}
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
.dropdown-item-wrapper {
|
|
919
|
+
border: 1px solid #DEE2ED;
|
|
920
|
+
border-radius: 3px;
|
|
921
|
+
margin: 0 20px 5px 20px;
|
|
922
|
+
}
|
|
923
|
+
}
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.noTooltip .tooltip.is-tooltip-left:hover::before, .noTooltip .tooltip.is-tooltip-left:hover:not(.is-loading)::after {
|
|
927
|
+
display: none;
|
|
928
|
+
}
|
|
790
929
|
.wz-img-manager .images-view {
|
|
791
930
|
text-align: left;
|
|
792
931
|
|
|
793
932
|
&.fullSize {
|
|
794
933
|
& + .images-view__scroll {
|
|
795
|
-
max-height: 1160px;
|
|
934
|
+
max-height: 1160px!important;
|
|
796
935
|
}
|
|
797
936
|
}
|
|
798
937
|
|
|
@@ -803,13 +942,16 @@ $tag-radius: rem(20px)!default;
|
|
|
803
942
|
|
|
804
943
|
&--full {
|
|
805
944
|
max-height: calc(100vh - 160px)!important;
|
|
945
|
+
height: calc(100vh - 160px)!important;
|
|
806
946
|
min-height: calc(100vh - 160px) !important;
|
|
807
947
|
}
|
|
808
948
|
|
|
809
949
|
&--smallDisplay {
|
|
810
950
|
max-height: 275px!important;
|
|
951
|
+
height: 275px!important;
|
|
811
952
|
@include media('<tablet') {
|
|
812
953
|
max-height: calc(100vh - 90px)!important;
|
|
954
|
+
height: calc(100vh - 90px)!important;
|
|
813
955
|
min-height: calc(100vh - 90px) !important;
|
|
814
956
|
}
|
|
815
957
|
}
|
|
@@ -995,6 +1137,7 @@ $tag-radius: rem(20px)!default;
|
|
|
995
1137
|
@media screen and (max-width: 768px) {
|
|
996
1138
|
.wz-img-manager .img-tabs__tabsFirst .img-tabs__tabsFirst__list .images-view__scroll {
|
|
997
1139
|
max-height: none!important;
|
|
1140
|
+
height: none!important;
|
|
998
1141
|
|
|
999
1142
|
.ng-scroll-content {
|
|
1000
1143
|
margin: 0 !important;
|
|
@@ -1003,145 +1146,6 @@ $tag-radius: rem(20px)!default;
|
|
|
1003
1146
|
}
|
|
1004
1147
|
}
|
|
1005
1148
|
}
|
|
1006
|
-
//.wz-img-manager useful to keep the css priority
|
|
1007
|
-
.wz-img-manager .canva-btn {
|
|
1008
|
-
background-color: $img-main-color;
|
|
1009
|
-
border: 2px solid $img-main-color;
|
|
1010
|
-
padding: 0;
|
|
1011
|
-
height: fit-content;
|
|
1012
|
-
color: white;
|
|
1013
|
-
padding-left: rem(9);
|
|
1014
|
-
transition: .3s ease;
|
|
1015
|
-
margin: 0!important;
|
|
1016
|
-
&:hover, &:focus {
|
|
1017
|
-
border-color: darken($img-main-color, 15%);
|
|
1018
|
-
}
|
|
1019
|
-
> span {
|
|
1020
|
-
&:first-child {
|
|
1021
|
-
z-index: 2;
|
|
1022
|
-
position: relative;
|
|
1023
|
-
transform: translateX(7px);
|
|
1024
|
-
}
|
|
1025
|
-
}
|
|
1026
|
-
&__logo {
|
|
1027
|
-
z-index: 1;
|
|
1028
|
-
}
|
|
1029
|
-
}
|
|
1030
|
-
|
|
1031
|
-
.wz-img-manager .canva-btn .btnLoadingAnnimation {
|
|
1032
|
-
background-color: $img-main-color;
|
|
1033
|
-
cursor: not-allowed;
|
|
1034
|
-
}
|
|
1035
|
-
|
|
1036
|
-
.wz-img-manager .canva.dropdown {
|
|
1037
|
-
z-index: 9999;
|
|
1038
|
-
.dropdown-menu {
|
|
1039
|
-
display: none!important;
|
|
1040
|
-
margin-top: 10px!important;
|
|
1041
|
-
&:before {
|
|
1042
|
-
content: '';
|
|
1043
|
-
display: block;
|
|
1044
|
-
position: absolute;
|
|
1045
|
-
bottom: 100%;
|
|
1046
|
-
left: 0;
|
|
1047
|
-
width: 100%;
|
|
1048
|
-
height: 10px;
|
|
1049
|
-
}
|
|
1050
|
-
}
|
|
1051
|
-
|
|
1052
|
-
.displayDropDownMenu {
|
|
1053
|
-
display: block!important;
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
.dropdown-menu.dropDownShadow {
|
|
1057
|
-
padding-bottom: 0;
|
|
1058
|
-
padding-top: 0;
|
|
1059
|
-
margin-top: 1px;
|
|
1060
|
-
}
|
|
1061
|
-
|
|
1062
|
-
.dropdown-menu {
|
|
1063
|
-
min-width: 300px;
|
|
1064
|
-
width: 300px;
|
|
1065
|
-
|
|
1066
|
-
.dropdown-content {
|
|
1067
|
-
padding-top: 0px;
|
|
1068
|
-
}
|
|
1069
|
-
|
|
1070
|
-
.dropdown-item {
|
|
1071
|
-
color: $img-grey-color;
|
|
1072
|
-
display: flex;
|
|
1073
|
-
justify-content: space-between;
|
|
1074
|
-
align-items: center;
|
|
1075
|
-
padding: 12px 20px;
|
|
1076
|
-
margin: 0 0 5px;
|
|
1077
|
-
&:last-child {
|
|
1078
|
-
margin: 0;
|
|
1079
|
-
}
|
|
1080
|
-
|
|
1081
|
-
p {
|
|
1082
|
-
margin: 0;
|
|
1083
|
-
line-height: rem(16);
|
|
1084
|
-
}
|
|
1085
|
-
|
|
1086
|
-
p:first-child {
|
|
1087
|
-
color: #1D2A3B;
|
|
1088
|
-
font-size: rem(14);
|
|
1089
|
-
}
|
|
1090
|
-
|
|
1091
|
-
p:last-child {
|
|
1092
|
-
color: #526384;
|
|
1093
|
-
font-size: rem(14);
|
|
1094
|
-
}
|
|
1095
|
-
}
|
|
1096
|
-
|
|
1097
|
-
.dropdown-item:hover {
|
|
1098
|
-
background-color: whitesmoke;
|
|
1099
|
-
cursor: pointer;
|
|
1100
|
-
color: black;
|
|
1101
|
-
}
|
|
1102
|
-
|
|
1103
|
-
.dropdown-item.expectedSizes {
|
|
1104
|
-
font-weight: 500;
|
|
1105
|
-
}
|
|
1106
|
-
|
|
1107
|
-
.dropdownTitle {
|
|
1108
|
-
font-size: 14px;
|
|
1109
|
-
background-color: $img-main-color;
|
|
1110
|
-
padding: rem(9.5) 0;
|
|
1111
|
-
text-align: center;
|
|
1112
|
-
|
|
1113
|
-
p {
|
|
1114
|
-
font-size: 14px;
|
|
1115
|
-
color: white;
|
|
1116
|
-
margin: 0;
|
|
1117
|
-
font-weight: 500;
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1120
|
-
|
|
1121
|
-
.infoItem {
|
|
1122
|
-
padding: 18px 20px 11px 20px;
|
|
1123
|
-
line-height: 1.5;
|
|
1124
|
-
font-weight: 500;
|
|
1125
|
-
|
|
1126
|
-
p {
|
|
1127
|
-
margin: 0;
|
|
1128
|
-
font-size: rem(16);
|
|
1129
|
-
line-height: rem(19);
|
|
1130
|
-
font-weight: 500;
|
|
1131
|
-
}
|
|
1132
|
-
}
|
|
1133
|
-
|
|
1134
|
-
.dropdown-item-wrapper {
|
|
1135
|
-
border: 1px solid #DEE2ED;
|
|
1136
|
-
border-radius: 3px;
|
|
1137
|
-
margin: 0 20px 5px 20px;
|
|
1138
|
-
}
|
|
1139
|
-
}
|
|
1140
|
-
}
|
|
1141
|
-
|
|
1142
|
-
.noTooltip .tooltip.is-tooltip-left:hover::before, .noTooltip .tooltip.is-tooltip-left:hover:not(.is-loading)::after {
|
|
1143
|
-
display: none;
|
|
1144
|
-
}
|
|
1145
1149
|
.wz-img-manager .img-editor {
|
|
1146
1150
|
&__scroll {
|
|
1147
1151
|
position: relative;
|
|
@@ -1149,13 +1153,16 @@ $tag-radius: rem(20px)!default;
|
|
|
1149
1153
|
|
|
1150
1154
|
&--full {
|
|
1151
1155
|
max-height: calc(100vh - 90px)!important;
|
|
1156
|
+
height: calc(100vh - 90px)!important;
|
|
1152
1157
|
min-height: calc(100vh - 90px) !important;
|
|
1153
1158
|
}
|
|
1154
1159
|
|
|
1155
1160
|
&--smallDisplay {
|
|
1156
1161
|
max-height: 275px!important;
|
|
1162
|
+
height: 275px!important;
|
|
1157
1163
|
@include media('<tablet') {
|
|
1158
1164
|
max-height: calc(100vh - 90px)!important;
|
|
1165
|
+
height: calc(100vh - 90px)!important;
|
|
1159
1166
|
min-height: calc(100vh - 90px) !important;
|
|
1160
1167
|
}
|
|
1161
1168
|
}
|
|
@@ -2187,12 +2194,13 @@ $tag-radius: rem(20px)!default;
|
|
|
2187
2194
|
}
|
|
2188
2195
|
}
|
|
2189
2196
|
|
|
2190
|
-
|
|
2197
|
+
&__scroll {
|
|
2191
2198
|
position: relative;
|
|
2192
2199
|
height: 100%;
|
|
2193
2200
|
|
|
2194
2201
|
&--smallDisplay {
|
|
2195
2202
|
max-height: 260px!important;
|
|
2203
|
+
height: 260px!important;
|
|
2196
2204
|
|
|
2197
2205
|
.upload-list__box {
|
|
2198
2206
|
margin-bottom: 20px;
|
|
@@ -2201,6 +2209,7 @@ $tag-radius: rem(20px)!default;
|
|
|
2201
2209
|
|
|
2202
2210
|
&--window {
|
|
2203
2211
|
max-height: none;
|
|
2212
|
+
height: none;
|
|
2204
2213
|
}
|
|
2205
2214
|
|
|
2206
2215
|
.ng-scroll-content {
|
|
@@ -2209,7 +2218,7 @@ $tag-radius: rem(20px)!default;
|
|
|
2209
2218
|
min-width: calc(100% - 1rem) !important;
|
|
2210
2219
|
width: calc(100% - 1rem) !important;
|
|
2211
2220
|
}
|
|
2212
|
-
}
|
|
2221
|
+
}
|
|
2213
2222
|
|
|
2214
2223
|
&__box {
|
|
2215
2224
|
margin: 0 0.8rem 30px 0.3rem;
|
|
@@ -2312,7 +2321,7 @@ $tag-radius: rem(20px)!default;
|
|
|
2312
2321
|
}
|
|
2313
2322
|
|
|
2314
2323
|
@media screen and (max-width: 768px) {
|
|
2315
|
-
|
|
2324
|
+
.wz-img-manager .img-tabs__tabsFirst .img-tabs__tabsFirst__list .upload-list__scroll {
|
|
2316
2325
|
max-height: none!important;
|
|
2317
2326
|
|
|
2318
2327
|
.ng-scroll-content {
|
|
@@ -2320,7 +2329,7 @@ $tag-radius: rem(20px)!default;
|
|
|
2320
2329
|
min-width: 100%!important;
|
|
2321
2330
|
width: 100%!important;
|
|
2322
2331
|
}
|
|
2323
|
-
}
|
|
2332
|
+
}
|
|
2324
2333
|
}
|
|
2325
2334
|
.mosaic {
|
|
2326
2335
|
width: 100%;
|
|
Binary file
|