unika-components 1.0.268 → 1.0.269

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.
@@ -1,10 +1,55 @@
1
1
 
2
+ h2.uni-text-component, p.uni-text-component {
3
+ margin-bottom: 0;
4
+ }
5
+ button.uni-text-component {
6
+ padding: 5px 10px;
7
+ cursor: pointer;
8
+ }
9
+ .uni-text-component {
10
+ box-sizing: border-box;
11
+ white-space: pre-wrap;
12
+ }
13
+
14
+ .uni-video-component {
15
+ position: relative;
16
+ text-align: center;
17
+ }
18
+ .play-pause-button {
19
+ position: absolute;
20
+ top: 50%;
21
+ left: 50%;
22
+ transform: translate(-50%, -50%);
23
+ cursor: pointer;
24
+ font-size: 2rem;
25
+ color: #fff;
26
+ background: rgba(0, 0, 0, 0.6);
27
+ border-radius: 50%;
28
+ padding: 10px;
29
+ transition: background 0.3s;
30
+ }
31
+ .play-pause-button:hover {
32
+ background: rgba(0, 0, 0, 0.8);
33
+ }
34
+
2
35
  .uni-image-component {
3
36
  max-width: 100%;
4
37
  }
5
38
  .uni-image-mask-wrapper {
6
39
  display: inline-block;
7
40
  }
41
+
42
+
43
+ .uni-calendar-component {
44
+
45
+ }
46
+ .slot-number {
47
+ position: absolute;
48
+ bottom: 2px;
49
+ left: 7px;
50
+ font-size: 12px;
51
+ color: #666
52
+ }
8
53
 
