@nys-cui/cui-formpill 0.2.10 → 0.2.20

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 (41) hide show
  1. package/component-base/README.md +43 -0
  2. package/component-base/cui.jsonc +6 -0
  3. package/component-base/package.json +42 -0
  4. package/component-base/src/assets/scss/_button-menu.scss +270 -0
  5. package/component-base/src/assets/scss/_buttons.scss +200 -0
  6. package/component-base/src/assets/scss/_cui-asof.scss +86 -0
  7. package/component-base/src/assets/scss/_cui-formpill.scss +284 -0
  8. package/component-base/src/assets/scss/_cui-general.scss +19 -0
  9. package/component-base/src/assets/scss/_cui-message.scss +119 -0
  10. package/component-base/src/assets/scss/_cui-spinner.scss +27 -0
  11. package/component-base/src/assets/scss/_cui-tree.scss +136 -0
  12. package/component-base/src/assets/scss/_cui-widget.scss +128 -0
  13. package/component-base/src/assets/scss/_field-check-group.scss +296 -0
  14. package/component-base/src/assets/scss/_field-radio-group.scss +236 -0
  15. package/component-base/src/assets/scss/_fonts.scss +20 -0
  16. package/component-base/src/assets/scss/_globalNotes.scss +419 -0
  17. package/component-base/src/assets/scss/_grid.scss +489 -0
  18. package/component-base/src/assets/scss/_help.scss +46 -0
  19. package/component-base/src/assets/scss/_inputs.scss +1145 -0
  20. package/component-base/src/assets/scss/_modal.scss +56 -0
  21. package/component-base/src/assets/scss/_normalize.scss +3 -0
  22. package/component-base/src/assets/scss/_popovers.scss +119 -0
  23. package/component-base/src/assets/scss/_quick_lookup.scss +87 -0
  24. package/component-base/src/assets/scss/_sidebar-context.scss +896 -0
  25. package/component-base/src/assets/scss/_table.scss +702 -0
  26. package/component-base/src/assets/scss/_toast.scss +219 -0
  27. package/component-base/src/assets/scss/_utility.scss +64 -0
  28. package/component-base/src/assets/scss/_variables.scss +58 -0
  29. package/component-base/src/assets/scss/main.scss +451 -0
  30. package/component-base/src/assets/scss/normalize/_import-now.scss +11 -0
  31. package/component-base/src/assets/scss/normalize/_normalize-mixin.scss +570 -0
  32. package/component-base/src/assets/scss/normalize/_variables.scss +37 -0
  33. package/component-base/src/assets/scss/normalize/_vertical-rhythm.scss +63 -0
  34. package/component-base/src/assets/scss/readme.md +1 -0
  35. package/component-base/src/modules/dom.js +21 -0
  36. package/component-base/src/screens/index/cui.jsonc +3 -0
  37. package/component-base/src/screens/index/index.js +228 -0
  38. package/component-base/src/screens/index/index.tpl.html +32 -0
  39. package/component-base/src/spa.js +117 -0
  40. package/package.json +1 -1
  41. package/src/cui-formpill.js +452 -1000
