@vonaffenfels/slate-editor 1.1.70 → 1.1.71

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 (94) hide show
  1. package/.babelrc +43 -43
  2. package/README.md +5 -5
  3. package/componentLoader.js +93 -93
  4. package/dist/BlockEditor.css +1871 -4
  5. package/dist/BlockEditor.js +3960 -336
  6. package/dist/Renderer.js +2081 -2
  7. package/dist/fromHTML.js +78 -1
  8. package/dist/index.css +1871 -4
  9. package/dist/index.js +4037 -336
  10. package/dist/toHTML.js +1689 -2
  11. package/dist/toText.js +1689 -2
  12. package/package.json +2 -2
  13. package/postcss.config.js +6 -6
  14. package/scss/demo.scss +148 -148
  15. package/scss/sidebarEditor.scss +181 -181
  16. package/scss/toolbar.scss +161 -161
  17. package/src/Blocks/EmptyBlock.js +11 -11
  18. package/src/Blocks/EmptyWrapper.js +4 -4
  19. package/src/Blocks/ErrorBoundary.js +40 -40
  20. package/src/Blocks/LayoutBlock.js +274 -274
  21. package/src/Blocks/LayoutSlot.js +90 -90
  22. package/src/CollapsableMenu/CollapsableMenu.js +48 -48
  23. package/src/Context/StorybookContext.js +6 -6
  24. package/src/ElementAutocomplete.js +133 -133
  25. package/src/Loader.js +137 -137
  26. package/src/Nodes/Default.js +158 -158
  27. package/src/Nodes/Leaf.js +54 -54
  28. package/src/Nodes/Text.js +97 -97
  29. package/src/ObjectId.js +3 -3
  30. package/src/Renderer.js +73 -73
  31. package/src/Serializer/Html.js +42 -42
  32. package/src/Serializer/Serializer.js +371 -371
  33. package/src/Serializer/Text.js +17 -17
  34. package/src/Serializer/ads.js +174 -174
  35. package/src/Serializer/index.js +3 -3
  36. package/src/SidebarEditor/AssetList.js +181 -181
  37. package/src/SidebarEditor/Fields/CloudinaryContentSelect.js +89 -89
  38. package/src/SidebarEditor/Fields/ColorPicker.js +89 -89
  39. package/src/SidebarEditor/Fields/ContentfulContentSelect.js +62 -62
  40. package/src/SidebarEditor/Fields/DateTime.js +55 -55
  41. package/src/SidebarEditor/Fields/MVP.js +66 -66
  42. package/src/SidebarEditor/Fields/MultiSelect.js +13 -13
  43. package/src/SidebarEditor/Fields/RemoteMultiSelect.js +40 -40
  44. package/src/SidebarEditor/Fields/RemoteSelect.js +39 -39
  45. package/src/SidebarEditor/Fields/Select.js +47 -47
  46. package/src/SidebarEditor/Fields/StreamSelect.js +15 -15
  47. package/src/SidebarEditor/Fields/Switch.js +34 -34
  48. package/src/SidebarEditor/Fields/Textarea.js +21 -21
  49. package/src/SidebarEditor/Resizable.js +85 -85
  50. package/src/Storybook.js +151 -151
  51. package/src/Toolbar/Align.js +64 -64
  52. package/src/Toolbar/Anchor.js +94 -94
  53. package/src/Toolbar/Block.js +135 -135
  54. package/src/Toolbar/Element.js +44 -44
  55. package/src/Toolbar/Formats.js +71 -71
  56. package/src/Toolbar/Insert.js +28 -28
  57. package/src/Toolbar/Layout.js +399 -399
  58. package/src/Toolbar/Link.js +164 -164
  59. package/src/Toolbar/Toolbar.js +235 -235
  60. package/src/Tools/Margin.js +51 -51
  61. package/src/Translation/TranslationToolbarButton.js +115 -115
  62. package/src/dev/draftToSlate.json +3147 -3147
  63. package/src/dev/index.css +2 -2
  64. package/src/dev/index.html +10 -10
  65. package/src/dev/index.js +4 -4
  66. package/src/dev/sampleValue1.json +4294 -4294
  67. package/src/dev/sampleValueValid.json +410 -410
  68. package/src/dev/testComponents/TestStory.js +74 -74
  69. package/src/dev/testComponents/TestStory.stories.js +216 -216
  70. package/src/dev/testComponents/TestStory2.js +74 -74
  71. package/src/dev/testComponents/TestStory2.stories.js +197 -197
  72. package/src/dev/testComponents/TestStory3.js +74 -74
  73. package/src/dev/testComponents/TestStory3.stories.js +197 -197
  74. package/src/dev/testSampleValue.json +746 -746
  75. package/src/fromHTML.js +4 -4
  76. package/src/helper/array.js +8 -8
  77. package/src/index.js +10 -10
  78. package/src/plugins/ListItem.js +48 -48
  79. package/src/plugins/SoftBreak.js +23 -23
  80. package/src/toHTML.js +6 -6
  81. package/src/toText.js +6 -6
  82. package/src/util/reduceContentfulResponse.js +64 -64
  83. package/src/util.js +19 -19
  84. package/storyLoader.js +47 -47
  85. package/tailwind.config.js +4 -4
  86. package/webpack.config.build.js +55 -55
  87. package/webpack.config.dev.js +60 -60
  88. package/webpack.config.js +130 -130
  89. package/webpack.config.watch.js +4 -4
  90. package/dist/BlockEditor.js.LICENSE.txt +0 -61
  91. package/dist/Renderer.js.LICENSE.txt +0 -15
  92. package/dist/index.js.LICENSE.txt +0 -69
  93. package/dist/toHTML.js.LICENSE.txt +0 -23
  94. package/dist/toText.js.LICENSE.txt +0 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonaffenfels/slate-editor",
