unika-components 1.0.135 → 1.0.136

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.
Files changed (4) hide show
  1. package/dist/unika-components.css +220 -220
  2. package/dist/unika-components.esm.js +8 -11
  3. package/dist/unika-components.umd.js +8 -11
  4. package/package.json +1 -1
package/dist/unika-components.css CHANGED
@@ -2,27 +2,6 @@
2
2
  .uni-image-component {
3
3
  max-width: 100%;
4
4
  }
5
-
6
- .uni-video-component {
7
- position: relative;
8
- text-align: center;
9
- }
10
- .play-pause-button {
11
- position: absolute;
12
- top: 50%;
13
- left: 50%;
14
- transform: translate(-50%, -50%);
15
- cursor: pointer;
16
- font-size: 2rem;
17
- color: #fff;
18
- background: rgba(0, 0, 0, 0.6);
19
- border-radius: 50%;
20
- padding: 10px;
21
- transition: background 0.3s;
22
- }
23
- .play-pause-button:hover {
24
- background: rgba(0, 0, 0, 0.8);
25
- }
26
5
 
27
6
  .slide-guide {
28
7
  position: absolute;
@@ -96,18 +75,6 @@ body, html {
96
75
  transform: translate3d(-50%, -50%, 0);
97
76
  }
98
77
  }
99
-
100
- h2.uni-text-component, p.uni-text-component {
101
- margin-bottom: 0;
102
- }
103
- button.uni-text-component {
104
- padding: 5px 10px;
105
- cursor: pointer;
106
- }
107
- .uni-text-component {
108
- box-sizing: border-box;
109
- white-space: pre-wrap;
110
- }
111
78
 
112
79
 
