@wizishop/img-manager 0.2.87 → 0.2.88

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.87",
3
+ "version": "0.2.88",
4
4
  "description": "The best and the most beautiful image manager.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1270,29 +1270,171 @@ $base-font: 'Work Sans', helvetica !default;@mixin simple_transition($type: null
1270
1270
  }
1271
1271
  image-cropper {
1272
1272
  max-height: 60vh;
1273
- }$green: $really-bad-bad-bad-green !default;
1274
- $primary: $primary-button !default;
1275
- $light: $img-placeholder !default;
1276
- $info: $wizishop-blue !default;
1277
- $danger: $img-red-color !default;
1278
- $dark: $img-dark !default;
1273
+ }.wz-img-manager {
1279
1274
 
1280
- $button-padding-vertical: rem(7) !default;
1281
- $radius: rem(3) !default;
1275
+ &__selectionHandler {
1276
+ margin-top: -50px;
1277
+ }
1278
+
1279
+ &__module {
1280
+ position: fixed;
1281
+ bottom: 0;
1282
+ left: 0;
1283
+ width: 100%;
1284
+ height: 0;
1285
+ transition: height .3s ease;
1286
+ z-index: 2147483647; // snackbar 10
1287
+ transform: translateZ(0);
1288
+
1289
+ &:before {
1290
+ content: '';
1291
+ display: block;
1292
+ position: absolute;
1293
+ top: 0;
1294
+ left: 0;
1295
+ width: 100%;
1296
+ height: 3px;
1297
+ background-color: $img-main-color;
1298
+ z-index: 999;
1299
+ }
1300
+
1301
+ &--closed {
1302
+ height: 0;
1303
+ }
1304
+
1305
+ // .wz-img-manager__module--small
1306
+ &--small {
1307
+ height: 320px;
1308
+ @include media('<tablet') {
1309
+ height: calc(100vh - 35px);
1310
+ }
1311
+ }
1312
+
1313
+ // .wz-img-manager__module--full
1314
+ &--full {
1315
+ height: calc(100vh - 50px);
1316
+ @include media('<tablet') {
1317
+ height: calc(100vh - 35px);
1318
+ }
1319
+ }
1320
+
1321
+ // .wz-img-manager__module--window
1322
+ &--window {
1323
+ position: relative;
1324
+ width: auto;
1325
+ bottom: unset;
1326
+ left: unset;
1327
+ z-index: 29!important;
1328
+ height: auto!important;
1329
+ padding-bottom: 6.25rem;
1330
+
1331
+ &:before {
1332
+ content: none;
1333
+ height: 0px;
1334
+ }
1335
+
1336
+ // .wz-img-manager__module--edit
1337
+ &--edit {
1338
+ .wrapper-tabs {
1339
+ display: none;
1340
+ }
1341
+ }
1342
+ }
1343
+
1344
+ // .wz-img-manager__module__header
1345
+ &__header {
1346
+ position: absolute;
1347
+ bottom: 100%;
1348
+ right: 30px;
1349
+ width: 101px;
1350
+
1351
+ @include media('<tablet') {
1352
+ width: 45px;
1353
+ right: 0;
1354
+ }
1355
+
1356
+ // .wz-img-manager__module__header button
1357
+ button {
1358
+ width: 45px;
1359
+ height: 35px;
1360
+ background-color: $img-main-color;
1361
+ transition: background-color .3s ease;
1362
+ border: none;
1363
+ box-shadow: none;
1364
+ cursor: pointer;
1365
+ outline: none!important;
1366
+
1367
+ &:first-child {
1368
+ @include media('<tablet') {
1369
+ display: none;
1370
+ }
1371
+ }
1372
+
1373
+ span {
1374
+ display: none;
1375
+ }
1376
+
1377
+ i {
1378
+ color: #fff;
1379
+ font-size: 20px;
1380
+ &:before {
1381
+ font-size: rem(20) !important;
1382
+ }
1383
+ }
1384
+
1385
+ &:hover, &:focus {
1386
+ background-color: darken($img-main-color, 15%);
1387
+ }
1388
+
1389
+ // .wz-img-manager__module__header button:first-child
1390
+ &:first-child {
1391
+ border-radius: 3px 0 0 0;
1392
+ }
1393
+
1394
+ // .wz-img-manager__module__header button:last-child
1395
+ &:last-child {
1396
+ margin: 0 0 0 1px;
1397
+ border-radius: 0 3px 0 0;
1398
+ @include media('<tablet') {
1399
+ margin: 0;
1400
+ border-radius: 0;
1401
+ }
1402
+ }
1403
+ }
1404
+ }
1405
+ }
1406
+ }
1407
+
1408
+ .wz-img-manager__module .wz-block {
1409
+ background-color: #fff;
1410
+ box-shadow: 0 0.125rem 0.3125rem rgba(45,62,85,.1);
1411
+ padding: 0 0.575rem 0 1.075rem;
1412
+
1413
+ @include media('<tablet') {
1414
+ padding: 0 20px;
1415
+ }
1416
+
1417
+ &--window {
1418
+ padding: rem(30);
1419
+ overflow: hidden;
1420
+ max-width: 1450px;
1421
+ margin: 0 auto;
1422
+ }
1423
+ }
1424
+
1425
+ .wz-img-manager__module .wz-block:hover {
1426
+ box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
1427
+ }
1428
+
1429
+ .nwb-snack-bar .notification {
1430
+ z-index: 10002!important;
1431
+ }
1432
+
1433
+ .nwb-snack-bar .column {
1434
+ box-sizing: border-box;
1435
+ }
1282
1436
 