@@ -0,0 +1,296 @@
1
+ cui-check-group {
2
+
3
+ .readOnlySpanWrapper[alignment=horizontal] {
4
+ display: flex;
5
+ align-items: center;
6
+ flex: 0 1 auto;
7
+ flex-direction: row;
8
+ flex-wrap: nowrap;
9
+ justify-content: left;
10
+ display: flex;
11
+
12
+ .innerSpanContainer[data-selected=false] {
13
+ display: flex;
14
+ align-items: center;
15
+ flex: 0 1 auto;
16
+ flex-wrap: nowrap;
17
+ min-height: 33px;
18
+ padding-right: 8px;
19
+
20
+ .readOnlyCheckItem {
21
+
22
+ top: 50%;
23
+ left: 50%;
24
+ width: 8px;
25
+ height: 8px;
26
+ background-color: white;
27
+ margin: 10px 12px 10px 10px;
28
+ box-shadow: 0px 0px 0px 2.5px white, 0px 0px 0px 3.5px #A1A1A1;
29
+ min-width: 8px;
30
+ border-radius: .5px;
31
+ }
32
+
33
+ label {
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+ }
38
+
39
+ .innerSpanContainer[data-selected=true] {
40
+ display: flex;
41
+ align-items: center;
42
+ flex: 0 1 auto;
43
+ flex-wrap: nowrap;
44
+ min-height: 33px;
45
+ padding-right: 8px;
46
+
47
+ .readOnlyCheckItem {
48
+
49
+ top: 50%;
50
+ left: 50%;
51
+ width: 8px;
52
+ height: 8px;
53
+ margin: 10px 12px 10px 10px;
54
+ box-shadow: 0px 0px 0px 2.5px white, 0px 0px 0px 3.5px #A1A1A1;
55
+ border-radius: .5px;
56
+ min-width: 8px;
57
+
58
+ }
59
+
60
+ label {
61
+ display: flex;
62
+ align-items: center;
63
+ }
64
+
65
+ .readOnlyCheckItem::before {
66
+
67
+ content: "";
68
+
69
+ position: absolute;
70
+
71
+ margin-top: -1px;
72
+ margin-left: 2px;
73
+ --borderWidth: 2px;
74
+ --height: 9px;
75
+ --width: 4.5px;
76
+ --borderColor: #A1A1A1;
77
+
78
+ display: inline-block;
79
+
80
+ // transform:translateX(2px) rotate(45deg);
81
+ transform: rotate(40deg);
82
+ height: var(--height);
83
+ width: var(--width);
84
+ border-bottom: var(--borderWidth) solid var(--borderColor);
85
+ border-right: var(--borderWidth) solid var(--borderColor);
86
+
87
+ }
88
+
89
+ label {
90
+ display: flex;
91
+ align-items: center;
92
+ }
93
+ }
94
+ }
95
+
96
+ .readOnlySpanWrapper[alignment=vertical] {
97
+ display: flex;
98
+ align-items: left;
99
+ flex: 0 1 auto;
100
+ flex-direction: column;
101
+ flex-wrap: nowrap;
102
+ justify-content: left;
103
+ display: flex;
104
+
105
+ .innerSpanContainer[data-selected=false] {
106
+ display: flex;
107
+ align-items: center;
108
+ flex: 0 1 auto;
109
+ flex-wrap: nowrap;
110
+ min-height: 33px;
111
+ padding-right: 8px;
112
+
113
+ .readOnlyCheckItem {
114
+ top: 50%;
115
+ left: 50%;
116
+ width: 8px;
117
+ height: 8px;
118
+ background-color: white;
119
+ margin: 10px 12px 10px 10px;
120
+ box-shadow: 0px 0px 0px 2.5px white, 0px 0px 0px 3.5px #A1A1A1;
121
+ min-width: 8px;
122
+ border-radius: .5px;
123
+
124
+ }
125
+
126
+ label {
127
+ display: flex;
128
+ align-items: center;
129
+ }
130
+ }
131
+
132
+ .innerSpanContainer[data-selected=true] {
133
+ display: flex;
134
+ align-items: center;
135
+ flex: 0 1 auto;
136
+ flex-wrap: nowrap;
137
+ min-height: 33px;
138
+ padding-right: 8px;
139
+
140
+ .readOnlyCheckItem {
141
+ top: 50%;
142
+ left: 50%;
143
+ width: 8px;
144
+ height: 8px;
145
+ margin: 10px 12px 10px 10px;
146
+ box-shadow: 0px 0px 0px 2.5px white, 0px 0px 0px 3.5px #A1A1A1;
147
+ min-width: 8px;
148
+ border-radius: .5px;
149
+
150
+ }
151
+
152
+ .readOnlyCheckItem::before {
153
+
154
+ content: "";
155
+
156
+ position: absolute;
157
+
158
+ margin-top: -1px;
159
+ margin-left: 2px;
160
+ --borderWidth: 2px;
161
+ --height: 9px;
162
+ --width: 4.5px;
163
+ --borderColor: #A1A1A1;
164
+
165
+ display: inline-block;
166
+
167
+ // transform:translateX(2px) rotate(45deg);
168
+ transform: rotate(40deg);
169
+ height: var(--height);
170
+ width: var(--width);
171
+ border-bottom: var(--borderWidth) solid var(--borderColor);
172
+ border-right: var(--borderWidth) solid var(--borderColor);
173
+
174
+ }
175
+
176
+ label {
177
+ display: flex;
178
+ align-items: center;
179
+ }
180
+ }
181
+ }
182
+
183
+
184
+ //writeable group
185
+
186
+ .writeableSpanWrapper[alignment=horizontal] {
187
+ display: flex;
188
+ align-items: center;
189
+ flex: 0 1 auto;
190
+ flex-direction: row;
191
+ flex-wrap: nowrap;
192
+ justify-content: left;
193
+ display: flex;
194
+
195
+ .innerSpanContainer[data-selected=false] {
196
+
197
+ display: flex;
198
+ align-items: center;
199
+ flex: 0 1 auto;
200
+ flex-wrap: nowrap;
201
+ padding-right: 8px;
202
+
203
+ input[type=checkbox] {
204
+ cursor: pointer;
205
+ outline: none;
206
+ box-shadow: none;
207
+ min-height: 33px;
208
+
209
+ margin: 3px 10px 0px 6px;
210
+ }
211
+
212
+ label {
213
+ cursor: pointer;
214
+
215
+ }
216
+
217
+ }
218
+
219
+ .innerSpanContainer[data-selected=true] {
220
+
221
+ display: flex;
222
+ align-items: center;
223
+ flex: 0 1 auto;
224
+ flex-wrap: nowrap;
225
+ padding-right: 8px;
226
+
227
+ input[type=checkbox] {
228
+ cursor: pointer;
229
+ outline: none;
230
+ box-shadow: none;
231
+ min-height: 33px;
232
+
233
+ margin: 3px 10px 0px 6px;
234
+ }
235
+
236
+ label {
237
+ cursor: pointer;
238
+ }
239
+ }
240
+ }
241
+
242
+ .writeableSpanWrapper[alignment=vertical] {
243
+ display: flex;
244
+ align-items: left;
245
+ flex: 0 1 auto;
246
+ flex-direction: column;
247
+ flex-wrap: nowrap;
248
+ justify-content: left;
249
+ display: flex;
250
+
251
+ .innerSpanContainer[data-selected=false] {
252
+
253
+ display: flex;
254
+ align-items: center;
255
+ flex: 0 1 auto;
256
+ flex-wrap: nowrap;
257
+ padding-right: 8px;
258
+
259
+ input[type=checkbox] {
260
+ cursor: pointer;
261
+ outline: none;
262
+ box-shadow: none;
263
+ min-height: 33px;
264
+
265
+ margin: 3px 10px 0px 6px;
266
+ }
267
+
268
+ label {
269
+ cursor: pointer;
270
+ }
271
+ }
272
+
273
+ .innerSpanContainer[data-selected=true] {
274
+
275
+ display: flex;
276
+ align-items: center;
277
+ flex: 0 1 auto;
278
+ flex-wrap: nowrap;
279
+ padding-right: 8px;
280
+
281
+ input[type=checkbox] {
282
+ cursor: pointer;
283
+ outline: none;
284
+ box-shadow: none;
285
+ min-height: 33px;
286
+
287
+ margin: 3px 10px 0px 6px;
288
+ }
289
+
290
+ label {
291
+ cursor: pointer;
292
+ }
293
+ }
294
+ }
295
+
296
+ }
@@ -0,0 +1,236 @@
1
+ cui-radio-group {
2
+
3
+
4
+ .readOnlySpanWrapper[alignment=horizontal] {
5
+ display: flex;
6
+ align-items: center;
7
+ flex: 0 1 auto;
8
+ flex-direction: row;
9
+ flex-wrap: nowrap;
10
+ justify-content: left;
11
+ display: flex;
12
+
13
+ .innerSpanContainer[data-selected=false] {
14
+ display: flex;
15
+ align-items: center;
16
+ flex: 0 1 auto;
17
+ flex-wrap: nowrap;
18
+ min-height: 33px;
19
+ padding-right: 8px;
20
+
21
+ .readOnlyRadioItem {
22
+ top: 50%;
23
+ left: 50%;
24
+ width: 8px;
25
+ height: 8px;
26
+ background-color: white;
27
+ border-radius: 50%;
28
+ margin: 10px 13px 10px 10px;
29
+ box-shadow: 0px 0px 0px 1.5px white, 0px 0px 0px 2.5px #A1A1A1;
30
+ min-width: 8px;
31
+ }
32
+
33
+ label {
34
+ display: flex;
35
+ align-items: center;
36
+ }
37
+ }
38
+
39
+ .innerSpanContainer[data-selected=true] {
40
+ display: flex;
41
+ align-items: center;
42
+ flex: 0 1 auto;
43
+ flex-wrap: nowrap;
44
+ min-height: 33px;
45
+ padding-right: 8px;
46
+
47
+ .readOnlyRadioItem {
48
+ top: 50%;
49
+ left: 50%;
50
+ width: 8px;
51
+ height: 8px;
52
+ background-color: #333;
53
+ border-radius: 50%;
54
+ margin: 10px 13px 10px 10px;
55
+ box-shadow: 0px 0px 0px 1.5px white, 0px 0px 0px 2.5px #A1A1A1;
56
+ min-width: 8px;
57
+
58
+ }
59
+
60
+ label {
61
+ display: flex;
62
+ align-items: center;
63
+ }
64
+ }
65
+ }
66
+
67
+ .readOnlySpanWrapper[alignment=vertical] {
68
+ display: flex;
69
+ align-items: left;
70
+ flex: 0 1 auto;
71
+ flex-direction: column;
72
+ flex-wrap: nowrap;
73
+ justify-content: left;
74
+ display: flex;
75
+
76
+ .innerSpanContainer[data-selected=false] {
77
+ display: flex;
78
+ align-items: center;
79
+ flex: 0 1 auto;
80
+ flex-wrap: nowrap;
81
+ min-height: 33px;
82
+ padding-right: 8px;
83
+
84
+ .readOnlyRadioItem {
85
+ top: 50%;
86
+ left: 50%;
87
+ width: 8px;
88
+ height: 8px;
89
+ background-color: white;
90
+ border-radius: 50%;
91
+ margin: 10px 13px 10px 10px;
92
+ box-shadow: 0px 0px 0px 1.5px white, 0px 0px 0px 2.5px #A1A1A1;
93
+ min-width: 8px;
94
+ }
95
+
96
+ label {
97
+ display: flex;
98
+ align-items: center;
99
+ }
100
+ }
101
+
102
+ .innerSpanContainer[data-selected=true] {
103
+ display: flex;
104
+ align-items: center;
105
+ flex: 0 1 auto;
106
+ flex-wrap: nowrap;
107
+ min-height: 33px;
108
+ padding-right: 8px;
109
+
110
+ .readOnlyRadioItem {
111
+ top: 50%;
112
+ left: 50%;
113
+ width: 8px;
114
+ height: 8px;
115
+ background-color: #333;
116
+ border-radius: 50%;
117
+ margin: 10px 13px 10px 10px;
118
+ box-shadow: 0px 0px 0px 1.5px white, 0px 0px 0px 2.5px #A1A1A1;
119
+ min-width: 8px;
120
+ }
121
+
122
+ label {
123
+ display: flex;
124
+ align-items: center;
125
+ }
126
+ }
127
+
128
+
129
+
130
+ }
131
+
132
+
133
+ //writeable group
134
+
135
+ .writeableSpanWrapper[alignment=horizontal] {
136
+
137
+ display: flex;
138
+ align-items: center;
139
+ flex: 0 1 auto;
140
+ flex-direction: row;
141
+ flex-wrap: nowrap;
142
+ justify-content: left;
143
+ display: flex;
144
+
145
+ .innerSpanContainer[data-selected=false] {
146
+ display: flex;
147
+ align-items: center;
148
+ flex: 0 1 auto;
149
+ flex-wrap: nowrap;
150
+ padding-right: 8px;
151
+
152
+ input[type=radio] {
153
+ cursor: pointer;
154
+ outline: none;
155
+ box-shadow: none;
156
+
157
+ margin-left: 8px;
158
+ }
159
+
160
+ label {
161
+ cursor: pointer;
162
+ }
163
+ }
164
+
165
+ .innerSpanContainer[data-selected=true] {
166
+ display: flex;
167
+ align-items: center;
168
+ flex: 0 1 auto;
169
+ flex-wrap: nowrap;
170
+ padding-right: 8px;
171
+
172
+ input[type=radio] {
173
+ cursor: pointer;
174
+ outline: none;
175
+ box-shadow: none;
176
+
177
+ margin-left: 8px;
178
+ }
179
+
180
+ label {
181
+ cursor: pointer;
182
+ }
183
+ }
184
+ }
185
+
186
+ .writeableSpanWrapper[alignment=vertical] {
187
+ display: flex;
188
+ align-items: left;
189
+ flex: 0 1 auto;
190
+ flex-direction: column;
191
+ flex-wrap: nowrap;
192
+ justify-content: left;
193
+ display: flex;
194
+
195
+ .innerSpanContainer[data-selected=false] {
196
+ display: flex;
197
+ align-items: center;
198
+ flex: 0 1 auto;
199
+ flex-wrap: nowrap;
200
+ padding-right: 8px;
201
+
202
+ input[type=radio] {
203
+ cursor: pointer;
204
+ outline: none;
205
+ box-shadow: none;
206
+
207
+ margin-left: 8px;
208
+ }
209
+
210
+ label {
211
+ cursor: pointer;
212
+ }
213
+ }
214
+
215
+ .innerSpanContainer[data-selected=true] {
216
+ display: flex;
217
+ align-items: center;
218
+ flex: 0 1 auto;
219
+ flex-wrap: nowrap;
220
+ padding-right: 8px;
221
+
222
+ input[type=radio] {
223
+ cursor: pointer;
224
+ outline: none;
225
+ box-shadow: none;
226
+
227
+ margin-left: 8px;
228
+ }
229
+
230
+ label {
231
+ cursor: pointer;
232
+ }
233
+
234
+ }
235
+ }
236
+ }
@@ -0,0 +1,20 @@
1
+ // @font-face {
2
+ // font-family: 'Open Sans Bold';
3
+ // src: url("../fonts/OpenSans-Bold.woff2") format("woff2");
4
+ // font-weight: bold;
5
+ // font-style: normal;
6
+ // }
7
+
8
+ // @font-face {
9
+ // font-family: 'Open Sans';
10
+ // src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
11
+ // font-weight: normal;
12
+ // font-style: normal;
13
+ // }
14
+
15
+ // @font-face {
16
+ // font-family: 'Open Sans Light';
17
+ // src: url("../fonts/OpenSans-Light.woff2") format("woff2");
18
+ // font-weight: lighter;
19
+ // font-style: normal;
20
+ // }