unika-components 1.0.125 → 1.0.126

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,8 +1,4 @@
1
1
 
2
- .uni-image-component {
3
- max-width: 100%;
4
- }
5
-
6
2
  h2.uni-text-component, p.uni-text-component {
7
3
  margin-bottom: 0;
8
4
  }
@@ -108,28 +104,10 @@ body, html {
108
104
  .play-pause-button:hover {
109
105
  background: rgba(0, 0, 0, 0.8);
110
106
  }
111
-
112
- .like-button {
113
- display: flex;
114
- flex-direction: column;
115
- align-items: center;
116
- cursor: pointer;
117
- }
118
-
119
- .icon-heart {
120
- font-size: 24px;
121
- color: #e74c3c;
122
- }
123
-
124
- .liked {
125
- color: #f00; /* 更改颜色以示已赞 */
126
- }
127
-
128
- .like-count {
129
- margin-top: 4px;
130
- font-size: 16px;
131
- color: #333;
132
- }
107
+
108
+ .uni-image-component {
109
+ max-width: 100%;
110
+ }
133
111
 
134
112
  .slot-number {
135
113
  position: absolute;
@@ -158,6 +136,28 @@ body, html {
158
136
  max-height: 100%;
159
137
  }
160
138
 
139
+ .like-button {
140
+ display: flex;
141
+ flex-direction: column;
142
+ align-items: center;
143
+ cursor: pointer;
144
+ }
145
+
146
+ .icon-heart {
147
+ font-size: 24px;
148
+ color: #e74c3c;
149
+ }
150
+
151
+ .liked {
152
+ color: #f00; /* 更改颜色以示已赞 */
153
+ }
154
+
155
+ .like-count {
156
+ margin-top: 4px;
157
+ font-size: 16px;
158
+ color: #333;
159
+ }
160
+
161
161
  .ant-input-number {
162
162
  box-sizing: border-box;
163
163
  margin: 0;
@@ -740,193 +740,6 @@ button.swiper-pagination-bullet {
740
740
  backface-visibility: hidden;
741
741
  }
742
742
 
743
-
744
- .no-animation__card {
745
- font-weight: 500;
746
- font-size: var(--countdown-size, 2rem);
747
- line-height: 1.5;
748
- display: block;
749
- color: var(--main-color, #EC685C);
750
- }
751
-
752
- .flip-clock {
753
- text-align: center;
754
- perspective: 600px;
755
- margin: 0 auto;
756
- }
757
-
758
- .flip-clock *,
759
- .flip-clock *:before,
760
- .flip-clock *:after {
761
- box-sizing: border-box;
762
- }
763
-
764
- .flip-clock__piece {
765
- display: inline-block;
766
- margin: 0 0.2vw;
767
- }
768
-
769
- @media (min-width: 1000px) {
770
- .flip-clock__piece {
771
- margin: 0 5px;
772
- }
773
- }
774
-
775
- .flip-clock__slot {
776
- font-size: var(--label-size, 1rem);
777
- line-height: 1.5;
778
- display: block;
779
- color: var(--label-color, #222222);
780
- }
781
-
782
- .flip-card {
783
- display: block;
784
- position: relative;
785
- padding-bottom: 0.72em; /* halfHeight */
786
- font-size: var(--countdown-size, 2.25rem);
787
- line-height: 0.95;
788
- }
789
-
790
- @media (min-width: 1000px) {
791
- .flip-clock__slot {
792
- font-size: 1.2rem;
793
- }
794
-
795
- .flip-card {
796
- font-size: 3rem;
797
- }
798
- }
799
-
800
- .flip-card__top,
801
- .flip-card__bottom,
802
- .flip-card__back-bottom,
803
- .flip-card__back::before,
804
- .flip-card__back::after{
805
- display: block;
806
- height: 0.72em; /* halfHeight */
807
- color: var(--main-color, #EC685C);
808
- background: var(--main-flip-background-color, #222222);
809
- padding: 0.23em 0.15em 0.4em;
810
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
811
- backface-visibility: hidden;
812
- -webkit-backface-visibility: hidden;
813
- transform-style: preserve-3d;
814
- width: 2.1em;
815
- }
816
-
817
- .flip-card__top-4digits,
818
- .flip-card__bottom-4digits,
819
- .flip-card__back-bottom-4digits,
820
- .flip-card__back-4digits::before,
821
- .flip-card__back-4digits::after {
822
- display: block;
823
- height: 0.72em; /* halfHeight */
824
- color: var(--main-color, #EC685C);
825
- background: var(--main-flip-background-color, #222222);
826
- padding: 0.23em 0.15em 0.4em;
827
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
828
- backface-visibility: hidden;
829
- -webkit-backface-visibility: hidden;
830
- transform-style: preserve-3d;
831
- width: 2.65em;
832
- }
833
-
834
- .flip-card__bottom,
835
- .flip-card__back-bottom,
836
- .flip-card__bottom-4digits,
837
- .flip-card__back-bottom-4digits {
838
- color: var(--second-flip-color, #EC685C);
839
- position: absolute;
840
- top: 50%;
841
- left: 0;
842
- border-top: solid 1px var(--second-flip-background-color, #000);
843
- background: var(--second-flip-background-color, #393939);
844
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
845
- pointer-events: none;
846
- overflow: hidden;
847
- z-index: 2;
848
- }
849
-
850
- .flip-card__back-bottom,
851
- .flip-card__back-bottom-4digits {
852
- z-index: 1;
853
- }
854
-
855
- .flip-card__bottom::after,
856
- .flip-card__back-bottom::after,
857
- .flip-card__bottom-4digits::after,
858
- .flip-card__back-bottom-4digits::after {
859
- display: block;
860
- margin-top: -0.72em; /* Negative halfHeight */
861
- }
862
- .flip-card__back::before,
863
- .flip-card__bottom::after,
864
- .flip-card__back-bottom::after,
865
- .flip-card__back-4digits::before,
866
- .flip-card__bottom-4digits::after,
867
- .flip-card__back-bottom-4digits::after {
868
- content: attr(data-value);
869
- }
870
-
871
- .flip-card__back,
872
- .flip-card__back-4digits {
873
- position: absolute;
874
- top: 0;
875
- height: 100%;
876
- left: 0%;
877
- pointer-events: none;
878
- }
879
- .flip-card__back::before,
880
- .flip-card__back-4digits::before {
881
- position: relative;
882
- overflow: hidden;
883
- z-index: -1;
884
- }
885
-
886
- .flip .flip-card__back::before,
887
- .flip .flip-card__back-4digits::before {
888
- z-index: 1;
889
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
890
- animation-fill-mode: both;
891
- transform-origin: center bottom;
892
- }
893
-
894
- .flip .flip-card__bottom,
895
- .flip .flip-card__bottom-4digits {
896
- transform-origin: center top;
897
- animation-fill-mode: both;
898
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
899
- }
900
- @keyframes flipTop {
901
- 0% {
902
- transform: rotateX(0deg);
903
- z-index: 2;
904
- }
905
- 0%, 99% {
906
- opacity: 1;
907
- }
908
- 100% {
909
- transform: rotateX(-90deg);
910
- opacity: 0;
911
- }
912
- }
913
-
914
- @keyframes flipBottom {
915
- 0%, 50% {
916
- z-index: -1;
917
- transform: rotateX(90deg);
918
- opacity: 0;
919
- }
920
- 51% {
921
- opacity: 1;
922
- }
923
- 100% {
924
- opacity: 1;
925
- transform: rotateX(0deg);
926
- z-index: 5;
927
- }
928
- }
929
-
930
743
  .unika-calendar-title {
931
744
  font-size: 25px;
932
745
  padding-bottom: 4px;
@@ -1178,3 +991,190 @@ button.swiper-pagination-bullet {
1178
991
  padding: 0 0px;
1179
992
  border-bottom: 1px solid
1180
993
  }
994
+
995
+
996
+ .no-animation__card {
997
+ font-weight: 500;
998
+ font-size: var(--countdown-size, 2rem);
999
+ line-height: 1.5;
1000
+ display: block;
1001
+ color: var(--main-color, #EC685C);
1002
+ }
1003
+
1004
+ .flip-clock {
1005
+ text-align: center;
1006
+ perspective: 600px;
1007
+ margin: 0 auto;
1008
+ }
1009
+
1010
+ .flip-clock *,
1011
+ .flip-clock *:before,
1012
+ .flip-clock *:after {
1013
+ box-sizing: border-box;
1014
+ }
1015
+
1016
+ .flip-clock__piece {
1017
+ display: inline-block;
1018
+ margin: 0 0.2vw;
1019
+ }
1020
+
1021
+ @media (min-width: 1000px) {
1022
+ .flip-clock__piece {
1023
+ margin: 0 5px;
1024
+ }
1025
+ }
1026
+
1027
+ .flip-clock__slot {
1028
+ font-size: var(--label-size, 1rem);
1029
+ line-height: 1.5;
1030
+ display: block;
1031
+ color: var(--label-color, #222222);
1032
+ }
1033
+
1034
+ .flip-card {
1035
+ display: block;
1036
+ position: relative;
1037
+ padding-bottom: 0.72em; /* halfHeight */
1038
+ font-size: var(--countdown-size, 2.25rem);
1039
+ line-height: 0.95;
1040
+ }
1041
+
1042
+ @media (min-width: 1000px) {
1043
+ .flip-clock__slot {
1044
+ font-size: 1.2rem;
1045
+ }
1046
+
1047
+ .flip-card {
1048
+ font-size: 3rem;
1049
+ }
1050
+ }
1051
+
1052
+ .flip-card__top,
1053
+ .flip-card__bottom,
1054
+ .flip-card__back-bottom,
1055
+ .flip-card__back::before,
1056
+ .flip-card__back::after{
1057
+ display: block;
1058
+ height: 0.72em; /* halfHeight */
1059
+ color: var(--main-color, #EC685C);
1060
+ background: var(--main-flip-background-color, #222222);
1061
+ padding: 0.23em 0.15em 0.4em;
1062
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1063
+ backface-visibility: hidden;
1064
+ -webkit-backface-visibility: hidden;
1065
+ transform-style: preserve-3d;
1066
+ width: 2.1em;
1067
+ }
1068
+
1069
+ .flip-card__top-4digits,
1070
+ .flip-card__bottom-4digits,
1071
+ .flip-card__back-bottom-4digits,
1072
+ .flip-card__back-4digits::before,
1073
+ .flip-card__back-4digits::after {
1074
+ display: block;
1075
+ height: 0.72em; /* halfHeight */
1076
+ color: var(--main-color, #EC685C);
1077
+ background: var(--main-flip-background-color, #222222);
1078
+ padding: 0.23em 0.15em 0.4em;
1079
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1080
+ backface-visibility: hidden;
1081
+ -webkit-backface-visibility: hidden;
1082
+ transform-style: preserve-3d;
1083
+ width: 2.65em;
1084
+ }
1085
+
1086
+ .flip-card__bottom,
1087
+ .flip-card__back-bottom,
1088
+ .flip-card__bottom-4digits,
1089
+ .flip-card__back-bottom-4digits {
1090
+ color: var(--second-flip-color, #EC685C);
1091
+ position: absolute;
1092
+ top: 50%;
1093
+ left: 0;
1094
+ border-top: solid 1px var(--second-flip-background-color, #000);
1095
+ background: var(--second-flip-background-color, #393939);
1096
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1097
+ pointer-events: none;
1098
+ overflow: hidden;
1099
+ z-index: 2;
1100
+ }
1101
+
1102
+ .flip-card__back-bottom,
1103
+ .flip-card__back-bottom-4digits {
1104
+ z-index: 1;
1105
+ }
1106
+
1107
+ .flip-card__bottom::after,
1108
+ .flip-card__back-bottom::after,
1109
+ .flip-card__bottom-4digits::after,
1110
+ .flip-card__back-bottom-4digits::after {
1111
+ display: block;
1112
+ margin-top: -0.72em; /* Negative halfHeight */
1113
+ }
1114
+ .flip-card__back::before,
1115
+ .flip-card__bottom::after,
1116
+ .flip-card__back-bottom::after,
1117
+ .flip-card__back-4digits::before,
1118
+ .flip-card__bottom-4digits::after,
1119
+ .flip-card__back-bottom-4digits::after {
1120
+ content: attr(data-value);
1121
+ }
1122
+
1123
+ .flip-card__back,
1124
+ .flip-card__back-4digits {
1125
+ position: absolute;
1126
+ top: 0;
1127
+ height: 100%;
1128
+ left: 0%;
1129
+ pointer-events: none;
1130
+ }
1131
+ .flip-card__back::before,
1132
+ .flip-card__back-4digits::before {
1133
+ position: relative;
1134
+ overflow: hidden;
1135
+ z-index: -1;
1136
+ }
1137
+
1138
+ .flip .flip-card__back::before,
1139
+ .flip .flip-card__back-4digits::before {
1140
+ z-index: 1;
1141
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1142
+ animation-fill-mode: both;
1143
+ transform-origin: center bottom;
1144
+ }
1145
+
1146
+ .flip .flip-card__bottom,
1147
+ .flip .flip-card__bottom-4digits {
1148
+ transform-origin: center top;
1149
+ animation-fill-mode: both;
1150
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1151
+ }
1152
+ @keyframes flipTop {
1153
+ 0% {
1154
+ transform: rotateX(0deg);
1155
+ z-index: 2;
1156
+ }
1157
+ 0%, 99% {
1158
+ opacity: 1;
1159
+ }
1160
+ 100% {
1161
+ transform: rotateX(-90deg);
1162
+ opacity: 0;
1163
+ }
1164
+ }
1165
+
1166
+ @keyframes flipBottom {
1167
+ 0%, 50% {
1168
+ z-index: -1;
1169
+ transform: rotateX(90deg);
1170
+ opacity: 0;
1171
+ }
1172
+ 51% {
1173
+ opacity: 1;
1174
+ }
1175
+ 100% {
1176
+ opacity: 1;
1177
+ transform: rotateX(0deg);
1178
+ z-index: 5;
1179
+ }
1180
+ }
@@ -75575,6 +75575,7 @@ var script$1 = defineComponent({
75575
75575
  const styleProps = useStylePick(props);
75576
75576
  const handleClick = useComponentClick(props);
75577
75577
  const openUrl = () => {
75578
+ alert('Button clicked!');
75578
75579
  if (!props.isEditing) {
75579
75580
  window.location.href = props.buttonUrl;
75580
75581
  }
@@ -75582,6 +75582,7 @@ summary tabindex target title type usemap value width wmode wrap`;
75582
75582
  const styleProps = useStylePick(props);
75583
75583
  const handleClick = useComponentClick(props);
75584
75584
  const openUrl = () => {
75585
+ alert('Button clicked!');
75585
75586
  if (!props.isEditing) {
75586
75587
  window.location.href = props.buttonUrl;
75587
75588
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.125",
3
+ "version": "1.0.126",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",