unika-components 1.0.264 → 1.0.265

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.
@@ -10,13 +10,6 @@ button.uni-text-component {
10
10
  box-sizing: border-box;
11
11
  white-space: pre-wrap;
12
12
  }
13
-
14
- .uni-image-component {
15
- max-width: 100%;
16
- }
17
- .uni-image-mask-wrapper {
18
- display: inline-block;
19
- }
20
13
 
21
14
  .uni-video-component {
22
15
  position: relative;
@@ -39,6 +32,53 @@ button.uni-text-component {
39
32
  background: rgba(0, 0, 0, 0.8);
40
33
  }
41
34
 
35
+
36
+ .uni-calendar-component {
37
+
38
+ }
39
+ .slot-number {
40
+ position: absolute;
41
+ bottom: 2px;
42
+ left: 7px;
43
+ font-size: 12px;
44
+ color: #666
45
+ }
46
+
47
+ .ant-input-number {
48
+ box-sizing: border-box;
49
+ margin: 0;
50
+ padding: 0;
51
+ color: rgba(0, 0, 0, 0.88);
52
+ font-size: 14px;
53
+ line-height: 1.5714285714285714;
54
+ list-style: none;
55
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
56
+ position: relative;
57
+ display: inline-block;
58
+ width: 100%;
59
+ min-width: 0;
60
+ background-color: #ffffff;
61
+ background-image: none;
62
+ border-width: 1px;
63
+ border-style: solid;
64
+ border-color: #d9d9d9;
65
+ border-radius: 6px;
66
+ transition: all 0.2s;
67
+ border: 1px solid #d9d9d9;
68
+ }
69
+ .ant-form-item {
70
+ box-sizing: border-box;
71
+ margin: 0;
72
+ padding: 0;
73
+ color: rgba(0, 0, 0, 0.88);
74
+ font-size: 14px;
75
+ line-height: 1.5714285714285714;
76
+ list-style: none;
77
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
78
+ margin-bottom: 0px;
79
+ vertical-align: top;
80
+ }
81
+
42
82
  .like-button {
43
83
  display: flex;
44
84
  flex-direction: column;
@@ -60,6 +100,11 @@ button.uni-text-component {
60
100
  font-size: 16px;
61
101
  color: #333;
62
102
  }
103
+
104
+ .effect {
105
+ width: 100%;
106
+ height: 100%;
107
+ }
63
108
 
64
109
  .slide-guide {
65
110
  position: absolute;
@@ -133,63 +178,13 @@ body, html {
133
178
  transform: translate3d(-50%, -50%, 0);
134
179
  }
135
180
  }
136
-
137
-
138
- .uni-calendar-component {
139
-
140
- }
141
- .slot-number {
142
- position: absolute;
143
- bottom: 2px;
144
- left: 7px;
145
- font-size: 12px;
146
- color: #666
147
- }
148
-
149
- .uni-lotties-component {
150
- width: 100%;
151
- height: 100%;
152
- }
153
-
154
- .ant-input-number {
155
- box-sizing: border-box;
156
- margin: 0;
157
- padding: 0;
158
- color: rgba(0, 0, 0, 0.88);
159
- font-size: 14px;
160
- line-height: 1.5714285714285714;
161
- list-style: none;
162
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
163
- position: relative;
164
- display: inline-block;
165
- width: 100%;
166
- min-width: 0;
167
- background-color: #ffffff;
168
- background-image: none;
169
- border-width: 1px;
170
- border-style: solid;
171
- border-color: #d9d9d9;
172
- border-radius: 6px;
173
- transition: all 0.2s;
174
- border: 1px solid #d9d9d9;
175
- }
176
- .ant-form-item {
177
- box-sizing: border-box;
178
- margin: 0;
179
- padding: 0;
180
- color: rgba(0, 0, 0, 0.88);
181
- font-size: 14px;
182
- line-height: 1.5714285714285714;
183
- list-style: none;
184
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
185
- margin-bottom: 0px;
186
- vertical-align: top;
187
- }
188
-
189
- .effect {
190
- width: 100%;
191
- height: 100%;
192
- }
181
+
182
+ .uni-image-component {
183
+ max-width: 100%;
184
+ }
185
+ .uni-image-mask-wrapper {
186
+ display: inline-block;
187
+ }
193
188
 
194
189
  .swiper-warp {
195
190
  width: 100%;
@@ -204,6 +199,11 @@ body, html {
204
199
  max-width: 100%;
205
200
  max-height: 100%;
206
201
  }
202
+
203
+ .uni-lotties-component {
204
+ width: 100%;
205
+ height: 100%;
206
+ }
207
207
 
208
208
  .uni-svg-component {
209
209
  display: inline-block;
@@ -759,193 +759,6 @@ button.swiper-pagination-bullet {
759
759
  backface-visibility: hidden;
760
760
  }
761
761
 
762
-
763
- .no-animation__card {
764
- font-weight: 500;
765
- font-size: var(--countdown-size, 2rem);
766
- line-height: 1.5;
767
- display: block;
768
- color: var(--main-color, #EC685C);
769
- }
770
-
771
- .flip-clock {
772
- text-align: center;
773
- perspective: 600px;
774
- margin: 0 auto;
775
- }
776
-
777
- .flip-clock *,
778
- .flip-clock *:before,
779
- .flip-clock *:after {
780
- box-sizing: border-box;
781
- }
782
-
783
- .flip-clock__piece {
784
- display: inline-block;
785
- margin: 0 0.2vw;
786
- }
787
-
788
- @media (min-width: 1000px) {
789
- .flip-clock__piece {
790
- margin: 0 5px;
791
- }
792
- }
793
-
794
- .flip-clock__slot {
795
- font-size: var(--label-size, 1rem);
796
- line-height: 1.5;
797
- display: block;
798
- color: var(--label-color, #222222);
799
- }
800
-
801
- .flip-card {
802
- display: block;
803
- position: relative;
804
- padding-bottom: 0.72em; /* halfHeight */
805
- font-size: var(--countdown-size, 2.25rem);
806
- line-height: 0.95;
807
- }
808
-
809
- @media (min-width: 1000px) {
810
- .flip-clock__slot {
811
- font-size: 1.2rem;
812
- }
813
-
814
- .flip-card {
815
- font-size: 3rem;
816
- }
817
- }
818
-
819
- .flip-card__top,
820
- .flip-card__bottom,
821
- .flip-card__back-bottom,
822
- .flip-card__back::before,
823
- .flip-card__back::after{
824
- display: block;
825
- height: 0.72em; /* halfHeight */
826
- color: var(--main-color, #EC685C);
827
- background: var(--main-flip-background-color, #222222);
828
- padding: 0.23em 0.15em 0.4em;
829
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
830
- backface-visibility: hidden;
831
- -webkit-backface-visibility: hidden;
832
- transform-style: preserve-3d;
833
- width: 2.1em;
834
- }
835
-
836
- .flip-card__top-4digits,
837
- .flip-card__bottom-4digits,
838
- .flip-card__back-bottom-4digits,
839
- .flip-card__back-4digits::before,
840
- .flip-card__back-4digits::after {
841
- display: block;
842
- height: 0.72em; /* halfHeight */
843
- color: var(--main-color, #EC685C);
844
- background: var(--main-flip-background-color, #222222);
845
- padding: 0.23em 0.15em 0.4em;
846
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
847
- backface-visibility: hidden;
848
- -webkit-backface-visibility: hidden;
849
- transform-style: preserve-3d;
850
- width: 2.65em;
851
- }
852
-
853
- .flip-card__bottom,
854
- .flip-card__back-bottom,
855
- .flip-card__bottom-4digits,
856
- .flip-card__back-bottom-4digits {
857
- color: var(--second-flip-color, #EC685C);
858
- position: absolute;
859
- top: 50%;
860
- left: 0;
861
- border-top: solid 1px var(--second-flip-background-color, #000);
862
- background: var(--second-flip-background-color, #393939);
863
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
864
- pointer-events: none;
865
- overflow: hidden;
866
- z-index: 2;
867
- }
868
-
869
- .flip-card__back-bottom,
870
- .flip-card__back-bottom-4digits {
871
- z-index: 1;
872
- }
873
-
874
- .flip-card__bottom::after,
875
- .flip-card__back-bottom::after,
876
- .flip-card__bottom-4digits::after,
877
- .flip-card__back-bottom-4digits::after {
878
- display: block;
879
- margin-top: -0.72em; /* Negative halfHeight */
880
- }
881
- .flip-card__back::before,
882
- .flip-card__bottom::after,
883
- .flip-card__back-bottom::after,
884
- .flip-card__back-4digits::before,
885
- .flip-card__bottom-4digits::after,
886
- .flip-card__back-bottom-4digits::after {
887
- content: attr(data-value);
888
- }
889
-
890
- .flip-card__back,
891
- .flip-card__back-4digits {
892
- position: absolute;
893
- top: 0;
894
- height: 100%;
895
- left: 0%;
896
- pointer-events: none;
897
- }
898
- .flip-card__back::before,
899
- .flip-card__back-4digits::before {
900
- position: relative;
901
- overflow: hidden;
902
- z-index: -1;
903
- }
904
-
905
- .flip .flip-card__back::before,
906
- .flip .flip-card__back-4digits::before {
907
- z-index: 1;
908
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
909
- animation-fill-mode: both;
910
- transform-origin: center bottom;
911
- }
912
-
913
- .flip .flip-card__bottom,
914
- .flip .flip-card__bottom-4digits {
915
- transform-origin: center top;
916
- animation-fill-mode: both;
917
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
918
- }
919
- @keyframes flipTop {
920
- 0% {
921
- transform: rotateX(0deg);
922
- z-index: 2;
923
- }
924
- 0%, 99% {
925
- opacity: 1;
926
- }
927
- 100% {
928
- transform: rotateX(-90deg);
929
- opacity: 0;
930
- }
931
- }
932
-
933
- @keyframes flipBottom {
934
- 0%, 50% {
935
- z-index: -1;
936
- transform: rotateX(90deg);
937
- opacity: 0;
938
- }
939
- 51% {
940
- opacity: 1;
941
- }
942
- 100% {
943
- opacity: 1;
944
- transform: rotateX(0deg);
945
- z-index: 5;
946
- }
947
- }
948
-
949
762
  .unika-calendar-box {
950
763
  position: relative;
951
764
  width: 325px !important;
@@ -1205,3 +1018,190 @@ button.swiper-pagination-bullet {
1205
1018
  padding: 0 0px;
1206
1019
  border-bottom: 1px solid
1207
1020
  }
1021
+
1022
+
1023
+ .no-animation__card {
1024
+ font-weight: 500;
1025
+ font-size: var(--countdown-size, 2rem);
1026
+ line-height: 1.5;
1027
+ display: block;
1028
+ color: var(--main-color, #EC685C);
1029
+ }
1030
+
1031
+ .flip-clock {
1032
+ text-align: center;
1033
+ perspective: 600px;
1034
+ margin: 0 auto;
1035
+ }
1036
+
1037
+ .flip-clock *,
1038
+ .flip-clock *:before,
1039
+ .flip-clock *:after {
1040
+ box-sizing: border-box;
1041
+ }
1042
+
1043
+ .flip-clock__piece {
1044
+ display: inline-block;
1045
+ margin: 0 0.2vw;
1046
+ }
1047
+
1048
+ @media (min-width: 1000px) {
1049
+ .flip-clock__piece {
1050
+ margin: 0 5px;
1051
+ }
1052
+ }
1053
+
1054
+ .flip-clock__slot {
1055
+ font-size: var(--label-size, 1rem);
1056
+ line-height: 1.5;
1057
+ display: block;
1058
+ color: var(--label-color, #222222);
1059
+ }
1060
+
1061
+ .flip-card {
1062
+ display: block;
1063
+ position: relative;
1064
+ padding-bottom: 0.72em; /* halfHeight */
1065
+ font-size: var(--countdown-size, 2.25rem);
1066
+ line-height: 0.95;
1067
+ }
1068
+
1069
+ @media (min-width: 1000px) {
1070
+ .flip-clock__slot {
1071
+ font-size: 1.2rem;
1072
+ }
1073
+
1074
+ .flip-card {
1075
+ font-size: 3rem;
1076
+ }
1077
+ }
1078
+
1079
+ .flip-card__top,
1080
+ .flip-card__bottom,
1081
+ .flip-card__back-bottom,
1082
+ .flip-card__back::before,
1083
+ .flip-card__back::after{
1084
+ display: block;
1085
+ height: 0.72em; /* halfHeight */
1086
+ color: var(--main-color, #EC685C);
1087
+ background: var(--main-flip-background-color, #222222);
1088
+ padding: 0.23em 0.15em 0.4em;
1089
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1090
+ backface-visibility: hidden;
1091
+ -webkit-backface-visibility: hidden;
1092
+ transform-style: preserve-3d;
1093
+ width: 2.1em;
1094
+ }
1095
+
1096
+ .flip-card__top-4digits,
1097
+ .flip-card__bottom-4digits,
1098
+ .flip-card__back-bottom-4digits,
1099
+ .flip-card__back-4digits::before,
1100
+ .flip-card__back-4digits::after {
1101
+ display: block;
1102
+ height: 0.72em; /* halfHeight */
1103
+ color: var(--main-color, #EC685C);
1104
+ background: var(--main-flip-background-color, #222222);
1105
+ padding: 0.23em 0.15em 0.4em;
1106
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1107
+ backface-visibility: hidden;
1108
+ -webkit-backface-visibility: hidden;
1109
+ transform-style: preserve-3d;
1110
+ width: 2.65em;
1111
+ }
1112
+
1113
+ .flip-card__bottom,
1114
+ .flip-card__back-bottom,
1115
+ .flip-card__bottom-4digits,
1116
+ .flip-card__back-bottom-4digits {
1117
+ color: var(--second-flip-color, #EC685C);
1118
+ position: absolute;
1119
+ top: 50%;
1120
+ left: 0;
1121
+ border-top: solid 1px var(--second-flip-background-color, #000);
1122
+ background: var(--second-flip-background-color, #393939);
1123
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1124
+ pointer-events: none;
1125
+ overflow: hidden;
1126
+ z-index: 2;
1127
+ }
1128
+
1129
+ .flip-card__back-bottom,
1130
+ .flip-card__back-bottom-4digits {
1131
+ z-index: 1;
1132
+ }
1133
+
1134
+ .flip-card__bottom::after,
1135
+ .flip-card__back-bottom::after,
1136
+ .flip-card__bottom-4digits::after,
1137
+ .flip-card__back-bottom-4digits::after {
1138
+ display: block;
1139
+ margin-top: -0.72em; /* Negative halfHeight */
1140
+ }
1141
+ .flip-card__back::before,
1142
+ .flip-card__bottom::after,
1143
+ .flip-card__back-bottom::after,
1144
+ .flip-card__back-4digits::before,
1145
+ .flip-card__bottom-4digits::after,
1146
+ .flip-card__back-bottom-4digits::after {
1147
+ content: attr(data-value);
1148
+ }
1149
+
1150
+ .flip-card__back,
1151
+ .flip-card__back-4digits {
1152
+ position: absolute;
1153
+ top: 0;
1154
+ height: 100%;
1155
+ left: 0%;
1156
+ pointer-events: none;
1157
+ }
1158
+ .flip-card__back::before,
1159
+ .flip-card__back-4digits::before {
1160
+ position: relative;
1161
+ overflow: hidden;
1162
+ z-index: -1;
1163
+ }
1164
+
1165
+ .flip .flip-card__back::before,
1166
+ .flip .flip-card__back-4digits::before {
1167
+ z-index: 1;
1168
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1169
+ animation-fill-mode: both;
1170
+ transform-origin: center bottom;
1171
+ }
1172
+
1173
+ .flip .flip-card__bottom,
1174
+ .flip .flip-card__bottom-4digits {
1175
+ transform-origin: center top;
1176
+ animation-fill-mode: both;
1177
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1178
+ }
1179
+ @keyframes flipTop {
1180
+ 0% {
1181
+ transform: rotateX(0deg);
1182
+ z-index: 2;
1183
+ }
1184
+ 0%, 99% {
1185
+ opacity: 1;
1186
+ }
1187
+ 100% {
1188
+ transform: rotateX(-90deg);
1189
+ opacity: 0;
1190
+ }
1191
+ }
1192
+
1193
+ @keyframes flipBottom {
1194
+ 0%, 50% {
1195
+ z-index: -1;
1196
+ transform: rotateX(90deg);
1197
+ opacity: 0;
1198
+ }
1199
+ 51% {
1200
+ opacity: 1;
1201
+ }
1202
+ 100% {
1203
+ opacity: 1;
1204
+ transform: rotateX(0deg);
1205
+ z-index: 5;
1206
+ }
1207
+ }
@@ -13231,7 +13231,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13231
13231
  ref: _ctx.setAnimationRef,
13232
13232
  id: `component-${item.id}`,
13233
13233
  key: item.id,
13234
- style: normalizeStyle$1({ width: '100%', height: '100%', transform: item.props.transform })
13234
+ style: normalizeStyle$1({ width: '100%', height: '100%', transform: item.props.transform, position: 'absolute', left: '0px',top: '0px' })
13235
13235
  }, [
13236
13236
  (item.name != 'uni-build-up' && !item.isHidden)
13237
13237
  ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, {
@@ -13238,7 +13238,7 @@
13238
13238
  ref: _ctx.setAnimationRef,
13239
13239
  id: `component-${item.id}`,
13240
13240
  key: item.id,
13241
- style: vue.normalizeStyle({ width: '100%', height: '100%', transform: item.props.transform })
13241
+ style: vue.normalizeStyle({ width: '100%', height: '100%', transform: item.props.transform, position: 'absolute', left: '0px',top: '0px' })
13242
13242
  }, [
13243
13243
  (item.name != 'uni-build-up' && !item.isHidden)
13244
13244
  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({ key: 0 }, item.props, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.264",
3
+ "version": "1.0.265",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",