@candy-kingdom/bonnie-cms 0.2.0 → 0.3.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.
@@ -13,45 +13,51 @@ $adminMobileViewPortCoeff: 0.35;
13
13
 
14
14
  $barWidth: 120px;
15
15
 
16
+ @mixin checkerboard {
17
+ background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
18
+ background-size: 20px 20px;
19
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
20
+ }
21
+
16
22
  ////////////////////////
17
23
  // FONTS
18
24
 
19
25
  // todo: remove
20
26
  @mixin adminBigTextDesktop {
21
- letter-spacing: -0.01em;
22
- font-size: $atom * 12 * $adminDesktopViewPortCoeff;
23
- line-height: $big-text-line-height * $adminDesktopViewPortCoeff;
24
- color: var(--text-color);
27
+ letter-spacing: -0.01em;
28
+ font-size: $atom * 12 * $adminDesktopViewPortCoeff;
29
+ line-height: $big-text-line-height * $adminDesktopViewPortCoeff;
30
+ color: var(--text-color);
25
31
  }
26
32
 
27
33
  @mixin adminBigTextTablet {
28
- font-size: $tabletAtom * 12 * $adminTabletViewPortCoeff;
29
- line-height: $big-text-line-height-tablet * $adminTabletViewPortCoeff;
30
- color: var(--text-color);
34
+ font-size: $tabletAtom * 12 * $adminTabletViewPortCoeff;
35
+ line-height: $big-text-line-height-tablet * $adminTabletViewPortCoeff;
36
+ color: var(--text-color);
31
37
  }
32
38
 
33
39
  @mixin adminBigTextMobile {
34
- font-size: math.div($mobileAtom * 12, 2) * $adminMobileViewPortCoeff;
35
- line-height: $big-text-line-height-mobile * $adminMobileViewPortCoeff;
36
- color: var(--text-color);
40
+ font-size: math.div($mobileAtom * 12, 2) * $adminMobileViewPortCoeff;
41
+ line-height: $big-text-line-height-mobile * $adminMobileViewPortCoeff;
42
+ color: var(--text-color);
37
43
  }
38
44
 
39
45
  @mixin adminSmallTextDesktop {
40
- font-size: $atom * 4 * $adminDesktopViewPortCoeff;
41
- line-height: $small-text-line-height * $adminDesktopViewPortCoeff;
42
- color: var(--text-color);
46
+ font-size: $atom * 4 * $adminDesktopViewPortCoeff;
47
+ line-height: $small-text-line-height * $adminDesktopViewPortCoeff;
48
+ color: var(--text-color);
43
49
  }
44
50
 
45
51
  @mixin adminSmallTextTablet {
46
- font-size: $tabletAtom * 4 * $adminTabletViewPortCoeff;
47
- line-height: $small-text-line-height-tablet * $adminTabletViewPortCoeff;
48
- color: var(--text-color);
52
+ font-size: $tabletAtom * 4 * $adminTabletViewPortCoeff;
53
+ line-height: $small-text-line-height-tablet * $adminTabletViewPortCoeff;
54
+ color: var(--text-color);
49
55
  }
50
56
 
51
57
  @mixin adminSmallTextMobile {
52
- font-size: $mobileAtom * 4 * $adminMobileViewPortCoeff;
53
- line-height: $small-text-line-height-mobile * $adminMobileViewPortCoeff;
54
- color: var(--text-color);
58
+ font-size: $mobileAtom * 4 * $adminMobileViewPortCoeff;
59
+ line-height: $small-text-line-height-mobile * $adminMobileViewPortCoeff;
60
+ color: var(--text-color);
55
61
  }
56
62
 
57
63
 
@@ -59,376 +65,376 @@ $barWidth: 120px;
59
65
  //////////////////////////
60
66
 
61
67
  @mixin adminDesktopGrid {
62
- display: grid;
63
- grid-template-columns: repeat(12, 1fr);
64
- grid-column-gap: $desktopHGap * $adminDesktopViewPortCoeff;
65
- padding-left: $desktopHGap * $adminDesktopViewPortCoeff;
66
- padding-right: $desktopHGap * $adminDesktopViewPortCoeff;
68
+ display: grid;
69
+ grid-template-columns: repeat(12, 1fr);
70
+ grid-column-gap: $desktopHGap * $adminDesktopViewPortCoeff;
71
+ padding-left: $desktopHGap * $adminDesktopViewPortCoeff;
72
+ padding-right: $desktopHGap * $adminDesktopViewPortCoeff;
67
73
  }
