unika-components 1.0.214 → 1.0.215

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.
@@ -2,6 +2,18 @@
2
2
  .uni-image-component {
3
3
  max-width: 100%;
4
4
  }
5
+
6
+
7
+ .uni-calendar-component {
8
+
9
+ }
10
+ .slot-number {
11
+ position: absolute;
12
+ bottom: 2px;
13
+ left: 7px;
14
+ font-size: 12px;
15
+ color: #666
16
+ }
5
17
 
6
18
  h2.uni-text-component, p.uni-text-component {
7
19
  margin-bottom: 0;
@@ -14,6 +26,27 @@ button.uni-text-component {
14
26
  box-sizing: border-box;
15
27
  white-space: pre-wrap;
16
28
  }
29
+
30
+ .uni-video-component {
31
+ position: relative;
32
+ text-align: center;
33
+ }
34
+ .play-pause-button {
35
+ position: absolute;
36
+ top: 50%;
37
+ left: 50%;
38
+ transform: translate(-50%, -50%);
39
+ cursor: pointer;
40
+ font-size: 2rem;
41
+ color: #fff;
42
+ background: rgba(0, 0, 0, 0.6);
43
+ border-radius: 50%;
44
+ padding: 10px;
45
+ transition: background 0.3s;
46
+ }
47
+ .play-pause-button:hover {
48
+ background: rgba(0, 0, 0, 0.8);
49
+ }
17
50
 
18
51
  .slide-guide {
19
52
  position: absolute;
@@ -88,16 +121,9 @@ body, html {
88
121
  }
89
122
  }
90
123
 
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
124
+ .effect {
125
+ width: 100%;
126
+ height: 100%;
101
127
  }
102
128
 
103
129
  .like-button {
@@ -122,32 +148,6 @@ body, html {
122
148
  color: #333;
123
149
  }
124
150
 
125
- .uni-video-component {
126
- position: relative;
127
- text-align: center;
128
- }
129
- .play-pause-button {
130
- position: absolute;
131
- top: 50%;
132
- left: 50%;
133
- transform: translate(-50%, -50%);
134
- cursor: pointer;
135
- font-size: 2rem;
136
- color: #fff;
137
- background: rgba(0, 0, 0, 0.6);
138
- border-radius: 50%;
139
- padding: 10px;
140
- transition: background 0.3s;
141
- }
142
- .play-pause-button:hover {
143
- background: rgba(0, 0, 0, 0.8);
144
- }
145
-
146
- .effect {
147
- width: 100%;
148
- height: 100%;
149
- }
150
-
151
151
  .ant-input-number {
152
152
  box-sizing: border-box;
153
153
  margin: 0;
@@ -183,9 +183,6 @@ body, html {
183
183
  vertical-align: top;
184
184
  }
185
185
 
186
- .uni-build-up-component {
187
- }
188
-
189
186
  .swiper-warp {
190
187
  width: 100%;
191
188
  height: 100%;
@@ -203,6 +200,9 @@ body, html {
203
200
  .uni-svg-component {
204
201
  display: inline-block;
205
202
  }
203
+
204
+ .uni-build-up-component {
205
+ }
206
206
  /**
207
207
  * Swiper 6.8.4
208
208
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -751,6 +751,193 @@ 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
+
754
941
  .unika-calendar-box {
755
942
  position: relative;
756
943
  width: 325px !important;
@@ -1008,190 +1195,3 @@ button.swiper-pagination-bullet {
1008
1195
  padding: 0 0px;
1009
1196
  border-bottom: 1px solid
1010
1197
  }
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
- }
@@ -5384,7 +5384,7 @@ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
5384
5384
  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
5385
5385
  onClick: withModifiers(_ctx.handleClick, ["prevent"]),
5386
5386
  style: normalizeStyle$1(_ctx.styleProps),
5387
- class: "uni-text-component inner-component"
5387
+ class: "uni-text-component"
5388
5388
  }, {
5389
5389
  default: withCtx(() => [
5390
5390
  createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
@@ -13066,7 +13066,7 @@ var script$h = defineComponent({
13066
13066
  const innerElement = element.querySelector('.inner-component');
13067
13067
  if (innerElement) {
13068
13068
  // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13069
- innerElement.style.cssText = getComputedCSSText(animationStyle);
13069
+ innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13070
13070
  animIdx++;
13071
13071
  }
13072
13072
  }
@@ -13076,7 +13076,7 @@ var script$h = defineComponent({
13076
13076
  if (element) {
13077
13077
  const innerElement = element.querySelector('.inner-component');
13078
13078
  if (innerElement) {
13079
- element.style.cssText = getComputedCSSText(oldStyle);
13079
+ innerElement.style.cssText = getComputedCSSText(oldStyle);
13080
13080
  }
13081
13081
  }
13082
13082
  }
@@ -5391,7 +5391,7 @@
5391
5391
  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
5392
5392
  onClick: vue.withModifiers(_ctx.handleClick, ["prevent"]),
5393
5393
  style: vue.normalizeStyle(_ctx.styleProps),
5394
- class: "uni-text-component inner-component"
5394
+ class: "uni-text-component"
5395
5395
  }, {
5396
5396
  default: vue.withCtx(() => [
5397
5397
  vue.createTextVNode(vue.toDisplayString(_ctx.text), 1 /* TEXT */)
@@ -13073,7 +13073,7 @@
13073
13073
  const innerElement = element.querySelector('.inner-component');
13074
13074
  if (innerElement) {
13075
13075
  // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13076
- innerElement.style.cssText = getComputedCSSText(animationStyle);
13076
+ innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13077
13077
  animIdx++;
13078
13078
  }
13079
13079
  }
@@ -13083,7 +13083,7 @@
13083
13083
  if (element) {
13084
13084
  const innerElement = element.querySelector('.inner-component');
13085
13085
  if (innerElement) {
13086
- element.style.cssText = getComputedCSSText(oldStyle);
13086
+ innerElement.style.cssText = getComputedCSSText(oldStyle);
13087
13087
  }
13088
13088
  }
13089
13089
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.214",
3
+ "version": "1.0.215",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",