unika-components 1.0.278 → 1.0.279

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.
@@ -340,6 +340,7 @@ export declare const buttonDefaultProps: {
340
340
  actionType: string;
341
341
  url: string;
342
342
  buttonText: string;
343
+ opacity: number;
343
344
  };
344
345
  export declare const likeDefaultProps: {
345
346
  actionType: string;
@@ -767,6 +768,7 @@ export declare const componentsDefaultProps: {
767
768
  actionType: string;
768
769
  url: string;
769
770
  buttonText: string;
771
+ opacity: number;
770
772
  };
771
773
  };
772
774
  'uni-build-up': {
@@ -5,6 +5,18 @@
5
5
  .uni-image-mask-wrapper {
6
6
  display: inline-block;
7
7
  }
8
+
9
+
10
+ .uni-calendar-component {
11
+
12
+ }
13
+ .slot-number {
14
+ position: absolute;
15
+ bottom: 2px;
16
+ left: 7px;
17
+ font-size: 12px;
18
+ color: #666
19
+ }
8
20
 
9
21
  .slide-guide {
10
22
  position: absolute;
@@ -103,49 +115,16 @@ button.uni-text-component {
103
115
  white-space: pre-wrap;
104
116
  }
105
117
 
106
- .uni-video-component {
107
- position: relative;
108
- text-align: center;
109
- }
110
- .play-pause-button {
111
- position: absolute;
112
- top: 50%;
113
- left: 50%;
114
- transform: translate(-50%, -50%);
115
- cursor: pointer;
116
- font-size: 2rem;
117
- color: #fff;
118
- background: rgba(0, 0, 0, 0.6);
119
- border-radius: 50%;
120
- padding: 10px;
121
- transition: background 0.3s;
122
- }
123
- .play-pause-button:hover {
124
- background: rgba(0, 0, 0, 0.8);
125
- }
126
-
127
- .effect {
118
+ .uni-lotties-component {
128
119
  width: 100%;
129
120
  height: 100%;
130
121
  }
131
122
 
132
- .uni-lotties-component {
123
+ .effect {
133
124
  width: 100%;
134
125
  height: 100%;
135
126
  }
136
127
 
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
128
  .like-button {
150
129
  display: flex;
151
130
  flex-direction: column;
@@ -168,9 +147,6 @@ button.uni-text-component {
168
147
  color: #333;
169
148
  }
170
149
 
171
- .uni-build-up-component {
172
- }
173
-
174
150
  .swiper-warp {
175
151
  width: 100%;
176
152
  height: 100%;
@@ -185,6 +161,27 @@ button.uni-text-component {
185
161
  max-height: 100%;
186
162
  }
187
163
 
164
+ .uni-video-component {
165
+ position: relative;
166
+ text-align: center;
167
+ }
168
+ .play-pause-button {
169
+ position: absolute;
170
+ top: 50%;
171
+ left: 50%;
172
+ transform: translate(-50%, -50%);
173
+ cursor: pointer;
174
+ font-size: 2rem;
175
+ color: #fff;
176
+ background: rgba(0, 0, 0, 0.6);
177
+ border-radius: 50%;
178
+ padding: 10px;
179
+ transition: background 0.3s;
180
+ }
181
+ .play-pause-button:hover {
182
+ background: rgba(0, 0, 0, 0.8);
183
+ }
184
+
188
185
  .ant-input-number {
189
186
  box-sizing: border-box;
190
187
  margin: 0;
@@ -219,6 +216,9 @@ button.uni-text-component {
219
216
  margin-bottom: 0px;
220
217
  vertical-align: top;
221
218
  }
219
+
220
+ .uni-build-up-component {
221
+ }
222
222
 
223
223
  .uni-svg-component {
224
224
  display: inline-block;
@@ -771,193 +771,6 @@ 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);
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
-
961
774
  .unika-calendar-box {
962
775
  position: relative;
963
776
  width: 325px !important;
@@ -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
+ }
@@ -5185,6 +5185,7 @@ const buttonDefaultProps = {
5185
5185
  actionType: 'to',
5186
5186
  url: 'https://unika.cc',
5187
5187
  buttonText: 'Link',
5188
+ opacity: 1
5188
5189
  };
5189
5190
  const likeDefaultProps = {
5190
5191
  ...commonDefaultProps
@@ -5192,6 +5192,7 @@
5192
5192
  actionType: 'to',
5193
5193
  url: 'https://unika.cc',
5194
5194
  buttonText: 'Link',
5195
+ opacity: 1
5195
5196
  };
5196
5197
  const likeDefaultProps = {
5197
5198
  ...commonDefaultProps
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.278",
3
+ "version": "1.0.279",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",