@adcops/autocore-react 3.3.9 → 3.3.10

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 (215) hide show
  1. package/LICENSE +58 -58
  2. package/additional-docs/AutoCoreTagContext.md +441 -441
  3. package/additional-docs/ButtonApiSpecs.md +48 -48
  4. package/additional-docs/GlobalEventEmitter.md +243 -243
  5. package/additional-docs/general_recommendations.md +22 -22
  6. package/additional-docs/react_performance_notes.md +94 -94
  7. package/dist/assets/svg/blockly_logo.svg +82 -82
  8. package/dist/assets/svg/distance.svg +40 -40
  9. package/dist/assets/svg/python_logo.svg +246 -246
  10. package/dist/assets/svg/rotation_ccw.svg +50 -50
  11. package/dist/assets/svg/rotation_ccw_a.svg +57 -57
  12. package/dist/assets/svg/rotation_ccw_b.svg +57 -57
  13. package/dist/assets/svg/rotation_ccw_c.svg +57 -57
  14. package/dist/assets/svg/rotation_cw.svg +49 -49
  15. package/dist/assets/svg/rotation_cw_a.svg +30 -30
  16. package/dist/assets/svg/rotation_cw_b.svg +30 -30
  17. package/dist/assets/svg/rotation_cw_c.svg +30 -30
  18. package/dist/assets/svg/speed.svg +39 -39
  19. package/dist/components/BlocklyEditor.css +93 -93
  20. package/dist/components/JogPanel.css +41 -41
  21. package/dist/components/ProgressBarWithValue.css +27 -27
  22. package/dist/components/ValueIndicator.css +31 -31
  23. package/dist/components/osk.css +123 -123
  24. package/dist/core/AutoCoreTagContext.d.ts.map +1 -1
  25. package/dist/core/AutoCoreTagContext.js +1 -1
  26. package/dist/hub/HubBase.d.ts +3 -3
  27. package/dist/hub/HubBase.d.ts.map +1 -1
  28. package/dist/hub/HubBase.js +1 -1
  29. package/package.json +104 -104
  30. package/readme.md +343 -343
  31. package/src/assets/BlocklyLogo.tsx +27 -27
  32. package/src/assets/Distance.tsx +18 -18
  33. package/src/assets/JogLong.tsx +13 -13
  34. package/src/assets/JogMedium.tsx +13 -13
  35. package/src/assets/JogShort.tsx +13 -13
  36. package/src/assets/PythonLogo.tsx +83 -83
  37. package/src/assets/Rotation3D.tsx +13 -13
  38. package/src/assets/RotationCcw.tsx +33 -33
  39. package/src/assets/RotationCcwA.tsx +45 -45
  40. package/src/assets/RotationCcwB.tsx +45 -45
  41. package/src/assets/RotationCcwC.tsx +45 -45
  42. package/src/assets/RotationCw.tsx +31 -31
  43. package/src/assets/RotationCwA.tsx +42 -42
  44. package/src/assets/RotationCwB.tsx +42 -42
  45. package/src/assets/RotationCwC.tsx +42 -42
  46. package/src/assets/Run.tsx +13 -13
  47. package/src/assets/Speed.tsx +18 -18
  48. package/src/assets/SpeedFast.tsx +13 -13
  49. package/src/assets/SpeedMedium.tsx +13 -13
  50. package/src/assets/SpeedNone.tsx +13 -13
  51. package/src/assets/SpeedSlow.tsx +13 -13
  52. package/src/assets/Walk.tsx +13 -13
  53. package/src/assets/index.ts +22 -22
  54. package/src/assets/svg/blockly_logo.svg +82 -82
  55. package/src/assets/svg/distance.svg +40 -40
  56. package/src/assets/svg/python_logo.svg +246 -246
  57. package/src/assets/svg/rotation_ccw.svg +50 -50
  58. package/src/assets/svg/rotation_ccw_a.svg +57 -57
  59. package/src/assets/svg/rotation_ccw_b.svg +57 -57
  60. package/src/assets/svg/rotation_ccw_c.svg +57 -57
  61. package/src/assets/svg/rotation_cw.svg +49 -49
  62. package/src/assets/svg/rotation_cw_a.svg +30 -30
  63. package/src/assets/svg/rotation_cw_b.svg +30 -30
  64. package/src/assets/svg/rotation_cw_c.svg +30 -30
  65. package/src/assets/svg/speed.svg +39 -39
  66. package/src/components/AutoCoreDevPanel.tsx +414 -414
  67. package/src/components/BlocklyEditor.css +93 -93
  68. package/src/components/BlocklyEditor.tsx +609 -609
  69. package/src/components/CodeEditor.tsx +155 -155
  70. package/src/components/FileList.tsx +390 -390
  71. package/src/components/FileSelect.tsx +128 -128
  72. package/src/components/FitText.tsx +35 -35
  73. package/src/components/Indicator.tsx +188 -188
  74. package/src/components/IndicatorButton.tsx +214 -214
  75. package/src/components/IndicatorRect.tsx +172 -172
  76. package/src/components/JogPanel.css +41 -41
  77. package/src/components/JogPanel.tsx +461 -461
  78. package/src/components/Lamp.tsx +243 -243
  79. package/src/components/Osk.tsx +192 -192
  80. package/src/components/OskDialog.tsx +164 -164
  81. package/src/components/ProgressBarWithValue.css +27 -27
  82. package/src/components/ProgressBarWithValue.tsx +48 -48
  83. package/src/components/TextInput.tsx +195 -195
  84. package/src/components/ToggleGroup.tsx +322 -322
  85. package/src/components/ValueDisplay.tsx +236 -236
  86. package/src/components/ValueIndicator.css +31 -31
  87. package/src/components/ValueIndicator.tsx +135 -135
  88. package/src/components/ValueInput.tsx +368 -368
  89. package/src/components/osk.css +123 -123
  90. package/src/core/ActionMode.ts +19 -19
  91. package/src/core/AutoCoreTagContext.tsx +625 -614
  92. package/src/core/AutoCoreTagTypes.ts +334 -334
  93. package/src/core/CoreStreamTypes.ts +512 -512
  94. package/src/core/EventEmitterContext.tsx +434 -434
  95. package/src/core/IndicatorButtonState.ts +34 -34
  96. package/src/core/IndicatorColor.ts +35 -35
  97. package/src/core/MaskPatterns.ts +87 -87
  98. package/src/core/NumerableTypes.ts +80 -80
  99. package/src/core/PositionContext.ts +59 -59
  100. package/src/core/UniqueId.ts +41 -41
  101. package/src/core/ValueSimulator.ts +166 -166
  102. package/src/core/hoc.tsx +65 -65
  103. package/src/hooks/adsHooks.tsx +287 -287
  104. package/src/hooks/commandHooks.tsx +300 -300
  105. package/src/hooks/index.ts +12 -12
  106. package/src/hooks/useAutoCoreTag.ts +103 -103
  107. package/src/hooks/useScaledValue.tsx +99 -99
  108. package/src/hub/CommandMessage.ts +89 -89
  109. package/src/hub/DebugPanel.ts +307 -307
  110. package/src/hub/HubBase.ts +249 -236
  111. package/src/hub/HubSimulate.ts +124 -124
  112. package/src/hub/HubTauri.ts +140 -140
  113. package/src/hub/HubWebSocket.ts +250 -250
  114. package/src/hub/debug.ts +211 -211
  115. package/src/hub/index.ts +81 -81
  116. package/src/themes/adc-dark/_extensions.scss +166 -166
  117. package/src/themes/adc-dark/_variables.scss +913 -913
  118. package/src/themes/adc-dark/blue/_fonts.scss +23 -23
  119. package/src/themes/adc-dark/blue/adc_theme.scss +31 -31
  120. package/src/themes/adc-dark/blue/theme.scss +14 -14
  121. package/src/themes/theme-base/_colors.scss +17 -17
  122. package/src/themes/theme-base/_common.scss +74 -74
  123. package/src/themes/theme-base/_components.scss +111 -111
  124. package/src/themes/theme-base/_mixins.scss +243 -243
  125. package/src/themes/theme-base/components/button/_button.scss +644 -644
  126. package/src/themes/theme-base/components/button/_speeddial.scss +91 -91
  127. package/src/themes/theme-base/components/button/_splitbutton.scss +358 -358
  128. package/src/themes/theme-base/components/data/_carousel.scss +39 -39
  129. package/src/themes/theme-base/components/data/_datascroller.scss +47 -47
  130. package/src/themes/theme-base/components/data/_datatable.scss +388 -388
  131. package/src/themes/theme-base/components/data/_dataview.scss +47 -47
  132. package/src/themes/theme-base/components/data/_filter.scss +137 -137
  133. package/src/themes/theme-base/components/data/_orderlist.scss +86 -86
  134. package/src/themes/theme-base/components/data/_organizationchart.scss +50 -50
  135. package/src/themes/theme-base/components/data/_paginator.scss +91 -91
  136. package/src/themes/theme-base/components/data/_picklist.scss +73 -73
  137. package/src/themes/theme-base/components/data/_timeline.scss +38 -38
  138. package/src/themes/theme-base/components/data/_tree.scss +184 -184
  139. package/src/themes/theme-base/components/data/_treetable.scss +431 -431
  140. package/src/themes/theme-base/components/file/_fileupload.scss +41 -41
  141. package/src/themes/theme-base/components/input/_autocomplete.scss +94 -94
  142. package/src/themes/theme-base/components/input/_calendar.scss +251 -251
  143. package/src/themes/theme-base/components/input/_cascadeselect.scss +107 -107
  144. package/src/themes/theme-base/components/input/_checkbox.scss +181 -181
  145. package/src/themes/theme-base/components/input/_chips.scss +102 -102
  146. package/src/themes/theme-base/components/input/_colorpicker.scss +17 -17
  147. package/src/themes/theme-base/components/input/_dropdown.scss +252 -252
  148. package/src/themes/theme-base/components/input/_editor.scss +122 -122
  149. package/src/themes/theme-base/components/input/_iconfield.scss +9 -9
  150. package/src/themes/theme-base/components/input/_inputgroup.scss +74 -74
  151. package/src/themes/theme-base/components/input/_inputicon.scss +14 -14
  152. package/src/themes/theme-base/components/input/_inputnumber.scss +4 -4
  153. package/src/themes/theme-base/components/input/_inputotp.scss +10 -10
  154. package/src/themes/theme-base/components/input/_inputswitch.scss +99 -99
  155. package/src/themes/theme-base/components/input/_inputtext.scss +101 -101
  156. package/src/themes/theme-base/components/input/_listbox.scss +138 -138
  157. package/src/themes/theme-base/components/input/_mention.scss +30 -30
  158. package/src/themes/theme-base/components/input/_multiselect.scss +278 -278
  159. package/src/themes/theme-base/components/input/_password.scss +32 -32
  160. package/src/themes/theme-base/components/input/_radiobutton.scss +169 -169
  161. package/src/themes/theme-base/components/input/_rating.scss +80 -80
  162. package/src/themes/theme-base/components/input/_selectbutton.scss +49 -49
  163. package/src/themes/theme-base/components/input/_slider.scss +49 -49
  164. package/src/themes/theme-base/components/input/_togglebutton.scss +99 -99
  165. package/src/themes/theme-base/components/input/_treeselect.scss +151 -151
  166. package/src/themes/theme-base/components/input/_tristatecheckbox.scss +46 -46
  167. package/src/themes/theme-base/components/menu/_breadcrumb.scss +42 -42
  168. package/src/themes/theme-base/components/menu/_contextmenu.scss +39 -39
  169. package/src/themes/theme-base/components/menu/_dock.scss +109 -109
  170. package/src/themes/theme-base/components/menu/_megamenu.scss +141 -141
  171. package/src/themes/theme-base/components/menu/_menu.scss +33 -33
  172. package/src/themes/theme-base/components/menu/_menubar.scss +216 -216
  173. package/src/themes/theme-base/components/menu/_panelmenu.scss +153 -153
  174. package/src/themes/theme-base/components/menu/_slidemenu.scss +60 -60
  175. package/src/themes/theme-base/components/menu/_steps.scss +57 -57
  176. package/src/themes/theme-base/components/menu/_tabmenu.scss +50 -50
  177. package/src/themes/theme-base/components/menu/_tieredmenu.scss +43 -43
  178. package/src/themes/theme-base/components/messages/_inlinemessage.scss +69 -69
  179. package/src/themes/theme-base/components/messages/_message.scss +107 -107
  180. package/src/themes/theme-base/components/messages/_toast.scss +100 -100
  181. package/src/themes/theme-base/components/misc/_avatar.scss +33 -33
  182. package/src/themes/theme-base/components/misc/_badge.scss +76 -76
  183. package/src/themes/theme-base/components/misc/_chip.scss +38 -38
  184. package/src/themes/theme-base/components/misc/_inplace.scss +17 -17
  185. package/src/themes/theme-base/components/misc/_metergroup.scss +80 -80
  186. package/src/themes/theme-base/components/misc/_progressbar.scss +17 -17
  187. package/src/themes/theme-base/components/misc/_scrolltop.scss +24 -24
  188. package/src/themes/theme-base/components/misc/_skeleton.scss +7 -7
  189. package/src/themes/theme-base/components/misc/_tag.scss +39 -39
  190. package/src/themes/theme-base/components/misc/_terminal.scss +12 -12
  191. package/src/themes/theme-base/components/multimedia/_galleria.scss +153 -153
  192. package/src/themes/theme-base/components/multimedia/_image.scss +53 -53
  193. package/src/themes/theme-base/components/overlay/_confirmpopup.scss +72 -72
  194. package/src/themes/theme-base/components/overlay/_dialog.scss +78 -78
  195. package/src/themes/theme-base/components/overlay/_overlaypanel.scss +64 -64
  196. package/src/themes/theme-base/components/overlay/_sidebar.scss +23 -23
  197. package/src/themes/theme-base/components/overlay/_tooltip.scss +33 -33
  198. package/src/themes/theme-base/components/panel/_accordion.scss +118 -118
  199. package/src/themes/theme-base/components/panel/_card.scss +30 -30
  200. package/src/themes/theme-base/components/panel/_divider.scss +30 -30
  201. package/src/themes/theme-base/components/panel/_fieldset.scss +47 -47
  202. package/src/themes/theme-base/components/panel/_panel.scss +47 -47
  203. package/src/themes/theme-base/components/panel/_scrollpanel.scss +10 -10
  204. package/src/themes/theme-base/components/panel/_splitter.scss +23 -23
  205. package/src/themes/theme-base/components/panel/_stepper.scss +136 -136
  206. package/src/themes/theme-base/components/panel/_tabview.scss +147 -147
  207. package/src/themes/theme-base/components/panel/_toolbar.scss +11 -11
  208. package/terser.config.cjs +25 -25
  209. package/todo.md +18 -18
  210. package/tools/build-themes.cjs +65 -65
  211. package/tools/copy-distribution-files.cjs +77 -77
  212. package/tools/minify.cjs +55 -55
  213. package/tsconfig.json +48 -48
  214. package/typedoc.json +12 -12
  215. package/.claude/settings.local.json +0 -7
