@wizishop/angular-components 15.1.77 → 15.1.79

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.
@@ -228,7 +228,7 @@ $wac-token-disabled-dark: #8A98B2!default;
228
228
  align-items: center;
229
229
  position: absolute;
230
230
  left: calc(100% + 4px);
231
- bottom: 0;
231
+ top: 28px;
232
232
  box-shadow: 0px 3px 6px #00000014;
233
233
  border: 1px solid $wac-background-indication;
234
234
  background-color: $wac-white;
@@ -280,7 +280,7 @@ $wac-token-disabled-dark: #8A98B2!default;
280
280
  align-items: flex-start;
281
281
  position: absolute;
282
282
  left: calc(100% + 4px);
283
- bottom: 0;
283
+ top: 28px;
284
284
  box-shadow: 0px 3px 6px #00000014;
285
285
  border: 1px solid $wac-background-indication;
286
286
  &:hover, &:focus {
@@ -467,6 +467,33 @@ $wac-token-disabled-dark: #8A98B2!default;
467
467
  font-size: rem(20);
468
468
  }
469
469
  }
470
+ .wac-back {
471
+ width: 40px;
472
+ height: 40px;
473
+
474
+ &__wrapper {
475
+ @include flexbox();
476
+ @include justify-content(center);
477
+ @include align-items(center);
478
+ width: 100%;
479
+ height: 100%;
480
+ border-radius: 3px;
481
+ border: 1px solid $wac-border-light;
482
+ background-color: transparent;
483
+ transition: border-color 0.3s ease-in-out;
484
+
485
+ i {
486
+ color: $wac-second-color;
487
+ font-size: 11px;
488
+ line-height: 14px;
489
+ }
490
+
491
+ &:hover {
492
+ border-color: $wac-back-border-hover;
493
+ transition: border-color 0.3s ease-in-out;
494
+ }
495
+ }
496
+ }
470
497
  .wac-alert-popup {
471
498
  .alert {
472
499
  z-index: 999999;
@@ -724,33 +751,6 @@ $wac-token-disabled-dark: #8A98B2!default;
724
751
  }
725
752
 
726
753
  }