3
- "version": "1.1.70",
3
+ "version": "1.1.71",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -72,7 +72,7 @@
72
72
  "cssnano": "^5.0.1",
73
73
  "escape-html": "^1.0.3"
74
74
  },
75
- "gitHead": "6aab8bfc8222e44d13e0fa103982fc0daf0104cf",
75
+ "gitHead": "0677709b6ead1d574706f5b33b9068fdfeac2509",
76
76
  "publishConfig": {
77
77
  "access": "public"
78
78
  }
package/postcss.config.js CHANGED
@@ -1,7 +1,7 @@
1
- module.exports = {
2
- plugins: {
3
- 'postcss-import': {},
4
- tailwindcss: {},
5
- autoprefixer: {},
6
- },
1
+ module.exports = {
2
+ plugins: {
3
+ 'postcss-import': {},
4
+ tailwindcss: {},
5
+ autoprefixer: {},
6
+ },
7
7
  };
package/scss/demo.scss CHANGED
@@ -1,149 +1,149 @@
1
- html, body, #root {
2
- height: 100%;
3
- width: 100%;
4
- }
5
-
6
- @media (prefers-color-scheme: dark) {
7
- .slate-editor {
8
- color: white;
9
- background-color: #1c1c27;
10
- }
11
- }
12
-
13
- .editor-demo-wrapper {
14
- display: flex;
15
- height: 100%;
16
- justify-content: center;
17
- width: 100%;
18
- flex-direction: column;
19
-
20
- .editor-demo-output {
21
- display: none;
22
- width: 100%;
23
- }
24
-
25
- .editor-demo {
26
- display: block;
27
- flex: 1;
28
- height: 100%;
29
- width: 100%;
30
- position: relative;
31
-
32
- .editor-demo-editor {
33
- display: flex;
34
- height: 100%;
35
- position: relative;
36
- width: 100%;
37
- padding-top: 40px;
38
-
39
- &.container {
40
- display: flex;
41
- flex: 1;
42
- justify-content: center;
43
- min-width: 100%;
44
- min-height: 100%;
45
- position: relative;
46
-
47
- &.block-editor-wrapper {
48
- flex-grow: 1;
49
- //max-width: 703px;
50
- //width: 703px; // contentful editor default width
51
- }
52
- }
53
-
54
- &.value {
55
- textarea {
56
- max-height: 50px;
57
- }
58
- }
59
- }
60
- }
61
- }
62
-
63
- .test-block {
64
- background-color: #fefefe;
65
- border: 1px solid black;
66
- color: black;
67
- padding: 5px;
68
- }
69
-
70
- .block-editor-content {
71
- font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
72
- line-height: 1em;
73
- }
74
-
75
- .block-editor-content p {
76
- margin-bottom: 20px;
77
- }
78
-
79
- .block-editor-content h1 {
80
- font-size: 2em;
81
- margin-bottom: 2em;
82
- }
83
-
84
- .block-editor-content h2 {
85
- font-size: 1.5em;
86
- margin-bottom: 1em;
87
- }
88
-
89
- .block-editor-content h3 {
90
- font-size: 1.3em;
91
- margin-bottom: 1em;
92
- }
93
-
94
- .block-editor-content h4 {
95
- font-size: 1.1em;
96
- margin-bottom: 1em;
97
- }
98
-
99
- .block-editor-content h5,
100
- .block-editor-content h6 {
101
- font-size: 1em;
102
- margin-bottom: 1em;
103
- }
104
-
105
- .block-editor-content ul, .block-editor-content ol {
106
- margin-block-start: 1em;
107
- margin-block-end: 1em;
108
- margin-inline-start: 0px;
109
- margin-inline-end: 0px;
110
- padding-inline-start: 40px;
111
- }
112
-
113
- .block-editor-content ul {
114
- list-style-type: disc;
115
- }
116
-
117
- .block-editor-content ol {
118
- list-style-type: decimal;
119
- }
120
-
121
- .block-editor-content blockquote {
122
- display: block;
123
- background-color: grey;
124
- padding: 1em;
125
- }
126
-
127
- .block-editor-content a,
128
- .block-editor-content a:visited {
129
- color: blue;
130
- cursor: pointer;
131
- }
132
-
133
-
134
- .block-editor-content a:hover {
135
- text-decoration: underline;
136
- }
137
-
138
- .editor-mt-16 {
139
- @apply pt-16 block;
140
- }
141
- .editor-mr-16 {
142
- @apply md:pr-16 block;
143
- }
144
- .editor-mb-16 {
145
- @apply pb-16 block;
146
- }
147
- .editor-ml-16 {
148
- @apply md:pl-16 block;
1
+ html, body, #root {
2
+ height: 100%;
3
+ width: 100%;
4
+ }
5
+
6
+ @media (prefers-color-scheme: dark) {
7
+ .slate-editor {
8
+ color: white;
9
+ background-color: #1c1c27;
10
+ }
11
+ }
12
+
13
+ .editor-demo-wrapper {
14
+ display: flex;
15
+ height: 100%;
16
+ justify-content: center;
17
+ width: 100%;
18
+ flex-direction: column;
19
+
20
+ .editor-demo-output {
21
+ display: none;
22
+ width: 100%;
23
+ }
24
+
25
+ .editor-demo {
26
+ display: block;
27
+ flex: 1;
28
+ height: 100%;
29
+ width: 100%;
30
+ position: relative;
31
+
32
+ .editor-demo-editor {
33
+ display: flex;
34
+ height: 100%;
35
+ position: relative;
36
+ width: 100%;
37
+ padding-top: 40px;
38
+
39
+ &.container {
40
+ display: flex;
41
+ flex: 1;
42
+ justify-content: center;
43
+ min-width: 100%;
44
+ min-height: 100%;
45
+ position: relative;
46
+
47
+ &.block-editor-wrapper {
48
+ flex-grow: 1;
49
+ //max-width: 703px;
50
+ //width: 703px; // contentful editor default width
51
+ }
52
+ }
53
+
54
+ &.value {
55
+ textarea {
56
+ max-height: 50px;
57
+ }
58
+ }
59
+ }
60
+ }
61
+ }
62
+
63
+ .test-block {
64
+ background-color: #fefefe;
65
+ border: 1px solid black;
66
+ color: black;
67
+ padding: 5px;
68
+ }
69
+
70
+ .block-editor-content {
71
+ font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
72
+ line-height: 1em;
73
+ }
74
+
75
+ .block-editor-content p {
76
+ margin-bottom: 20px;
77
+ }
78
+
79
+ .block-editor-content h1 {
80
+ font-size: 2em;
81
+ margin-bottom: 2em;
82
+ }
83
+
84
+ .block-editor-content h2 {
85
+ font-size: 1.5em;
86
+ margin-bottom: 1em;
87
+ }
88
+
89
+ .block-editor-content h3 {
90
+ font-size: 1.3em;
91
+ margin-bottom: 1em;
92
+ }
93
+
94
+ .block-editor-content h4 {
95
+ font-size: 1.1em;
96
+ margin-bottom: 1em;
97
+ }
98
+
99
+ .block-editor-content h5,
100
+ .block-editor-content h6 {
101
+ font-size: 1em;
102
+ margin-bottom: 1em;
103
+ }
104
+
105
+ .block-editor-content ul, .block-editor-content ol {
106
+ margin-block-start: 1em;
107
+ margin-block-end: 1em;
108
+ margin-inline-start: 0px;
109
+ margin-inline-end: 0px;
110
+ padding-inline-start: 40px;
111
+ }
112
+
113
+ .block-editor-content ul {
114
+ list-style-type: disc;
115
+ }
116
+
117
+ .block-editor-content ol {
118
+ list-style-type: decimal;
119
+ }
120
+
121
+ .block-editor-content blockquote {
122
+ display: block;
123
+ background-color: grey;
124
+ padding: 1em;
125
+ }
126
+
127
+ .block-editor-content a,
128
+ .block-editor-content a:visited {
129
+ color: blue;
130
+ cursor: pointer;
131
+ }
132
+
133
+
134
+ .block-editor-content a:hover {
135
+ text-decoration: underline;
136
+ }
137
+
138
+ .editor-mt-16 {
139
+ @apply pt-16 block;
140
+ }
141
+ .editor-mr-16 {
142
+ @apply md:pr-16 block;
143
+ }
144
+ .editor-mb-16 {
145
+ @apply pb-16 block;
146
+ }
147
+ .editor-ml-16 {
148
+ @apply md:pl-16 block;
149
149
  }
