@wizishop/angular-components 0.0.55 → 0.0.56

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.
@@ -687,44 +687,37 @@ $wac-color-success-popup-alert: #6DCC95!default;
687
687
  }
688
688
 
689
689
  }
690
- .wac-snackbar {
691
- .notification {
692
- position: fixed;
693
- bottom: 0;
694
- width: 800px;
695
- color: #fff;
696
- font-size: 15px;
697
- font-weight: 300;
698
- margin: 0 auto;
699
- left: 0;
700
- right: 0;
701
- z-index: 10;
702
- }
703
-
704
- .notification.is-transparent {
705
- background-color: rgba(0, 0, 0, 0.8);
706
- }
690
+ .wac-settings {
691
+ width: 40px;
692
+ height: 40px;
707
693
 
708
- .notification button {
709
- word-wrap: break-word;
710
- word-break: break-all;
711
- white-space: normal;
712
- height: 100%;
713
- margin-right: 1em;
714
- }
694
+ &__wrapper {
695
+ @include flexbox();
696
+ @include justify-content(center);
697
+ @include align-items(center);
698
+ width: 100%;
699
+ height: 100%;
700
+ border-radius: 3px;
701
+ background-color: $wac-gray-background;
702
+ transition: background-color 0.3s ease-in-out;
715
703
 
716
- .notification .column:nth-child(2) {
717
- text-align: right;
704
+ i {
705
+ color: $wac-second-color;
706
+ font-size: 15px;
707
+ line-height: 0;
708
+ transition: color 0.3s ease-in-out;
718
709
  }
719
710
 
720
- .notification .column:nth-child(1) {
721
- text-align: left;
722
- }
711
+ &:hover {
712
+ background-color: $wac-second-color;
713
+ transition: background-color 0.3s ease-in-out;
723
714
 
724
- .notification--message {
725
- align-self: center;
715
+ i {
716
+ color: $wac-white;
717
+ transition: color 0.3s ease-in-out;
718
+ }
726
719
  }
727
-
720
+ }
728
721
  }
729
722
  .wac-block {
730
723
  background-color: $white;
@@ -836,64 +829,44 @@ $wac-color-success-popup-alert: #6DCC95!default;
836
829
  }
837
830
  }
838
831
  }
839
- .wac-state {
840
- width: 12px;
841
- height: 12px;
842
- position: relative;
843
-
844
- &:before,
845
- &:after {
846
- position: absolute;
847
- content: '';
848
- border-radius: 45px;
849
- }
850
-
851
- &:before {
852
- width: 100%;
853
- height: 100%;
854
- left: 0;
855
- top: 0;
856
- border-width: 1px;
857
- border-style: solid;
858
- }
859
-
860
- &:after {
861
- width: 6px;
862
- height: 6px;
863
- top: 50%;
864
- left: 50%;
865
- transform: translate(-50%, -50%);
866
- }
867
-
868
- &.success {
869
- &:before {
870
- border-color: $wac-green-color;
832
+ .wac-snackbar {
833
+ .notification {
834
+ position: fixed;
835
+ bottom: 0;
836
+ width: 800px;
837
+ color: #fff;
838
+ font-size: 15px;
839
+ font-weight: 300;
840
+ margin: 0 auto;
841
+ left: 0;
842
+ right: 0;
843
+ z-index: 10;
871
844
  }
872
845
 
873
- &:after {
874
- background-color: $wac-green-color;
846
+ .notification.is-transparent {
847
+ background-color: rgba(0, 0, 0, 0.8);
875
848
  }
876
- }
877
849
 
878
- &.warning {
879
- &:before {
880
- border-color: $wac-warning-color;
850
+ .notification button {
851
+ word-wrap: break-word;
852
+ word-break: break-all;
853
+ white-space: normal;
854
+ height: 100%;
855
+ margin-right: 1em;
881
856
  }
882
857
 
883
- &:after {
884
- background-color: $wac-warning-color;
858
+ .notification .column:nth-child(2) {
859
+ text-align: right;
885
860
  }
886
- }
887
861
 
888
- &.error {
889
- &:before {
890
- border-color: $wac-primary-button;
862
+ .notification .column:nth-child(1) {
863
+ text-align: left;
891
864
  }
892
865
 
893
- &:after {
894
- background-color: $wac-primary-button;
866
+ .notification--message {
867
+ align-self: center;
895
868
  }
896
- }
869
+
897
870
  }
898
871
  .wac-calendar {
899
872
  position: relative;
@@ -1440,35 +1413,62 @@ $wac-color-success-popup-alert: #6DCC95!default;
1440
1413
  .datetimepicker .datetimepicker-footer {
1441
1414
  display: none;
1442
1415
  }
1443
- .wac-settings {
1444
- width: 40px;
1445
- height: 40px;
1416
+ .wac-state {
1417
+ width: 12px;
1418
+ height: 12px;
1419
+ position: relative;
1446
1420
 
1447
- &__wrapper {
1448
- @include flexbox();
1449
- @include justify-content(center);
1450
- @include align-items(center);
1421
+ &:before,
1422
+ &:after {
1423
+ position: absolute;
1424
+ content: '';
1425
+ border-radius: 45px;
1426
+ }
1427
+
1428
+ &:before {
1451
1429
  width: 100%;
1452
1430
  height: 100%;
1453
- border-radius: 3px;
1454
- background-color: $wac-gray-background;
1455
- transition: background-color 0.3s ease-in-out;
1431
+ left: 0;
1432
+ top: 0;
1433
+ border-width: 1px;
1434
+ border-style: solid;
1435
+ }
1456
1436
 
1457
- i {
1458
- color: $wac-second-color;
1459
- font-size: 15px;
1460
- line-height: 0;
1461
- transition: color 0.3s ease-in-out;
1437
+ &:after {
1438
+ width: 6px;
1439
+ height: 6px;
1440
+ top: 50%;
1441
+ left: 50%;
1442
+ transform: translate(-50%, -50%);
1443
+ }
1444
+
1445
+ &.success {
1446
+ &:before {
1447
+ border-color: $wac-green-color;
1462
1448
  }
1463
1449
 
1464
- &:hover {
1465
- background-color: $wac-second-color;
1466
- transition: background-color 0.3s ease-in-out;
1450
+ &:after {
1451
+ background-color: $wac-green-color;
1452
+ }
1453
+ }
1467
1454
 
1468
- i {
1469
- color: $wac-white;
1470
- transition: color 0.3s ease-in-out;
1471
- }
1455
+ &.warning {
1456
+ &:before {
1457
+ border-color: $wac-warning-color;
1458
+ }
1459
+
1460
+ &:after {
1461
+ background-color: $wac-warning-color;
1462
+ }
1463
+ }
1464
+
1465
+ &.error {
1466
+ &:before {
1467
+ border-color: $wac-primary-button;
1468
+ }
1469
+
1470
+ &:after {
1471
+ background-color: $wac-primary-button;
1472
1472
  }
1473
1473
  }
1474
1474
  }
@@ -4796,6 +4796,56 @@ h4.wac-h4 {
4796
4796
  }
4797
4797
  }
4798
4798
  }
4799
+ div.wac-field-input-search {
4800
+ padding: 20px;
4801
+ background-color: $wac-gray-background;
4802
+ &.small-padding {
4803
+ padding: 10px 20px;
4804
+ }
4805
+ p.control {
4806
+ .input,
4807
+ .input:focus,
4808
+ .input.is-focused,
4809
+ .input:active,
4810
+ .input.is-active {
4811
+ font-size: rem(14);
4812
+ color: $wac-main-text;
4813
+ border: rem(1) solid $wac-input-border-search;
4814
+ box-shadow: none;
4815
+ padding: rem(13.5) rem(20) rem(13.5) rem(48);
4816
+ border-radius: rem(3);
4817
+ margin: 0;
4818
+ height: auto;
4819
+ min-height: unset;
4820
+
4821
+ &::placeholder {
4822
+ color: $wac-placeholder-color;
4823
+ font-weight: normal;
4824
+ }
4825
+ }
4826
+
4827
+ .input:focus,
4828
+ .input.is-focused,
4829
+ .input:active,
4830
+ .input.is-active {
4831
+ border-color: $wac-wizishop-blue;
4832
+ }
4833
+
4834
+ .icon {
4835
+ position: absolute;
4836
+ top: 50%;
4837
+ left: 20px;
4838
+ font-size: rem(18);
4839
+ transform: translateY(-50%);
4840
+ pointer-events: none;
4841
+ font-weight: 400;
4842
+ color: $wac-placeholder-color;
4843
+ margin: 0;
4844
+ width: rem(18);
4845
+ height: rem(18);
4846
+ }
4847
+ }
4848
+ }
4799
4849
  .wac-input {
4800
4850
  .field-label {
4801
4851
  margin-bottom: 0!important;
@@ -5198,56 +5248,6 @@ h4.wac-h4 {
5198
5248
  color: $wac-green-color;
5199
5249
  font-size: rem(14);
5200
5250
  }
5201
- div.wac-field-input-search {
5202
- padding: 20px;
5203
- background-color: $wac-gray-background;
5204
- &.small-padding {
5205
- padding: 10px 20px;
5206
- }
5207
- p.control {
5208
- .input,
5209
- .input:focus,
5210
- .input.is-focused,
5211
- .input:active,
5212
- .input.is-active {
5213
- font-size: rem(14);
5214
- color: $wac-main-text;
5215
- border: rem(1) solid $wac-input-border-search;
5216
- box-shadow: none;
5217
- padding: rem(13.5) rem(20) rem(13.5) rem(48);
5218
- border-radius: rem(3);
5219
- margin: 0;
5220
- height: auto;
5221
- min-height: unset;
5222
-
5223
- &::placeholder {
5224
- color: $wac-placeholder-color;
5225
- font-weight: normal;
5226
- }
5227
- }
5228
-
5229
- .input:focus,
5230
- .input.is-focused,
5231
- .input:active,
5232
- .input.is-active {
5233
- border-color: $wac-wizishop-blue;
5234
- }
5235
-
5236
- .icon {
5237
- position: absolute;
5238
- top: 50%;
5239
- left: 20px;
5240
- font-size: rem(18);
5241
- transform: translateY(-50%);
5242
- pointer-events: none;
5243
- font-weight: 400;
5244
- color: $wac-placeholder-color;
5245
- margin: 0;
5246
- width: rem(18);
5247
- height: rem(18);
5248
- }
5249
- }
5250
- }
5251
5251
  .wac-info {
5252
5252
  display: inline-block;
5253
5253
  width: 40px;
@@ -960,7 +960,7 @@
960
960
  if (_this.animation) {
961
961
  _this.buttonWidth = _this.calculWidth.nativeElement.offsetWidth;
962
962
  }
963
- }, 0);
963
+ }, 1000);
964
964
  };
965
965
  return ButtonComponent;
966
966
  }());