727
- .wac-back {
728
- width: 40px;
729
- height: 40px;
730
-
731
- &__wrapper {
732
- @include flexbox();
733
- @include justify-content(center);
734
- @include align-items(center);
735
- width: 100%;
736
- height: 100%;
737
- border-radius: 3px;
738
- border: 1px solid $wac-border-light;
739
- background-color: transparent;
740
- transition: border-color 0.3s ease-in-out;
741
-
742
- i {
743
- color: $wac-second-color;
744
- font-size: 11px;
745
- line-height: 14px;
746
- }
747
-
748
- &:hover {
749
- border-color: $wac-back-border-hover;
750
- transition: border-color 0.3s ease-in-out;
751
- }
752
- }
753
- }
754
754
  wac-block {
755
755
  .wac-block {
756
756
  background-color: $white;
@@ -910,6 +910,135 @@ wac-block {
910
910
  margin-right: 0;
911
911
  }
912
912
  }
913
+ .wac-breadcrumbs {
914
+ width: 100%;
915
+ display: flex;
916
+ align-items: center;
917
+ padding: 0;
918
+ margin: 0 0 10px;
919
+ border-radius: 3px;
920
+
921
+ @include media('<tablet') {
922
+ &:not(.no-responsive) {
923
+ max-width: 100%;
924
+ overflow: hidden;
925
+ .wac-breadcrumbs {
926
+ &__wrapper {
927
+ @include media('<tablet') {
928
+ width: auto;
929
+ overflow-x: scroll;
930
+ }
931
+ }
932
+ &__item {
933
+ @include media('<tablet') {
934
+ width: auto;
935
+ min-width: unset;
936
+ max-width: unset;
937
+ .name {
938
+ white-space: nowrap;
939
+ }
940
+ }
941
+ }
942
+ }
943
+ }
944
+ }
945
+
946
+ &__wrapper {
947
+ width: 100%;
948
+ display: flex;
949
+ align-items: center;
950
+ }
951
+
952
+ &__item {
953
+ width: 100%;
954
+ max-width: 50%;
955
+ display: flex;
956
+ align-items: center;
957
+ justify-content: center;
958
+ position: relative;
959
+ padding: 10px;
960
+ cursor: pointer;
961
+ &:before {
962
+ content: '';
963
+ display: block;
964
+ position: absolute;
965
+ bottom: -5px;
966
+ left: 50%;
967
+ transform: translateX(-50%);
968
+ width: calc(100% - 5px);
969
+ height: 3px;
970
+ background-color: $wac-round-breadcrumbs;
971
+ }
972
+ &.current, &.valid {
973
+ &:before {
974
+ background-color: $wac-wizishop-blue;
975
+ }
976
+ &:hover, &:focus {
977
+ .round {
978
+ background-color: $wac-wizishop-blue;
979
+ border-color: $wac-wizishop-blue;
980
+ > span, > i {
981
+ color: $wac-white;
982
+ }
983
+ }
984
+ .name {
985
+ color: $wac-wizishop-blue;
986
+ }
987
+ }
988
+ }
989
+
990
+
991
+ &.current {
992
+ &:before {
993
+ height: 5px;
994
+ }
995
+ }
996
+ .round {
997
+ min-width: 30px;
998
+ height: 30px;
999
+ border-radius: 30px;
1000
+ display: flex;
1001
+ justify-content: center;
1002
+ align-items: center;
1003
+ border: 2px solid $wac-round-breadcrumbs;
1004
+ background-color: $wac-round-breadcrumbs;
1005
+ transition: .3s ease;
1006
+ margin: 0 15px 0 0;
1007
+ > span {
1008
+ font-size: rem(12);
1009
+ font-weight: 500;
1010
+ color: $wac-second-color;
1011
+ line-height: 1;
1012
+ }
1013
+ > i {
1014
+ font-size: rem(14);
1015
+ color: $wac-wizishop-blue;
1016
+ }
1017
+ &.valid {
1018
+ background-color: transparent;
1019
+ border-color: $wac-wizishop-blue;
1020
+ color: $wac-wizishop-blue;
1021
+ }
1022
+ &.current:not(.valid) {
1023
+ background-color: $wac-wizishop-blue;
1024
+ border-color: $wac-wizishop-blue;
1025
+ > span, > i {
1026
+ color: $wac-white;
1027
+ }
1028
+ }
1029
+ }
1030
+ .name {
1031
+ font-size: rem(14);
1032
+ font-weight: 500;
1033
+ color: $wac-second-color;
1034
+ line-height: 1;
1035
+ transition: .3s ease;
1036
+ &.valid, &.current {
1037
+ color: $wac-wizishop-blue;
1038
+ }
1039
+ }
1040
+ }
1041
+ }
913
1042
  .wac-button {
914
1043
  @include flexbox();
915
1044
  @include justify-content(center);
@@ -2366,135 +2495,6 @@ wac-block {
2366
2495
  }
2367
2496
  }
2368
2497
  }
