@wizishop/img-manager 0.2.52 → 0.2.53

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wizishop/img-manager",
3
- "version": "0.2.52",
3
+ "version": "0.2.53",
4
4
  "description": "The best and the most beautiful image manager.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1784,139 +1784,212 @@ $button-disabled-border-color: $primary-button-hover !default;
1784
1784
  $tag-radius: rem(20px)!default;
1785
1785
  image-cropper {
1786
1786
  max-height: 60vh;
1787
- }//.wz-img-manager useful to keep the css priority
1788
- .wz-img-manager .img-tabs {
1789
- background-color: white;
1790
- padding-left: 0;
1791
- padding-right: 0;
1792
- padding-top: 0;
1793
-
1794
- .tabs {
1795
- margin: 0;
1796
- display: flex;
1797
- align-items: center;
1798
- overflow: visible!important;
1787
+ }.wz-img-manager .images-view {
1788
+ text-align: left;
1799
1789
 
1800
- &--notWindow {
1801
- padding: rem(20) rem(30) rem(20);
1802
- margin-left: -1.075rem;
1803
- margin-right: -0.575rem;
1804
- margin-bottom: 0;
1790
+ &.fullSize {
1791
+ & + .images-view__scroll {
1792
+ max-height: 1160px;
1793
+ }
1805
1794
  }
1806
1795
 
1807
- ul {
1808
- width: auto;
1809
- border: none;
1810
- li {
1811
- a {
1812
- padding: 0 0 rem(10);
1813
- margin: 0 rem(30) 0 0;
1814
- position: relative;
1815
- line-height: rem(16);
1816
- border: none;
1817
- color: $secondary-color;
1818
- transition: color .3s ease;
1819
- font-size: rem(14);
1820
- font-weight: 400;
1796
+ &__scroll {
1797
+ position: relative;
1798
+ height: 100%;
1799
+ z-index: 1;
1800
+
1801
+ &--full {
1802
+ max-height: calc(100vh - 160px)!important;
1803
+ min-height: calc(100vh - 160px) !important;
1821
1804
  }
1822
- &.is-active {
1823
- a {
1824
- color: $main-text;
1825
- &:after {
1826
- content: '';
1827
- display: block;
1828
- position: absolute;
1829
- width: 100%;
1830
- height: 2px;
1831
- background-color: $img-main-color;
1832
- bottom: 0;
1833
- left: 0;
1834
- }
1835
- }
1805
+
1806
+ &--smallDisplay {
1807
+ max-height: 275px!important;
1836
1808
  }
1837
- }
1838
- }
1839
- }
1840
1809
 
1841
- &__canva {
1842
- margin: 0 0 0 rem(30);
1843
- }
1810
+ &--smallUploadDisplay {
1811
+ max-height: 230px!important;
1812
+ }
1844
1813
 
1845
- &__tabsEdit {
1846
- > .column {
1847
- padding: 0!important;
1848
- }
1849
- }
1814
+ &--window {
1815
+ max-height: unset!important;
1816
+ }
1850
1817
 
1851
- &__tabsFirst {
1852
- height: 100vh;
1818
+ &--hide {
1819
+ &--mosaic {
1820
+ min-height: 100px !important;
1821
+ &--small {
1822
+ min-height: unset !important;
1823
+ }
1824
+ }
1825
+ &--table {
1826
+ min-height: 170px !important;
1827
+ }
1853
1828
 
1854
- &--window {
1855
- height: auto;
1856
- display: flex;
1857
- justify-content: flex-start;
1858
- }
1829
+ }
1859
1830
 
1860
- &__upload {
1861
- margin: rem(28) 0 0 0;
1862
- padding: 0;
1863
- max-width: 33.3%;
1831
+ .ng-scroll-content {
1832
+ min-width: calc(100% - 1rem) !important;
1833
+ width: calc(100% - 1rem) !important;
1834
+ }
1864
1835
  }
1865
1836
 
1866
- &__list {
1867
- padding: 0;
1868
- margin: rem(28) 0 0 rem(60);
1869
- &--upload {
1870
- margin: rem(28) 0 0 rem(48);
1837
+ &__container {
1838
+ display: flex;
1839
+ justify-content: space-between;
1840
+ margin: 0 0 rem(20);
1841
+
1842
+ > div {
1843
+ display: flex;
1844
+ align-items: center;
1845
+ .mainColor {
1846
+ margin: 0;
1847
+ }
1871
1848
  }
1872
- //height: calc(100vh - 70px);
1873
- //height: 100vh;
1874
- }
1875
- }
1876
1849
 
1877
- @media screen and (max-width: 768px) {
1878
- .img-tabs__tabsFirst__upload {
1879
- margin-right: 0;
1880
- margin-bottom: 0;
1881
- margin-top: 20px!important;
1882
- }
1883
- }
1850
+ &--window {
1851
+ margin: rem(30) 0 rem(20);
1852
+ }
1884
1853
 
1885
- &__tabsSecond {
1886
- min-height: 100vh !important;
1887
- margin-left: 0px;
1888
- margin-right: 0px;
1889
- margin-bottom: 0px;
1854
+ &--uploadTab {
1855
+ margin: 0 0 rem(20);
1856
+ }
1890
1857
 
1891
- .column {
1892
- padding: 0.75rem 0 0.75rem 0;
1858
+ &__boxAction {
1859
+ width: 525px;
1860
+ overflow: visible;
1861
+ display: flex;
1862
+ position: relative;
1863
+ justify-content: flex-end;
1864
+ margin-right: 13px;
1865
+ height: 40px;
1866
+ align-items: center;
1867
+ transform: translate(-41px,-3px);
1868
+
1869
+ &__confirmSup {
1870
+ display: flex;
1871
+ justify-content: space-between;
1872
+ align-items: center;
1873
+ border-left: solid 1px #d8d8d8;
1874
+ color: $img-grey-color;
1875
+ padding-left: 1rem;
1876
+ width: 0;
1877
+ position: absolute;
1878
+ opacity: 0;
1879
+ transition: 0s;
1880
+ visibility: hidden;
1881
+ z-index: 2;
1882
+
1883
+ &--visible {
1884
+ max-width: unset;
1885
+ width: auto;
1886
+ opacity: 1;
1887
+ transition: 0s;
1888
+ visibility: visible;
1889
+
1890
+ p {
1891
+ transition: left .3s ease-in-out;
1892
+ right: 100%;
1893
+ left: auto;
1894
+ white-space: nowrap;
1895
+ margin-right: 30px;
1896
+ }
1897
+ }
1898
+
1899
+ &__cancel {
1900
+ margin-right: 14px;
1901
+ background-color: white;
1902
+ border-color: #dbdbdb;
1903
+ color: $img-main-text;
1904
+ }
1905
+
1906
+ &__text {
1907
+ font-size: 14px;
1908
+ position: absolute;
1909
+ left: -126%;
1910
+ transition: font-size .3s ease-in-out, left .3s ease-in-out;
1911
+ }
1912
+ }
1913
+
1914
+ &__delBtn {
1915
+ i {
1916
+ margin-right: 13px!important;
1917
+ }
1918
+ }
1919
+
1920
+ &__import {
1921
+ margin-right: 13px;
1922
+ i {
1923
+ margin-right: 13px!important;
1924
+ }
1925
+ }
1926
+ }
1927
+
1928
+ &__buttonBox {
1929
+ margin: 0;
1930
+ width: rem(40);
1931
+ height: rem(40);
1932
+ border: solid $img-light-white-color;
1933
+ border-width: 1px 0 1px 1px;
1934
+
1935
+ border-radius: 3px 0 0 3px;
1936
+ outline: none!important;
1937
+
1938
+ p {
1939
+ margin-top: 0;
1940
+ margin-bottom: 0;
1941
+ height: 40px;
1942
+ &:nth-child(2) {
1943
+ border: solid $img-light-white-color;
1944
+ border-width: 1px 1px 1px 0;
1945
+ transform: translateY(-1px);
1946
+ border-radius: 0 3px 3px 0;
1947
+ }
1948
+ button {
1949
+ height: 38px;
1950
+ }
1951
+ }
1952
+
1953
+ .actifDisplayed {
1954
+ color:$img-main-color;
1955
+ }
1956
+
1957
+ i {
1958
+ margin: 0;
1959
+ }
1960
+ }
1961
+
1962
+ &__cards {
1963
+ display: flex;
1964
+ justify-content: space-between;
1965
+ flex-wrap: wrap;
1966
+ align-items: center;
1967
+ padding-top: 30px;
1968
+ margin-right: calc(0.8rem - 20px);
1969
+ margin-left: 0.3rem;
1970
+ margin-bottom: 30px;
1971
+ }
1893
1972
  }
1894
- }
1895
1973
 
1896
- &__tabsThird {
1897
- min-height: 100vh !important;
1898
- margin-left: 0px;
1899
- margin-right: 0px;
1900
- margin-bottom: 0px;
1974
+ &--pexels {
1975
+ margin-top: -30px;
1976
+ }
1901
1977
 
1902
- .column {
1903
- padding: 0.75rem 0 0.75rem 0;
1978
+ .subHeaderActions .button i {
1979
+ margin-right: 0;
1904
1980
  }
1905
- }
1906
1981
  }
1907
1982
 
1908
1983
  @media screen and (max-width: 768px) {
1909
- .img-tabs__tabsFirst {
1910
- margin-top: 0;
1911
- }
1912
-
1913
- .img-tabs__tabsFirst--small {
1914
- height: 270px;
1915
- }
1916
- }
1984
+ .wz-img-manager .img-tabs__tabsFirst .img-tabs__tabsFirst__list .images-view__scroll {
1985
+ max-height: none!important;
1917
1986
 
1918
- .wz-img-manager .img-tabs .columns.img-tabs__tabsFirst {
1919
- margin: 0;
1987
+ .ng-scroll-content {
1988
+ margin: 0 !important;
1989
+ min-width: 100%!important;
1990
+ width: 100%!important;
1991
+ }
1992
+ }
1920
1993
  }
1921
1994
  .img-editor__infoSection__propertySEO__tooltips {
1922
1995
  i {
@@ -1935,7 +2008,8 @@ image-cropper {
1935
2008
  align-items: center;
1936
2009
 
1937
2010
  &--visible {
1938
- height: 200px;
2011
+ height: 250px;
2012
+ margin: 0;
1939
2013
  }
1940
2014
  }
1941
2015
 
@@ -1953,10 +2027,10 @@ image-cropper {
1953
2027
  background: white;
1954
2028
  border-radius: 4px;
1955
2029
  overflow-x: auto;
2030
+ align-items: flex-end!important;
1956
2031
  }
1957
2032
 
1958
2033
  .img_box {
1959
- padding: 20px 10px;
1960
2034
  background-color: white;
1961
2035
  display: flex;
1962
2036
  flex-direction: row;
@@ -1965,13 +2039,8 @@ image-cropper {
1965
2039
  cursor: move;
1966
2040
  flex-grow: 1;
1967
2041
  flex-basis: 0;
1968
- max-width: 150px;
1969
- width: 150px;
1970
2042
  justify-content: center;
1971
2043
  height: fit-content;
1972
- }
1973
-
1974
- .cdk-drag.img_box {
1975
2044
  position: relative;
1976
2045
  padding: 0;
1977
2046
  margin: 0 20px 0 0;
@@ -1983,8 +2052,8 @@ image-cropper {
1983
2052
  padding-top: 100%;
1984
2053
  }
1985
2054
  &:first-child {
1986
- width: 250px;
1987
- max-width: 250px;
2055
+ width: 200px;
2056
+ max-width: 200px;
1988
2057
  }
1989
2058
  img {
1990
2059
  position: absolute;
@@ -3107,212 +3176,307 @@ $green-color: #2ecc71;
3107
3176
 
3108
3177
  .dropdownWizi:not(.is-hoverable) {
3109
3178
  cursor: not-allowed;
3110
- }.wz-img-manager .images-view {
3111
- text-align: left;
3112
-
3113
- &.fullSize {
3114
- & + .images-view__scroll {
3115
- max-height: 1160px;
3116
- }
3117
- }
3118
-
3179
+ }.wz-img-manager .img-editor {
3119
3180
  &__scroll {
3120
3181
  position: relative;
3121
3182
  height: 100%;
3122
- z-index: 1;
3123
3183
 
3124
3184
  &--full {
3125
- max-height: calc(100vh - 160px)!important;
3126
- min-height: calc(100vh - 160px) !important;
3185
+ max-height: calc(100vh - 90px)!important;
3186
+ min-height: calc(100vh - 90px) !important;
3127
3187
  }
3128
3188
 
3129
3189
  &--smallDisplay {
3130
3190
  max-height: 275px!important;
3131
3191
  }
3132
3192
 
3133
- &--smallUploadDisplay {
3134
- max-height: 230px!important;
3135
- }
3193
+ &--window {
3194
+ max-height: none;
3195
+ }
3196
+
3197
+ .ng-scroll-content {
3198
+ margin-left: 0 !important;
3199
+ margin-right: 0 !important;
3200
+ min-width: calc(100% - 1rem) !important;
3201
+ width: calc(100% - 1rem) !important;
3202
+ }
3203
+ }
3204
+
3205
+ .columns {
3206
+ margin-right: 0.8rem;
3207
+ margin-left: rem(12);
3208
+ margin-top: 12px;
3209
+ margin-bottom: 0;
3210
+ width: calc(100% + 11px);
3211
+
3212
+ .column {
3213
+ padding-top: 0;
3214
+ padding-bottom: 0px;
3215
+ }
3216
+ }
3217
+
3218
+ &__head-container {
3219
+ display: flex;
3220
+ justify-content: flex-end;
3221
+ align-items: center;
3222
+ margin: 30px 30px 20px 0;
3223
+
3224
+ &__btnGroup {
3225
+ margin-right: 13px;
3226
+ opacity: 0;
3227
+ visibility: hidden;
3228
+ transition: opacity .3s ease-in-out;
3229
+
3230
+ &__visible {
3231
+ opacity: 1;
3232
+ visibility: visible;
3233
+ }
3234
+
3235
+ &__removeBtn {
3236
+ margin-right: 13px;
3237
+ }
3238
+ }
3239
+
3240
+ &__close {
3241
+ cursor: pointer;
3242
+ font-size: 14px;
3243
+ color: $img-grey-color;
3244
+ line-height: 40px;
3245
+ }
3246
+ }
3247
+
3248
+ &__container {
3249
+ padding: 0.75rem!important;
3250
+ display:flex;
3251
+ justify-content: center;
3252
+ align-items: center;
3253
+ background-color: $img-gray-background;
3254
+ margin: 0;
3255
+ transform: translateY(-16px);
3256
+
3257
+ &__toolsContainer {
3258
+ display: flex;
3259
+ justify-content: center;
3260
+ align-items: center;
3261
+ margin-bottom: 50px;
3262
+
3263
+ &__tool {
3264
+ color: $img-second-color;
3265
+ margin-right: 30px;
3266
+ text-align: center;
3267
+ cursor: pointer;
3268
+
3269
+ p {
3270
+ margin: 0!important;
3271
+ color: $img-main-text;
3272
+ font-size: rem(12);
3273
+ line-height: rem(14);
3274
+ }
3275
+
3276
+ i {
3277
+ font-size: rem(18);
3278
+ margin: 0 0 10px;
3279
+ }
3136
3280
 
3137
- &--window {
3138
- max-height: unset!important;
3139
- }
3281
+ &--button {
3282
+ background-color: $img-green-color;
3283
+ color: $img-white!important;
3284
+ padding: 10px;
3285
+ border-radius: 3px;
3286
+ transition: .3s ease;
3287
+ white-space: nowrap;
3288
+ display: flex;
3289
+ justify-content: center;
3290
+ align-items: center;
3291
+ position: absolute;
3292
+ top: 80px;
3293
+ left: 50%;
3294
+ transform: translateX(-50%);
3295
+ height: 35px;
3296
+ margin: 0;
3297
+ &:hover, &:focus {
3298
+ background-color: darken($img-green-color, 15%);
3299
+ color: $img-white!important;
3300
+ }
3301
+ p {
3302
+ color: $white!important;
3303
+ }
3304
+ i {
3305
+ margin: 0 5px 0 0;
3306
+ }
3307
+ }
3308
+ &:hover {
3309
+ color: $img-main-color;
3310
+ }
3140
3311
 
3141
- &--hide {
3142
- &--mosaic {
3143
- min-height: 100px !important;
3144
- &--small {
3145
- min-height: unset !important;
3312
+ > * {
3313
+ -webkit-touch-callout: none; /* iOS Safari */
3314
+ -webkit-user-select: none; /* Safari */
3315
+ -khtml-user-select: none; /* Konqueror HTML */
3316
+ -moz-user-select: none; /* Old versions of Firefox */
3317
+ -ms-user-select: none; /* Internet Explorer/Edge */
3318
+ user-select: none; /* Non-prefixed version, currently
3319
+ supported by Chrome, Edge, Opera and Firefox */
3146
3320
  }
3147
3321
  }
3148
- &--table {
3149
- min-height: 170px !important;
3150
- }
3151
3322
 
3323
+ &__RotationDropdown {
3324
+ min-width: 16rem;
3325
+ }
3152
3326
  }
3153
3327
 
3154
- .ng-scroll-content {
3155
- min-width: calc(100% - 1rem) !important;
3156
- width: calc(100% - 1rem) !important;
3157
- }
3158
- }
3159
-
3160
- &__container {
3161
- display: flex;
3162
- justify-content: space-between;
3163
- margin: 0 0 rem(20);
3164
-
3165
- > div {
3166
- display: flex;
3167
- align-items: center;
3168
- .mainColor {
3169
- margin: 0;
3328
+ &__name {
3329
+ font-size: 16px;
3330
+ max-width: 50%;
3331
+ color: $img-grey-color;
3332
+ text-align: center;
3333
+ white-space: nowrap;
3334
+ overflow: hidden;
3335
+ text-overflow: ellipsis;
3170
3336
  }
3171
- }
3172
3337
 
3173
- &--window {
3174
- margin: rem(30) 0 rem(20);
3338
+ .button {
3339
+ min-height: 35px;
3340
+ background-color: $img-primary-button;
3341
+ border-color: $img-primary-button-hover;
3342
+ color: #ffffff;
3175
3343
  }
3344
+ }
3176
3345
 
3177
- &--uploadTab {
3178
- margin: 0 0 rem(20);
3179
- }
3346
+ &__image-cropper {
3347
+ --cropper-overlay-color: #f5f8fa;
3348
+ //--cropper-outline-color: #a5a5a573;
3349
+ padding-bottom: 30px;
3350
+ }
3180
3351
 
3181
- &__boxAction {
3182
- width: 525px;
3183
- overflow: visible;
3184
- display: flex;
3185
- position: relative;
3186
- justify-content: flex-end;
3187
- margin-right: 13px;
3188
- height: 40px;
3189
- align-items: center;
3190
- transform: translate(-41px,-3px);
3352
+ &__infoSection {
3353
+ font-size: 14px;
3354
+ max-width: 360px;
3355
+ padding: 0;
3356
+ margin: 0 rem(30) 0 0;
3191
3357
 
3192
- &__confirmSup {
3358
+ &__propertyEditable {
3359
+ margin-bottom: 31px;
3360
+ p {
3361
+ margin-bottom: 12px;
3362
+ font-size: 14px;
3363
+ }
3364
+ input, button {
3365
+ width: 100%;
3366
+ height: 40px;
3367
+ border: 1px solid #DEE2ED;
3368
+ border-radius: 3px;
3369
+ color: $img-main-text;
3370
+ padding-left: 20px;
3371
+ padding-right: 20px;
3193
3372
  display: flex;
3194
3373
  justify-content: space-between;
3195
- align-items: center;
3196
- border-left: solid 1px #d8d8d8;
3197
- color: $img-grey-color;
3198
- padding-left: 1rem;
3199
- width: 0;
3200
- position: absolute;
3201
- opacity: 0;
3202
- transition: 0s;
3203
- visibility: hidden;
3204
- z-index: 2;
3205
-
3206
- &--visible {
3207
- max-width: unset;
3208
- width: auto;
3209
- opacity: 1;
3210
- transition: 0s;
3211
- visibility: visible;
3212
-
3213
- p {
3214
- transition: left .3s ease-in-out;
3215
- right: 100%;
3216
- left: auto;
3217
- white-space: nowrap;
3218
- margin-right: 30px;
3219
- }
3220
- }
3374
+ font-size: 14px;
3221
3375
 
3222
- &__cancel {
3223
- margin-right: 14px;
3224
- background-color: white;
3225
- border-color: #dbdbdb;
3226
- color: $img-main-text;
3376
+ &:hover {
3377
+ color: $img-main-color;
3378
+ border-color: $img-main-color;
3227
3379
  }
3380
+ }
3228
3381
 
3229
- &__text {
3230
- font-size: 14px;
3231
- position: absolute;
3232
- left: -126%;
3233
- transition: font-size .3s ease-in-out, left .3s ease-in-out;
3234
- }
3382
+ button {
3383
+ align-items: center;
3384
+ background-color: transparent;
3385
+ cursor: pointer;
3235
3386
  }
3236
3387
 
3237
- &__delBtn {
3238
- i {
3239
- margin-right: 13px!important;
3240
- }
3388
+ &__span, &__input {
3389
+ text-overflow: ellipsis;
3390
+ overflow: hidden;
3391
+ white-space: nowrap;
3241
3392
  }
3242
3393
 
3243
- &__import {
3244
- margin-right: 13px;
3245
- i {
3246
- margin-right: 13px!important;
3247
- }
3394
+ &__span {
3395
+ color: $img-bleu-color;
3396
+ & + i {
3397
+ color: $img-bleu-color;
3398
+ font-weight: 600;
3399
+ }
3248
3400
  }
3249
3401
  }
3250
3402
 
3251
- &__buttonBox {
3252
- margin: 0;
3253
- width: rem(40);
3254
- height: rem(40);
3255
- border: solid $img-light-white-color;
3256
- border-width: 1px 0 1px 1px;
3257
-
3258
- border-radius: 3px 0 0 3px;
3259
- outline: none!important;
3260
-
3403
+ &__property {
3404
+ &:nth-child(3), &:nth-child(4) {
3405
+ margin: 0;
3406
+ }
3261
3407
  p {
3262
- margin-top: 0;
3263
- margin-bottom: 0;
3264
- height: 40px;
3265
- &:nth-child(2) {
3266
- border: solid $img-light-white-color;
3267
- border-width: 1px 1px 1px 0;
3268
- transform: translateY(-1px);
3269
- border-radius: 0 3px 3px 0;
3270
- }
3271
- button {
3272
- height: 38px;
3273
- }
3408
+ font-size: 14px;
3409
+ display: inline-block;
3274
3410
  }
3275
3411
 
3276
- .actifDisplayed {
3277
- color:$img-main-color;
3412
+ .mainColor {
3413
+ margin: 0!important;
3414
+ }
3415
+
3416
+ p:last-child {
3417
+ margin: 0 0 0 10px;
3418
+ color: #526384;
3278
3419
  }
3420
+ }
3279
3421
 
3280
- i {
3422
+ &__titleSEO {
3423
+ margin: 0 0 20px;
3424
+
3425
+ .mainColor {
3426
+ font-size: rem(18);
3427
+ font-weight: 500;
3428
+ }
3429
+ }
3430
+
3431
+ &__propertySEO {
3432
+ margin-bottom: 12px;
3433
+ p {
3434
+ font-size: 14px;
3435
+ display: inline-block;
3281
3436
  margin: 0;
3282
3437
  }
3438
+
3439
+ .mainColor {
3440
+ & ~ p {
3441
+ margin-left: 10px;
3442
+ color: $img-green-color;
3443
+ }
3444
+ }
3283
3445
  }
3284
3446
 
3285
- &__cards {
3286
- display: flex;
3287
- justify-content: space-between;
3288
- flex-wrap: wrap;
3289
- align-items: center;
3290
- padding-top: 30px;
3291
- margin-right: calc(0.8rem - 20px);
3292
- margin-left: 0.3rem;
3293
- margin-bottom: 30px;
3447
+ &__divider {
3448
+ display: block;
3449
+ width: 100%;
3450
+ border-bottom: 2px dashed #EFF1F6;
3451
+ margin: 30px 0;
3294
3452
  }
3295
- }
3296
3453
 
3297
- &--pexels {
3298
- margin-top: -30px;
3454
+ &__actions {
3455
+ height: 35px;
3456
+
3457
+ &__cancel {
3458
+ margin-right: 19px;
3459
+ background-color: white;
3460
+ border-color: #dbdbdb;
3461
+ color: $img-main-text;
3462
+ }
3463
+
3464
+ &__save {
3465
+ padding: 8px 18px;
3466
+ &--disable {
3467
+ cursor: not-allowed;
3468
+ }
3469
+ }
3470
+ }
3299
3471
  }
3300
3472
 
3301
- .subHeaderActions .button i {
3302
- margin-right: 0;
3473
+ .dropdown-menu {
3474
+ left: -50%;
3303
3475
  }
3304
3476
  }
3305
3477
 
3306
- @media screen and (max-width: 768px) {
3307
- .wz-img-manager .img-tabs__tabsFirst .img-tabs__tabsFirst__list .images-view__scroll {
3308
- max-height: none!important;
3309
-
3310
- .ng-scroll-content {
3311
- margin: 0 !important;
3312
- min-width: 100%!important;
3313
- width: 100%!important;
3314
- }
3315
- }
3478
+ .wz-img-manager .marginBottom {
3479
+ margin-bottom: 20px;
3316
3480
  }
3317
3481
  //.wz-img-manager useful to keep the css priority
3318
3482
  .wz-img-manager .upload-list {
@@ -3501,343 +3665,175 @@ $green-color: #2ecc71;
3501
3665
  @mixin loaderDivMixin {
3502
3666
  border-radius: 50%;
3503
3667
  padding: rem(8);
3504
- border: rem(2) solid transparent;
3505
- animation: rotate linear 3.5s infinite;
3506
- }
3507
-
3508
- .loader {
3509
- position: relative;
3510
- margin: rem(75) auto;
3511
- width: rem(150);
3512
- height: rem(150);
3513
- display: block;
3514
- overflow: hidden;
3515
- div {
3516
- height: 100%;
3517
- }
3518
- }
3519
-
3520
- /* loader 1 */
3521
- .loader1,
3522
- .loader1 div {
3523
- @include loaderDivMixin;
3524
- border-top-color: $img-color-loader;
3525
- border-bottom-color: $img-color-loader2;
3526
- }
3527
-
3528
- div:hover {
3529
- animation-play-state: paused;
3530
- }
3531
-
3532
- .loader,
3533
- .loader * {
3534
- will-change: transform;
3535
- }
3536
-
3537
- p {
3538
- margin-top: -50px;
3539
- font-weight: 500;
3540
- }
3541
- }
3542
- .wz-img-manager .img-editor {
3543
- &__scroll {
3544
- position: relative;
3545
- height: 100%;
3546
-
3547
- &--full {
3548
- max-height: calc(100vh - 90px)!important;
3549
- min-height: calc(100vh - 90px) !important;
3550
- }
3551
-
3552
- &--smallDisplay {
3553
- max-height: 275px!important;
3554
- }
3555
-
3556
- &--window {
3557
- max-height: none;
3558
- }
3559
-
3560
- .ng-scroll-content {
3561
- margin-left: 0 !important;
3562
- margin-right: 0 !important;
3563
- min-width: calc(100% - 1rem) !important;
3564
- width: calc(100% - 1rem) !important;
3565
- }
3566
- }
3567
-
3568
- .columns {
3569
- margin-right: 0.8rem;
3570
- margin-left: rem(12);
3571
- margin-top: 12px;
3572
- margin-bottom: 0;
3573
- width: calc(100% + 11px);
3574
-
3575
- .column {
3576
- padding-top: 0;
3577
- padding-bottom: 0px;
3578
- }
3579
- }
3580
-
3581
- &__head-container {
3582
- display: flex;
3583
- justify-content: flex-end;
3584
- align-items: center;
3585
- margin: 30px 30px 20px 0;
3586
-
3587
- &__btnGroup {
3588
- margin-right: 13px;
3589
- opacity: 0;
3590
- visibility: hidden;
3591
- transition: opacity .3s ease-in-out;
3592
-
3593
- &__visible {
3594
- opacity: 1;
3595
- visibility: visible;
3596
- }
3597
-
3598
- &__removeBtn {
3599
- margin-right: 13px;
3600
- }
3601
- }
3602
-
3603
- &__close {
3604
- cursor: pointer;
3605
- font-size: 14px;
3606
- color: $img-grey-color;
3607
- line-height: 40px;
3608
- }
3609
- }
3610
-
3611
- &__container {
3612
- padding: 0.75rem!important;
3613
- display:flex;
3614
- justify-content: center;
3615
- align-items: center;
3616
- background-color: $img-gray-background;
3617
- margin: 0;
3618
- transform: translateY(-16px);
3619
-
3620
- &__toolsContainer {
3621
- display: flex;
3622
- justify-content: center;
3623
- align-items: center;
3624
- margin-bottom: 50px;
3625
-
3626
- &__tool {
3627
- color: $img-second-color;
3628
- margin-right: 30px;
3629
- text-align: center;
3630
- cursor: pointer;
3631
-
3632
- p {
3633
- margin: 0!important;
3634
- color: $img-main-text;
3635
- font-size: rem(12);
3636
- line-height: rem(14);
3637
- }
3638
-
3639
- i {
3640
- font-size: rem(18);
3641
- margin: 0 0 10px;
3642
- }
3643
-
3644
- &--button {
3645
- background-color: $img-green-color;
3646
- color: $img-white!important;
3647
- padding: 10px;
3648
- border-radius: 3px;
3649
- transition: .3s ease;
3650
- white-space: nowrap;
3651
- display: flex;
3652
- justify-content: center;
3653
- align-items: center;
3654
- position: absolute;
3655
- top: 80px;
3656
- left: 50%;
3657
- transform: translateX(-50%);
3658
- height: 35px;
3659
- margin: 0;
3660
- &:hover, &:focus {
3661
- background-color: darken($img-green-color, 15%);
3662
- color: $img-white!important;
3663
- }
3664
- p {
3665
- color: $white!important;
3666
- }
3667
- i {
3668
- margin: 0 5px 0 0;
3669
- }
3670
- }
3671
- &:hover {
3672
- color: $img-main-color;
3673
- }
3674
-
3675
- > * {
3676
- -webkit-touch-callout: none; /* iOS Safari */
3677
- -webkit-user-select: none; /* Safari */
3678
- -khtml-user-select: none; /* Konqueror HTML */
3679
- -moz-user-select: none; /* Old versions of Firefox */
3680
- -ms-user-select: none; /* Internet Explorer/Edge */
3681
- user-select: none; /* Non-prefixed version, currently
3682
- supported by Chrome, Edge, Opera and Firefox */
3683
- }
3684
- }
3685
-
3686
- &__RotationDropdown {
3687
- min-width: 16rem;
3688
- }
3689
- }
3690
-
3691
- &__name {
3692
- font-size: 16px;
3693
- max-width: 50%;
3694
- color: $img-grey-color;
3695
- text-align: center;
3696
- white-space: nowrap;
3697
- overflow: hidden;
3698
- text-overflow: ellipsis;
3699
- }
3700
-
3701
- .button {
3702
- min-height: 35px;
3703
- background-color: $img-primary-button;
3704
- border-color: $img-primary-button-hover;
3705
- color: #ffffff;
3706
- }
3707
- }
3668
+ border: rem(2) solid transparent;
3669
+ animation: rotate linear 3.5s infinite;
3670
+ }
3708
3671
 
3709
- &__image-cropper {
3710
- --cropper-overlay-color: #f5f8fa;
3711
- //--cropper-outline-color: #a5a5a573;
3712
- padding-bottom: 30px;
3672
+ .loader {
3673
+ position: relative;
3674
+ margin: rem(75) auto;
3675
+ width: rem(150);
3676
+ height: rem(150);
3677
+ display: block;
3678
+ overflow: hidden;
3679
+ div {
3680
+ height: 100%;
3713
3681
  }
3682
+ }
3714
3683
 
3715
- &__infoSection {
3716
- font-size: 14px;
3717
- max-width: 360px;
3718
- padding: 0;
3719
- margin: 0 rem(30) 0 0;
3684
+ /* loader 1 */
3685
+ .loader1,
3686
+ .loader1 div {
3687
+ @include loaderDivMixin;
3688
+ border-top-color: $img-color-loader;
3689
+ border-bottom-color: $img-color-loader2;
3690
+ }
3720
3691
 
3721
- &__propertyEditable {
3722
- margin-bottom: 31px;
3723
- p {
3724
- margin-bottom: 12px;
3725
- font-size: 14px;
3726
- }
3727
- input, button {
3728
- width: 100%;
3729
- height: 40px;
3730
- border: 1px solid #DEE2ED;
3731
- border-radius: 3px;
3732
- color: $img-main-text;
3733
- padding-left: 20px;
3734
- padding-right: 20px;
3735
- display: flex;
3736
- justify-content: space-between;
3737
- font-size: 14px;
3692
+ div:hover {
3693
+ animation-play-state: paused;
3694
+ }
3738
3695
 
3739
- &:hover {
3740
- color: $img-main-color;
3741
- border-color: $img-main-color;
3742
- }
3743
- }
3696
+ .loader,
3697
+ .loader * {
3698
+ will-change: transform;
3699
+ }
3744
3700
 
3745
- button {
3746
- align-items: center;
3747
- background-color: transparent;
3748
- cursor: pointer;
3749
- }
3701
+ p {
3702
+ margin-top: -50px;
3703
+ font-weight: 500;
3704
+ }
3705
+ }
3706
+ //.wz-img-manager useful to keep the css priority
3707
+ .wz-img-manager .img-tabs {
3708
+ background-color: white;
3709
+ padding-left: 0;
3710
+ padding-right: 0;
3711
+ padding-top: 0;
3750
3712
 
3751
- &__span, &__input {
3752
- text-overflow: ellipsis;
3753
- overflow: hidden;
3754
- white-space: nowrap;
3755
- }
3713
+ .tabs {
3714
+ margin: 0;
3715
+ display: flex;
3716
+ align-items: center;
3717
+ overflow: visible!important;
3756
3718
 
3757
- &__span {
3758
- color: $img-bleu-color;
3759
- & + i {
3760
- color: $img-bleu-color;
3761
- font-weight: 600;
3762
- }
3763
- }
3764
- }
3719
+ &--notWindow {
3720
+ padding: rem(20) rem(30) rem(20);
3721
+ margin-left: -1.075rem;
3722
+ margin-right: -0.575rem;
3723
+ margin-bottom: 0;
3724
+ }
3765
3725
 
3766
- &__property {
3767
- &:nth-child(3), &:nth-child(4) {
3768
- margin: 0;
3769
- }
3770
- p {
3771
- font-size: 14px;
3772
- display: inline-block;
3726
+ ul {
3727
+ width: auto;
3728
+ border: none;
3729
+ li {
3730
+ a {
3731
+ padding: 0 0 rem(10);
3732
+ margin: 0 rem(30) 0 0;
3733
+ position: relative;
3734
+ line-height: rem(16);
3735
+ border: none;
3736
+ color: $secondary-color;
3737
+ transition: color .3s ease;
3738
+ font-size: rem(14);
3739
+ font-weight: 400;
3740
+ }
3741
+ &.is-active {
3742
+ a {
3743
+ color: $main-text;
3744
+ &:after {
3745
+ content: '';
3746
+ display: block;
3747
+ position: absolute;
3748
+ width: 100%;
3749
+ height: 2px;
3750
+ background-color: $img-main-color;
3751
+ bottom: 0;
3752
+ left: 0;
3773
3753
  }
3774
-
3775
- .mainColor {
3776
- margin: 0!important;
3777
3754
  }
3778
-
3779
- p:last-child {
3780
- margin: 0 0 0 10px;
3781
- color: #526384;
3782
- }
3783
3755
  }
3756
+ }
3757
+ }
3758
+ }
3784
3759
 
3785
- &__titleSEO {
3786
- margin: 0 0 20px;
3760
+ &__canva {
3761
+ margin: 0 0 0 rem(30);
3762
+ }
3787
3763
 
3788
- .mainColor {
3789
- font-size: rem(18);
3790
- font-weight: 500;
3791
- }
3792
- }
3764
+ &__tabsEdit {
3765
+ > .column {
3766
+ padding: 0!important;
3767
+ }
3768
+ }
3793
3769
 
3794
- &__propertySEO {
3795
- margin-bottom: 12px;
3796
- p {
3797
- font-size: 14px;
3798
- display: inline-block;
3799
- margin: 0;
3800
- }
3770
+ &__tabsFirst {
3771
+ height: 100vh;
3801
3772
 
3802
- .mainColor {
3803
- & ~ p {
3804
- margin-left: 10px;
3805
- color: $img-green-color;
3806
- }
3807
- }
3808
- }
3773
+ &--window {
3774
+ height: auto;
3775
+ display: flex;
3776
+ justify-content: flex-start;
3777
+ }
3809
3778
 
3810
- &__divider {
3811
- display: block;
3812
- width: 100%;
3813
- border-bottom: 2px dashed #EFF1F6;
3814
- margin: 30px 0;
3815
- }
3779
+ &__upload {
3780
+ margin: rem(28) 0 0 0;
3781
+ padding: 0;
3782
+ max-width: 33.3%;
3783
+ }
3816
3784
 
3817
- &__actions {
3818
- height: 35px;
3785
+ &__list {
3786
+ padding: 0;
3787
+ margin: rem(28) 0 0 rem(60);
3788
+ &--upload {
3789
+ margin: rem(28) 0 0 rem(48);
3790
+ }
3791
+ //height: calc(100vh - 70px);
3792
+ //height: 100vh;
3793
+ }
3794
+ }
3819
3795
 
3820
- &__cancel {
3821
- margin-right: 19px;
3822
- background-color: white;
3823
- border-color: #dbdbdb;
3824
- color: $img-main-text;
3825
- }
3796
+ @media screen and (max-width: 768px) {
3797
+ .img-tabs__tabsFirst__upload {
3798
+ margin-right: 0;
3799
+ margin-bottom: 0;
3800
+ margin-top: 20px!important;
3801
+ }
3802
+ }
3826
3803
 
3827
- &__save {
3828
- padding: 8px 18px;
3829
- &--disable {
3830
- cursor: not-allowed;
3831
- }
3832
- }
3833
- }
3804
+ &__tabsSecond {
3805
+ min-height: 100vh !important;
3806
+ margin-left: 0px;
3807
+ margin-right: 0px;
3808
+ margin-bottom: 0px;
3809
+
3810
+ .column {
3811
+ padding: 0.75rem 0 0.75rem 0;
3834
3812
  }
3813
+ }
3835
3814
 
3836
- .dropdown-menu {
3837
- left: -50%;
3815
+ &__tabsThird {
3816
+ min-height: 100vh !important;
3817
+ margin-left: 0px;
3818
+ margin-right: 0px;
3819
+ margin-bottom: 0px;
3820
+
3821
+ .column {
3822
+ padding: 0.75rem 0 0.75rem 0;
3838
3823
  }
3824
+ }
3839
3825
  }
3840
3826
 
3841
- .wz-img-manager .marginBottom {
3842
- margin-bottom: 20px;
3827
+ @media screen and (max-width: 768px) {
3828
+ .img-tabs__tabsFirst {
3829
+ margin-top: 0;
3830
+ }
3831
+
3832
+ .img-tabs__tabsFirst--small {
3833
+ height: 270px;
3834
+ }
3835
+ }
3836
+
3837
+ .wz-img-manager .img-tabs .columns.img-tabs__tabsFirst {
3838
+ margin: 0;
3843
3839
  }