1283
- $button-color: white!default;
1284
- $button-hover-color: white !default;
1285
- $button-focus-color: white !default;
1286
- $button-active-color: white !default;
1287
- $button-background-color: $primary !default;
1288
- $button-disabled-background-color: $primary !default;
1289
- $button-border-color: $primary-button-hover !default;
1290
- $button-hover-border-color: $primary-button-hover !default;
1291
- $button-active-border-color: $primary-button-hover !default;
1292
- $button-focus-border-color: $primary-button-hover !default;
1293
- $button-disabled-border-color: $primary-button-hover !default;
1294
1437
 
1295
- $tag-radius: rem(20px)!default;
1296
1438
  .img-editor__infoSection__propertySEO__tooltips {
1297
1439
  i {
1298
1440
  font-size: rem(16);
@@ -2077,6 +2219,15 @@ $green-color: #2ecc71;
2077
2219
  &--smallDisplay {
2078
2220
  margin-top: 10px;
2079
2221
  }
2222
+
2223
+ @include media('<tablet') {
2224
+ wz-input-search {
2225
+ display: block;
2226
+ width: 100%;
2227
+ max-width: 100%;
2228
+ padding-right: 6px;
2229
+ }
2230
+ }
2080
2231
  }
2081
2232
 
2082
2233
  // .pexels-lib__wrapper
@@ -4234,168 +4385,26 @@ $card-img-size-small: 140px;
4234
4385
  }
4235
4386
  }
4236
4387
  }
