pcm-shared-components 0.0.57 → 0.0.58

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.
@@ -0,0 +1,176 @@
1
+
2
+ #loading-wrapper {
3
+ position: absolute;
4
+ width: 100%;
5
+ height: 100%;
6
+ left: 0;
7
+ top: 0;
8
+ background-color: #222;
9
+ z-index: 20000000 !important;
10
+ -moz-opacity: 0.8;
11
+ opacity:.80;
12
+ filter: alpha(opacity=80);
13
+ }
14
+
15
+
16
+
17
+ /* ---------------------------fuse----------------------------- */
18
+
19
+
20
+ #fuse-splash-screen {
21
+ /* display: block;
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ right: 0;
26
+ bottom: 0;
27
+ z-index: 99999;
28
+ pointer-events: none; */
29
+ }
30
+
31
+ #fuse-splash-screen .center {
32
+ display: block;
33
+ width: 100%;
34
+ position: absolute;
35
+ top: 50%;
36
+ transform: translateY(-50%);
37
+ }
38
+
39
+ #fuse-splash-screen .logo {
40
+ width: 128px;
41
+ margin: 0 auto;
42
+ }
43
+
44
+ #fuse-splash-screen .logo img {
45
+ filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.2))
46
+ }
47
+
48
+ #fuse-splash-screen .spinner-wrapper {
49
+ display: block;
50
+ position: relative;
51
+ width: 100%;
52
+ min-height: 100px;
53
+ height: 100px;
54
+ }
55
+
56
+ #fuse-splash-screen .spinner-wrapper .spinner {
57
+ position: absolute;
58
+ overflow: hidden;
59
+ left: 50%;
60
+ margin-left: -50px;
61
+ animation: outer-rotate 2.91667s linear infinite;
62
+ }
63
+
64
+ #fuse-splash-screen .spinner-wrapper .spinner .inner {
65
+ width: 100px;
66
+ height: 100px;
67
+ position: relative;
68
+ animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
69
+ }
70
+
71
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .gap {
72
+ position: absolute;
73
+ left: 49px;
74
+ right: 49px;
75
+ top: 0;
76
+ bottom: 0;
77
+ border-top: 10px solid;
78
+ box-sizing: border-box;
79
+ }
80
+
81
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .left,
82
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .right {
83
+ position: absolute;
84
+ top: 0;
85
+ height: 100px;
86
+ width: 50px;
87
+ overflow: hidden;
88
+ }
89
+
90
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .left .half-circle,
91
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
92
+ position: absolute;
93
+ top: 0;
94
+ width: 100px;
95
+ height: 100px;
96
+ box-sizing: border-box;
97
+ border: 10px solid #f1632f;
98
+ border-bottom-color: transparent;
99
+ border-radius: 50%;
100
+ }
101
+
102
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .left {
103
+ left: 0;
104
+ }
105
+
106
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .left .half-circle {
107
+ left: 0;
108
+ border-right-color: transparent;
109
+ animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
110
+ -webkit-animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
111
+ }
112
+
113
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .right {
114
+ right: 0;
115
+ }
116
+
117
+ #fuse-splash-screen .spinner-wrapper .spinner .inner .right .half-circle {
118
+ right: 0;
119
+ border-left-color: transparent;
120
+ animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
121
+ -webkit-animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
122
+ }
123
+
124
+ @keyframes outer-rotate {
125
+ 0% {
126
+ transform: rotate(0deg) scale(0.5);
127
+ }
128
+ 100% {
129
+ transform: rotate(360deg) scale(0.5);
130
+ }
131
+ }
132
+
133
+ @keyframes left-wobble {
134
+ 0%, 100% {
135
+ transform: rotate(130deg);
136
+ }
137
+ 50% {
138
+ transform: rotate(-5deg);
139
+ }
140
+ }
141
+
142
+ @keyframes right-wobble {
143
+ 0%, 100% {
144
+ transform: rotate(-130deg);
145
+ }
146
+ 50% {
147
+ transform: rotate(5deg);
148
+ }
149
+ }
150
+
151
+ @keyframes sporadic-rotate {
152
+ 12.5% {
153
+ transform: rotate(135deg);
154
+ }
155
+ 25% {
156
+ transform: rotate(270deg);
157
+ }
158
+ 37.5% {
159
+ transform: rotate(405deg);
160
+ }
161
+ 50% {
162
+ transform: rotate(540deg);
163
+ }
164
+ 62.5% {
165
+ transform: rotate(675deg);
166
+ }
167
+ 75% {
168
+ transform: rotate(810deg);
169
+ }
170
+ 87.5% {
171
+ transform: rotate(945deg);
172
+ }
173
+ 100% {
174
+ transform: rotate(1080deg);
175
+ }
176
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pcm-shared-components",
3
- "version": "0.0.57",
3
+ "version": "0.0.58",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "babel": {
@@ -16,8 +16,9 @@
16
16
  "storybook": "start-storybook -p 6006",
17
17
  "build-storybook": "build-storybook",
18
18
  "clean": "rm -rf dist",
19
+ "clean-storybook": "rm -rf dist/**/**/*/storybook",
19
20
  "build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles/tailwind.css --minify",
20
- "build": "npm run clean && NODE_ENV=production babel src/ --out-dir dist --ignore '**/*.stories.js' --ignore '**/*.stories.mdx' --ignore '**/*.docs.js' && npm run build-tailwind && cp ./src/styles/prism.css ./dist/styles/"
21
+ "build": "npm run clean && NODE_ENV=production babel src/ --out-dir dist --copy-files && npm run build-tailwind && cp ./src/styles/prism.css ./dist/styles/ && npm run clean-storybook"
21
22
  },
22
23
  "peerDependencies": {
23
24
  "react": "^17.0.2",