113
80
  .uni-calendar-component {
@@ -120,6 +87,18 @@ button.uni-text-component {
120
87
  font-size: 12px;
121
88
  color: #666
122
89
  }
90
+
91
+ h2.uni-text-component, p.uni-text-component {
92
+ margin-bottom: 0;
93
+ }
94
+ button.uni-text-component {
95
+ padding: 5px 10px;
96
+ cursor: pointer;
97
+ }
98
+ .uni-text-component {
99
+ box-sizing: border-box;
100
+ white-space: pre-wrap;
101
+ }
123
102
 
124
103
  .like-button {
125
104
  display: flex;
@@ -143,6 +122,27 @@ button.uni-text-component {
143
122
  color: #333;
144
123
  }
145
124
 
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
146
  .effect {
147
147
  width: 100%;
148
148
  height: 100%;
@@ -744,6 +744,193 @@ button.swiper-pagination-bullet {
744
744
  backface-visibility: hidden;
745
745
  }
746
746
 
747
+
748
+ .no-animation__card {
749
+ font-weight: 500;
750
+ font-size: var(--countdown-size, 2rem);
751
+ line-height: 1.5;
752
+ display: block;
753
+ color: var(--main-color, #EC685C);
754
+ }
755
+
756
+ .flip-clock {
757
+ text-align: center;
758
+ perspective: 600px;
759
+ margin: 0 auto;
760
+ }
761
+
762
+ .flip-clock *,
763
+ .flip-clock *:before,
764
+ .flip-clock *:after {
765
+ box-sizing: border-box;
766
+ }
767
+
768
+ .flip-clock__piece {
769
+ display: inline-block;
770
+ margin: 0 0.2vw;
771
+ }
772
+
773
+ @media (min-width: 1000px) {
774
+ .flip-clock__piece {
775
+ margin: 0 5px;
776
+ }
777
+ }
778
+
779
+ .flip-clock__slot {
780
+ font-size: var(--label-size, 1rem);
781
+ line-height: 1.5;
782
+ display: block;
783
+ color: var(--label-color, #222222);
784
+ }
785
+
786
+ .flip-card {
787
+ display: block;
788
+ position: relative;
789
+ padding-bottom: 0.72em; /* halfHeight */
790
+ font-size: var(--countdown-size, 2.25rem);
791
+ line-height: 0.95;
792
+ }
793
+
794
+ @media (min-width: 1000px) {
795
+ .flip-clock__slot {
796
+ font-size: 1.2rem;
797
+ }
798
+
799
+ .flip-card {
800
+ font-size: 3rem;
801
+ }
802
+ }
803
+
804
+ .flip-card__top,
805
+ .flip-card__bottom,
806
+ .flip-card__back-bottom,
807
+ .flip-card__back::before,
808
+ .flip-card__back::after{
809
+ display: block;
810
+ height: 0.72em; /* halfHeight */
811
+ color: var(--main-color, #EC685C);
812
+ background: var(--main-flip-background-color, #222222);
813
+ padding: 0.23em 0.15em 0.4em;
814
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
815
+ backface-visibility: hidden;
816
+ -webkit-backface-visibility: hidden;
817
+ transform-style: preserve-3d;
818
+ width: 2.1em;
819
+ }
820
+
821
+ .flip-card__top-4digits,
822
+ .flip-card__bottom-4digits,
823
+ .flip-card__back-bottom-4digits,
824
+ .flip-card__back-4digits::before,
825
+ .flip-card__back-4digits::after {
826
+ display: block;
827
+ height: 0.72em; /* halfHeight */
828
+ color: var(--main-color, #EC685C);
829
+ background: var(--main-flip-background-color, #222222);
830
+ padding: 0.23em 0.15em 0.4em;
831
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
832
+ backface-visibility: hidden;
833
+ -webkit-backface-visibility: hidden;
834
+ transform-style: preserve-3d;
835
+ width: 2.65em;
836
+ }
837
+
838
+ .flip-card__bottom,
839
+ .flip-card__back-bottom,
840
+ .flip-card__bottom-4digits,
841
+ .flip-card__back-bottom-4digits {
842
+ color: var(--second-flip-color, #EC685C);
843
+ position: absolute;
844
+ top: 50%;
845
+ left: 0;
846
+ border-top: solid 1px var(--second-flip-background-color, #000);
847
+ background: var(--second-flip-background-color, #393939);
848
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
849
+ pointer-events: none;
850
+ overflow: hidden;
851
+ z-index: 2;
852
+ }
853
+
854
+ .flip-card__back-bottom,
855
+ .flip-card__back-bottom-4digits {
856
+ z-index: 1;
857
+ }
858
+
859
+ .flip-card__bottom::after,
860
+ .flip-card__back-bottom::after,
861
+ .flip-card__bottom-4digits::after,
862
+ .flip-card__back-bottom-4digits::after {
863
+ display: block;
864
+ margin-top: -0.72em; /* Negative halfHeight */
865
+ }
866
+ .flip-card__back::before,
867
+ .flip-card__bottom::after,
868
+ .flip-card__back-bottom::after,
869
+ .flip-card__back-4digits::before,
870
+ .flip-card__bottom-4digits::after,
871
+ .flip-card__back-bottom-4digits::after {
872
+ content: attr(data-value);
873
+ }
874
+
875
+ .flip-card__back,
876
+ .flip-card__back-4digits {
877
+ position: absolute;
878
+ top: 0;
879
+ height: 100%;
880
+ left: 0%;
881
+ pointer-events: none;
882
+ }
883
+ .flip-card__back::before,
884
+ .flip-card__back-4digits::before {
885
+ position: relative;
886
+ overflow: hidden;
887
+ z-index: -1;
888
+ }
889
+
890
+ .flip .flip-card__back::before,
891
+ .flip .flip-card__back-4digits::before {
892
+ z-index: 1;
893
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
894
+ animation-fill-mode: both;
895
+ transform-origin: center bottom;
896
+ }
897
+
898
+ .flip .flip-card__bottom,
899
+ .flip .flip-card__bottom-4digits {
900
+ transform-origin: center top;
901
+ animation-fill-mode: both;
902
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
903
+ }
904
+ @keyframes flipTop {
905
+ 0% {
906
+ transform: rotateX(0deg);
907
+ z-index: 2;
908
+ }
909
+ 0%, 99% {
910
+ opacity: 1;
911
+ }
912
+ 100% {
913
+ transform: rotateX(-90deg);
914
+ opacity: 0;
915
+ }
916
+ }
917
+
918
+ @keyframes flipBottom {
919
+ 0%, 50% {
920
+ z-index: -1;
921
+ transform: rotateX(90deg);
922
+ opacity: 0;
923
+ }
924
+ 51% {
925
+ opacity: 1;
926
+ }
927
+ 100% {
928
+ opacity: 1;
929
+ transform: rotateX(0deg);
930
+ z-index: 5;
931
+ }
932
+ }
933
+
747
934
  .unika-calendar-title {
748
935
  font-size: 25px;
749
936
  padding-bottom: 4px;
@@ -995,190 +1182,3 @@ button.swiper-pagination-bullet {
995
1182
  padding: 0 0px;
996
1183
  border-bottom: 1px solid
997
1184
  }
998
-
999
-
1000
- .no-animation__card {
1001
- font-weight: 500;
1002
- font-size: var(--countdown-size, 2rem);
1003
- line-height: 1.5;
1004
- display: block;
1005
- color: var(--main-color, #EC685C);
1006
- }
1007
-
1008
- .flip-clock {
1009
- text-align: center;
1010
- perspective: 600px;
1011
- margin: 0 auto;
1012
- }
1013
-
1014
- .flip-clock *,
1015
- .flip-clock *:before,
1016
- .flip-clock *:after {
1017
- box-sizing: border-box;
1018
- }
1019
-
1020
- .flip-clock__piece {
1021
- display: inline-block;
1022
- margin: 0 0.2vw;
1023
- }
1024
-
1025
- @media (min-width: 1000px) {
1026
- .flip-clock__piece {
1027
- margin: 0 5px;
1028
- }
1029
- }
1030
-
1031
- .flip-clock__slot {
1032
- font-size: var(--label-size, 1rem);
1033
- line-height: 1.5;
1034
- display: block;
1035
- color: var(--label-color, #222222);
1036
- }
1037
-
1038
- .flip-card {
1039
- display: block;
1040
- position: relative;
1041
- padding-bottom: 0.72em; /* halfHeight */
1042
- font-size: var(--countdown-size, 2.25rem);
1043
- line-height: 0.95;
1044
- }
1045
-
1046
- @media (min-width: 1000px) {
1047
- .flip-clock__slot {
1048
- font-size: 1.2rem;
1049
- }
1050
-
1051
- .flip-card {
1052
- font-size: 3rem;
1053
- }
1054
- }
1055
-
1056
- .flip-card__top,
1057
- .flip-card__bottom,
1058
- .flip-card__back-bottom,
1059
- .flip-card__back::before,
1060
- .flip-card__back::after{
1061
- display: block;
1062
- height: 0.72em; /* halfHeight */
1063
- color: var(--main-color, #EC685C);
1064
- background: var(--main-flip-background-color, #222222);
1065
- padding: 0.23em 0.15em 0.4em;
1066
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1067
- backface-visibility: hidden;
1068
- -webkit-backface-visibility: hidden;
1069
- transform-style: preserve-3d;
1070
- width: 2.1em;
1071
- }
1072
-
1073
- .flip-card__top-4digits,
1074
- .flip-card__bottom-4digits,
1075
- .flip-card__back-bottom-4digits,
1076
- .flip-card__back-4digits::before,
1077
- .flip-card__back-4digits::after {
1078
- display: block;
1079
- height: 0.72em; /* halfHeight */
1080
- color: var(--main-color, #EC685C);
1081
- background: var(--main-flip-background-color, #222222);
1082
- padding: 0.23em 0.15em 0.4em;
1083
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1084
- backface-visibility: hidden;
1085
- -webkit-backface-visibility: hidden;
1086
- transform-style: preserve-3d;
1087
- width: 2.65em;
1088
- }
1089
-
1090
- .flip-card__bottom,
1091
- .flip-card__back-bottom,
1092
- .flip-card__bottom-4digits,
1093
- .flip-card__back-bottom-4digits {
1094
- color: var(--second-flip-color, #EC685C);
1095
- position: absolute;
1096
- top: 50%;
1097
- left: 0;
1098
- border-top: solid 1px var(--second-flip-background-color, #000);
1099
- background: var(--second-flip-background-color, #393939);
1100
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1101
- pointer-events: none;
1102
- overflow: hidden;
1103
- z-index: 2;
1104
- }
1105
-
1106
- .flip-card__back-bottom,
1107
- .flip-card__back-bottom-4digits {
1108
- z-index: 1;
1109
- }
1110
-
1111
- .flip-card__bottom::after,
1112
- .flip-card__back-bottom::after,
1113
- .flip-card__bottom-4digits::after,
1114
- .flip-card__back-bottom-4digits::after {
1115
- display: block;
1116
- margin-top: -0.72em; /* Negative halfHeight */
1117
- }
1118
- .flip-card__back::before,
1119
- .flip-card__bottom::after,
1120
- .flip-card__back-bottom::after,
1121
- .flip-card__back-4digits::before,
1122
- .flip-card__bottom-4digits::after,
1123
- .flip-card__back-bottom-4digits::after {
1124
- content: attr(data-value);
1125
- }
1126
-
1127
- .flip-card__back,
1128
- .flip-card__back-4digits {
1129
- position: absolute;
1130
- top: 0;
1131
- height: 100%;
1132
- left: 0%;
1133
- pointer-events: none;
1134
- }
1135
- .flip-card__back::before,
1136
- .flip-card__back-4digits::before {
1137
- position: relative;
1138
- overflow: hidden;
1139
- z-index: -1;
1140
- }
1141
-
1142
- .flip .flip-card__back::before,
1143
- .flip .flip-card__back-4digits::before {
1144
- z-index: 1;
1145
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1146
- animation-fill-mode: both;
1147
- transform-origin: center bottom;
1148
- }
1149
-
1150
- .flip .flip-card__bottom,
1151
- .flip .flip-card__bottom-4digits {
1152
- transform-origin: center top;
1153
- animation-fill-mode: both;
1154
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1155
- }
1156
- @keyframes flipTop {
1157
- 0% {
1158
- transform: rotateX(0deg);
1159
- z-index: 2;
1160
- }
1161
- 0%, 99% {
1162
- opacity: 1;
1163
- }
1164
- 100% {
1165
- transform: rotateX(-90deg);
1166
- opacity: 0;
1167
- }
1168
- }
1169
-
1170
- @keyframes flipBottom {
1171
- 0%, 50% {
1172
- z-index: -1;
1173
- transform: rotateX(90deg);
1174
- opacity: 0;
1175
- }
1176
- 51% {
1177
- opacity: 1;
1178
- }
1179
- 100% {
1180
- opacity: 1;
1181
- transform: rotateX(0deg);
1182
- z-index: 5;
1183
- }
1184
- }
package/dist/unika-components.esm.js CHANGED
@@ -13088,17 +13088,14 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
13088
13088
  const _component_swiper = resolveComponent("swiper");
13089
13089
 
13090
13090
  return (openBlock(), createElementBlock("div", _hoisted_1$9, [
13091
- createVNode(_component_swiper, {
13092
- class: "swiper-container",
13093
- modules: _ctx.modules,
13094
- effect: _ctx.effect,
13095
- direction: _ctx.direction,
13096
- onSwiper: _ctx.onSwiper,
13097
- onSlideChange: _ctx.onSlideChange
13098
- }, {
13091
+ createVNode(_component_swiper, { class: "swiper-container" }, {
13099
13092
  default: withCtx(() => [
13100
- createCommentVNode(" <swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13101
- createCommentVNode("<swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13093
+ createCommentVNode(" :modules=\"modules\""),
13094
+ createCommentVNode(" :effect=\"effect\""),
13095
+ createCommentVNode(" :direction=\"direction\""),
13096
+ createCommentVNode(" @swiper=\"onSwiper\""),
13097
+ createCommentVNode(" @slideChange=\"onSlideChange\""),
13098
+ createCommentVNode(" >"),
13102
13099
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.work.pages, (page, index) => {
13103
13100
  return (openBlock(), createBlock(_component_swiper_slide, {
13104
13101
  class: normalizeClass(_ctx.slideClasses(index)),
@@ -13127,7 +13124,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
13127
13124
  }), 128 /* KEYED_FRAGMENT */))
13128
13125
  ]),
13129
13126
  _: 1 /* STABLE */
13130
- }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
13127
+ }),
13131
13128
  (_ctx.upArrow)
13132
13129
  ? (openBlock(), createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
13133
13130
  : createCommentVNode("v-if", true)
package/dist/unika-components.umd.js CHANGED
@@ -13095,17 +13095,14 @@
13095
13095
  const _component_swiper = vue.resolveComponent("swiper");
13096
13096
 
13097
13097
  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
13098
- vue.createVNode(_component_swiper, {
13099
- class: "swiper-container",
13100
- modules: _ctx.modules,
13101
- effect: _ctx.effect,
13102
- direction: _ctx.direction,
13103
- onSwiper: _ctx.onSwiper,
13104
- onSlideChange: _ctx.onSlideChange
13105
- }, {
13098
+ vue.createVNode(_component_swiper, { class: "swiper-container" }, {
13106
13099
  default: vue.withCtx(() => [
13107
- vue.createCommentVNode(" <swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13108
- vue.createCommentVNode("<swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13100
+ vue.createCommentVNode(" :modules=\"modules\""),
13101
+ vue.createCommentVNode(" :effect=\"effect\""),
13102
+ vue.createCommentVNode(" :direction=\"direction\""),
13103
+ vue.createCommentVNode(" @swiper=\"onSwiper\""),
13104
+ vue.createCommentVNode(" @slideChange=\"onSlideChange\""),
13105
+ vue.createCommentVNode(" >"),
13109
13106
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.work.pages, (page, index) => {
13110
13107
  return (vue.openBlock(), vue.createBlock(_component_swiper_slide, {
13111
13108
  class: vue.normalizeClass(_ctx.slideClasses(index)),
@@ -13134,7 +13131,7 @@
13134
13131
  }), 128 /* KEYED_FRAGMENT */))
13135
13132
  ]),
13136
13133
  _: 1 /* STABLE */
13137
- }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
13134
+ }),
13138
13135
  (_ctx.upArrow)
13139
13136
  ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
13140
13137
  : vue.createCommentVNode("v-if", true)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.135",
3
+ "version": "1.0.136",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",