68
74
 
69
75
  @mixin adminTabletGrid {
70
- display: grid;
71
- grid-template-columns: repeat(12, 1fr);
72
- grid-column-gap: $tabletHGap * $adminTabletViewPortCoeff;
73
- padding-left: $tabletHGap * $adminTabletViewPortCoeff;
74
- padding-right: $tabletHGap * $adminTabletViewPortCoeff;
76
+ display: grid;
77
+ grid-template-columns: repeat(12, 1fr);
78
+ grid-column-gap: $tabletHGap * $adminTabletViewPortCoeff;
79
+ padding-left: $tabletHGap * $adminTabletViewPortCoeff;
80
+ padding-right: $tabletHGap * $adminTabletViewPortCoeff;
75
81
  }
76
82
 
77
83
  @mixin adminTabletFlex {
78
- display: flex;
79
- flex-direction: column;
80
- padding-right: $tabletHGap * $adminTabletViewPortCoeff;
81
- padding-left: $tabletHGap * $adminTabletViewPortCoeff;
84
+ display: flex;
85
+ flex-direction: column;
86
+ padding-right: $tabletHGap * $adminTabletViewPortCoeff;
87
+ padding-left: $tabletHGap * $adminTabletViewPortCoeff;
82
88
  }
83
89
 
84
90
  @mixin admin-mobile-flex {
85
- display: flex;
86
- flex-direction: column;
87
- padding-right: $mobileAtom * $adminMobileViewPortCoeff;
88
- padding-left: $mobileAtom * $adminMobileViewPortCoeff;
91
+ display: flex;
92
+ flex-direction: column;
93
+ padding-right: $mobileAtom * $adminMobileViewPortCoeff;
94
+ padding-left: $mobileAtom * $adminMobileViewPortCoeff;
89
95
  }
90
96
 
91
97
  @mixin editingStyles() {
92
- background: repeating-linear-gradient(-45deg,
93
- $adminAccentColor,
94
- $adminAccentColor 10px,
95
- $adminNegativeAccentColor 10px,
96
- $adminNegativeAccentColor 20px) fixed bottom;
98
+ background: repeating-linear-gradient(-45deg,
99
+ $adminAccentColor,
100
+ $adminAccentColor 10px,
101
+ $adminNegativeAccentColor 10px,
102
+ $adminNegativeAccentColor 20px) fixed bottom;
97
103
  }
98
104
 
99
105
  @mixin editingStyles2() {
100
- background: repeating-linear-gradient(-45deg,
101
- transparentize($adminAccentColor, 0),
102
- transparentize($adminAccentColor, 0) 10px,
103
- transparentize($adminNegativeAccentColor, 1) 10px,
104
- transparentize($adminNegativeAccentColor, 1) 20px) fixed bottom;
106
+ background: repeating-linear-gradient(-45deg,
107
+ transparentize($adminAccentColor, 0),
108
+ transparentize($adminAccentColor, 0) 10px,
109
+ transparentize($adminNegativeAccentColor, 1) 10px,
110
+ transparentize($adminNegativeAccentColor, 1) 20px) fixed bottom;
105
111
  }
106
112
 
107
113
  @mixin edit-media-overlay {
108
- &:hover::after {
109
- display: flex;
110
- justify-content: center;
111
- align-items: center;
112
- content: '';
113
- position: absolute;
114
- color: silver;
115
- top: 0;
116
- left: 0;
117
- right: 0;
118
- bottom: 0;
119
- font-weight: bold;
120
- font-size: 50pt;
121
- pointer-events: none;
122
- background-color: transparentize($adminAccentColor, 0.3);
123
- }
114
+ &:hover::after {
115
+ display: flex;
116
+ justify-content: center;
117
+ align-items: center;
118
+ content: '';
119
+ position: absolute;
120
+ color: silver;
121
+ top: 0;
122
+ left: 0;
123
+ right: 0;
124
+ bottom: 0;
125
+ font-weight: bold;
126
+ font-size: 50pt;
127
+ pointer-events: none;
128
+ background-color: transparentize($adminAccentColor, 0.3);
129
+ }
124
130
  }
125
131
 