@@ -1,182 +1,182 @@
1
- #sidebar-editor-wrapper {
2
- padding-top: 45px;
3
- height: 100%;
4
- flex-basis: 400px;
5
- flex-shrink: 0;
6
- }
7
-
8
- #sidebar-editor {
9
- display: flex;
10
- flex-direction: column;
11
- background-color: rgb(247, 249, 250);
12
- max-height: 100%;
13
- height: 100%;
14
- overflow-y: auto;
15
- padding: 16px;
16
-
17
- * {
18
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
19
- }
20
-
21
- p, label, b, span {
22
- color: rgb(90, 101, 124);
23
- }
24
-
25
- label {
26
- margin: 0 0 2px 0 !important;
27
- }
28
-
29
- input[type="text"],
30
- input[type="time"],
31
- input[type="date"],
32
- input[type="number"],
33
- input[type="color"],
34
- input[type="datetime-local"],
35
- input[type="search"],
36
- select,
37
- textarea {
38
- display: block;
39
- font-size: 0.875rem !important;
40
- color: rgb(90, 101, 124) !important;
41
- background-color: white !important;
42
- border: 1px solid #cfd9e0 !important;
43
- border-radius: 6px !important;
44
- box-shadow: none !important;
45
- filter: none !important;
46
- width: 100% !important;
47
- padding: 8px 0.75rem !important;
48
- }
49
-
50
- textarea {
51
- height: 42px;
52
- max-height: 200px;
53
- }
54
-
55
- input[type="color"] {
56
- padding: 4px !important;
57
- }
58
-
59
- input[type="range"] {
60
- display: block;
61
- width: 100%;
62
- }
63
-
64
- input[type="radio"],
65
- input[type="checkbox"] {
66
- margin-right: 8px;
67
- margin-left: 4px;
68
- }
69
-
70
- option[disabled] {
71
- color: rgba(0, 0, 0, 0.3)
72
- }
73
-
74
- /* button[data-test-id="cf-ui-button"] span {
75
- color: #036fe3 !important;
76
- }
77
-
78
- button[data-test-id="cf-ui-button"] svg {
79
- fill: #036fe3 !important;
80
- }
81
-
82
- button[data-test-id="cf-ui-button"]:hover span {
83
- color: #FFFFFF !important;
84
- }
85
-
86
- button[data-test-id="cf-ui-button"]:hover svg {
87
- fill: #FFFFFF !important;
88
- } */
89
-
90
- .inline-check-wrapper {
91
- display: inline-block;
92
- margin-right: 8px;
93
- }
94
-
95
- details {
96
- display: block;
97
- font-size: 0.875rem !important;
98
- color: rgb(90, 101, 124) !important;
99
- background-color: white !important;
100
- border: 1px solid #cfd9e0 !important;
101
- border-radius: 6px !important;
102
- box-shadow: none !important;
103
- filter: none !important;
104
- width: 100% !important;
105
- padding: 16px !important;
106
- }
107
-
108
- summary {
109
- cursor: pointer;
110
- }
111
-
112
- .disabled {
113
- opacity: 0.4;
114
- cursor: not-allowed !important;
115
- }
116
-
117
- .icon-button {
118
- display: inline-block;
119
- color: rgb(90, 101, 124) !important;
120
- background-color: white !important;
121
- border: 1px solid #cfd9e0 !important;
122
- border-radius: 6px;
123
- filter: none !important;
124
- width: auto !important;
125
- text-align: center;
126
- }
127
-
128
- .icon-button:not(.disabled):hover {
129
- background-color: rgb(248, 248, 248) !important;
130
- }
131
-
132
- .icon-button:not(.disabled):active {
133
- background-color: rgb(237, 237, 237) !important;
134
- }
135
-
136
- .icon-button-group {
137
- display: inline-flex;
138
- border-radius: 6px !important;
139
- overflow: hidden;
140
- border: 1px solid #cfd9e0 !important;
141
-
142
- .icon-button {
143
- border-radius: 0 !important;
144
- border: none !important;
145
- border-right: 1px solid #cfd9e0 !important;
146
- }
147
-
148
- .icon-button:last-child {
149
- border: none !important;
150
- }
151
- }
152
-
153
- .message {
154
- font-size: 0.875rem;
155
- padding: 16px;
156
- border-radius: 4px;
157
- }
158
-
159
- .message.message--negative {
160
- background-color: rgba(238, 26, 26, 0.2);
161
- }
162
-
163
- .collapsable-menu {
164
- background-color: white !important;
165
- border: 1px solid #cfd9e0 !important;
166
- border-radius: 6px;
167
- z-index: 2;
168
- overflow: hidden;
169
- }
170
-
171
- .collapsable-menu-item {
172
- color: rgb(90, 101, 124) !important;
173
- }
174
-
175
- .collapsable-menu-item:not(.disabled):hover {
176
- background-color: rgb(248, 248, 248) !important;
177
- }
178
-
179
- .collapsable-menu-item:not(.disabled):active {
180
- background-color: rgb(237, 237, 237) !important;
181
- }
1
+ #sidebar-editor-wrapper {
2
+ padding-top: 45px;
3
+ height: 100%;
4
+ flex-basis: 400px;
5
+ flex-shrink: 0;
6
+ }
7
+
8
+ #sidebar-editor {
9
+ display: flex;
10
+ flex-direction: column;
11
+ background-color: rgb(247, 249, 250);
12
+ max-height: 100%;
13
+ height: 100%;
14
+ overflow-y: auto;
15
+ padding: 16px;
16
+
17
+ * {
18
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
19
+ }
20
+
21
+ p, label, b, span {
22
+ color: rgb(90, 101, 124);
23
+ }
24
+
25
+ label {
26
+ margin: 0 0 2px 0 !important;
27
+ }
28
+
29
+ input[type="text"],
30
+ input[type="time"],
31
+ input[type="date"],
32
+ input[type="number"],
33
+ input[type="color"],
34
+ input[type="datetime-local"],
35
+ input[type="search"],
36
+ select,
37
+ textarea {
38
+ display: block;
39
+ font-size: 0.875rem !important;
40
+ color: rgb(90, 101, 124) !important;
41
+ background-color: white !important;
42
+ border: 1px solid #cfd9e0 !important;
43
+ border-radius: 6px !important;
44
+ box-shadow: none !important;
45
+ filter: none !important;
46
+ width: 100% !important;
47
+ padding: 8px 0.75rem !important;
48
+ }
49
+
50
+ textarea {
51
+ height: 42px;
52
+ max-height: 200px;
53
+ }
54
+
55
+ input[type="color"] {
56
+ padding: 4px !important;
57
+ }
58
+
59
+ input[type="range"] {
60
+ display: block;
61
+ width: 100%;
62
+ }
63
+
64
+ input[type="radio"],
65
+ input[type="checkbox"] {
66
+ margin-right: 8px;
67
+ margin-left: 4px;
68
+ }
69
+
70
+ option[disabled] {
71
+ color: rgba(0, 0, 0, 0.3)
72
+ }
73
+
74
+ /* button[data-test-id="cf-ui-button"] span {
75
+ color: #036fe3 !important;
76
+ }
77
+
78
+ button[data-test-id="cf-ui-button"] svg {
79
+ fill: #036fe3 !important;
80
+ }
81
+
82
+ button[data-test-id="cf-ui-button"]:hover span {
83
+ color: #FFFFFF !important;
84
+ }
85
+
86
+ button[data-test-id="cf-ui-button"]:hover svg {
87
+ fill: #FFFFFF !important;
88
+ } */
89
+
90
+ .inline-check-wrapper {
91
+ display: inline-block;
92
+ margin-right: 8px;
93
+ }
94
+
95
+ details {
96
+ display: block;
97
+ font-size: 0.875rem !important;
98
+ color: rgb(90, 101, 124) !important;
99
+ background-color: white !important;
100
+ border: 1px solid #cfd9e0 !important;
101
+ border-radius: 6px !important;
102
+ box-shadow: none !important;
103
+ filter: none !important;
104
+ width: 100% !important;
105
+ padding: 16px !important;
106
+ }
107
+
108
+ summary {
109
+ cursor: pointer;
110
+ }
111
+
112
+ .disabled {
113
+ opacity: 0.4;
114
+ cursor: not-allowed !important;
115
+ }
116
+
117
+ .icon-button {
118
+ display: inline-block;
119
+ color: rgb(90, 101, 124) !important;
120
+ background-color: white !important;
121
+ border: 1px solid #cfd9e0 !important;
122
+ border-radius: 6px;
123
+ filter: none !important;
124
+ width: auto !important;
125
+ text-align: center;
126
+ }
127
+
128
+ .icon-button:not(.disabled):hover {
129
+ background-color: rgb(248, 248, 248) !important;
130
+ }
131
+
132
+ .icon-button:not(.disabled):active {
133
+ background-color: rgb(237, 237, 237) !important;
134
+ }
135
+
136
+ .icon-button-group {
137
+ display: inline-flex;
138
+ border-radius: 6px !important;
139
+ overflow: hidden;
140
+ border: 1px solid #cfd9e0 !important;
141
+
142
+ .icon-button {
143
+ border-radius: 0 !important;
144
+ border: none !important;
145
+ border-right: 1px solid #cfd9e0 !important;
146
+ }
147
+
148
+ .icon-button:last-child {
149
+ border: none !important;
150
+ }
151
+ }
152
+
153
+ .message {
154
+ font-size: 0.875rem;
155
+ padding: 16px;
156
+ border-radius: 4px;
157
+ }
158
+
159
+ .message.message--negative {
160
+ background-color: rgba(238, 26, 26, 0.2);
161
+ }
162
+
163
+ .collapsable-menu {
164
+ background-color: white !important;
165
+ border: 1px solid #cfd9e0 !important;
166
+ border-radius: 6px;
167
+ z-index: 2;
168
+ overflow: hidden;
169
+ }
170
+
171
+ .collapsable-menu-item {
172
+ color: rgb(90, 101, 124) !important;
173
+ }
174
+
175
+ .collapsable-menu-item:not(.disabled):hover {
176
+ background-color: rgb(248, 248, 248) !important;
177
+ }
178
+
179
+ .collapsable-menu-item:not(.disabled):active {
180
+ background-color: rgb(237, 237, 237) !important;
181
+ }
182
182
  }