codecheck

1
/// Padding of an input field, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
2
/// @group form
3
$inputPadding: .5rem .5rem;
4

5
/// Background of an input field
6
/// @group form
7
$inputBg: #ffffff;
8

9
/// Font size of an input field
10
/// @group form
11
$inputTextFontSize: 1rem;
12

13
/// Text color of an input field
14
/// @group form
15
$inputTextColor: $textColor;
16

17
/// Color of an icon inside an input field
18
/// @group form
19
$inputIconColor: $textColor;
20

21
/// Border of an input field
22
/// @group form
23
$inputBorder: 1px solid #ced4da;
24

25
/// Border of an input field in hover state
26
/// @group form
27
$inputHoverBorderColor: $primaryColor;
28

29
/// Border of an input field in focus state
30
/// @group form
31
$inputFocusBorderColor: $primaryColor;
32

33
/// Color of an input field in invalid state
34
/// @group form
35
$inputErrorBorderColor: #ced4da #ced4da #ced4da $errorColor;
36

37
/// Text color of a placeholder
38
/// @group form
39
$inputPlaceholderTextColor: #6c757d;
40

41
/// Background of a filled input
42
/// @group form
43
$inputFilledBg:#f8f9fa;
44

45
/// Background of a filled input in hover state
46
/// @group form
47
$inputFilledHoverBg:#f8f9fa;
48

49
/// Background of a filled input in focus state
50
/// @group form
51
$inputFilledFocusBg:#f8f9fa;
52

53
/// Backgroud color of an input group addon
54
/// @group form
55
$inputGroupBg: #e9ecef;
56

57
/// Text color of an input group addon
58
/// @group form
59
$inputGroupTextColor: $textSecondaryColor;
60

61
/// Minimum width of an input group addon
62
/// @group form
63
$inputGroupAddOnMinWidth: 2.357rem;
64

65
/// Background of an input list such as dropdown, listbox, multiselect
66
/// @group form
67
$inputListBg: #ffffff;
68

69
/// Text color of an input list
70
/// @group form
71
$inputListTextColor: $textColor;
72

73
/// Border of an input list
74
/// @group form
75
$inputListBorder: $inputBorder;
76

77
/// Padding of an input list
78
/// @group form
79
$inputListPadding: .5rem 0;
80

81
/// Padding for an individual itrem of an input list
82
/// @group form
83
$inputListItemPadding: .5rem 1rem;
84

85
/// Background for an individual itrem of an input list
86
/// @group form
87
$inputListItemBg: transparent;
88

89
/// Text color for an individual itrem of an input list
90
/// @group form
91
$inputListItemTextColor: $textColor;
92

93
/// Hover state background for an individual itrem of an input list
94
/// @group form
95
$inputListItemHoverBg: #e9ecef;
96

97
/// Hover state text color for an individual itrem of an input list
98
/// @group form
99
$inputListItemTextHoverColor: $textColor;
100

101
/// Focus state background for an individual itrem of an input list
102
/// @group form
103
$inputListItemFocusBg: #f8f9fa;
104

105
/// Focus state text color for an individual itrem of an input list
106
/// @group form
107
$inputListItemTextFocusColor: $textColor;
108

109
/// Border for an individual itrem of an input list
110
/// @group form
111
$inputListItemBorder: 0 none;
112

113
/// Border radius for an individual itrem of an input list
114
/// @group form
115
$inputListItemBorderRadius: 0;
116

117
/// Margin for an individual itrem of an input list
118
/// @group form
119
$inputListItemMargin: 0;
120

121
/// Box shadow for an individual itrem of an input list in focused state
122
/// @group form
123
$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;
124

125
/// Padding for a header of an input list
126
/// @group form
127
$inputListHeaderPadding: .5rem 1rem;
128

129
/// Margin for a header of an input list
130
/// @group form
131
$inputListHeaderMargin: 0;
132

133
/// Background for a header of an input list
134
/// @group form
135
$inputListHeaderBg: #f8f9fa;
136

137
/// Text color for a header of an input list
138
/// @group form
139
$inputListHeaderTextColor: $textColor;
140

141
/// Border for a header of an input list
142
/// @group form
143
$inputListHeaderBorder: 0 none;
144

145

146
/// Background for an overlay of an input such as autocomplete or dropdown
147
/// @group form
148
$inputOverlayBg:$inputListBg;
149