126
132
  @mixin admin-textarea {
127
- display: block;
128
- width: 100%;
129
- line-height: 140%;
130
- padding: 2px 0;
131
- margin: 0;
132
- box-sizing: content-box;
133
- border: none;
134
- resize: none;
135
-
136
- &:focus {
137
- outline: none;
138
- }
133
+ display: block;
134
+ width: 100%;
135
+ line-height: 140%;
136
+ padding: 2px 0;
137
+ margin: 0;
138
+ box-sizing: content-box;
139
+ border: none;
140
+ resize: none;
141
+
142
+ &:focus {
143
+ outline: none;
144
+ }
139
145
 
140
- &[readonly] {
141
- cursor: pointer;
146
+ &[readonly] {
147
+ cursor: pointer;
142
148
 
143
- &::selection {
144
- user-select: none;
145
- }
149
+ &::selection {
150
+ user-select: none;
151
+ }
146
152
 
147
- &:hover {
148
- @include editingStyles2;
149
- color: $adminNegativeAccentColor;
150
- }
153
+ &:hover {
154
+ @include editingStyles2;
155
+ color: $adminNegativeAccentColor;
151
156
  }
157
+ }
152
158
  }
153
159
 
154
160
  @mixin empty-media-placeholder($text) {
155
- background-color: black;
156
-
157
- &::before {
158
- content: $text;
159
- position: absolute;
160
- top: 0;
161
- left: 0;
162
- right: 0;
163
- bottom: 0;
164
- color: white;
165
- display: flex;
166
- align-items: center;
167
- justify-content: center;
168
- pointer-events: none;
169
- }
161
+ background-color: black;
162
+
163
+ &::before {
164
+ content: $text;
165
+ position: absolute;
166
+ top: 0;
167
+ left: 0;
168
+ right: 0;
169
+ bottom: 0;
170
+ color: white;
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ pointer-events: none;
175
+ }
170
176
  }
171
177
 
172
178
  $highlightColor: #333;
173
179
 
174
180
  @mixin admin-controls {
175
- a.btn {
176
- display: block;
177
- //border: 1px solid white;
178
- padding: 3pt;
179
- text-align: center;
180
- user-select: none;
181
-
182
- &:hover {
183
- border-color: $highlightColor;
184
- background-color: $highlightColor;
185
- }
181
+ a.btn {
182
+ display: block;
183
+ //border: 1px solid white;
184
+ padding: 3pt;
185
+ text-align: center;
186
+ user-select: none;
187
+
188
+ &:hover {
189
+ border-color: $highlightColor;
190
+ background-color: $highlightColor;
186
191
  }
192
+ }
187
193
 
188
- select {
189
- color: white;
190
- border-color: white;
191
- background-color: black;
192
- padding: 3pt;
194
+ select {
195
+ color: white;
196
+ border-color: white;
197
+ background-color: black;
198
+ padding: 3pt;
193
199
 
194
- option {
195
- color: white;
196
- }
200
+ option {
201
+ color: white;
197
202
  }
203
+ }
198
204
 
199
- input[type="checkbox"] {
200
- display: inline-block;
201
- margin-right: 6pt;
202
- }
205
+ input[type="checkbox"] {
206
+ display: inline-block;
207
+ margin-right: 6pt;
208
+ }
203
209
 
204
- textarea {
205
- resize: none;
206
- }
210
+ textarea {
211
+ resize: none;
212
+ }
207
213
 
208
- input[type="text"],
209
- textarea {
210
- width: 100%;
211
- display: block;
212
- background-color: black;
213
- color: white;
214
- border: 1px solid white;
215
- padding: 6pt;
216
- resize: none;
217
- box-sizing: border-box;
218
- }
214
+ input[type="text"],
215
+ textarea {
216
+ width: 100%;
217
+ display: block;
218
+ background-color: black;
219
+ color: white;
220
+ border: 1px solid white;
221
+ padding: 6pt;
222
+ resize: none;
223
+ box-sizing: border-box;
224
+ }
219
225
 
220
- input,
221
- textarea,
222
- select {
223
- &:focus {
224
- outline: none;
225
- background-color: $highlightColor;
226
- border-color: $highlightColor;
227
- }
226
+ input,
227
+ textarea,
228
+ select {
229
+ &:focus {
230
+ outline: none;
231
+ background-color: $highlightColor;
232
+ border-color: $highlightColor;
228
233
  }
234
+ }
229
235
  }
230
236
 
231
237
  @mixin super-form {
232
- @include admin-controls;
238
+ @include admin-controls;
233
239
 
234
- .form-field {}
240
+ .form-field {}
235
241
 
236
- .form-field+.form-field {
237
- margin-top: 20pt;
238
- }
242
+ .form-field+.form-field {
243
+ margin-top: 20pt;
244
+ }
239
245
 
240
- .form-section+.form-section {
241
- margin-top: 60pt;
242
- }
246
+ .form-section+.form-section {
247
+ margin-top: 60pt;
248
+ }
243
249
 
244
- label {
245
- display: block;
246
- user-select: none;
250
+ label {
251
+ display: block;
252
+ user-select: none;
247
253
 
248
- .inner {
249
- display: inline-block;
250
- padding-bottom: 4pt;
251
- }
254
+ .inner {
255
+ display: inline-block;
256
+ padding-bottom: 4pt;
252
257
  }
258
+ }
253
259
  }
254
260
 
255
261
 
256
262
  @mixin admin-button {
257
- display: block;
258
- color: white;
259
- background-color: transparent;
260
- box-shadow: none;
261
- border: none;
262
- outline: none;
263
- text-decoration: none;
264
- cursor: pointer;
263
+ display: block;
264
+ color: white;
265
+ background-color: transparent;
266
+ box-shadow: none;
267
+ border: none;
268
+ outline: none;
269
+ text-decoration: none;
270
+ cursor: pointer;
265
271
 
266
- padding: 3pt 10pt;
267
- text-align: center;
268
- user-select: none;
272
+ padding: 3pt 10pt;
273
+ text-align: center;
274
+ user-select: none;
269
275
 
270
276
 
271
- &:hover {
272
- border-color: $highlightColor;
273
- background-color: #333;
274
- }
277
+ &:hover {
278
+ border-color: $highlightColor;
279
+ background-color: #333;
280
+ }
275
281
 
276
- &:disabled {
277
- color: gray;
278
- }
282
+ &:disabled {
283
+ color: gray;
284
+ }
279
285
  }
280
286
 
281
287
  @mixin cancel-button {
282
288
 
283
- &:hover:enabled,
284
- &:focus:enabled {
285
- //color: white;
286
- //background-color: yellow;
287
- }
289
+ &:hover:enabled,
290
+ &:focus:enabled {
291
+ //color: white;
292
+ //background-color: yellow;
293
+ }
288
294
  }
289
295
 
290
296
  @mixin save-button {
291
297
 
292
- &:hover:enabled,
293
- &:focus:enabled {
294
- //color: white;
295
- //background-color: yellow;
296
- }
298
+ &:hover:enabled,
299
+ &:focus:enabled {
300
+ //color: white;
301
+ //background-color: yellow;
302
+ }
297
303
  }
298
304
 
299
305
  @mixin delete-button {
300
- padding: 3pt 10pt;
306
+ padding: 3pt 10pt;
301
307
 
302
- &:hover,
303
- &:focus {
304
- //color: white;
305
- background-color: red;
306
- }
308
+ &:hover,
309
+ &:focus {
310
+ //color: white;
311
+ background-color: red;
312
+ }
307
313
  }
308
314
 
309
315
  @mixin editor {
310
- display: block;
311
- background-color: var(--bg-color);
312
- color: var(--text-color);
316
+ display: block;
317
+ background-color: var(--bg-color);
318
+ color: var(--text-color);
313
319
  }
314
320
 
315
321
  @mixin admin-form-layout {
316
- display: flex;
317
- flex-direction: column;
318
- align-items: center;
319
- justify-content: center;
320
- position: relative;
322
+ display: flex;
323
+ flex-direction: column;
324
+ align-items: center;
325
+ justify-content: center;
326
+ position: relative;
321
327
 
322
- padding-bottom: 40px;
328
+ padding-bottom: 40px;
323
329
 
324
- form {
325
- font-family: $adminFont;
326
- font-size: 14px;
327
- }
330
+ form {
331
+ font-family: $adminFont;
332
+ font-size: 14px;
333
+ }
328
334
 
329
- input,
330
- select,
331
- textarea {
332
- font-family: $adminFont;
333
- font-size: 14px;
334
- }
335
+ input,
336
+ select,
337
+ textarea {
338
+ font-family: $adminFont;
339
+ font-size: 14px;
340
+ }
335
341
 
336
- textarea {
337
- resize: none;
338
- }
342
+ textarea {
343
+ resize: none;
344
+ }
339
345
 
340
- .controls {
341
- position: absolute;
342
- bottom: 15px;
346
+ .controls {
347
+ position: absolute;
348
+ bottom: 15px;
343
349
 
344
- display: flex;
345
- justify-content: center;
346
- align-items: center;
347
- }
350
+ display: flex;
351
+ justify-content: center;
352
+ align-items: center;
353
+ }
348
354
 
349
- button+button {
350
- margin-left: 4px;
351
- }
355
+ button+button {
356
+ margin-left: 4px;
357
+ }
352
358
  }
353
359
 
354
360
  @mixin admin-form-title {
355
- font-family: $adminFont;
356
- font-size: 14px;
361
+ font-family: $adminFont;
362
+ font-size: 14px;
357
363
  }
358
364
 
359
365
  @mixin admin-form {
360
- display: block;
366
+ display: block;
361
367
  }
362
368
 
363
369
  @mixin bone-input {
364
- display: block;
365
- border: none;
366
- background-color:rgba(gray, 0.1);
367
- color: var(--text-color);
370
+ display: block;
371
+ border: none;
372
+ background-color: rgba(gray, 0.1);
373
+ color: var(--text-color);
368
374
 
369
- &:hover {
370
- background-color: lightgray;
371
- cursor: pointer;
372
- }
375
+ &:hover {
376
+ background-color: lightgray;
377
+ cursor: pointer;
378
+ }
373
379
 
374
- &:focus {
375
- outline: none;
376
- color: black;
377
- background-color: $adminAccentColor;
378
- }
380
+ &:focus {
381
+ outline: none;
382
+ color: black;
383
+ background-color: $adminAccentColor;
384
+ }
379
385
  }
380
386
 
381
387
  @mixin adminInput {
382
- display: block;
383
- width: 100%;
384
- padding: 6px;
385
- color: silver;
386
- border: 1px solid silver;
387
- background-color: transparent;
388
- box-sizing: border-box;
388
+ display: block;
389
+ width: 100%;
390
+ padding: 6px;
391
+ color: silver;
392
+ border: 1px solid silver;
393
+ background-color: transparent;
394
+ box-sizing: border-box;
389
395
 
390
- &:hover {
391
- border-color: transparent;
392
- background-color: #333;
393
- cursor: pointer;
394
- }
396
+ &:hover {
397
+ border-color: transparent;
398
+ background-color: #333;
399
+ cursor: pointer;
400
+ }
395
401
 
396
- &:focus {
397
- outline: none;
398
- color: white;
399
- border-color: transparent;
400
- background-color: #555;
401
- }
402
+ &:focus {
403
+ outline: none;
404
+ color: white;
405
+ border-color: transparent;
406
+ background-color: #555;
407
+ }
402
408
  }
403
409
 
404
410
  @mixin form-select-basic {
405
- width: 100%;
406
- margin-bottom: 0.5em;
407
- padding: 6px;
411
+ width: 100%;
412
+ margin-bottom: 0.5em;
413
+ padding: 6px;
408
414
 
409
- font-size: inherit;
410
- box-sizing: border-box;
411
- background-color: transparent;
412
- border: 1px solid silver;
413
- outline: none;
414
- color: silver;
415
+ font-size: inherit;
416
+ box-sizing: border-box;
417
+ background-color: transparent;
418
+ border: 1px solid silver;
419
+ outline: none;
420
+ color: silver;
415
421
 
416
- &:hover,
417
- &:focus {
418
- color: $adminAccentColor;
419
- }
422
+ &:hover,
423
+ &:focus {
424
+ color: $adminAccentColor;
425
+ }
420
426
 
421
- option {
422
- background-color: #444;
427
+ option {
428
+ background-color: #444;
423
429
 
424
- &:checked {
425
- color: $adminAccentColor;
426
- }
430
+ &:checked {
431
+ color: $adminAccentColor;
432
+ }
427
433
 
428
- &:not(checked) {
429
- color: silver;
430
- }
434
+ &:not(checked) {
435
+ color: silver;
431
436
  }
437
+ }
432
438
  }
433
439
 
434
440
  @mixin adminInputContainer {