@@ -1,107 +1,107 @@
1
- .p-cascadeselect {
2
- background: $inputBg;
3
- border: $inputBorder;
4
- transition: $formElementTransition;
5
- border-radius: $borderRadius;
6
- outline-color: transparent;
7
-
8
- &:not(.p-disabled):hover {
9
- border-color: $inputHoverBorderColor;
10
- }
11
-
12
- &:not(.p-disabled).p-focus {
13
- @include focused-input();
14
- }
15
-
16
- &.p-variant-filled {
17
- background-color: $inputFilledBg;
18
-
19
- &:enabled:hover {
20
- background-color: $inputFilledHoverBg;
21
- }
22
-
23
- &:enabled:focus {
24
- background-color: $inputFilledFocusBg;
25
- }
26
- }
27
-
28
- .p-cascadeselect-label {
29
- background: transparent;
30
- border: 0 none;
31
- padding: $inputPadding;
32
-
33
- &.p-placeholder {
34
- color: $inputPlaceholderTextColor;
35
- }
36
-
37
- &:enabled:focus {
38
- outline: 0 none;
39
- box-shadow: none;
40
- }
41
- }
42
-
43
- .p-cascadeselect-trigger {
44
- background: transparent;
45
- color: $inputIconColor;
46
- width: $inputGroupAddOnMinWidth;
47
- border-top-right-radius: $borderRadius;
48
- border-bottom-right-radius: $borderRadius;
49
- }
50
-
51
- &.p-invalid.p-component {
52
- @include invalid-input();
53
- }
54
- }
55
-
56
- .p-cascadeselect-panel {
57
- background: $inputOverlayBg;
58
- color: $inputListTextColor;
59
- border: $inputOverlayBorder;
60
- border-radius: $borderRadius;
61
- box-shadow: $inputOverlayShadow;
62
-
63
- .p-cascadeselect-items {
64
- padding: $inputListPadding;
65
-
66
- .p-cascadeselect-item {
67
- margin: $inputListItemMargin;
68
- border: $inputListItemBorder;
69
- color: $inputListItemTextColor;
70
- background: $inputListItemBg;
71
- transition: $listItemTransition;
72
- border-radius: $inputListItemBorderRadius;
73
-
74
- &:first-child {
75
- margin-top: 0;
76
- }
77
-
78
- &:last-child {
79
- margin-bottom: 0;
80
- }
81
-
82
- &.p-highlight {
83
- color: $highlightTextColor;
84
- background: $highlightBg;
85
-
86
- &.p-focus {
87
- background: $highlightFocusBg;
88
- }
89
- }
90
-
91
- &:not(.p-highlight):not(.p-disabled) {
92
- &.p-focus {
93
- color: $inputListItemTextHoverColor;
94
- background: $inputListItemHoverBg;
95
- }
96
- }
97
-
98
- .p-cascadeselect-item-content {
99
- padding: $inputListItemPadding;
100
- }
101
-
102
- .p-cascadeselect-group-icon {
103
- font-size: $menuitemSubmenuIconFontSize;
104
- }
105
- }
106
- }
107
- }
1
+ .p-cascadeselect {
2
+ background: $inputBg;
3
+ border: $inputBorder;
4
+ transition: $formElementTransition;
5
+ border-radius: $borderRadius;
6
+ outline-color: transparent;
7
+
8
+ &:not(.p-disabled):hover {
9
+ border-color: $inputHoverBorderColor;
10
+ }
11
+
12
+ &:not(.p-disabled).p-focus {
13
+ @include focused-input();
14
+ }
15
+
16
+ &.p-variant-filled {
17
+ background-color: $inputFilledBg;
18
+
19
+ &:enabled:hover {
20
+ background-color: $inputFilledHoverBg;
21
+ }
22
+
23
+ &:enabled:focus {
24
+ background-color: $inputFilledFocusBg;
25
+ }
26
+ }
27
+
28
+ .p-cascadeselect-label {
29
+ background: transparent;
30
+ border: 0 none;
31
+ padding: $inputPadding;
32
+
33
+ &.p-placeholder {
34
+ color: $inputPlaceholderTextColor;
35
+ }
36
+
37
+ &:enabled:focus {
38
+ outline: 0 none;
39
+ box-shadow: none;
40
+ }
41
+ }
42
+
43
+ .p-cascadeselect-trigger {
44
+ background: transparent;
45
+ color: $inputIconColor;
46
+ width: $inputGroupAddOnMinWidth;
47
+ border-top-right-radius: $borderRadius;
48
+ border-bottom-right-radius: $borderRadius;
49
+ }
50
+
51
+ &.p-invalid.p-component {
52
+ @include invalid-input();
53
+ }
54
+ }
55
+
56
+ .p-cascadeselect-panel {
57
+ background: $inputOverlayBg;
58
+ color: $inputListTextColor;
59
+ border: $inputOverlayBorder;
60
+ border-radius: $borderRadius;
61
+ box-shadow: $inputOverlayShadow;
62
+
63
+ .p-cascadeselect-items {
64
+ padding: $inputListPadding;
65
+
66
+ .p-cascadeselect-item {
67
+ margin: $inputListItemMargin;
68
+ border: $inputListItemBorder;
69
+ color: $inputListItemTextColor;
70
+ background: $inputListItemBg;
71
+ transition: $listItemTransition;
72
+ border-radius: $inputListItemBorderRadius;
73
+
74
+ &:first-child {
75
+ margin-top: 0;
76
+ }
77
+
78
+ &:last-child {
79
+ margin-bottom: 0;
80
+ }
81
+
82
+ &.p-highlight {
83
+ color: $highlightTextColor;
84
+ background: $highlightBg;
85
+
86
+ &.p-focus {
87
+ background: $highlightFocusBg;
88
+ }
89
+ }
90
+
91
+ &:not(.p-highlight):not(.p-disabled) {
92
+ &.p-focus {
93
+ color: $inputListItemTextHoverColor;
94
+ background: $inputListItemHoverBg;
95
+ }
96
+ }
97
+
98
+ .p-cascadeselect-item-content {
99
+ padding: $inputListItemPadding;
100
+ }
101
+
102
+ .p-cascadeselect-group-icon {
103
+ font-size: $menuitemSubmenuIconFontSize;
104
+ }
105
+ }
106
+ }
107
+ }
@@ -1,181 +1,181 @@
1
- //core
2
- .p-checkbox {
3
- position: relative;
4
- display: inline-flex;
5
- user-select: none;
6
- vertical-align: bottom;
7
- }
8
-
9
- .p-checkbox-input {
10
- appearance: none;
11
- position: absolute;
12
- top: 0;
13
- left: 0;
14
- width: 100%;
15
- height: 100%;
16
- padding: 0;
17
- margin: 0;
18
- opacity: 0;
19
- z-index: 1;
20
- outline: 0 none;
21
- cursor: pointer;
22
- }
23
-
24
- .p-checkbox-box {
25
- display: flex;
26
- justify-content: center;
27
- align-items: center;
28
- }
29
-
30
- // theme
31
- .p-checkbox {
32
- width: $checkboxWidth;
33
- height: $checkboxHeight;
34
-
35
- .p-checkbox-input {
36
- border: $checkboxBorder;
37
- border-radius: $borderRadius;
38
- }
39
-
40
- .p-checkbox-box {
41
- border: $checkboxBorder;
42
- background: $inputBg;
43
- width: $checkboxWidth;
44
- height: $checkboxHeight;
45
- color: $textColor;
46
- border-radius: $borderRadius;
47
- transition: $formElementTransition;
48
- outline-color: transparent;
49
-
50
- .p-checkbox-icon {
51
- transition-duration: $transitionDuration;
52
- color: $checkboxIconActiveColor;
53
- font-size: $checkboxIconFontSize;
54
-
55
- &.p-icon {
56
- width: $checkboxIconFontSize;
57
- height: $checkboxIconFontSize;
58
- }
59
- }
60
- }
61
-
62
- .p-checkbox-box {
63
- border: $checkboxBorder;
64
- background: $inputBg;
65
- width: $checkboxWidth;
66
- height: $checkboxHeight;
67
- color: $textColor;
68
- border-radius: $borderRadius;
69
- transition: $formElementTransition;
70
- outline-color: transparent;
71
-
72
- .p-checkbox-icon {
73
- transition-duration: $transitionDuration;
74
- color: $checkboxIconActiveColor;
75
- font-size: $checkboxIconFontSize;
76
-
77
- &.p-icon {
78
- width: $checkboxIconFontSize;
79
- height: $checkboxIconFontSize;
80
- }
81
- }
82
- }
83
-
84
-
85
- &.p-highlight {
86
- .p-checkbox-box {
87
- border-color: $checkboxActiveBorderColor;
88
- background: $checkboxActiveBg;
89
- }
90
- }
91
-
92
- &:not(.p-disabled) {
93
- &:has(.p-checkbox-input:hover) {
94
- .p-checkbox-box {
95
- border-color: $inputHoverBorderColor;
96
- }
97
-
98
- &.p-highlight {
99
- .p-checkbox-box {
100
- border-color: $checkboxActiveHoverBorderColor;
101
- background: $checkboxActiveHoverBg;
102
- color: $checkboxIconActiveHoverColor;
103
- }
104
- }
105
- }
106
-
107
- &:has(.p-checkbox-input:focus-visible) {
108
- .p-checkbox-box {
109
- @include focused-input();
110
- }
111
- }
112
- }
113
-
114
- &.p-invalid > .p-checkbox-box {
115
- @include invalid-input();
116
- }
117
-
118
- &.p-variant-filled {
119
- .p-checkbox-box {
120
- background-color: $inputFilledBg;
121
- }
122
-
123
- &.p-highlight {
124
- .p-checkbox-box {
125
- background: $checkboxActiveBg;
126
- }
127
- }
128
-
129
- &:not(.p-disabled) {
130
- &:has(.p-checkbox-input:hover) {
131
- .p-checkbox-box {
132
- background-color: $inputFilledHoverBg;
133
- }
134
-
135
- &.p-highlight {
136
- .p-checkbox-box {
137
- background: $checkboxActiveHoverBg;
138
- }
139
- }
140
- }
141
- }
142
- }
143
- }
144
-
145
- .p-input-filled {
146
- .p-checkbox {
147
- .p-checkbox-box {
148
- background-color: $inputFilledBg;
149
- }
150
-
151
- &.p-highlight {
152
- .p-checkbox-box {
153
- background: $checkboxActiveBg;
154
- }
155
- }
156
-
157
- &:not(.p-disabled) {
158
- &:has(.p-checkbox-input:hover) {
159
- .p-checkbox-box {
160
- background-color: $inputFilledHoverBg;
161
- }
162
-
163
- &.p-highlight {
164
- .p-checkbox-box {
165
- background: $checkboxActiveHoverBg;
166
- }
167
- }
168
- }
169
- }
170
- }
171
- }
172
-
173
- @if ($highlightBg == $checkboxActiveBg) {
174
- .p-highlight {
175
- .p-checkbox {
176
- .p-checkbox-box {
177
- border-color: $checkboxIconActiveColor;
178
- }
179
- }
180
- }
181
- }
1
+ //core
2
+ .p-checkbox {
3
+ position: relative;
4
+ display: inline-flex;
5
+ user-select: none;
6
+ vertical-align: bottom;
7
+ }
8
+
9
+ .p-checkbox-input {
10
+ appearance: none;
11
+ position: absolute;
12
+ top: 0;
13
+ left: 0;
14
+ width: 100%;
15
+ height: 100%;
16
+ padding: 0;
17
+ margin: 0;
18
+ opacity: 0;
19
+ z-index: 1;
20
+ outline: 0 none;
21
+ cursor: pointer;
22
+ }
23
+
24
+ .p-checkbox-box {
25
+ display: flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ }
29
+
30
+ // theme
31
+ .p-checkbox {
32
+ width: $checkboxWidth;
33
+ height: $checkboxHeight;
34
+
35
+ .p-checkbox-input {
36
+ border: $checkboxBorder;
37
+ border-radius: $borderRadius;
38
+ }
39
+
40
+ .p-checkbox-box {
41
+ border: $checkboxBorder;
42
+ background: $inputBg;
43
+ width: $checkboxWidth;
44
+ height: $checkboxHeight;
45
+ color: $textColor;
46
+ border-radius: $borderRadius;
47
+ transition: $formElementTransition;
48
+ outline-color: transparent;
49
+
50
+ .p-checkbox-icon {
51
+ transition-duration: $transitionDuration;
52
+ color: $checkboxIconActiveColor;
53
+ font-size: $checkboxIconFontSize;
54
+
55
+ &.p-icon {
56
+ width: $checkboxIconFontSize;
57
+ height: $checkboxIconFontSize;
58
+ }
59
+ }
60
+ }
61
+
62
+ .p-checkbox-box {
63
+ border: $checkboxBorder;
64
+ background: $inputBg;
65
+ width: $checkboxWidth;
66
+ height: $checkboxHeight;
67
+ color: $textColor;
68
+ border-radius: $borderRadius;
69
+ transition: $formElementTransition;
70
+ outline-color: transparent;
71
+
72
+ .p-checkbox-icon {
73
+ transition-duration: $transitionDuration;
74
+ color: $checkboxIconActiveColor;
75
+ font-size: $checkboxIconFontSize;
76
+
77
+ &.p-icon {
78
+ width: $checkboxIconFontSize;
79
+ height: $checkboxIconFontSize;
80
+ }
81
+ }
82
+ }
83
+
84
+
85
+ &.p-highlight {
86
+ .p-checkbox-box {
87
+ border-color: $checkboxActiveBorderColor;
88
+ background: $checkboxActiveBg;
89
+ }
90
+ }
91
+
92
+ &:not(.p-disabled) {
93
+ &:has(.p-checkbox-input:hover) {
94
+ .p-checkbox-box {
95
+ border-color: $inputHoverBorderColor;
96
+ }
97
+
98
+ &.p-highlight {
99
+ .p-checkbox-box {
100
+ border-color: $checkboxActiveHoverBorderColor;
101
+ background: $checkboxActiveHoverBg;
102
+ color: $checkboxIconActiveHoverColor;
103
+ }
104
+ }
105
+ }
106
+
107
+ &:has(.p-checkbox-input:focus-visible) {
108
+ .p-checkbox-box {
109
+ @include focused-input();
110
+ }
111
+ }
112
+ }
113
+
114
+ &.p-invalid > .p-checkbox-box {
115
+ @include invalid-input();
116
+ }
117
+
118
+ &.p-variant-filled {
119
+ .p-checkbox-box {
120
+ background-color: $inputFilledBg;
121
+ }
122
+
123
+ &.p-highlight {
124
+ .p-checkbox-box {
125
+ background: $checkboxActiveBg;
126
+ }
127
+ }
128
+
129
+ &:not(.p-disabled) {
130
+ &:has(.p-checkbox-input:hover) {
131
+ .p-checkbox-box {
132
+ background-color: $inputFilledHoverBg;
133
+ }
134
+
135
+ &.p-highlight {
136
+ .p-checkbox-box {
137
+ background: $checkboxActiveHoverBg;
138
+ }
139
+ }
140
+ }
141
+ }
142
+ }
143
+ }
144
+
145
+ .p-input-filled {
146
+ .p-checkbox {
147
+ .p-checkbox-box {
148
+ background-color: $inputFilledBg;
149
+ }
150
+
151
+ &.p-highlight {
152
+ .p-checkbox-box {
153
+ background: $checkboxActiveBg;
154
+ }
155
+ }
156
+
157
+ &:not(.p-disabled) {
158
+ &:has(.p-checkbox-input:hover) {
159
+ .p-checkbox-box {
160
+ background-color: $inputFilledHoverBg;
161
+ }
162
+
163
+ &.p-highlight {
164
+ .p-checkbox-box {
165
+ background: $checkboxActiveHoverBg;
166
+ }
167
+ }
168
+ }
169
+ }
170
+ }
171
+ }
172
+
173
+ @if ($highlightBg == $checkboxActiveBg) {
174
+ .p-highlight {
175
+ .p-checkbox {
176
+ .p-checkbox-box {
177
+ border-color: $checkboxIconActiveColor;
178
+ }
179
+ }
180
+ }
181
+ }