4237
- .wz-img-manager {
4238
-
4239
- &__selectionHandler {
4240
- margin-top: -50px;
4241
- }
4242
-
4243
- &__module {
4244
- position: fixed;
4245
- bottom: 0;
4246
- left: 0;
4247
- width: 100%;
4248
- height: 0;
4249
- transition: height .3s ease;
4250
- z-index: 2147483647; // snackbar 10
4251
- transform: translateZ(0);
4252
-
4253
- &:before {
4254
- content: '';
4255
- display: block;
4256
- position: absolute;
4257
- top: 0;
4258
- left: 0;
4259
- width: 100%;
4260
- height: 3px;
4261
- background-color: $img-main-color;
4262
- z-index: 999;
4263
- }
4264
-
4265
- &--closed {
4266
- height: 0;
4267
- }
4268
-
4269
- // .wz-img-manager__module--small
4270
- &--small {
4271
- height: 320px;
4272
- @include media('<tablet') {
4273
- height: calc(100vh - 35px);
4274
- }
4275
- }
4276
-
4277
- // .wz-img-manager__module--full
4278
- &--full {
4279
- height: calc(100vh - 50px);
4280
- @include media('<tablet') {
4281
- height: calc(100vh - 35px);
4282
- }
4283
- }
4284
-
4285
- // .wz-img-manager__module--window
4286
- &--window {
4287
- position: relative;
4288
- width: auto;
4289
- bottom: unset;
4290
- left: unset;
4291
- z-index: 29!important;
4292
- height: auto!important;
4293
- padding-bottom: 6.25rem;
4294
-
4295
- &:before {
4296
- content: none;
4297
- height: 0px;
4298
- }
4299
-
4300
- // .wz-img-manager__module--edit
4301
- &--edit {
4302
- .wrapper-tabs {
4303
- display: none;
4304
- }
4305
- }
4306
- }
4307
-
4308
- // .wz-img-manager__module__header
4309
- &__header {
4310
- position: absolute;
4311
- bottom: 100%;
4312
- right: 30px;
4313
- width: 101px;
4314
-
4315
- @include media('<tablet') {
4316
- width: 45px;
4317
- right: 0;
4318
- }
4319
-
4320
- // .wz-img-manager__module__header button
4321
- button {
4322
- width: 45px;
4323
- height: 35px;
4324
- background-color: $img-main-color;
4325
- transition: background-color .3s ease;
4326
- border: none;
4327
- box-shadow: none;
4328
- cursor: pointer;
4329
- outline: none!important;
4330
-
4331
- &:first-child {
4332
- @include media('<tablet') {
4333
- display: none;
4334
- }
4335
- }
4336
-
4337
- span {
4338
- display: none;
4339
- }
4340
-
4341
- i {
4342
- color: #fff;
4343
- font-size: 20px;
4344
- &:before {
4345
- font-size: rem(20) !important;
4346
- }
4347
- }
4348
-
4349
- &:hover, &:focus {
4350
- background-color: darken($img-main-color, 15%);
4351
- }
4352
-
4353
- // .wz-img-manager__module__header button:first-child
4354
- &:first-child {
4355
- border-radius: 3px 0 0 0;
4356
- }
4357
-
4358
- // .wz-img-manager__module__header button:last-child
4359
- &:last-child {
4360
- margin: 0 0 0 1px;
4361
- border-radius: 0 3px 0 0;
4362
- @include media('<tablet') {
4363
- margin: 0;
4364
- border-radius: 0;
4365
- }
4366
- }
4367
- }
4368
- }
4369
- }
4370
- }
4371
-
4372
- .wz-img-manager__module .wz-block {
4373
- background-color: #fff;
4374
- box-shadow: 0 0.125rem 0.3125rem rgba(45,62,85,.1);
4375
- padding: 0 0.575rem 0 1.075rem;
4376
-
4377
- @include media('<tablet') {
4378
- padding: 0 20px;
4379
- }
4380
-
4381
- &--window {
4382
- padding: rem(30);
4383
- overflow: hidden;
4384
- max-width: 1450px;
4385
- margin: 0 auto;
4386
- }
4387
- }
4388
-
4389
- .wz-img-manager__module .wz-block:hover {
4390
- box-shadow: 0 0.125rem 0.3125rem rgba(45, 62, 85, 0.2);
4391
- }
4392
-
4393
- .nwb-snack-bar .notification {
4394
- z-index: 10002!important;
4395
- }
4388
+ $green: $really-bad-bad-bad-green !default;
4389
+ $primary: $primary-button !default;
4390
+ $light: $img-placeholder !default;
4391
+ $info: $wizishop-blue !default;
4392
+ $danger: $img-red-color !default;
4393
+ $dark: $img-dark !default;
4396
4394
 
4397
- .nwb-snack-bar .column {
4398
- box-sizing: border-box;
4399
- }
4395
+ $button-padding-vertical: rem(7) !default;
4396
+ $radius: rem(3) !default;
4400
4397
 
4398
+ $button-color: white!default;
4399
+ $button-hover-color: white !default;
4400
+ $button-focus-color: white !default;
4401
+ $button-active-color: white !default;
4402
+ $button-background-color: $primary !default;
4403
+ $button-disabled-background-color: $primary !default;
4404
+ $button-border-color: $primary-button-hover !default;
4405
+ $button-hover-border-color: $primary-button-hover !default;
4406
+ $button-active-border-color: $primary-button-hover !default;
4407
+ $button-focus-border-color: $primary-button-hover !default;
4408
+ $button-disabled-border-color: $primary-button-hover !default;
4401
4409
 
4410
+ $tag-radius: rem(20px)!default;