2369
- .wac-breadcrumbs {
2370
- width: 100%;
2371
- display: flex;
2372
- align-items: center;
2373
- padding: 0;
2374
- margin: 0 0 10px;
2375
- border-radius: 3px;
2376
-
2377
- @include media('<tablet') {
2378
- &:not(.no-responsive) {
2379
- max-width: 100%;
2380
- overflow: hidden;
2381
- .wac-breadcrumbs {
2382
- &__wrapper {
2383
- @include media('<tablet') {
2384
- width: auto;
2385
- overflow-x: scroll;
2386
- }
2387
- }
2388
- &__item {
2389
- @include media('<tablet') {
2390
- width: auto;
2391
- min-width: unset;
2392
- max-width: unset;
2393
- .name {
2394
- white-space: nowrap;
2395
- }
2396
- }
2397
- }
2398
- }
2399
- }
2400
- }
2401
-
2402
- &__wrapper {
2403
- width: 100%;
2404
- display: flex;
2405
- align-items: center;
2406
- }
2407
-
2408
- &__item {
2409
- width: 100%;
2410
- max-width: 50%;
2411
- display: flex;
2412
- align-items: center;
2413
- justify-content: center;
2414
- position: relative;
2415
- padding: 10px;
2416
- cursor: pointer;
2417
- &:before {
2418
- content: '';
2419
- display: block;
2420
- position: absolute;
2421
- bottom: -5px;
2422
- left: 50%;
2423
- transform: translateX(-50%);
2424
- width: calc(100% - 5px);
2425
- height: 3px;
2426
- background-color: $wac-round-breadcrumbs;
2427
- }
2428
- &.current, &.valid {
2429
- &:before {
2430
- background-color: $wac-wizishop-blue;
2431
- }
2432
- &:hover, &:focus {
2433
- .round {
2434
- background-color: $wac-wizishop-blue;
2435
- border-color: $wac-wizishop-blue;
2436
- > span, > i {
2437
- color: $wac-white;
2438
- }
2439
- }
2440
- .name {
2441
- color: $wac-wizishop-blue;
2442
- }
2443
- }
2444
- }
2445
-
2446
-
2447
- &.current {
2448
- &:before {
2449
- height: 5px;
2450
- }
2451
- }
2452
- .round {
2453
- min-width: 30px;
2454
- height: 30px;
2455
- border-radius: 30px;
2456
- display: flex;
2457
- justify-content: center;
2458
- align-items: center;
2459
- border: 2px solid $wac-round-breadcrumbs;
2460
- background-color: $wac-round-breadcrumbs;
2461
- transition: .3s ease;
2462
- margin: 0 15px 0 0;
2463
- > span {
2464
- font-size: rem(12);
2465
- font-weight: 500;
2466
- color: $wac-second-color;
2467
- line-height: 1;
2468
- }
2469
- > i {
2470
- font-size: rem(14);
2471
- color: $wac-wizishop-blue;
2472
- }
2473
- &.valid {
2474
- background-color: transparent;
2475
- border-color: $wac-wizishop-blue;
2476
- color: $wac-wizishop-blue;
2477
- }
2478
- &.current:not(.valid) {
2479
- background-color: $wac-wizishop-blue;
2480
- border-color: $wac-wizishop-blue;
2481
- > span, > i {
2482
- color: $wac-white;
2483
- }
2484
- }
2485
- }
2486
- .name {
2487
- font-size: rem(14);
2488
- font-weight: 500;
2489
- color: $wac-second-color;
2490
- line-height: 1;
2491
- transition: .3s ease;
2492
- &.valid, &.current {
2493
- color: $wac-wizishop-blue;
2494
- }
2495
- }
2496
- }
2497
- }
2498
2498
  wac-calendar {
2499
2499
  &.ng-touched.ng-invalid {
2500
2500
  .wac-calendar__wrapper__select, .wac-calendar__wrapper__editInPlace, .wac-calendar__wrapper__select {
@@ -7225,6 +7225,8 @@ wac-optional-disable-container {
7225
7225
  @include media('<desktop') {
7226
7226
  display: flex;
7227
7227
  justify-content: flex-start;
7228
+ align-items: flex-start;
7229
+ flex-direction: column;
7228
7230
 
7229
7231
  &.wac-tabs--right {
7230
7232
  justify-content: flex-end;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wizishop/angular-components",
3
- "version": "15.1.77",
3
+ "version": "15.1.79",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": "~15.0.2",
6
6
  "@angular/cdk": "^15.0.1",