formatic 0.2.3 → 0.2.4
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.
- checksums.yaml +4 -4
- data/app/assets/javascript/declarations/date.d.ts +9 -0
- data/app/assets/javascript/declarations/file.d.ts +14 -0
- data/app/assets/javascript/declarations/select.d.ts +15 -0
- data/app/assets/javascript/declarations/setup.d.ts +3 -0
- data/app/assets/javascript/declarations/stepper.d.ts +12 -0
- data/app/assets/javascript/declarations/string.d.ts +14 -0
- data/app/assets/javascript/declarations/textarea.d.ts +15 -0
- data/app/assets/javascript/declarations/toggle.d.ts +8 -0
- data/app/assets/javascript/formatic/date.js +30 -0
- data/app/assets/javascript/formatic/date.js.map +1 -0
- data/app/assets/javascript/formatic/file.js +83 -0
- data/app/assets/javascript/formatic/file.js.map +1 -0
- data/app/assets/javascript/formatic/select.js +81 -0
- data/app/assets/javascript/formatic/select.js.map +1 -0
- data/app/assets/javascript/formatic/setup.js +42 -0
- data/app/assets/javascript/formatic/setup.js.map +1 -0
- data/app/assets/javascript/formatic/stepper.js +67 -0
- data/app/assets/javascript/formatic/stepper.js.map +1 -0
- data/app/assets/javascript/formatic/string.js +71 -0
- data/app/assets/javascript/formatic/string.js.map +1 -0
- data/app/assets/javascript/formatic/textarea.js +81 -0
- data/app/assets/javascript/formatic/textarea.js.map +1 -0
- data/app/assets/javascript/formatic/toggle.js +63 -0
- data/app/assets/javascript/formatic/toggle.js.map +1 -0
- data/app/assets/javascript/src/date.ts +41 -0
- data/app/assets/javascript/src/file.ts +101 -0
- data/app/assets/javascript/src/select.ts +101 -0
- data/app/assets/javascript/src/setup.js +44 -0
- data/app/assets/javascript/src/stepper.ts +80 -0
- data/app/assets/javascript/src/string.ts +89 -0
- data/app/assets/javascript/src/textarea.ts +101 -0
- data/app/assets/javascript/src/toggle.ts +76 -0
- data/app/assets/stylesheets/formatic/components/checklist.css +1 -0
- data/app/assets/stylesheets/formatic/components/checklist.css.map +1 -0
- data/app/assets/stylesheets/formatic/components/date.css +17 -0
- data/app/assets/stylesheets/formatic/components/date.sass +2 -2
- data/app/assets/stylesheets/formatic/components/select.css +17 -0
- data/app/assets/stylesheets/formatic/components/stepper.css +17 -0
- data/app/assets/stylesheets/formatic/components/string.css +17 -0
- data/app/assets/stylesheets/formatic/components/textarea.css +17 -0
- data/app/assets/stylesheets/formatic/components/time.css +17 -0
- data/app/assets/stylesheets/formatic/components/toggle.css +17 -0
- data/app/assets/stylesheets/formatic/components/wrapper.css +17 -0
- data/app/assets/stylesheets/formatic/formatic.css +450 -0
- data/app/assets/stylesheets/formatic/formatic.css.map +1 -0
- data/app/assets/stylesheets/formatic/generics/flip.css +1 -0
- data/app/assets/stylesheets/formatic/generics/flip.css.map +1 -0
- data/app/assets/stylesheets/formatic/scopes/form.css +17 -0
- data/app/assets/stylesheets/formatic/utilities/container.css +1 -0
- data/app/assets/stylesheets/formatic/utilities/container.css.map +1 -0
- data/app/assets/stylesheets/formatic/vendor.css +1107 -0
- data/app/assets/stylesheets/formatic/vendor.css.map +1 -0
- data/app/assets/stylesheets/formatic.css +18 -0
- data/app/assets/stylesheets/formatic.sass +17 -0
- data/app/assets/stylesheets/vendor.css +5 -0
- data/app/assets/stylesheets/vendor.css.map +1 -0
- data/app/assets/stylesheets/vendor.sass +1 -0
- data/app/components/formatic/base.rb +4 -1
- data/app/components/formatic/date.rb +1 -1
- data/app/components/formatic/file.rb +21 -0
- data/app/components/formatic/files.rb +8 -0
- data/app/components/formatic/select.rb +1 -1
- data/app/components/formatic/time.rb +3 -3
- data/config/importmap.rb +11 -0
- data/lib/formatic/choices/options.rb +1 -1
- data/lib/formatic/choices/records.rb +1 -1
- data/lib/formatic/engine.rb +12 -0
- data/lib/formatic/version.rb +1 -1
- data/lib/formatic/wrappers/required.rb +1 -1
- data/lib/formatic.rb +2 -1
- metadata +77 -17
- data/app/assets/javascript/formatic/components/date.ts +0 -54
- data/app/assets/javascript/formatic/components/select.ts +0 -113
- data/app/assets/javascript/formatic/components/stepper.ts +0 -89
- data/app/assets/javascript/formatic/components/string.ts +0 -103
- data/app/assets/javascript/formatic/components/textarea.ts +0 -112
- data/app/assets/javascript/formatic/components/toggle.ts +0 -89
- data/app/assets/javascript/formatic.js +0 -446
- data/app/assets/javascript/formatic.js.map +0 -1
- data/app/assets/stylesheets/formatic/index.sass +0 -17
- data/app/assets/stylesheets/formatic/package.json +0 -5
|
@@ -0,0 +1,450 @@
|
|
|
1
|
+
@keyframes formatic-flip {
|
|
2
|
+
0%, 80% {
|
|
3
|
+
transform: rotateY(360deg);
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
.c-formatic-wrapper {
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-row-gap: 0.2rem;
|
|
9
|
+
grid-template-columns: auto;
|
|
10
|
+
grid-template-areas: "label" "input" "error" "hint";
|
|
11
|
+
}
|
|
12
|
+
.c-formatic-wrapper {
|
|
13
|
+
font-size: 1rem;
|
|
14
|
+
}
|
|
15
|
+
.c-formatic-wrapper {
|
|
16
|
+
margin-bottom: 1.1429rem;
|
|
17
|
+
}
|
|
18
|
+
.c-formatic-wrapper--hint-before-input {
|
|
19
|
+
grid-template-areas: "label" "hint" "input" "error";
|
|
20
|
+
}
|
|
21
|
+
.c-formatic-wrapper__label {
|
|
22
|
+
grid-area: label;
|
|
23
|
+
}
|
|
24
|
+
.c-formatic-wrapper__input {
|
|
25
|
+
grid-area: input;
|
|
26
|
+
}
|
|
27
|
+
.c-formatic-wrapper__error {
|
|
28
|
+
grid-area: error;
|
|
29
|
+
}
|
|
30
|
+
.c-formatic-wrapper__hint {
|
|
31
|
+
grid-area: hint;
|
|
32
|
+
}
|
|
33
|
+
.c-formatic-wrapper__address {
|
|
34
|
+
grid-area: address;
|
|
35
|
+
}
|
|
36
|
+
.c-formatic-wrapper__input {
|
|
37
|
+
min-width: 1px;
|
|
38
|
+
}
|
|
39
|
+
.c-formatic-wrapper__error {
|
|
40
|
+
color: rgb(240, 30, 80);
|
|
41
|
+
}
|
|
42
|
+
.c-formatic-wrapper__error i {
|
|
43
|
+
display: inline-block;
|
|
44
|
+
height: 1em;
|
|
45
|
+
width: 1em;
|
|
46
|
+
animation: formatic-flip 4s infinite;
|
|
47
|
+
background-size: 1em 1em;
|
|
48
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 220.885l368.256 675.115h-736.512l368.256-675.115zM512 42.667l-512 938.667h1024l-512-938.667zM469.333 426.667h85.333v256h-85.333v-256zM512 842.667c-29.397 0-53.333-23.893-53.333-53.333s23.936-53.333 53.333-53.333 53.333 23.893 53.333 53.333-23.936 53.333-53.333 53.333z" style="fill: rgb(240, 30, 80)"></path></svg>');
|
|
49
|
+
}
|
|
50
|
+
.c-formatic-wrapper__hint {
|
|
51
|
+
opacity: 0.5;
|
|
52
|
+
}
|
|
53
|
+
.c-formatic-wrapper__hint {
|
|
54
|
+
margin-bottom: 0.2857rem;
|
|
55
|
+
}
|
|
56
|
+
.c-formatic-wrapper__hint {
|
|
57
|
+
font-size: 0.7857rem;
|
|
58
|
+
}
|
|
59
|
+
.c-formatic-wrapper__prevent-submit-on-enter {
|
|
60
|
+
position: absolute;
|
|
61
|
+
margin-left: -9999px;
|
|
62
|
+
visibility: hidden;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@container (min-width: 768px) {
|
|
66
|
+
.c-formatic-wrapper {
|
|
67
|
+
grid-template-columns: 1fr 1fr;
|
|
68
|
+
grid-template-rows: min-content min-content min-content;
|
|
69
|
+
grid-column-gap: 1rem;
|
|
70
|
+
grid-template-areas: "label input" "hint input" "error input";
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
.c-formatic-checklist {
|
|
74
|
+
display: grid;
|
|
75
|
+
grid-row-gap: 0.4em;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.c-formatic-date__inputs {
|
|
79
|
+
display: grid;
|
|
80
|
+
grid-auto-flow: column;
|
|
81
|
+
grid-gap: 0.5em;
|
|
82
|
+
}
|
|
83
|
+
.c-formatic-date__inputs {
|
|
84
|
+
margin-bottom: 0.8571rem;
|
|
85
|
+
}
|
|
86
|
+
.c-formatic-wrapper.is-required .c-formatic-date__select {
|
|
87
|
+
border-left-color: rgb(240, 30, 80);
|
|
88
|
+
border-left-width: 2px;
|
|
89
|
+
}
|
|
90
|
+
.c-formatic-date__calendar {
|
|
91
|
+
display: flex;
|
|
92
|
+
overflow-x: scroll;
|
|
93
|
+
overflow-y: hidden;
|
|
94
|
+
scrollbar-width: none;
|
|
95
|
+
-ms-overflow-style: none;
|
|
96
|
+
}
|
|
97
|
+
.c-formatic-date__calendar ::-webkit-scrollbar {
|
|
98
|
+
display: none;
|
|
99
|
+
}
|
|
100
|
+
.c-formatic-date__flick {
|
|
101
|
+
background-color: rgb(244.8, 244.8, 244.8);
|
|
102
|
+
text-align: center;
|
|
103
|
+
text-decoration: none;
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
color: #222;
|
|
108
|
+
}
|
|
109
|
+
.c-formatic-date__flick {
|
|
110
|
+
margin-right: 0.5714rem;
|
|
111
|
+
}
|
|
112
|
+
.c-formatic-date__flick {
|
|
113
|
+
padding: 0.2857rem;
|
|
114
|
+
}
|
|
115
|
+
.c-formatic-date__clear {
|
|
116
|
+
font-size: 1.0714rem;
|
|
117
|
+
}
|
|
118
|
+
.c-formatic-date__clear {
|
|
119
|
+
padding: 0.8571rem;
|
|
120
|
+
}
|
|
121
|
+
.c-formatic-date__calendar-day-number {
|
|
122
|
+
font-size: 1rem;
|
|
123
|
+
}
|
|
124
|
+
.c-formatic-date__calendar-day-number {
|
|
125
|
+
font-family: Inconsolata, "Roboto Mono", "Source Code Pro", "SF Mono", Monaco, "Fira Mono", "Droid Sans Mono", monospace !important;
|
|
126
|
+
}
|
|
127
|
+
.c-formatic-date__calendar-month {
|
|
128
|
+
text-transform: uppercase;
|
|
129
|
+
}
|
|
130
|
+
.c-formatic-date__calendar-month {
|
|
131
|
+
font-size: 0.7857rem;
|
|
132
|
+
}
|
|
133
|
+
.c-formatic-date__calendar-year {
|
|
134
|
+
opacity: 0.4;
|
|
135
|
+
}
|
|
136
|
+
.c-formatic-date__calendar-year {
|
|
137
|
+
font-family: Inconsolata, "Roboto Mono", "Source Code Pro", "SF Mono", Monaco, "Fira Mono", "Droid Sans Mono", monospace !important;
|
|
138
|
+
}
|
|
139
|
+
.c-formatic-date__calendar-year {
|
|
140
|
+
font-size: 0.7857rem;
|
|
141
|
+
}
|
|
142
|
+
.c-formatic-date .is-saturday {
|
|
143
|
+
background-color: rgb(178.5, 178.5, 178.5);
|
|
144
|
+
}
|
|
145
|
+
.c-formatic-date .is-sunday {
|
|
146
|
+
background-color: rgb(127.5, 127.5, 127.5);
|
|
147
|
+
color: #fff;
|
|
148
|
+
}
|
|
149
|
+
.c-formatic-date .is-holiday {
|
|
150
|
+
color: rgb(240, 30, 80);
|
|
151
|
+
}
|
|
152
|
+
.c-formatic-date .is-today {
|
|
153
|
+
border: 3px solid #222;
|
|
154
|
+
font-weight: bold;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.c-formatic-wrapper.is-required .c-formatic-select {
|
|
158
|
+
border-left-color: rgb(240, 30, 80);
|
|
159
|
+
border-left-width: 2px;
|
|
160
|
+
}
|
|
161
|
+
.c-formatic-select.is-loading, .c-formatic-select.is-saved, .c-formatic-select.is-failed {
|
|
162
|
+
background-position: right 0.29rem bottom 0.29rem;
|
|
163
|
+
background-repeat: no-repeat;
|
|
164
|
+
background-size: 22px 22px;
|
|
165
|
+
}
|
|
166
|
+
.c-formatic-select.is-loading {
|
|
167
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgba(139, 139, 139, 0.243)"></path></svg>');
|
|
168
|
+
}
|
|
169
|
+
.c-formatic-select.is-saved {
|
|
170
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgb(0, 163, 0)"></path></svg>');
|
|
171
|
+
}
|
|
172
|
+
.c-formatic-select.is-failed {
|
|
173
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgb(185, 1, 1)"></path></svg>');
|
|
174
|
+
background-color: red;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.c-formatic-stepper {
|
|
178
|
+
display: grid;
|
|
179
|
+
align-items: stretch;
|
|
180
|
+
justify-content: left;
|
|
181
|
+
grid-auto-flow: column;
|
|
182
|
+
}
|
|
183
|
+
.c-formatic-stepper__step {
|
|
184
|
+
display: inline-block;
|
|
185
|
+
border: 1px solid rgb(197.5, 197.5, 197.5);
|
|
186
|
+
vertical-align: middle;
|
|
187
|
+
padding-right: 1em;
|
|
188
|
+
padding-left: 1em;
|
|
189
|
+
padding-top: 0.5em;
|
|
190
|
+
padding-bottom: 0.5em;
|
|
191
|
+
border-radius: 0.3em;
|
|
192
|
+
color: #222;
|
|
193
|
+
text-decoration: none;
|
|
194
|
+
}
|
|
195
|
+
.c-formatic-stepper__step {
|
|
196
|
+
font-size: 1.4286rem;
|
|
197
|
+
}
|
|
198
|
+
.c-formatic-stepper__number {
|
|
199
|
+
-webkit-appearance: none;
|
|
200
|
+
-moz-appearance: none;
|
|
201
|
+
font-family: "Roboto Condensed";
|
|
202
|
+
width: 7em;
|
|
203
|
+
height: 100%;
|
|
204
|
+
outline-offset: 0;
|
|
205
|
+
color: #222;
|
|
206
|
+
text-align: center;
|
|
207
|
+
vertical-align: middle;
|
|
208
|
+
border: 0;
|
|
209
|
+
}
|
|
210
|
+
.c-formatic-stepper__number {
|
|
211
|
+
font-size: 1.0714rem;
|
|
212
|
+
}
|
|
213
|
+
.c-formatic-stepper__number {
|
|
214
|
+
margin-bottom: 0.8571rem;
|
|
215
|
+
}
|
|
216
|
+
.c-formatic-stepper ::placeholder {
|
|
217
|
+
color: rgb(197.5, 197.5, 197.5);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.c-formatic-string__input.is-terminal {
|
|
221
|
+
font-family: Inconsolata, "Roboto Mono", "Source Code Pro", "SF Mono", Monaco, "Fira Mono", "Droid Sans Mono", monospace !important;
|
|
222
|
+
}
|
|
223
|
+
.c-formatic-string__input.is-loading, .c-formatic-string__input.is-saved, .c-formatic-string__input.is-failed {
|
|
224
|
+
background-position: right 0.29rem bottom 0.29rem;
|
|
225
|
+
background-repeat: no-repeat;
|
|
226
|
+
background-size: 22px 22px;
|
|
227
|
+
}
|
|
228
|
+
.c-formatic-string__input.is-loading {
|
|
229
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgba(139, 139, 139, 0.243)"></path></svg>');
|
|
230
|
+
}
|
|
231
|
+
.c-formatic-string__input.is-saved {
|
|
232
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgb(0, 163, 0)"></path></svg>');
|
|
233
|
+
}
|
|
234
|
+
.c-formatic-string__input.is-failed {
|
|
235
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgb(185, 1, 1)"></path></svg>');
|
|
236
|
+
background-color: red;
|
|
237
|
+
}
|
|
238
|
+
.c-formatic-wrapper.is-required .c-formatic-string__input {
|
|
239
|
+
border-left-color: rgb(240, 30, 80);
|
|
240
|
+
border-left-width: 2px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.c-formatic-textarea__input.is-loading, .c-formatic-textarea__input.is-saved, .c-formatic-textarea__input.is-failed {
|
|
244
|
+
background-position: right 0.29rem bottom 0.29rem;
|
|
245
|
+
background-repeat: no-repeat;
|
|
246
|
+
background-size: 22px 22px;
|
|
247
|
+
}
|
|
248
|
+
.c-formatic-textarea__input.is-loading {
|
|
249
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgba(139, 139, 139, 0.243)"></path></svg>');
|
|
250
|
+
}
|
|
251
|
+
.c-formatic-textarea__input.is-saved {
|
|
252
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgb(0, 163, 0)"></path></svg>');
|
|
253
|
+
}
|
|
254
|
+
.c-formatic-textarea__input.is-failed {
|
|
255
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1024" height="1024" viewBox="0 0 1024 1024"><path d="M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z" style="fill: rgb(185, 1, 1)"></path></svg>');
|
|
256
|
+
background-color: red;
|
|
257
|
+
}
|
|
258
|
+
.c-formatic-wrapper.is-required .c-formatic-textarea__input {
|
|
259
|
+
border-left-color: rgb(240, 30, 80);
|
|
260
|
+
border-left-width: 2px;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.c-formatic-time__inputs {
|
|
264
|
+
display: grid;
|
|
265
|
+
grid-auto-flow: column;
|
|
266
|
+
grid-gap: 0.5em;
|
|
267
|
+
}
|
|
268
|
+
.c-formatic-time__inputs {
|
|
269
|
+
margin-bottom: 0.8571rem;
|
|
270
|
+
}
|
|
271
|
+
.c-formatic-wrapper.is-required .c-formatic-time__select {
|
|
272
|
+
border-left-color: rgb(240, 30, 80);
|
|
273
|
+
border-left-width: 2px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.c-formatic-toggle {
|
|
277
|
+
display: grid;
|
|
278
|
+
height: 100%;
|
|
279
|
+
align-content: center;
|
|
280
|
+
}
|
|
281
|
+
.c-formatic-toggle {
|
|
282
|
+
font-size: 1rem;
|
|
283
|
+
}
|
|
284
|
+
.c-formatic-toggle label {
|
|
285
|
+
display: inline-grid;
|
|
286
|
+
grid-template-columns: max-content 1fr;
|
|
287
|
+
grid-template-areas: "switch caption" "status status";
|
|
288
|
+
}
|
|
289
|
+
.c-formatic-toggle label small {
|
|
290
|
+
opacity: 0.5;
|
|
291
|
+
}
|
|
292
|
+
.c-formatic-toggle label small {
|
|
293
|
+
font-size: 0.9286rem;
|
|
294
|
+
}
|
|
295
|
+
.c-formatic-toggle i {
|
|
296
|
+
grid-area: switch;
|
|
297
|
+
display: inline-block;
|
|
298
|
+
width: 2.8em;
|
|
299
|
+
height: 1.5em;
|
|
300
|
+
border-radius: 1.5em;
|
|
301
|
+
position: relative;
|
|
302
|
+
vertical-align: middle;
|
|
303
|
+
transition: background 0.25s;
|
|
304
|
+
background: rgb(197.5, 197.5, 197.5);
|
|
305
|
+
}
|
|
306
|
+
.c-formatic-toggle i:before {
|
|
307
|
+
display: block;
|
|
308
|
+
position: absolute;
|
|
309
|
+
content: "";
|
|
310
|
+
top: 0.1em;
|
|
311
|
+
left: 0.1em;
|
|
312
|
+
width: 1.3em;
|
|
313
|
+
height: 1.3em;
|
|
314
|
+
border-radius: 50%;
|
|
315
|
+
background-color: #fff;
|
|
316
|
+
transition: left 0.1s;
|
|
317
|
+
}
|
|
318
|
+
.c-formatic-toggle input {
|
|
319
|
+
position: absolute;
|
|
320
|
+
visibility: hidden;
|
|
321
|
+
}
|
|
322
|
+
.c-formatic-toggle input:checked + i {
|
|
323
|
+
background-color: rgb(0, 190, 130);
|
|
324
|
+
}
|
|
325
|
+
.c-formatic-toggle input:checked + i.is-alert {
|
|
326
|
+
background-color: rgb(240, 30, 80);
|
|
327
|
+
}
|
|
328
|
+
.c-formatic-toggle input:checked + i:before {
|
|
329
|
+
left: 1.4em;
|
|
330
|
+
background-color: #fff;
|
|
331
|
+
}
|
|
332
|
+
.c-formatic-toggle input:not(:checked) ~ .is-active {
|
|
333
|
+
display: none;
|
|
334
|
+
}
|
|
335
|
+
.c-formatic-toggle input:checked ~ .is-active {
|
|
336
|
+
display: block;
|
|
337
|
+
}
|
|
338
|
+
.c-formatic-toggle input:not(:checked) ~ .is-inactive {
|
|
339
|
+
display: block;
|
|
340
|
+
}
|
|
341
|
+
.c-formatic-toggle input:checked ~ .is-inactive {
|
|
342
|
+
display: none;
|
|
343
|
+
}
|
|
344
|
+
.c-formatic-toggle span {
|
|
345
|
+
grid-area: caption;
|
|
346
|
+
margin-left: 0.5em;
|
|
347
|
+
position: relative;
|
|
348
|
+
top: 2px;
|
|
349
|
+
}
|
|
350
|
+
.c-formatic-toggle .is-inactive,
|
|
351
|
+
.c-formatic-toggle .is-active {
|
|
352
|
+
grid-area: status;
|
|
353
|
+
margin-top: 0.5em;
|
|
354
|
+
color: rgb(70, 70, 70);
|
|
355
|
+
}
|
|
356
|
+
.c-formatic-toggle .is-inactive,
|
|
357
|
+
.c-formatic-toggle .is-active {
|
|
358
|
+
font-size: 0.7857rem;
|
|
359
|
+
}
|
|
360
|
+
.c-formatic-toggle__label-caption-dummy {
|
|
361
|
+
position: absolute;
|
|
362
|
+
margin-left: -9999px;
|
|
363
|
+
visibility: hidden;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.u-formatic-container {
|
|
367
|
+
container-type: inline-size;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.s-formatic input[type=email],
|
|
371
|
+
.s-formatic input[type=number],
|
|
372
|
+
.s-formatic input[type=password],
|
|
373
|
+
.s-formatic input[type=search],
|
|
374
|
+
.s-formatic input[type=tel],
|
|
375
|
+
.s-formatic input[type=text],
|
|
376
|
+
.s-formatic input[type=url],
|
|
377
|
+
.s-formatic textarea,
|
|
378
|
+
.s-formatic select {
|
|
379
|
+
-webkit-appearance: none;
|
|
380
|
+
-moz-appearance: none;
|
|
381
|
+
font-family: "Roboto Condensed";
|
|
382
|
+
width: 100%;
|
|
383
|
+
outline-offset: 0;
|
|
384
|
+
outline-color: #ffd400;
|
|
385
|
+
border: 1px solid rgb(197.5, 197.5, 197.5);
|
|
386
|
+
color: #222;
|
|
387
|
+
height: 2em;
|
|
388
|
+
padding-top: 0.2em;
|
|
389
|
+
padding-right: 0.4em;
|
|
390
|
+
padding-left: 0.4em;
|
|
391
|
+
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1) inset;
|
|
392
|
+
box-sizing: border-box;
|
|
393
|
+
}
|
|
394
|
+
.s-formatic input[type=email],
|
|
395
|
+
.s-formatic input[type=number],
|
|
396
|
+
.s-formatic input[type=password],
|
|
397
|
+
.s-formatic input[type=search],
|
|
398
|
+
.s-formatic input[type=tel],
|
|
399
|
+
.s-formatic input[type=text],
|
|
400
|
+
.s-formatic input[type=url],
|
|
401
|
+
.s-formatic textarea,
|
|
402
|
+
.s-formatic select {
|
|
403
|
+
font-size: 1rem;
|
|
404
|
+
}
|
|
405
|
+
.formatic-wrapper.is-required .s-formatic input[type=email],
|
|
406
|
+
.formatic-wrapper.is-required .s-formatic input[type=number],
|
|
407
|
+
.formatic-wrapper.is-required .s-formatic input[type=password],
|
|
408
|
+
.formatic-wrapper.is-required .s-formatic input[type=search],
|
|
409
|
+
.formatic-wrapper.is-required .s-formatic input[type=tel],
|
|
410
|
+
.formatic-wrapper.is-required .s-formatic input[type=text],
|
|
411
|
+
.formatic-wrapper.is-required .s-formatic input[type=url],
|
|
412
|
+
.formatic-wrapper.is-required .s-formatic textarea,
|
|
413
|
+
.formatic-wrapper.is-required .s-formatic select {
|
|
414
|
+
border-left-color: rgb(240, 30, 80);
|
|
415
|
+
border-left-width: 2px;
|
|
416
|
+
}
|
|
417
|
+
.s-formatic textarea {
|
|
418
|
+
min-height: 7em;
|
|
419
|
+
}
|
|
420
|
+
.s-formatic select {
|
|
421
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb(51, 51, 51)"></polygon></svg>');
|
|
422
|
+
background-position: right 0.5rem center;
|
|
423
|
+
background-repeat: no-repeat;
|
|
424
|
+
background-size: 9px 6px;
|
|
425
|
+
box-shadow: none;
|
|
426
|
+
}
|
|
427
|
+
.s-formatic ::placeholder {
|
|
428
|
+
color: rgb(197.5, 197.5, 197.5);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
@media (prefers-color-scheme: dark) {
|
|
432
|
+
.s-formatic input[type=email],
|
|
433
|
+
.s-formatic input[type=number],
|
|
434
|
+
.s-formatic input[type=password],
|
|
435
|
+
.s-formatic input[type=search],
|
|
436
|
+
.s-formatic input[type=tel],
|
|
437
|
+
.s-formatic input[type=text],
|
|
438
|
+
.s-formatic input[type=url],
|
|
439
|
+
.s-formatic textarea,
|
|
440
|
+
.s-formatic select,
|
|
441
|
+
.s-formatic textarea {
|
|
442
|
+
background-color: #222;
|
|
443
|
+
color: #fff;
|
|
444
|
+
}
|
|
445
|
+
.s-formatic select {
|
|
446
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb(255, 255, 255)"></polygon></svg>');
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
/*# sourceMappingURL=formatic.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["generics/flip.sass","components/wrapper.sass","../../../../node_modules/iglu/iglu/font-size/tools/_sizing.sass","../../../../node_modules/iglu/iglu/spacing/tools/_margin.sass","settings/_colors.sass","components/checklist.sass","components/date.sass","tools/_mandatory.sass","../../../../node_modules/iglu/iglu/spacing/tools/_padding.sass","tools/_terminal.sass","tools/_cloud.sass","components/stepper.sass","components/time.sass","components/toggle.sass","utilities/container.sass","scopes/form.sass","tools/_theme.sass"],"names":[],"mappings":"AAAA;EACE;IACE;;;ACGJ;EACE;EACA;EACA;EACA;;ACGD;EACE;;AC+FD;EACE;;AFhGF;EACE;;AAGA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAEJ;EAEE;;AAEF;EACE,OGpBY;;AHsBZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACE;;AE4DF;EACE;;AD7FH;EACE;;ADmCD;EACE;EACA;EACA;;;AAEJ;EACE;IACE;IACA;IACA;IACA;;;AIlDJ;EACE;EACA;;;ACOA;EACE;EACA;EACA;;AH4FF;EACE;;AItGF;EACE,mBHCY;EGAZ;;ADcF;EACE;EAEA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OFlCI;;ADoEN;EACE;;AKjEF;EACE;;ANSH;EACE;;AMHD;EACE;;ANHH;EACE;;AOZD;EACE;;AH8CF;EACE;;AJ7CH;EACE;;AI+CD;EACE;;AGpDF;EACE;;APEH;EACE;;AIoDD;EACE;;AAEF;EACE;EACA,OF3DI;;AE6DN;EACE,OF5DY;;AE8Dd;EACE;EACA;;;AClEF;EACE,mBHCY;EGAZ;;AGJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;;ACXJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OPlBI;EOmBJ;;ATGH;EACE;;ASDD;EACE;EACA;EACA;EACA;EACA;EACA;EACA,OP7BI;EO8BJ;EACA;EACA;;ATlBH;EACE;;ACuFD;EACE;;AQnEF;EACE,OP7BU;;;AKTZ;EACE;;ACDF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AHbF;EACE,mBHCY;EGAZ;;;AGJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AHbF;EACE,mBHCY;EGAZ;;;AKCF;EACE;EACA;EACA;;AT+FF;EACE;;AItGF;EACE,mBHCY;EGAZ;;;AMFJ;EAGE;EACA;EACA;;AXID;EACE;;AWFD;EACE;EAGA;EACA;;AAEA;EACE;;AXXL;EACE;;AWaD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YTrBU;;ASuBV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBTvCE;ESwCF;;AAGJ;EACE;EACA;;AAGA;EACE,kBT7CO;;AS+CP;EACE,kBTlDQ;;ASqDZ;EACE;EACA,kBTzDE;;AS4DJ;EACE;;AACF;EACE;;AAGF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA,OT7EW;;AFLd;AAAA;EACE;;AWsFD;EACE;EACA;EACA;;;AC9FJ;EACE;;;ACKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;EACA;EACA;EACA;EACA,eXdU;EWeV;EACA,OXpBI;EWqBJ;EACA;EACA;EACA;EACA;EACA;;AbhBH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AKVD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,mBHCY;EGAZ;;AQ6BF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE,OXnCU;;;AYTZ;EDgDE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAUE,kBXzDE;IW0DF,OXzDE;;EW2DJ;IACE","file":"formatic.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@keyframes formatic-flip{0%,80%{transform:rotateY(360deg)}}/*# sourceMappingURL=flip.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["file:///Users/orange/Code/2-Areas/formatic/formatic/app/assets/stylesheets/formatic/generics/flip.sass"],"names":[],"mappings":"AAAA,yBACE,OACE","file":"flip.css","sourcesContent":["@keyframes formatic-flip\n 0%, 80%\n transform: rotateY(360deg)\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* Error: Can't find stylesheet to import.
|
|
2
|
+
* ,
|
|
3
|
+
* 2 | @use "formatic/settings/colors"
|
|
4
|
+
* | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
5
|
+
* '
|
|
6
|
+
* ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/scopes/form.sass 2:1 root stylesheet */
|
|
7
|
+
|
|
8
|
+
body::before {
|
|
9
|
+
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
|
|
10
|
+
"Droid Sans Mono", monospace, monospace;
|
|
11
|
+
white-space: pre;
|
|
12
|
+
display: block;
|
|
13
|
+
padding: 1em;
|
|
14
|
+
margin-bottom: 1em;
|
|
15
|
+
border-bottom: 2px solid black;
|
|
16
|
+
content: "Error: Can't find stylesheet to import.\a \2577 \a 2 \2502 @use \"formatic/settings/colors\"\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/scopes/form.sass 2:1 root stylesheet";
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.u-formatic-container{container-type:inline-size}/*# sourceMappingURL=container.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["file:///Users/orange/Code/2-Areas/formatic/formatic/app/assets/stylesheets/formatic/utilities/container.sass"],"names":[],"mappings":"AAAA,sBACE","file":"container.css","sourcesContent":[".u-formatic-container\n container-type: inline-size\n"]}
|