saasufy-components 3.0.1 → 3.1.0

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles.css +207 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "saasufy-components",
3
- "version": "3.0.1",
3
+ "version": "3.1.0",
4
4
  "description": "Components for Saasufy.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/styles.css ADDED
@@ -0,0 +1,207 @@
1
+ body {
2
+ margin: 0;
3
+ }
4
+
5
+ a {
6
+ text-decoration: none;
7
+ color: #e37042;
8
+ }
9
+
10
+ input[type=text],input[type=password],input[type=number],select,textarea {
11
+ border: 1px solid #999999;
12
+ border-radius: 5px;
13
+ }
14
+
15
+ input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus {
16
+ border-color: #00a5e5;
17
+ outline-color: #00a5e5;
18
+ }
19
+
20
+ input[type=text].error:focus,input[type=password].error:focus,input[type=number].error:focus,select.error:focus,textarea.error:focus {
21
+ border-color: #ff0000;
22
+ outline-color: #ff0000;
23
+ }
24
+
25
+ input[type=text].warning:focus,input[type=password].warning:focus,input[type=number].warning:focus,select.warning:focus,textarea.warning:focus {
26
+ border-color: #ee9900;
27
+ outline-color: #ee9900;
28
+ }
29
+
30
+ input[type=text].success:focus,input[type=password].success:focus,input[type=number].success:focus,select.success:focus,textarea.success:focus {
31
+ border-color: #009900;
32
+ outline-color: #009900;
33
+ }
34
+
35
+ input[type=text],input[type=password],input[type=button],input[type=submit],input[type=number],textarea {
36
+ padding: 10px;
37
+ font-size: 18px;
38
+ width: 100%;
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ input[type=checkbox] {
43
+ width: 20px;
44
+ height: 20px;
45
+ margin: 0;
46
+ }
47
+
48
+ input[type=submit]:not(input[disabled]),input[type=button]:not(input[disabled]) {
49
+ cursor: pointer;
50
+ }
51
+
52
+ .passphrase-container input {
53
+ max-width: 107px;
54
+ }
55
+
56
+ .log-in-form {
57
+ display: flex;
58
+ flex-direction: column;
59
+ gap: 20px;
60
+ }
61
+
62
+ .passphrase-container {
63
+ display: flex;
64
+ gap: 5px;
65
+ flex-wrap: wrap;
66
+ }
67
+
68
+ capitalisk-passphrase-input {
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: 5px;
72
+ }
73
+
74
+ .loading-spinner-container {
75
+ display: flex;
76
+ justify-content: center;
77
+ align-items: center;
78
+ height: 100px;
79
+ font-size: 40px;
80
+ color: #999999;
81
+ }
82
+
83
+ .multisig-indicator.spinning {
84
+ display: inline-block;
85
+ }
86
+
87
+ .spinning {
88
+ display: inline-block;
89
+ animation: spin 1s infinite linear;
90
+ }
91
+
92
+ .multisig-indicator.error {
93
+ color: #ff0000;
94
+ }
95
+
96
+ @keyframes spin {
97
+ 100% {
98
+ transform: rotate(360deg);
99
+ }
100
+ }
101
+
102
+ collection-adder .collection-adder-form-content {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 5px;
106
+ }
107
+
108
+ collection-adder .collection-adder-form-content > label {
109
+ display: flex;
110
+ justify-content: flex-start;
111
+ align-items: center;
112
+ gap: 10px;
113
+ padding: 5px 0 5px 0;
114
+ align-self: flex-start;
115
+ }
116
+
117
+ .label-container {
118
+ display: flex;
119
+ justify-content: flex-start;
120
+ align-items: center;
121
+ gap: 10px;
122
+ align-self: flex-start;
123
+ }
124
+
125
+ collection-browser {
126
+ display: flex;
127
+ flex-wrap: wrap;
128
+ justify-content: center;
129
+ gap: 10px;
130
+ }
131
+
132
+ collection-browser > [slot=viewport] {
133
+ display: flex;
134
+ flex-direction: column;
135
+ grid-area: a;
136
+ }
137
+
138
+ [slot=next-page],[slot=previous-page] {
139
+ cursor: pointer;
140
+ }
141
+
142
+ collection-browser > [slot=previous-page] {
143
+ cursor: pointer;
144
+ flex-shrink: 1;
145
+ width: auto;
146
+ }
147
+
148
+ collection-browser > [slot=page-number] {
149
+ display: flex;
150
+ justify-content: center;
151
+ align-items: center;
152
+ min-width: 30px;
153
+ }
154
+
155
+ collection-browser > [slot=next-page] {
156
+ cursor: pointer;
157
+ flex-shrink: 1;
158
+ width: auto;
159
+ }
160
+
161
+ .container-vertical {
162
+ display: flex;
163
+ flex-direction: column;
164
+ width: 100%;
165
+ }
166
+
167
+ .container-horizontal {
168
+ display: flex;
169
+ flex-direction: row;
170
+ width: 100%;
171
+ }
172
+
173
+ .container-narrow {
174
+ max-width: 500px;
175
+ }
176
+
177
+ .container-medium {
178
+ max-width: 1000px;
179
+ }
180
+
181
+ .container-wide {
182
+ max-width: 1500px;
183
+ }
184
+
185
+ .container-centered-main {
186
+ justify-content: center;
187
+ }
188
+
189
+ .container-centered-cross {
190
+ align-items: center;
191
+ }
192
+
193
+ .container-spaced-small {
194
+ gap: 5px;
195
+ }
196
+
197
+ .container-spaced-medium {
198
+ gap: 10px;
199
+ }
200
+
201
+ .container-spaced-large {
202
+ gap: 20px;
203
+ }
204
+
205
+ .container-spaced-very-large {
206
+ gap: 30px;
207
+ }