9
54
  .slide-guide {
10
55
  position: absolute;
@@ -84,39 +129,12 @@ body, html {
84
129
  .static-transform .uni-text-component {
85
130
  transform: rotate(0deg) !important;
86
131
  }
87
-
88
- .uni-video-component {
89
- position: relative;
90
- text-align: center;
91
- }
92
- .play-pause-button {
93
- position: absolute;
94
- top: 50%;
95
- left: 50%;
96
- transform: translate(-50%, -50%);
97
- cursor: pointer;
98
- font-size: 2rem;
99
- color: #fff;
100
- background: rgba(0, 0, 0, 0.6);
101
- border-radius: 50%;
102
- padding: 10px;
103
- transition: background 0.3s;
104
- }
105
- .play-pause-button:hover {
106
- background: rgba(0, 0, 0, 0.8);
107
- }
108
-
109
-
110
- .uni-calendar-component {
111
-
112
- }
113
- .slot-number {
114
- position: absolute;
115
- bottom: 2px;
116
- left: 7px;
117
- font-size: 12px;
118
- color: #666
119
- }
132
+ .edit-wrapper .uni-build-up, .edit-wrapper .uni-text-component, .edit-wrapper .uni-image-component, .edit-wrapper .uni-shape-component, .edit-wrapper .uni-video-component, .edit-wrapper .uni-music-component
133
+ , .edit-wrapper .uni-countdown-component, .edit-wrapper .uni-calendar-component, .edit-wrapper .uni-swiper-component, .edit-wrapper .uni-effect-component, .edit-wrapper .uni-call-component, .edit-wrapper .uni-button-component, .edit-wrapper .uni-like-component , .edit-wrapper .uni-map-component,
134
+ .edit-wrapper .uni-lotties-component, .edit-wrapper .uni-like-component, .edit-wrapper .uni-background-component, .edit-wrapper .uni-svg-component, .edit-wrapper .uni-register-form-component{
135
+ position: static !important;
136
+ transform: rotate(0deg) !important;
137
+ }
120
138
 
121
139
  .ant-input-number {
122
140
  box-sizing: border-box;
@@ -153,6 +171,11 @@ body, html {
153
171
  vertical-align: top;
154
172
  }
155
173
 
174
+ .effect {
175
+ width: 100%;
176
+ height: 100%;
177
+ }
178
+
156
179
  .like-button {
157
180
  display: flex;
158
181
  flex-direction: column;
@@ -175,28 +198,6 @@ body, html {
175
198
  color: #333;
176
199
  }
177
200
 
178
- .uni-lotties-component {
179
- width: 100%;
180
- height: 100%;
181
- }
182
-
183
- h2.uni-text-component, p.uni-text-component {
184
- margin-bottom: 0;
185
- }
186
- button.uni-text-component {
187
- padding: 5px 10px;
188
- cursor: pointer;
189
- }
190
- .uni-text-component {
191
- box-sizing: border-box;
192
- white-space: pre-wrap;
193
- }
194
-
195
- .effect {
196
- width: 100%;
197
- height: 100%;
198
- }
199
-
200
201
  .swiper-warp {
201
202
  width: 100%;
202
203
  height: 100%;
@@ -213,6 +214,11 @@ button.uni-text-component {
213
214
 
214
215
  .uni-build-up-component {
215
216
  }
217
+
218
+ .uni-lotties-component {
219
+ width: 100%;
220
+ height: 100%;
221
+ }
216
222
 
217
223
  .uni-svg-component {
218
224
  display: inline-block;
@@ -765,6 +771,193 @@ button.swiper-pagination-bullet {
765
771
  backface-visibility: hidden;
766
772
  }
767
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);
781
+ }
782
+
783
+ .flip-clock {
784
+ text-align: center;
785
+ perspective: 600px;
786
+ margin: 0 auto;
787
+ }
788
+
789
+ .flip-clock *,
790
+ .flip-clock *:before,
791
+ .flip-clock *:after {
792
+ box-sizing: border-box;
793
+ }
794
+
795
+ .flip-clock__piece {
796
+ display: inline-block;
797
+ margin: 0 0.2vw;
798
+ }
799
+
800
+ @media (min-width: 1000px) {
801
+ .flip-clock__piece {
802
+ margin: 0 5px;
803
+ }
804
+ }
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);
811
+ }
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;
819
+ }
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
+
768
961
  .unika-calendar-box {
769
962
  position: relative;
770
963
  width: 325px !important;
@@ -1024,190 +1217,3 @@ button.swiper-pagination-bullet {
1024
1217
  padding: 0 0px;
1025
1218
  border-bottom: 1px solid
1026
1219
  }
1027
-
1028
-
1029
- .no-animation__card {
1030
- font-weight: 500;
1031
- font-size: var(--countdown-size, 2rem);
1032
- line-height: 1.5;
1033
- display: block;
1034
- color: var(--main-color, #EC685C);
1035
- }
1036
-
1037
- .flip-clock {
1038
- text-align: center;
1039
- perspective: 600px;
1040
- margin: 0 auto;
1041
- }
1042
-
1043
- .flip-clock *,
1044
- .flip-clock *:before,
1045
- .flip-clock *:after {
1046
- box-sizing: border-box;
1047
- }
1048
-
1049
- .flip-clock__piece {
1050
- display: inline-block;
1051
- margin: 0 0.2vw;
1052
- }
1053
-
1054
- @media (min-width: 1000px) {
1055
- .flip-clock__piece {
1056
- margin: 0 5px;
1057
- }
1058
- }
1059
-
1060
- .flip-clock__slot {
1061
- font-size: var(--label-size, 1rem);
1062
- line-height: 1.5;
1063
- display: block;
1064
- color: var(--label-color, #222222);
1065
- }
1066
-
1067
- .flip-card {
1068
- display: block;
1069
- position: relative;
1070
- padding-bottom: 0.72em; /* halfHeight */
1071
- font-size: var(--countdown-size, 2.25rem);
1072
- line-height: 0.95;
1073
- }
1074
-
1075
- @media (min-width: 1000px) {
1076
- .flip-clock__slot {
1077
- font-size: 1.2rem;
1078
- }
1079
-
1080
- .flip-card {
1081
- font-size: 3rem;
1082
- }
1083
- }
1084
-
1085
- .flip-card__top,
1086
- .flip-card__bottom,
1087
- .flip-card__back-bottom,
1088
- .flip-card__back::before,
1089
- .flip-card__back::after{
1090
- display: block;
1091
- height: 0.72em; /* halfHeight */
1092
- color: var(--main-color, #EC685C);
1093
- background: var(--main-flip-background-color, #222222);
1094
- padding: 0.23em 0.15em 0.4em;
1095
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1096
- backface-visibility: hidden;
1097
- -webkit-backface-visibility: hidden;
1098
- transform-style: preserve-3d;
1099
- width: 2.1em;
1100
- }
1101
-
1102
- .flip-card__top-4digits,
1103
- .flip-card__bottom-4digits,
1104
- .flip-card__back-bottom-4digits,
1105
- .flip-card__back-4digits::before,
1106
- .flip-card__back-4digits::after {
1107
- display: block;
1108
- height: 0.72em; /* halfHeight */
1109
- color: var(--main-color, #EC685C);
1110
- background: var(--main-flip-background-color, #222222);
1111
- padding: 0.23em 0.15em 0.4em;
1112
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1113
- backface-visibility: hidden;
1114
- -webkit-backface-visibility: hidden;
1115
- transform-style: preserve-3d;
1116
- width: 2.65em;
1117
- }
1118
-
1119
- .flip-card__bottom,
1120
- .flip-card__back-bottom,
1121
- .flip-card__bottom-4digits,
1122
- .flip-card__back-bottom-4digits {
1123
- color: var(--second-flip-color, #EC685C);
1124
- position: absolute;
1125
- top: 50%;
1126
- left: 0;
1127
- border-top: solid 1px var(--second-flip-background-color, #000);
1128
- background: var(--second-flip-background-color, #393939);
1129
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1130
- pointer-events: none;
1131
- overflow: hidden;
1132
- z-index: 2;
1133
- }
1134
-
1135
- .flip-card__back-bottom,
1136
- .flip-card__back-bottom-4digits {
1137
- z-index: 1;
1138
- }
1139
-
1140
- .flip-card__bottom::after,
1141
- .flip-card__back-bottom::after,
1142
- .flip-card__bottom-4digits::after,
1143
- .flip-card__back-bottom-4digits::after {
1144
- display: block;
1145
- margin-top: -0.72em; /* Negative halfHeight */
1146
- }
1147
- .flip-card__back::before,
1148
- .flip-card__bottom::after,
1149
- .flip-card__back-bottom::after,
1150
- .flip-card__back-4digits::before,
1151
- .flip-card__bottom-4digits::after,
1152
- .flip-card__back-bottom-4digits::after {
1153
- content: attr(data-value);
1154
- }
1155
-
1156
- .flip-card__back,
1157
- .flip-card__back-4digits {
1158
- position: absolute;
1159
- top: 0;
1160
- height: 100%;
1161
- left: 0%;
1162
- pointer-events: none;
1163
- }
1164
- .flip-card__back::before,
1165
- .flip-card__back-4digits::before {
1166
- position: relative;
1167
- overflow: hidden;
1168
- z-index: -1;
1169
- }
1170
-
1171
- .flip .flip-card__back::before,
1172
- .flip .flip-card__back-4digits::before {
1173
- z-index: 1;
1174
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1175
- animation-fill-mode: both;
1176
- transform-origin: center bottom;
1177
- }
1178
-
1179
- .flip .flip-card__bottom,
1180
- .flip .flip-card__bottom-4digits {
1181
- transform-origin: center top;
1182
- animation-fill-mode: both;
1183
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1184
- }
1185
- @keyframes flipTop {
1186
- 0% {
1187
- transform: rotateX(0deg);
1188
- z-index: 2;
1189
- }
1190
- 0%, 99% {
1191
- opacity: 1;
1192
- }
1193
- 100% {
1194
- transform: rotateX(-90deg);
1195
- opacity: 0;
1196
- }
1197
- }
1198
-
1199
- @keyframes flipBottom {
1200
- 0%, 50% {
1201
- z-index: -1;
1202
- transform: rotateX(90deg);
1203
- opacity: 0;
1204
- }
1205
- 51% {
1206
- opacity: 1;
1207
- }
1208
- 100% {
1209
- opacity: 1;
1210
- transform: rotateX(0deg);
1211
- z-index: 5;
1212
- }
1213
- }
@@ -13249,7 +13249,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13249
13249
  ref: _ctx.setAnimationRef,
13250
13250
  id: `component-${item.id}`,
13251
13251
  key: item.id,
13252
- class: "static-position",
13252
+ class: "edit-wrapper",
13253
13253
  style: normalizeStyle$1(_ctx.filterProps(item.props, ['position', 'top', 'left', 'width', 'height'], true))
13254
13254
  }, [
13255
13255
  (item.name != 'uni-build-up' && !item.isHidden)
@@ -13256,7 +13256,7 @@
13256
13256
  ref: _ctx.setAnimationRef,
13257
13257
  id: `component-${item.id}`,
13258
13258
  key: item.id,
13259
- class: "static-position",
13259
+ class: "edit-wrapper",
13260
13260
  style: vue.normalizeStyle(_ctx.filterProps(item.props, ['position', 'top', 'left', 'width', 'height'], true))
13261
13261
  }, [
13262
13262
  (item.name != 'uni-build-up' && !item.isHidden)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.268",
3
+ "version": "1.0.269",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",