unika-components 1.0.284 → 1.0.285

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.
@@ -374,6 +374,7 @@ export declare const effectDefaultProps: {
374
374
  number: number;
375
375
  spead: number;
376
376
  transform: string;
377
+ id: string;
377
378
  };
378
379
  export declare const registerFormDefaultProps: {
379
380
  left: string;
@@ -696,6 +697,7 @@ export declare const componentsDefaultProps: {
696
697
  number: number;
697
698
  spead: number;
698
699
  transform: string;
700
+ id: string;
699
701
  };
700
702
  };
701
703
  'uni-register-form': {
@@ -1,10 +1,70 @@
1
1
 
2
+ h2.uni-text-component, p.uni-text-component {
3
+ margin-top: 0;
4
+ margin-bottom: 0;
5
+ }
6
+ button.uni-text-component {
7
+ padding: 5px 10px;
8
+ cursor: pointer;
9
+ }
10
+ .uni-text-component {
11
+ box-sizing: border-box;
12
+ white-space: pre-wrap;
13
+ }
14
+
2
15
  .uni-image-component {
3
16
  max-width: 100%;
4
17
  }
5
18
  .uni-image-mask-wrapper {
6
19
  display: inline-block;
7
20
  }
21
+
22
+ .uni-video-component {
23
+ position: relative;
24
+ text-align: center;
25
+ }
26
+ .play-pause-button {
27
+ position: absolute;
28
+ top: 50%;
29
+ left: 50%;
30
+ transform: translate(-50%, -50%);
31
+ cursor: pointer;
32
+ font-size: 2rem;
33
+ color: #fff;
34
+ background: rgba(0, 0, 0, 0.6);
35
+ border-radius: 50%;
36
+ padding: 10px;
37
+ transition: background 0.3s;
38
+ }
39
+ .play-pause-button:hover {
40
+ background: rgba(0, 0, 0, 0.8);
41
+ }
42
+
43
+
44
+ .uni-calendar-component {
45
+
46
+ }
47
+ .slot-number {
48
+ position: absolute;
49
+ bottom: 2px;
50
+ left: 7px;
51
+ font-size: 12px;
52
+ color: #666
53
+ }
54
+
55
+ .swiper-warp {
56
+ width: 100%;
57
+ height: 100%;
58
+ }
59
+
60
+ .swiper-slide-component {
61
+ text-align: center;
62
+ }
63
+
64
+ .swiper-slide img {
65
+ max-width: 100%;
66
+ max-height: 100%;
67
+ }
8
68
 
9
69
  .slide-guide {
10
70
  position: absolute;
@@ -90,52 +150,6 @@ body, html {
90
150
  position: static !important;
91
151
  }
92
152
 
93
- .uni-video-component {
94
- position: relative;
95
- text-align: center;
96
- }
97
- .play-pause-button {
98
- position: absolute;
99
- top: 50%;
100
- left: 50%;
101
- transform: translate(-50%, -50%);
102
- cursor: pointer;
103
- font-size: 2rem;
104
- color: #fff;
105
- background: rgba(0, 0, 0, 0.6);
106
- border-radius: 50%;
107
- padding: 10px;
108
- transition: background 0.3s;
109
- }
110
- .play-pause-button:hover {
111
- background: rgba(0, 0, 0, 0.8);
112
- }
113
-
114
- h2.uni-text-component, p.uni-text-component {
115
- margin-top: 0;
116
- margin-bottom: 0;
117
- }
118
- button.uni-text-component {
119
- padding: 5px 10px;
120
- cursor: pointer;
121
- }
122
- .uni-text-component {
123
- box-sizing: border-box;
124
- white-space: pre-wrap;
125
- }
126
-
127
-
128
- .uni-calendar-component {
129
-
130
- }
131
- .slot-number {
132
- position: absolute;
133
- bottom: 2px;
134
- left: 7px;
135
- font-size: 12px;
136
- color: #666
137
- }
138
-
139
153
  .like-button {
140
154
  display: flex;
141
155
  flex-direction: column;
@@ -158,37 +172,6 @@ button.uni-text-component {
158
172
  color: #333;
159
173
  }
160
174
 
161
- .uni-lotties-component {
162
- width: 100%;
163
- height: 100%;
164
- }
165
-
166
- .effect {
167
- width: 100%;
168
- height: 100%;
169
- }
170
-
171
- .uni-svg-component {
172
- display: inline-block;
173
- }
174
-
175
- .uni-build-up-component {
176
- }
177
-
178
- .swiper-warp {
179
- width: 100%;
180
- height: 100%;
181
- }
182
-
183
- .swiper-slide-component {
184
- text-align: center;
185
- }
186
-
187
- .swiper-slide img {
188
- max-width: 100%;
189
- max-height: 100%;
190
- }
191
-
192
175
  .ant-input-number {
193
176
  box-sizing: border-box;
194
177
  margin: 0;
@@ -223,6 +206,23 @@ button.uni-text-component {
223
206
  margin-bottom: 0px;
224
207
  vertical-align: top;
225
208
  }
209
+
210
+ .effect {
211
+ width: 100%;
212
+ height: 100%;
213
+ }
214
+
215
+ .uni-lotties-component {
216
+ width: 100%;
217
+ height: 100%;
218
+ }
219
+
220
+ .uni-build-up-component {
221
+ }
222
+
223
+ .uni-svg-component {
224
+ display: inline-block;
225
+ }
226
226
  /**
227
227
  * Swiper 6.8.4
228
228
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -771,248 +771,61 @@ button.swiper-pagination-bullet {
771
771
  backface-visibility: hidden;
772
772
  }
773
773
 
774
-
775
- .no-animation__card {
776
- font-weight: 500;
777
- font-size: var(--countdown-size, 2rem);
778
- line-height: 1.5;
779
- display: block;
780
- color: var(--main-color, #EC685C);
774
+ .unika-calendar-box {
775
+ position: relative;
776
+ width: 325px !important;
777
+ min-height: 300px !important;
778
+ height: auto !important;
779
+ padding-bottom: 20px;
781
780
  }
782
-
783
- .flip-clock {
784
- text-align: center;
785
- perspective: 600px;
786
- margin: 0 auto;
781
+ .unika-calendar-title {
782
+ font-size: 25px;
783
+ padding-bottom: 4px;
787
784
  }
788
-
789
- .flip-clock *,
790
- .flip-clock *:before,
791
- .flip-clock *:after {
792
- box-sizing: border-box;
785
+ .unika-calendar-header {
786
+ display: -webkit-box;
787
+ display: -ms-flexbox;
788
+ display: flex;
789
+ -webkit-box-pack: justify;
790
+ -ms-flex-pack: justify;
791
+ justify-content: space-between;
792
+ -webkit-box-align: end;
793
+ -ms-flex-align: end;
794
+ align-items: flex-end;
795
+ line-height: 1;
796
+ padding: 0 47px 20px;
793
797
  }
794
-
795
- .flip-clock__piece {
796
- display: inline-block;
797
- margin: 0 0.2vw;
798
+ .unika-calendar-header .disabled {
799
+ pointer-events: none;
800
+ color: #f0f0f0;
798
801
  }
799
-
800
- @media (min-width: 1000px) {
801
- .flip-clock__piece {
802
- margin: 0 5px;
803
- }
802
+ .unika-calendar-th {
803
+ display: -webkit-box;
804
+ display: -ms-flexbox;
805
+ display: flex;
806
+ -webkit-box-pack: start;
807
+ -ms-flex-pack: start;
808
+ justify-content: flex-start;
809
+ height: 25px;
810
+ line-height: 25px;
811
+ padding: 0 10px;
812
+ border-radius: 13px
804
813
  }
805
-
806
- .flip-clock__slot {
807
- font-size: var(--label-size, 1rem);
808
- line-height: 1.5;
809
- display: block;
810
- color: var(--label-color, #222222);
814
+ .unika-calendar-th > * {
815
+ width: 14.2%;
816
+ text-align: center;
817
+ color: #fff;
818
+ font-size: 15px;
811
819
  }
812
-
813
- .flip-card {
814
- display: block;
815
- position: relative;
816
- padding-bottom: 0.72em; /* halfHeight */
817
- font-size: var(--countdown-size, 2.25rem);
818
- line-height: 0.95;
820
+ .unika-calendar-th > *:not(:first-child) {
821
+ margin-left: 10px;
819
822
  }
820
-
821
- @media (min-width: 1000px) {
822
- .flip-clock__slot {
823
- font-size: 1.2rem;
824
- }
825
-
826
- .flip-card {
827
- font-size: 3rem;
828
- }
829
- }
830
-
831
- .flip-card__top,
832
- .flip-card__bottom,
833
- .flip-card__back-bottom,
834
- .flip-card__back::before,
835
- .flip-card__back::after{
836
- display: block;
837
- height: 0.72em; /* halfHeight */
838
- color: var(--main-color, #EC685C);
839
- background: var(--main-flip-background-color, #222222);
840
- padding: 0.23em 0.15em 0.4em;
841
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
842
- backface-visibility: hidden;
843
- -webkit-backface-visibility: hidden;
844
- transform-style: preserve-3d;
845
- width: 2.1em;
846
- }
847
-
848
- .flip-card__top-4digits,
849
- .flip-card__bottom-4digits,
850
- .flip-card__back-bottom-4digits,
851
- .flip-card__back-4digits::before,
852
- .flip-card__back-4digits::after {
853
- display: block;
854
- height: 0.72em; /* halfHeight */
855
- color: var(--main-color, #EC685C);
856
- background: var(--main-flip-background-color, #222222);
857
- padding: 0.23em 0.15em 0.4em;
858
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
859
- backface-visibility: hidden;
860
- -webkit-backface-visibility: hidden;
861
- transform-style: preserve-3d;
862
- width: 2.65em;
863
- }
864
-
865
- .flip-card__bottom,
866
- .flip-card__back-bottom,
867
- .flip-card__bottom-4digits,
868
- .flip-card__back-bottom-4digits {
869
- color: var(--second-flip-color, #EC685C);
870
- position: absolute;
871
- top: 50%;
872
- left: 0;
873
- border-top: solid 1px var(--second-flip-background-color, #000);
874
- background: var(--second-flip-background-color, #393939);
875
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
876
- pointer-events: none;
877
- overflow: hidden;
878
- z-index: 2;
879
- }
880
-
881
- .flip-card__back-bottom,
882
- .flip-card__back-bottom-4digits {
883
- z-index: 1;
884
- }
885
-
886
- .flip-card__bottom::after,
887
- .flip-card__back-bottom::after,
888
- .flip-card__bottom-4digits::after,
889
- .flip-card__back-bottom-4digits::after {
890
- display: block;
891
- margin-top: -0.72em; /* Negative halfHeight */
892
- }
893
- .flip-card__back::before,
894
- .flip-card__bottom::after,
895
- .flip-card__back-bottom::after,
896
- .flip-card__back-4digits::before,
897
- .flip-card__bottom-4digits::after,
898
- .flip-card__back-bottom-4digits::after {
899
- content: attr(data-value);
900
- }
901
-
902
- .flip-card__back,
903
- .flip-card__back-4digits {
904
- position: absolute;
905
- top: 0;
906
- height: 100%;
907
- left: 0%;
908
- pointer-events: none;
909
- }
910
- .flip-card__back::before,
911
- .flip-card__back-4digits::before {
912
- position: relative;
913
- overflow: hidden;
914
- z-index: -1;
915
- }
916
-
917
- .flip .flip-card__back::before,
918
- .flip .flip-card__back-4digits::before {
919
- z-index: 1;
920
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
921
- animation-fill-mode: both;
922
- transform-origin: center bottom;
923
- }
924
-
925
- .flip .flip-card__bottom,
926
- .flip .flip-card__bottom-4digits {
927
- transform-origin: center top;
928
- animation-fill-mode: both;
929
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
930
- }
931
- @keyframes flipTop {
932
- 0% {
933
- transform: rotateX(0deg);
934
- z-index: 2;
935
- }
936
- 0%, 99% {
937
- opacity: 1;
938
- }
939
- 100% {
940
- transform: rotateX(-90deg);
941
- opacity: 0;
942
- }
943
- }
944
-
945
- @keyframes flipBottom {
946
- 0%, 50% {
947
- z-index: -1;
948
- transform: rotateX(90deg);
949
- opacity: 0;
950
- }
951
- 51% {
952
- opacity: 1;
953
- }
954
- 100% {
955
- opacity: 1;
956
- transform: rotateX(0deg);
957
- z-index: 5;
958
- }
959
- }
960
-
961
- .unika-calendar-box {
962
- position: relative;
963
- width: 325px !important;
964
- min-height: 300px !important;
965
- height: auto !important;
966
- padding-bottom: 20px;
967
- }
968
- .unika-calendar-title {
969
- font-size: 25px;
970
- padding-bottom: 4px;
971
- }
972
- .unika-calendar-header {
973
- display: -webkit-box;
974
- display: -ms-flexbox;
975
- display: flex;
976
- -webkit-box-pack: justify;
977
- -ms-flex-pack: justify;
978
- justify-content: space-between;
979
- -webkit-box-align: end;
980
- -ms-flex-align: end;
981
- align-items: flex-end;
982
- line-height: 1;
983
- padding: 0 47px 20px;
984
- }
985
- .unika-calendar-header .disabled {
986
- pointer-events: none;
987
- color: #f0f0f0;
988
- }
989
- .unika-calendar-th {
990
- display: -webkit-box;
991
- display: -ms-flexbox;
992
- display: flex;
993
- -webkit-box-pack: start;
994
- -ms-flex-pack: start;
995
- justify-content: flex-start;
996
- height: 25px;
997
- line-height: 25px;
998
- padding: 0 10px;
999
- border-radius: 13px
1000
- }
1001
- .unika-calendar-th > * {
1002
- width: 14.2%;
1003
- text-align: center;
1004
- color: #fff;
1005
- font-size: 15px;
1006
- }
1007
- .unika-calendar-th > *:not(:first-child) {
1008
- margin-left: 10px;
1009
- }
1010
- .unika-calendar-body {
1011
- padding: 0;
1012
- margin: 0;
1013
- font-size: 0;
1014
- padding: 5px 10px 0;
1015
- text-align: left;
823
+ .unika-calendar-body {
824
+ padding: 0;
825
+ margin: 0;
826
+ font-size: 0;
827
+ padding: 5px 10px 0;
828
+ text-align: left;
1016
829
  }
1017
830
  .unika-calendar-editor {
1018
831
  font-size: 25px;
@@ -1218,3 +1031,190 @@ button.swiper-pagination-bullet {
1218
1031
  padding: 0 0px;
1219
1032
  border-bottom: 1px solid
1220
1033
  }
1034
+
1035
+
1036
+ .no-animation__card {
1037
+ font-weight: 500;
1038
+ font-size: var(--countdown-size, 2rem);
1039
+ line-height: 1.5;
1040
+ display: block;
1041
+ color: var(--main-color, #EC685C);
1042
+ }
1043
+
1044
+ .flip-clock {
1045
+ text-align: center;
1046
+ perspective: 600px;
1047
+ margin: 0 auto;
1048
+ }
1049
+
1050
+ .flip-clock *,
1051
+ .flip-clock *:before,
1052
+ .flip-clock *:after {
1053
+ box-sizing: border-box;
1054
+ }
1055
+
1056
+ .flip-clock__piece {
1057
+ display: inline-block;
1058
+ margin: 0 0.2vw;
1059
+ }
1060
+
1061
+ @media (min-width: 1000px) {
1062
+ .flip-clock__piece {
1063
+ margin: 0 5px;
1064
+ }
1065
+ }
1066
+
1067
+ .flip-clock__slot {
1068
+ font-size: var(--label-size, 1rem);
1069
+ line-height: 1.5;
1070
+ display: block;
1071
+ color: var(--label-color, #222222);
1072
+ }
1073
+
1074
+ .flip-card {
1075
+ display: block;
1076
+ position: relative;
1077
+ padding-bottom: 0.72em; /* halfHeight */
1078
+ font-size: var(--countdown-size, 2.25rem);
1079
+ line-height: 0.95;
1080
+ }
1081
+
1082
+ @media (min-width: 1000px) {
1083
+ .flip-clock__slot {
1084
+ font-size: 1.2rem;
1085
+ }
1086
+
1087
+ .flip-card {
1088
+ font-size: 3rem;
1089
+ }
1090
+ }
1091
+
1092
+ .flip-card__top,
1093
+ .flip-card__bottom,
1094
+ .flip-card__back-bottom,
1095
+ .flip-card__back::before,
1096
+ .flip-card__back::after{
1097
+ display: block;
1098
+ height: 0.72em; /* halfHeight */
1099
+ color: var(--main-color, #EC685C);
1100
+ background: var(--main-flip-background-color, #222222);
1101
+ padding: 0.23em 0.15em 0.4em;
1102
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1103
+ backface-visibility: hidden;
1104
+ -webkit-backface-visibility: hidden;
1105
+ transform-style: preserve-3d;
1106
+ width: 2.1em;
1107
+ }
1108
+
1109
+ .flip-card__top-4digits,
1110
+ .flip-card__bottom-4digits,
1111
+ .flip-card__back-bottom-4digits,
1112
+ .flip-card__back-4digits::before,
1113
+ .flip-card__back-4digits::after {
1114
+ display: block;
1115
+ height: 0.72em; /* halfHeight */
1116
+ color: var(--main-color, #EC685C);
1117
+ background: var(--main-flip-background-color, #222222);
1118
+ padding: 0.23em 0.15em 0.4em;
1119
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1120
+ backface-visibility: hidden;
1121
+ -webkit-backface-visibility: hidden;
1122
+ transform-style: preserve-3d;
1123
+ width: 2.65em;
1124
+ }
1125
+
1126
+ .flip-card__bottom,
1127
+ .flip-card__back-bottom,
1128
+ .flip-card__bottom-4digits,
1129
+ .flip-card__back-bottom-4digits {
1130
+ color: var(--second-flip-color, #EC685C);
1131
+ position: absolute;
1132
+ top: 50%;
1133
+ left: 0;
1134
+ border-top: solid 1px var(--second-flip-background-color, #000);
1135
+ background: var(--second-flip-background-color, #393939);
1136
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1137
+ pointer-events: none;
1138
+ overflow: hidden;
1139
+ z-index: 2;
1140
+ }
1141
+
1142
+ .flip-card__back-bottom,
1143
+ .flip-card__back-bottom-4digits {
1144
+ z-index: 1;
1145
+ }
1146
+
1147
+ .flip-card__bottom::after,
1148
+ .flip-card__back-bottom::after,
1149
+ .flip-card__bottom-4digits::after,
1150
+ .flip-card__back-bottom-4digits::after {
1151
+ display: block;
1152
+ margin-top: -0.72em; /* Negative halfHeight */
1153
+ }
1154
+ .flip-card__back::before,
1155
+ .flip-card__bottom::after,
1156
+ .flip-card__back-bottom::after,
1157
+ .flip-card__back-4digits::before,
1158
+ .flip-card__bottom-4digits::after,
1159
+ .flip-card__back-bottom-4digits::after {
1160
+ content: attr(data-value);
1161
+ }
1162
+
1163
+ .flip-card__back,
1164
+ .flip-card__back-4digits {
1165
+ position: absolute;
1166
+ top: 0;
1167
+ height: 100%;
1168
+ left: 0%;
1169
+ pointer-events: none;
1170
+ }
1171
+ .flip-card__back::before,
1172
+ .flip-card__back-4digits::before {
1173
+ position: relative;
1174
+ overflow: hidden;
1175
+ z-index: -1;
1176
+ }
1177
+
1178
+ .flip .flip-card__back::before,
1179
+ .flip .flip-card__back-4digits::before {
1180
+ z-index: 1;
1181
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1182
+ animation-fill-mode: both;
1183
+ transform-origin: center bottom;
1184
+ }
1185
+
1186
+ .flip .flip-card__bottom,
1187
+ .flip .flip-card__bottom-4digits {
1188
+ transform-origin: center top;
1189
+ animation-fill-mode: both;
1190
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1191
+ }
1192
+ @keyframes flipTop {
1193
+ 0% {
1194
+ transform: rotateX(0deg);
1195
+ z-index: 2;
1196
+ }
1197
+ 0%, 99% {
1198
+ opacity: 1;
1199
+ }
1200
+ 100% {
1201
+ transform: rotateX(-90deg);
1202
+ opacity: 0;
1203
+ }
1204
+ }
1205
+
1206
+ @keyframes flipBottom {
1207
+ 0%, 50% {
1208
+ z-index: -1;
1209
+ transform: rotateX(90deg);
1210
+ opacity: 0;
1211
+ }
1212
+ 51% {
1213
+ opacity: 1;
1214
+ }
1215
+ 100% {
1216
+ opacity: 1;
1217
+ transform: rotateX(0deg);
1218
+ z-index: 5;
1219
+ }
1220
+ }
@@ -5200,7 +5200,8 @@ const effectDefaultProps = {
5200
5200
  shape: ['image'],
5201
5201
  number: 100,
5202
5202
  spead: 5,
5203
- transform: 'rotate(0deg)'
5203
+ transform: 'rotate(0deg)',
5204
+ id: '1'
5204
5205
  };
5205
5206
  const registerFormDefaultProps = {
5206
5207
  left: '57px',
@@ -26670,10 +26671,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
26670
26671
  }, [
26671
26672
  (openBlock(), createBlock(_component_Particles, {
26672
26673
  key: _ctx.particlesKey,
26673
- id: "tsparticles",
26674
+ id: _ctx.id,
26674
26675
  options: _ctx.options,
26675
26676
  class: "effect"
26676
- }, null, 8 /* PROPS */, ["options"]))
26677
+ }, null, 8 /* PROPS */, ["id", "options"]))
26677
26678
  ], 4 /* STYLE */))
26678
26679
  }
26679
26680
 
@@ -5207,7 +5207,8 @@
5207
5207
  shape: ['image'],
5208
5208
  number: 100,
5209
5209
  spead: 5,
5210
- transform: 'rotate(0deg)'
5210
+ transform: 'rotate(0deg)',
5211
+ id: '1'
5211
5212
  };
5212
5213
  const registerFormDefaultProps = {
5213
5214
  left: '57px',
@@ -26677,10 +26678,10 @@
26677
26678
  }, [
26678
26679
  (vue.openBlock(), vue.createBlock(_component_Particles, {
26679
26680
  key: _ctx.particlesKey,
26680
- id: "tsparticles",
26681
+ id: _ctx.id,
26681
26682
  options: _ctx.options,
26682
26683
  class: "effect"
26683
- }, null, 8 /* PROPS */, ["options"]))
26684
+ }, null, 8 /* PROPS */, ["id", "options"]))
26684
26685
  ], 4 /* STYLE */))
26685
26686
  }
26686
26687
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.284",
3
+ "version": "1.0.285",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",