unika-components 1.0.204 → 1.0.205

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.
@@ -3,18 +3,6 @@
3
3
  max-width: 100%;
4
4
  }
5
5
 
6
- h2.uni-text-component, p.uni-text-component {
7
- margin-bottom: 0;
8
- }
9
- button.uni-text-component {
10
- padding: 5px 10px;
11
- cursor: pointer;
12
- }
13
- .uni-text-component {
14
- box-sizing: border-box;
15
- white-space: pre-wrap;
16
- }
17
-
18
6
  .slide-guide {
19
7
  position: absolute;
20
8
  bottom: 90px;
@@ -87,6 +75,39 @@ body, html {
87
75
  transform: translate3d(-50%, -50%, 0);
88
76
  }
89
77
  }
78
+
79
+ h2.uni-text-component, p.uni-text-component {
80
+ margin-bottom: 0;
81
+ }
82
+ button.uni-text-component {
83
+ padding: 5px 10px;
84
+ cursor: pointer;
85
+ }
86
+ .uni-text-component {
87
+ box-sizing: border-box;
88
+ white-space: pre-wrap;
89
+ }
90
+
91
+ .uni-video-component {
92
+ position: relative;
93
+ text-align: center;
94
+ }
95
+ .play-pause-button {
96
+ position: absolute;
97
+ top: 50%;
98
+ left: 50%;
99
+ transform: translate(-50%, -50%);
100
+ cursor: pointer;
101
+ font-size: 2rem;
102
+ color: #fff;
103
+ background: rgba(0, 0, 0, 0.6);
104
+ border-radius: 50%;
105
+ padding: 10px;
106
+ transition: background 0.3s;
107
+ }
108
+ .play-pause-button:hover {
109
+ background: rgba(0, 0, 0, 0.8);
110
+ }
90
111
 
91
112
  .like-button {
92
113
  display: flex;
@@ -110,6 +131,25 @@ body, html {
110
131
  color: #333;
111
132
  }
112
133
 
134
+ .effect {
135
+ width: 100%;
136
+ height: 100%;
137
+ }
138
+
139
+ .swiper-warp {
140
+ width: 100%;
141
+ height: 100%;
142
+ }
143
+
144
+ .swiper-slide-component {
145
+ text-align: center;
146
+ }
147
+
148
+ .swiper-slide img {
149
+ max-width: 100%;
150
+ max-height: 100%;
151
+ }
152
+
113
153
 
114
154
  .uni-calendar-component {
115
155
 
@@ -122,6 +162,9 @@ body, html {
122
162
  color: #666
123
163
  }
124
164
 
165
+ .uni-build-up-component {
166
+ }
167
+
125
168
  .ant-input-number {
126
169
  box-sizing: border-box;
127
170
  margin: 0;
@@ -156,49 +199,6 @@ body, html {
156
199
  margin-bottom: 0px;
157
200
  vertical-align: top;
158
201
  }
159
-
160
- .uni-video-component {
161
- position: relative;
162
- text-align: center;
163
- }
164
- .play-pause-button {
165
- position: absolute;
166
- top: 50%;
167
- left: 50%;
168
- transform: translate(-50%, -50%);
169
- cursor: pointer;
170
- font-size: 2rem;
171
- color: #fff;
172
- background: rgba(0, 0, 0, 0.6);
173
- border-radius: 50%;
174
- padding: 10px;
175
- transition: background 0.3s;
176
- }
177
- .play-pause-button:hover {
178
- background: rgba(0, 0, 0, 0.8);
179
- }
180
-
181
- .effect {
182
- width: 100%;
183
- height: 100%;
184
- }
185
-
186
- .swiper-warp {
187
- width: 100%;
188
- height: 100%;
189
- }
190
-
191
- .swiper-slide-component {
192
- text-align: center;
193
- }
194
-
195
- .swiper-slide img {
196
- max-width: 100%;
197
- max-height: 100%;
198
- }
199
-
200
- .uni-build-up-component {
201
- }
202
202
 
203
203
  .uni-svg-component {
204
204
  display: inline-block;
@@ -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
- }
@@ -13073,7 +13073,7 @@ var script$h = defineComponent({
13073
13073
  element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
13074
13074
  }
13075
13075
  else {
13076
- element.style.cssText = getComputedCSSText(oldStyle);
13076
+ element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
13077
13077
  }
13078
13078
  }
13079
13079
  }
@@ -13080,7 +13080,7 @@
13080
13080
  element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
13081
13081
  }
13082
13082
  else {
13083
- element.style.cssText = getComputedCSSText(oldStyle);
13083
+ element.style.cssText = getComputedCSSText({ width: '100%', height: '100%' });
13084
13084
  }
13085
13085
  }
13086
13086
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.204",
3
+ "version": "1.0.205",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",