150
/// Background for an overlay header of an input such as autocomplete or dropdown
151
/// @group form
152
$inputOverlayHeaderBg:$inputListHeaderBg;
153

154
/// Border for an overlay of an input such as autocomplete or dropdown
155
/// @group form
156
$inputOverlayBorder: 0 none;
157

158
/// Shadow for an overlay of an input such as autocomplete or dropdown
159
/// @group form
160
$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
161

162
/// Width of a checkbox
163
/// @group form
164
$checkboxWidth: 20px;
165

166
/// Height of a checkbox
167
/// @group form
168
$checkboxHeight: 20px;
169

170
/// Border of a checkbox
171
/// @group form
172
$checkboxBorder: 2px solid #ced4da;
173

174
/// Size of a checkbox icon
175
/// @group form
176
$checkboxIconFontSize: 14px;
177

178
/// Border color of a selected checkbox
179
/// @group form
180
$checkboxActiveBorderColor: $primaryColor;
181

182
/// Background of a selected checkbox
183
/// @group form
184
$checkboxActiveBg: $primaryColor;
185

186
/// Icon color of a selected checkbox
187
/// @group form
188
$checkboxIconActiveColor: $primaryTextColor;
189

190
/// Background of a selected checkbox in hover state
191
/// @group form
192
$checkboxActiveHoverBg: $primaryDarkerColor;
193

194
/// Icon color of a selected checkbox in hover state
195
/// @group form
196
$checkboxIconActiveHoverColor: $primaryTextColor;
197

198
/// Border color of a selected checkbox in hover state
199
/// @group form
200
$checkboxActiveHoverBorderColor: $primaryDarkerColor;
201

202
/// Width of a radiobutton
203
/// @group form
204
$radiobuttonWidth: 20px;
205

206
/// Height of a radiobutton
207
/// @group form
208
$radiobuttonHeight: 20px;
209

210
/// Border of a radiobutton
211
/// @group form
212
$radiobuttonBorder: 2px solid #ced4da;
213

214
/// Font size of a radiobutton icon
215
/// @group form
216
$radiobuttonIconSize: 12px;
217

218
/// Border color of a selected radiobutton
219
/// @group form
220
$radiobuttonActiveBorderColor: $primaryColor;
221

222
/// Background of a selected radiobutton
223
/// @group form
224
$radiobuttonActiveBg: $primaryColor;
225

226
/// Icon color of a selected radiobutton
227
/// @group form
228
$radiobuttonIconActiveColor: $primaryTextColor;
229

230
/// Background of a selected radiobutton in hover state
231
/// @group form
232
$radiobuttonActiveHoverBg: $primaryDarkerColor;
233

234
/// Icon color of a selected radiobutton in hover state
235
/// @group form
236
$radiobuttonIconActiveHoverColor: $primaryTextColor;
237

238
/// Border color of a selected radiobutton in hover state
239
/// @group form
240
$radiobuttonActiveHoverBorderColor: $primaryDarkerColor;
241

242
/// Width of a color picker preview element
243
/// @group form
244
$colorPickerPreviewWidth: 2rem;
245

246
/// Height of a color picker preview element
247
/// @group form
248
$colorPickerPreviewHeight: 2rem;
249

250
/// Background of a color picker
251
/// @group form
252
$colorPickerBg: #323232;
253

254
/// Border color of a color picker
255
/// @group form
256
$colorPickerBorder:1px solid  #191919;
257

258
/// Handle color of a color picker
259
/// @group form
260
$colorPickerHandleColor: #ffffff;
261

262
/// Font size of a rating icon
263
/// @group form
264
$ratingIconFontSize: 1.143rem;
265

266
/// Icon color for the cancel icon of a rating
267
/// @group form
268
$ratingCancelIconColor: #e74c3c;
269

270
/// Hover icon color for the cancel icon of a rating
271
/// @group form
272
$ratingCancelIconHoverColor: #c0392b;
273

274
/// Icon color for the star icon of a rating in unselected state
275
/// @group form
276
$ratingStarIconOffColor: $textColor;
277

278
/// Icon color for the star icon of a rating in selected state
279
/// @group form
280
$ratingStarIconOnColor: $primaryColor;
281

282
/// Icon color for the star icon of a rating in hover state
283
/// @group form
284
$ratingStarIconHoverColor: $primaryColor;
285

