unika-components 1.0.205 → 1.0.206

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.
@@ -88,6 +88,53 @@ button.uni-text-component {
88
88
  white-space: pre-wrap;
89
89
  }
90
90
 
91
+
92
+ .uni-calendar-component {
93
+
94
+ }
95
+ .slot-number {
96
+ position: absolute;
97
+ bottom: 2px;
98
+ left: 7px;
99
+ font-size: 12px;
100
+ color: #666
101
+ }
102
+
103
+ .ant-input-number {
104
+ box-sizing: border-box;
105
+ margin: 0;
106
+ padding: 0;
107
+ color: rgba(0, 0, 0, 0.88);
108
+ font-size: 14px;
109
+ line-height: 1.5714285714285714;
110
+ list-style: none;
111
+ 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';
112
+ position: relative;
113
+ display: inline-block;
114
+ width: 100%;
115
+ min-width: 0;
116
+ background-color: #ffffff;
117
+ background-image: none;
118
+ border-width: 1px;
119
+ border-style: solid;
120
+ border-color: #d9d9d9;
121
+ border-radius: 6px;
122
+ transition: all 0.2s;
123
+ border: 1px solid #d9d9d9;
124
+ }
125
+ .ant-form-item {
126
+ box-sizing: border-box;
127
+ margin: 0;
128
+ padding: 0;
129
+ color: rgba(0, 0, 0, 0.88);
130
+ font-size: 14px;
131
+ line-height: 1.5714285714285714;
132
+ list-style: none;
133
+ 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';
134
+ margin-bottom: 0px;
135
+ vertical-align: top;
136
+ }
137
+
91
138
  .uni-video-component {
92
139
  position: relative;
93
140
  text-align: center;
@@ -109,6 +156,11 @@ button.uni-text-component {
109
156
  background: rgba(0, 0, 0, 0.8);
110
157
  }
111
158
 
159
+ .effect {
160
+ width: 100%;
161
+ height: 100%;
162
+ }
163
+
112
164
  .like-button {
113
165
  display: flex;
114
166
  flex-direction: column;
@@ -131,11 +183,6 @@ button.uni-text-component {
131
183
  color: #333;
132
184
  }
133
185
 
134
- .effect {
135
- width: 100%;
136
- height: 100%;
137
- }
138
-
139
186
  .swiper-warp {
140
187
  width: 100%;
141
188
  height: 100%;
@@ -150,55 +197,8 @@ button.uni-text-component {
150
197
  max-height: 100%;
151
198
  }
152
199
 
153
-
154
- .uni-calendar-component {
155
-
156
- }
157
- .slot-number {
158
- position: absolute;
159
- bottom: 2px;
160
- left: 7px;
161
- font-size: 12px;
162
- color: #666
163
- }
164
-
165
200
  .uni-build-up-component {
166
201
  }
167
-
168
- .ant-input-number {
169
- box-sizing: border-box;
170
- margin: 0;
171
- padding: 0;
172
- color: rgba(0, 0, 0, 0.88);
173
- font-size: 14px;
174
- line-height: 1.5714285714285714;
175
- list-style: none;
176
- 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';
177
- position: relative;
178
- display: inline-block;
179
- width: 100%;
180
- min-width: 0;
181
- background-color: #ffffff;
182
- background-image: none;
183
- border-width: 1px;
184
- border-style: solid;
185
- border-color: #d9d9d9;
186
- border-radius: 6px;
187
- transition: all 0.2s;
188
- border: 1px solid #d9d9d9;
189
- }
190
- .ant-form-item {
191
- box-sizing: border-box;
192
- margin: 0;
193
- padding: 0;
194
- color: rgba(0, 0, 0, 0.88);
195
- font-size: 14px;
196
- line-height: 1.5714285714285714;
197
- list-style: none;
198
- 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';
199
- margin-bottom: 0px;
200
- vertical-align: top;
201
- }
202
202
 
203
203
  .uni-svg-component {
204
204
  display: inline-block;
@@ -751,193 +751,6 @@ button.swiper-pagination-bullet {
751
751
  backface-visibility: hidden;
752
752
  }
753
753
 
754
-
755
- .no-animation__card {
756
- font-weight: 500;
757
- font-size: var(--countdown-size, 2rem);
758
- line-height: 1.5;
759
- display: block;
760
- color: var(--main-color, #EC685C);
761
- }
762
-
763
- .flip-clock {
764
- text-align: center;
765
- perspective: 600px;
766
- margin: 0 auto;
767
- }
768
-
769
- .flip-clock *,
770
- .flip-clock *:before,
771
- .flip-clock *:after {
772
- box-sizing: border-box;
773
- }
774
-
775
- .flip-clock__piece {
776
- display: inline-block;
777
- margin: 0 0.2vw;
778
- }
779
-
780
- @media (min-width: 1000px) {
781
- .flip-clock__piece {
782
- margin: 0 5px;
783
- }
784
- }
785
-
786
- .flip-clock__slot {
787
- font-size: var(--label-size, 1rem);
788
- line-height: 1.5;
789
- display: block;
790
- color: var(--label-color, #222222);
791
- }
792
-
793
- .flip-card {
794
- display: block;
795
- position: relative;
796
- padding-bottom: 0.72em; /* halfHeight */
797
- font-size: var(--countdown-size, 2.25rem);
798
- line-height: 0.95;
799
- }
800
-
801
- @media (min-width: 1000px) {
802
- .flip-clock__slot {
803
- font-size: 1.2rem;
804
- }
805
-
806
- .flip-card {
807
- font-size: 3rem;
808
- }
809
- }
810
-
811
- .flip-card__top,
812
- .flip-card__bottom,
813
- .flip-card__back-bottom,
814
- .flip-card__back::before,
815
- .flip-card__back::after{
816
- display: block;
817
- height: 0.72em; /* halfHeight */
818
- color: var(--main-color, #EC685C);
819
- background: var(--main-flip-background-color, #222222);
820
- padding: 0.23em 0.15em 0.4em;
821
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
822
- backface-visibility: hidden;
823
- -webkit-backface-visibility: hidden;
824
- transform-style: preserve-3d;
825
- width: 2.1em;
826
- }
827
-
828
- .flip-card__top-4digits,
829
- .flip-card__bottom-4digits,
830
- .flip-card__back-bottom-4digits,
831
- .flip-card__back-4digits::before,
832
- .flip-card__back-4digits::after {
833
- display: block;
834
- height: 0.72em; /* halfHeight */
835
- color: var(--main-color, #EC685C);
836
- background: var(--main-flip-background-color, #222222);
837
- padding: 0.23em 0.15em 0.4em;
838
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
839
- backface-visibility: hidden;
840
- -webkit-backface-visibility: hidden;
841
- transform-style: preserve-3d;
842
- width: 2.65em;
843
- }
844
-
845
- .flip-card__bottom,
846
- .flip-card__back-bottom,
847
- .flip-card__bottom-4digits,
848
- .flip-card__back-bottom-4digits {
849
- color: var(--second-flip-color, #EC685C);
850
- position: absolute;
851
- top: 50%;
852
- left: 0;
853
- border-top: solid 1px var(--second-flip-background-color, #000);
854
- background: var(--second-flip-background-color, #393939);
855
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
856
- pointer-events: none;
857
- overflow: hidden;
858
- z-index: 2;
859
- }
860
-
861
- .flip-card__back-bottom,
862
- .flip-card__back-bottom-4digits {
863
- z-index: 1;
864
- }
865
-
866
- .flip-card__bottom::after,
867
- .flip-card__back-bottom::after,
868
- .flip-card__bottom-4digits::after,
869
- .flip-card__back-bottom-4digits::after {
870
- display: block;
871
- margin-top: -0.72em; /* Negative halfHeight */
872
- }
873
- .flip-card__back::before,
874
- .flip-card__bottom::after,
875
- .flip-card__back-bottom::after,
876
- .flip-card__back-4digits::before,
877
- .flip-card__bottom-4digits::after,
878
- .flip-card__back-bottom-4digits::after {
879
- content: attr(data-value);
880
- }
881
-
882
- .flip-card__back,
883
- .flip-card__back-4digits {
884
- position: absolute;
885
- top: 0;
886
- height: 100%;
887
- left: 0%;
888
- pointer-events: none;
889
- }
890
- .flip-card__back::before,
891
- .flip-card__back-4digits::before {
892
- position: relative;
893
- overflow: hidden;
894
- z-index: -1;
895
- }
896
-
897
- .flip .flip-card__back::before,
898
- .flip .flip-card__back-4digits::before {
899
- z-index: 1;
900
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
901
- animation-fill-mode: both;
902
- transform-origin: center bottom;
903
- }
904
-
905
- .flip .flip-card__bottom,
906
- .flip .flip-card__bottom-4digits {
907
- transform-origin: center top;
908
- animation-fill-mode: both;
909
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
910
- }
911
- @keyframes flipTop {
912
- 0% {
913
- transform: rotateX(0deg);
914
- z-index: 2;
915
- }
916
- 0%, 99% {
917
- opacity: 1;
918
- }
919
- 100% {
920
- transform: rotateX(-90deg);
921
- opacity: 0;
922
- }
923
- }
924
-
925
- @keyframes flipBottom {
926
- 0%, 50% {
927
- z-index: -1;
928
- transform: rotateX(90deg);
929
- opacity: 0;
930
- }
931
- 51% {
932
- opacity: 1;
933
- }
934
- 100% {
935
- opacity: 1;
936
- transform: rotateX(0deg);
937
- z-index: 5;
938
- }
939
- }
940
-
941
754
  .unika-calendar-box {
942
755
  position: relative;
943
756
  width: 325px !important;
@@ -1195,3 +1008,190 @@ button.swiper-pagination-bullet {
1195
1008
  padding: 0 0px;
1196
1009
  border-bottom: 1px solid
1197
1010
  }
1011
+
1012
+
1013
+ .no-animation__card {
1014
+ font-weight: 500;
1015
+ font-size: var(--countdown-size, 2rem);
1016
+ line-height: 1.5;
1017
+ display: block;
1018
+ color: var(--main-color, #EC685C);
1019
+ }
1020
+
1021
+ .flip-clock {
1022
+ text-align: center;
1023
+ perspective: 600px;
1024
+ margin: 0 auto;
1025
+ }
1026
+
1027
+ .flip-clock *,
1028
+ .flip-clock *:before,
1029
+ .flip-clock *:after {
1030
+ box-sizing: border-box;
1031
+ }
1032
+
1033
+ .flip-clock__piece {
1034
+ display: inline-block;
1035
+ margin: 0 0.2vw;
1036
+ }
1037
+
1038
+ @media (min-width: 1000px) {
1039
+ .flip-clock__piece {
1040
+ margin: 0 5px;
1041
+ }
1042
+ }
1043
+
1044
+ .flip-clock__slot {
1045
+ font-size: var(--label-size, 1rem);
1046
+ line-height: 1.5;
1047
+ display: block;
1048
+ color: var(--label-color, #222222);
1049
+ }
1050
+
1051
+ .flip-card {
1052
+ display: block;
1053
+ position: relative;
1054
+ padding-bottom: 0.72em; /* halfHeight */
1055
+ font-size: var(--countdown-size, 2.25rem);
1056
+ line-height: 0.95;
1057
+ }
1058
+
1059
+ @media (min-width: 1000px) {
1060
+ .flip-clock__slot {
1061
+ font-size: 1.2rem;
1062
+ }
1063
+
1064
+ .flip-card {
1065
+ font-size: 3rem;
1066
+ }
1067
+ }
1068
+
1069
+ .flip-card__top,
1070
+ .flip-card__bottom,
1071
+ .flip-card__back-bottom,
1072
+ .flip-card__back::before,
1073
+ .flip-card__back::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.1em;
1084
+ }
1085
+
1086
+ .flip-card__top-4digits,
1087
+ .flip-card__bottom-4digits,
1088
+ .flip-card__back-bottom-4digits,
1089
+ .flip-card__back-4digits::before,
1090
+ .flip-card__back-4digits::after {
1091
+ display: block;
1092
+ height: 0.72em; /* halfHeight */
1093
+ color: var(--main-color, #EC685C);
1094
+ background: var(--main-flip-background-color, #222222);
1095
+ padding: 0.23em 0.15em 0.4em;
1096
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1097
+ backface-visibility: hidden;
1098
+ -webkit-backface-visibility: hidden;
1099
+ transform-style: preserve-3d;
1100
+ width: 2.65em;
1101
+ }
1102
+
1103
+ .flip-card__bottom,
1104
+ .flip-card__back-bottom,
1105
+ .flip-card__bottom-4digits,
1106
+ .flip-card__back-bottom-4digits {
1107
+ color: var(--second-flip-color, #EC685C);
1108
+ position: absolute;
1109
+ top: 50%;
1110
+ left: 0;
1111
+ border-top: solid 1px var(--second-flip-background-color, #000);
1112
+ background: var(--second-flip-background-color, #393939);
1113
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1114
+ pointer-events: none;
1115
+ overflow: hidden;
1116
+ z-index: 2;
1117
+ }
1118
+
1119
+ .flip-card__back-bottom,
1120
+ .flip-card__back-bottom-4digits {
1121
+ z-index: 1;
1122
+ }
1123
+
1124
+ .flip-card__bottom::after,
1125
+ .flip-card__back-bottom::after,
1126
+ .flip-card__bottom-4digits::after,
1127
+ .flip-card__back-bottom-4digits::after {
1128
+ display: block;
1129
+ margin-top: -0.72em; /* Negative halfHeight */
1130
+ }
1131
+ .flip-card__back::before,
1132
+ .flip-card__bottom::after,
1133
+ .flip-card__back-bottom::after,
1134
+ .flip-card__back-4digits::before,
1135
+ .flip-card__bottom-4digits::after,
1136
+ .flip-card__back-bottom-4digits::after {
1137
+ content: attr(data-value);
1138
+ }
1139
+
1140
+ .flip-card__back,
1141
+ .flip-card__back-4digits {
1142
+ position: absolute;
1143
+ top: 0;
1144
+ height: 100%;
1145
+ left: 0%;
1146
+ pointer-events: none;
1147
+ }
1148
+ .flip-card__back::before,
1149
+ .flip-card__back-4digits::before {
1150
+ position: relative;
1151
+ overflow: hidden;
1152
+ z-index: -1;
1153
+ }
1154
+
1155
+ .flip .flip-card__back::before,
1156
+ .flip .flip-card__back-4digits::before {
1157
+ z-index: 1;
1158
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1159
+ animation-fill-mode: both;
1160
+ transform-origin: center bottom;
1161
+ }
1162
+
1163
+ .flip .flip-card__bottom,
1164
+ .flip .flip-card__bottom-4digits {
1165
+ transform-origin: center top;
1166
+ animation-fill-mode: both;
1167
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1168
+ }
1169
+ @keyframes flipTop {
1170
+ 0% {
1171
+ transform: rotateX(0deg);
1172
+ z-index: 2;
1173
+ }
1174
+ 0%, 99% {
1175
+ opacity: 1;
1176
+ }
1177
+ 100% {
1178
+ transform: rotateX(-90deg);
1179
+ opacity: 0;
1180
+ }
1181
+ }
1182
+
1183
+ @keyframes flipBottom {
1184
+ 0%, 50% {
1185
+ z-index: -1;
1186
+ transform: rotateX(90deg);
1187
+ opacity: 0;
1188
+ }
1189
+ 51% {
1190
+ opacity: 1;
1191
+ }
1192
+ 100% {
1193
+ opacity: 1;
1194
+ transform: rotateX(0deg);
1195
+ z-index: 5;
1196
+ }
1197
+ }
@@ -13070,7 +13070,7 @@ var script$h = defineComponent({
13070
13070
  const element = componentRefs.value.get('component-' + component.id);
13071
13071
  if (element) {
13072
13072
  if (len > 0) {
13073
- element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
13073
+ element.style.cssText = getComputedCSSText(oldStyle);
13074
13074
  }
13075
13075
  else {
13076
13076
  element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
@@ -13077,7 +13077,7 @@
13077
13077
  const element = componentRefs.value.get('component-' + component.id);
13078
13078
  if (element) {
13079
13079
  if (len > 0) {
13080
- element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
13080
+ element.style.cssText = getComputedCSSText(oldStyle);
13081
13081
  }
13082
13082
  else {
13083
13083
  element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.205",
3
+ "version": "1.0.206",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",