286
/// Background of a slider
287
/// @group form
288
$sliderBg: #dee2e6;
289

290
/// Border of a slider
291
/// @group form
292
$sliderBorder: 0 none;
293

294
/// Height of a horizontal slider
295
/// @group form
296
$sliderHorizontalHeight: .286rem;
297

298
/// Width of a vertical slider
299
/// @group form
300
$sliderVerticalWidth: 0.286rem;
301

302
/// Width of a slider handle
303
/// @group form
304
$sliderHandleWidth: 1.143rem;
305

306
/// Height of a slider handle
307
/// @group form
308
$sliderHandleHeight: 1.143rem;
309

310
/// Background of a slider handle
311
/// @group form
312
$sliderHandleBg: #ffffff;
313

314
/// Border of a slider handle
315
/// @group form
316
$sliderHandleBorder: 2px solid $primaryColor;
317

318
/// Border radius of a slider handle
319
/// @group form
320
$sliderHandleBorderRadius: 50%;
321

322
/// Border of a slider handle in hover state
323
/// @group form
324
$sliderHandleHoverBorderColor: $primaryColor;
325

326
/// Background of a slider handle in hover state
327
/// @group form
328
$sliderHandleHoverBg: $primaryColor;
329

330
/// Background color of a range slider
331
/// @group form
332
$sliderRangeBg: $primaryColor;
333

334
/// Margin of a calendar table
335
/// @group form
336
$calendarTableMargin: .5rem 0;
337

338
/// Margin of a calendar
339
/// @group form
340
$calendarPadding: .5rem;
341

342
/// Background of a calendar
343
/// @group form
344
$calendarBg:#ffffff;
345

346
/// Background of an inlime calendar
347
/// @group form
348
$calendarInlineBg:$calendarBg;
349

350
/// Text color of a calendar
351
/// @group form
352
$calendarTextColor: $textColor;
353

354
/// Border of an inline calendar
355
/// @group form
356
$calendarBorder: $inputListBorder;
357

358
/// Border of an overlay calendar
359
/// @group form
360
$calendarOverlayBorder: $inputOverlayBorder;
361

362
/// Padding of a calendar header
363
/// @group form
364
$calendarHeaderPadding: .5rem;
365

366
/// Background of a calendar header
367
/// @group form
368
$calendarHeaderBg: #ffffff;
369

370
/// Background of an inline calendar header
371
/// @group form
372
$calendarInlineHeaderBg:$calendarBg;
373

374
/// Border of a calendar header
375
/// @group form
376
$calendarHeaderBorder: 1px solid #dee2e6;
377

378
/// Text color of a calendar header
379
/// @group form
380
$calendarHeaderTextColor: $textColor;
381

382
/// Font weight of a calendar header
383
/// @group form
384
$calendarHeaderFontWeight: 600;
385

386
/// Padding of a calendar weekday cell
387
/// @group form
388
$calendarHeaderCellPadding: .5rem;
389

390
/// Text color of current month and year text in hover state
391
/// @group form
392
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
393

394
/// Padding of a calendar date cell
395
/// @group form
396
$calendarCellDatePadding: .5rem;
397

398
/// Width of a calendar date cell
399
/// @group form
400
$calendarCellDateWidth: 2.5rem;
401

402
/// Height of a calendar date cell
403
/// @group form
404
$calendarCellDateHeight: 2.5rem;
405

406
/// Border radius of a calendar date cell
407
/// @group form
408
$calendarCellDateBorderRadius: 50%;
409

410
/// Border of a calendar date cell
411
/// @group form
412
$calendarCellDateBorder:1px solid transparent;
413

414
/// Background of a calendar date cell in hover state
415
/// @group form
416
$calendarCellDateHoverBg: #e9ecef;
417

418
/// Background of a calendar date cell indicating today
419
/// @group form
420
$calendarCellDateTodayBg: #ced4da;
421

422
/// Border color of a calendar date cell indicating today
423
/// @group form
424
$calendarCellDateTodayBorderColor: transparent;
425

426
/// Text color of a calendar date cell indicating today
427
/// @group form
428
$calendarCellDateTodayTextColor: $textColor;
429

430
/// Padding of the calendar button bar
431
/// @group form
432
$calendarButtonBarPadding: 1rem 0;
433

434
/// Padding of a time picker container of a calendar
435
/// @group form
436
$calendarTimePickerPadding: .5rem;
437

438
/// Padding of a time picker element of a calendar
439
/// @group form
440
$calendarTimePickerElementPadding: 0 .429rem;
441

442
/// Font size of a time picker element of a calendar
443
/// @group form
444
$calendarTimePickerTimeFontSize: 1.286rem;
445

446
/// Breakpoint of calendar to apply styles for small screens like phones
447
/// @group form
448
$calendarBreakpoint: 769px;
449

450
/// Padding of a calendar date cell on small screens like phones
451
/// @group form
452
$calendarCellDatePaddingSM: 0;
453

454
/// Width of an inputswitch
455
/// @group form
456
$inputSwitchWidth: 3rem;
457

458
/// Height of an inputswitch
459
/// @group form
460
$inputSwitchHeight: 1.75rem;
461

462
/// Border radius of an inputswitch
463
/// @group form
464
$inputSwitchBorderRadius: 30px;
465

466
/// Width of an inputswitch handle
467
/// @group form
468
$inputSwitchHandleWidth: 1.250rem;
469

470
/// Height of an inputswitch handle
471
/// @group form
472
$inputSwitchHandleHeight: 1.250rem;
473

474
/// Border radius of an inputswitch handle
475
/// @group form
476
$inputSwitchHandleBorderRadius: 50%;
477

478
/// Padding of an inputswitch slider
479
/// @group form
480
$inputSwitchSliderPadding: .25rem;
481

482
/// Background color of an inputswitch slider when unselected
483
/// @group form
484
$inputSwitchSliderOffBg: #ced4da;
485

486
/// Background color of an inputswitch handle when unselected
487
/// @group form
488
$inputSwitchHandleOffBg: #ffffff;
489

490
/// Hover background color of an inputswitch slider when unselected
491
/// @group form
492
$inputSwitchSliderOffHoverBg: #c3cad2;
493

494
/// Background color of an inputswitch slider when selected
495
/// @group form
496
$inputSwitchSliderOnBg: $primaryColor;
497

498
/// Hover background color of an inputswitch slider when selected
499
/// @group form
500
$inputSwitchSliderOnHoverBg: $primaryDarkColor;
501

502
/// Background color of an inputswitch handle when selected
503
/// @group form
504
$inputSwitchHandleOnBg: #ffffff;
505

506
/// Height for the progress bar of a fileupload
507
/// @group form
508
$fileUploadProgressBarHeight: .25rem;
509

510
/// Padding of the fileupload content section
511
/// @group form
512
$fileUploadContentPadding: 2rem 1rem;
513

514
///
515
/// @group form
516
$fileUploadContentHoverBorder: 1px dashed #e9ecef !default;
517

518
/// Border of the fileupload content item section
519
/// @group form
520
$fileUploadFileBorder: 1px solid #c3cad2;;
521

522
/// Padding of the fileupload content item section
523
/// @group form
524
$fileUploadFilePadding: 1rem;
525

526
/// Background of an editor toolbar
527
/// @group form
528
$editorToolbarBg:#f8f9fa;
529

530
/// Border of an editor toolbar
531
/// @group form
532
$editorToolbarBorder:1px solid #dee2e6;
533

534
/// Padding of an editor toolbar
535
/// @group form
536
$editorToolbarPadding:1rem;
537

538
/// Icon color of an editor toolbar
539
/// @group form
540
$editorToolbarIconColor:#6c757d;
541

542
/// Icon color of an editor toolbar in hover state
543
/// @group form
544
$editorToolbarIconHoverColor:#495057;
545

546
/// Icon color of an editor toolbar in active state
547
/// @group form
548
$editorIconActiveColor:$primaryColor;
549

550
/// Border of an editor content
551
/// @group form
552
$editorContentBorder: 1px solid #dee2e6;
553

554
/// Background of an editor content
555
/// @group form
556
$editorContentBg:#ffffff;
557

558
/// Background of a password meter
559
/// @group form
560
$passwordMeterBg:#dee2e6;
561

562
/// Background of a week password
563
/// @group form
564
$passwordWeakBg:#E53935;
565

566
/// Background of a medium password
567
/// @group form
568
$passwordMediumBg:#FFB300;
569

570
/// Background of a strong password
571
/// @group form
572
$passwordStrongBg:#43A047;