@dodlhuat/basix 1.0.0 → 1.1.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.
Files changed (142) hide show
  1. package/README.md +1 -1
  2. package/css/accordion.scss +31 -22
  3. package/css/alert.scss +79 -27
  4. package/css/button.scss +151 -102
  5. package/css/card.scss +11 -12
  6. package/css/carousel.scss +123 -87
  7. package/css/chart.scss +9 -11
  8. package/css/chat-bubbles.scss +2 -2
  9. package/css/checkbox.scss +72 -55
  10. package/css/chips.scss +52 -52
  11. package/css/code-viewer.scss +73 -98
  12. package/css/datepicker.scss +20 -0
  13. package/css/dropdown.scss +151 -137
  14. package/css/editor.scss +9 -6
  15. package/css/file-uploader.scss +187 -195
  16. package/css/flyout-menu.scss +20 -13
  17. package/css/form.scss +168 -115
  18. package/css/gallery.scss +62 -63
  19. package/css/grid.scss +0 -1
  20. package/css/modal.scss +117 -72
  21. package/css/placeholder.scss +17 -12
  22. package/css/properties.scss +6 -0
  23. package/css/push-menu.scss +70 -23
  24. package/css/radiobutton.scss +86 -64
  25. package/css/range-slider.scss +136 -0
  26. package/css/scrollbar.scss +69 -69
  27. package/css/spinner.scss +41 -66
  28. package/css/style.css +4351 -3735
  29. package/css/style.css.map +1 -1
  30. package/css/style.scss +2 -1
  31. package/css/switch.scss +43 -42
  32. package/css/table.scss +61 -40
  33. package/css/tabs.scss +12 -7
  34. package/css/timeline.scss +72 -69
  35. package/css/timepicker.scss +151 -72
  36. package/css/toast.scss +49 -48
  37. package/css/tooltip.scss +112 -122
  38. package/css/tree.scss +135 -192
  39. package/css/typography.scss +70 -9
  40. package/css/virtual-dropdown.scss +201 -142
  41. package/js/carousel.js +45 -18
  42. package/js/carousel.ts +217 -173
  43. package/js/datepicker.js +505 -497
  44. package/js/datepicker.ts +9 -0
  45. package/js/editor.js +398 -415
  46. package/js/file-uploader.js +142 -128
  47. package/js/file-uploader.ts +364 -350
  48. package/js/gallery.js +22 -15
  49. package/js/gallery.ts +17 -12
  50. package/js/index.js +718 -720
  51. package/js/index.ts +7 -8
  52. package/js/push-menu.js +113 -101
  53. package/js/push-menu.ts +17 -2
  54. package/js/range-slider.js +26 -0
  55. package/js/range-slider.ts +33 -0
  56. package/js/timepicker.js +144 -98
  57. package/js/timepicker.ts +194 -131
  58. package/js/tree.js +56 -28
  59. package/js/tree.ts +239 -218
  60. package/package.json +1 -1
  61. package/css/accordion.css +0 -109
  62. package/css/accordion.css.map +0 -1
  63. package/css/alert.css +0 -57
  64. package/css/alert.css.map +0 -1
  65. package/css/button.css +0 -69
  66. package/css/button.css.map +0 -1
  67. package/css/card.css +0 -144
  68. package/css/card.css.map +0 -1
  69. package/css/carousel.css +0 -118
  70. package/css/carousel.css.map +0 -1
  71. package/css/chart.css +0 -159
  72. package/css/chart.css.map +0 -1
  73. package/css/chat-bubbles.css +0 -97
  74. package/css/chat-bubbles.css.map +0 -1
  75. package/css/checkbox.css +0 -77
  76. package/css/checkbox.css.map +0 -1
  77. package/css/chips.css +0 -72
  78. package/css/chips.css.map +0 -1
  79. package/css/code-viewer.css +0 -97
  80. package/css/code-viewer.css.map +0 -1
  81. package/css/colors.css +0 -63
  82. package/css/colors.css.map +0 -1
  83. package/css/datepicker.css +0 -264
  84. package/css/datepicker.css.map +0 -1
  85. package/css/defaults.css +0 -118
  86. package/css/defaults.css.map +0 -1
  87. package/css/dropdown.css +0 -146
  88. package/css/dropdown.css.map +0 -1
  89. package/css/editor.css +0 -413
  90. package/css/file-uploader.css +0 -194
  91. package/css/file-uploader.css.map +0 -1
  92. package/css/flyout-menu.css +0 -345
  93. package/css/flyout-menu.css.map +0 -1
  94. package/css/form-builder.css +0 -9
  95. package/css/form-builder.css.map +0 -1
  96. package/css/form-builder.scss +0 -11
  97. package/css/form.css +0 -130
  98. package/css/form.css.map +0 -1
  99. package/css/gallery.css +0 -91
  100. package/css/gallery.css.map +0 -1
  101. package/css/grid.css +0 -44
  102. package/css/grid.css.map +0 -1
  103. package/css/icons.css +0 -327
  104. package/css/icons.css.map +0 -1
  105. package/css/modal.css +0 -97
  106. package/css/modal.css.map +0 -1
  107. package/css/parameters.css +0 -1
  108. package/css/parameters.css.map +0 -1
  109. package/css/placeholder.css +0 -50
  110. package/css/placeholder.css.map +0 -1
  111. package/css/progress.css +0 -51
  112. package/css/progress.css.map +0 -1
  113. package/css/properties.css +0 -31
  114. package/css/properties.css.map +0 -1
  115. package/css/push-menu.css +0 -145
  116. package/css/push-menu.css.map +0 -1
  117. package/css/radiobutton.css +0 -91
  118. package/css/radiobutton.css.map +0 -1
  119. package/css/reset.css +0 -46
  120. package/css/reset.css.map +0 -1
  121. package/css/scrollbar.css +0 -91
  122. package/css/scrollbar.css.map +0 -1
  123. package/css/spinner.css +0 -118
  124. package/css/spinner.css.map +0 -1
  125. package/css/switch.css +0 -66
  126. package/css/switch.css.map +0 -1
  127. package/css/table.css +0 -201
  128. package/css/table.css.map +0 -1
  129. package/css/tabs.css +0 -135
  130. package/css/tabs.css.map +0 -1
  131. package/css/timeline.css +0 -69
  132. package/css/timeline.css.map +0 -1
  133. package/css/toast.css +0 -98
  134. package/css/toast.css.map +0 -1
  135. package/css/tooltip.css +0 -151
  136. package/css/tooltip.css.map +0 -1
  137. package/css/tree.css +0 -199
  138. package/css/tree.css.map +0 -1
  139. package/css/typography.css +0 -137
  140. package/css/typography.css.map +0 -1
  141. package/css/virtual-dropdown.css +0 -149
  142. package/css/virtual-dropdown.css.map +0 -1
package/css/dropdown.css DELETED
@@ -1,146 +0,0 @@
1
- @charset "UTF-8";
2
- :root {
3
- --primary-text: #1E1F24;
4
- --secondary-text: #62636C;
5
- --divider: #D8D9E0;
6
- --accent-text: #3D63DD;
7
- --error: #D64545;
8
- --warning: #C28A00;
9
- --success: #2E8B57;
10
- --secondary-background: #E7E8EC;
11
- --background: #F9F9FB;
12
- --accent-color: #3D63DD;
13
- --accent-color-lighten: #87A5EF;
14
- --accent-color-text: #D8D9E0;
15
- --disabled: #D8D9E0;
16
- }
17
-
18
- [data-theme=dark] {
19
- --primary-text: #EEEEF0;
20
- --secondary-text: #B2B3BD;
21
- --divider: #393A40;
22
- --accent-text: #0E496D;
23
- --error: #FF6B6B;
24
- --warning: #F7B500;
25
- --success: #5CC689;
26
- --background: #111113;
27
- --secondary-background: #19191B;
28
- --accent-color: #1B7BB4;
29
- --accent-color-lighten: #175982;
30
- --accent-color-text: #B2B3BD;
31
- --disabled: #303136;
32
- }
33
-
34
- .dropdown-container {
35
- position: relative;
36
- display: inline-block;
37
- }
38
- .dropdown-container.active > .dropdown-menu {
39
- opacity: 1;
40
- display: block;
41
- transform: translateY(0);
42
- }
43
- .dropdown-container .dropdown-menu {
44
- position: absolute;
45
- top: 100%;
46
- left: 0;
47
- margin-top: 8px;
48
- background: var(--background);
49
- border-radius: 8px;
50
- box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
51
- min-width: 220px;
52
- padding: 8px 0;
53
- list-style: none;
54
- opacity: 0;
55
- display: none;
56
- transform: translateY(-10px);
57
- transition: opacity 0.2s, transform 0.2s;
58
- z-index: 100;
59
- }
60
- .dropdown-container .dropdown-menu li {
61
- position: relative;
62
- list-style: none;
63
- }
64
- .dropdown-container .dropdown-menu li.open > .dropdown-item {
65
- background-color: var(--background);
66
- color: var(--accent-color);
67
- }
68
- .dropdown-container .dropdown-menu li.open > .dropdown-item.has-children::after {
69
- transform: rotate(90deg);
70
- }
71
- .dropdown-container .dropdown-menu li.open > ul {
72
- opacity: 1;
73
- display: block;
74
- transform: translateX(0);
75
- }
76
- .dropdown-container .dropdown-menu ul {
77
- position: absolute;
78
- top: 0;
79
- left: 100%;
80
- margin-left: 4px;
81
- background-color: var(--background);
82
- border-radius: 8px;
83
- box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
84
- min-width: 220px;
85
- padding: 8px 0;
86
- list-style: none;
87
- opacity: 0;
88
- display: none;
89
- transform: translateX(-10px);
90
- transition: opacity 0.2s, transform 0.2s;
91
- }
92
- .dropdown-container .dropdown-item {
93
- display: flex;
94
- justify-content: space-between;
95
- align-items: center;
96
- padding: 10px 16px;
97
- color: var(--primary-text);
98
- text-decoration: none;
99
- font-size: 14px;
100
- cursor: pointer;
101
- transition: background-color 0.2s;
102
- -webkit-user-select: none;
103
- -moz-user-select: none;
104
- user-select: none;
105
- }
106
- .dropdown-container .dropdown-item:hover {
107
- background-color: var(--background);
108
- color: var(--accent-color);
109
- }
110
- .dropdown-container .dropdown-item.has-children::after {
111
- content: "›";
112
- font-size: 16px;
113
- font-weight: bold;
114
- margin-left: 10px;
115
- transition: transform 0.2s;
116
- }
117
- @media (max-width: 768px) {
118
- .dropdown-container .dropdown-menu {
119
- width: 100%;
120
- min-width: 250px;
121
- }
122
- .dropdown-container .dropdown-menu ul {
123
- position: static;
124
- box-shadow: none;
125
- background-color: transparent;
126
- transform: none;
127
- margin-left: 0;
128
- padding-left: 15px;
129
- border-left: 2px solid var(--secondary-text);
130
- border-radius: 0;
131
- opacity: 0;
132
- display: none;
133
- transition: none;
134
- }
135
- .dropdown-container .dropdown-menu li.open > ul {
136
- display: block;
137
- opacity: 1;
138
- transform: none;
139
- }
140
- .dropdown-container .dropdown-item.has-children::after {
141
- transform: rotate(90deg);
142
- }
143
- .dropdown-container .dropdown-menu li.open > .dropdown-item.has-children::after {
144
- transform: rotate(-90deg);
145
- }
146
- }/*# sourceMappingURL=dropdown.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["dropdown.css","properties.scss","dropdown.scss","parameters.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ADEF;;ACCA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ADEF;;AE5BA;EACE,kBAAA;EACA,qBAAA;AF+BF;AE5BI;EACE,UAAA;EACA,cAAA;EACA,wBAAA;AF8BN;AE1BE;EACE,kBAAA;EACA,SAAA;EACA,OAAA;EACA,eAAA;EACA,6BAAA;EACA,kBAAA;EACA,4CCnBK;EDoBL,gBAAA;EACA,cAAA;EACA,gBAAA;EACA,UAAA;EACA,aAAA;EACA,4BAAA;EACA,wCACE;EAEF,YAAA;AF0BJ;AExBI;EACE,kBAAA;EACA,gBAAA;AF0BN;AEvBQ;EACE,mCAAA;EACA,0BAAA;AFyBV;AEvBU;EACE,wBAAA;AFyBZ;AErBQ;EACE,UAAA;EACA,cAAA;EACA,wBAAA;AFuBV;AElBI;EACE,kBAAA;EACA,MAAA;EACA,UAAA;EACA,gBAAA;EACA,mCAAA;EACA,kBAAA;EACA,4CC5DG;ED6DH,gBAAA;EACA,cAAA;EACA,gBAAA;EACA,UAAA;EACA,aAAA;EACA,4BAAA;EACA,wCACE;AFmBR;AEdE;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,kBAAA;EACA,0BAAA;EACA,qBAAA;EACA,eAAA;EACA,eAAA;EACA,iCAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AFgBJ;AEdI;EACE,mCAAA;EACA,0BAAA;AFgBN;AEbI;EACE,YAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,0BAAA;AFeN;AEXE;EACE;IACE,WAAA;IACA,gBAAA;EFaJ;EEXI;IACE,gBAAA;IACA,gBAAA;IACA,6BAAA;IACA,eAAA;IACA,cAAA;IACA,kBAAA;IACA,4CAAA;IACA,gBAAA;IACA,UAAA;IACA,aAAA;IACA,gBAAA;EFaN;EEVI;IACE,cAAA;IACA,UAAA;IACA,eAAA;EFYN;EERE;IACE,wBAAA;EFUJ;EEPE;IACE,yBAAA;EFSJ;AACF","file":"dropdown.css"}
package/css/editor.css DELETED
@@ -1,413 +0,0 @@
1
- /* ── Editor Component ───────────────────────────────────────────────── */
2
-
3
- .editor {
4
- background: var(--secondary-background);
5
- border: 1px solid var(--divider);
6
- border-radius: 0.5rem;
7
- box-shadow: 0 1px 3px rgba(56, 65, 74, 0.08), 0 1px 2px rgba(56, 65, 74, 0.06);
8
- display: flex;
9
- flex-direction: column;
10
- overflow: hidden;
11
- }
12
-
13
- /* ── Toolbar ───────────────────────────────────────────────────────── */
14
-
15
- .editor-toolbar {
16
- display: flex;
17
- align-items: center;
18
- gap: 0.25rem;
19
- padding: 0.35rem 0.5rem;
20
- border-bottom: 1px solid var(--divider);
21
- background: var(--secondary-background);
22
- overflow-x: auto;
23
- -webkit-overflow-scrolling: touch;
24
- scrollbar-width: none;
25
- }
26
- .editor-toolbar::-webkit-scrollbar {
27
- display: none;
28
- }
29
-
30
- .toolbar-group {
31
- display: flex;
32
- align-items: center;
33
- gap: 2px;
34
- }
35
-
36
- .toolbar-separator {
37
- width: 1px;
38
- height: 1.25rem;
39
- background: var(--divider);
40
- margin: 0 0.35rem;
41
- flex-shrink: 0;
42
- }
43
-
44
- .toolbar-end {
45
- display: flex;
46
- align-items: center;
47
- gap: 2px;
48
- margin-left: auto;
49
- padding-left: 0.5rem;
50
- }
51
-
52
- .editor-toolbar button {
53
- display: inline-flex;
54
- align-items: center;
55
- justify-content: center;
56
- width: 2rem;
57
- height: 2rem;
58
- padding: 0;
59
- border: none;
60
- border-radius: 0.25rem;
61
- background: transparent;
62
- color: var(--secondary-text);
63
- cursor: pointer;
64
- font-size: 0.8rem;
65
- font-weight: 600;
66
- transition: background 0.12s ease, color 0.12s ease;
67
- flex-shrink: 0;
68
- }
69
- .editor-toolbar button .icon {
70
- font-size: 1.15rem;
71
- }
72
- .editor-toolbar button:hover {
73
- background: var(--divider);
74
- color: var(--primary-text);
75
- filter: none;
76
- }
77
- .editor-toolbar button.active {
78
- background: color-mix(in srgb, var(--accent-color) 15%, transparent);
79
- color: var(--accent-color);
80
- }
81
-
82
- .toolbar-btn-accent {
83
- color: var(--accent-color) !important;
84
- }
85
- .toolbar-btn-accent:hover {
86
- background: color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
87
- }
88
-
89
- .toolbar-btn-danger:hover {
90
- background: color-mix(in srgb, var(--error) 12%, transparent) !important;
91
- color: var(--error) !important;
92
- }
93
-
94
- /* ── Editor Body ───────────────────────────────────────────────────── */
95
-
96
- .editor-body {
97
- display: flex;
98
- flex: 1;
99
- min-height: 0;
100
- }
101
-
102
- .editor-main {
103
- flex: 1;
104
- display: flex;
105
- flex-direction: column;
106
- min-width: 0;
107
- }
108
-
109
- .editable {
110
- flex: 1;
111
- padding: 1.25rem 1.5rem;
112
- outline: none;
113
- overflow-y: auto;
114
- min-height: 360px;
115
- max-height: 70vh;
116
- color: var(--primary-text);
117
- line-height: 1.7;
118
- font-size: 1rem;
119
- background: var(--background);
120
- }
121
- .editable:empty::before {
122
- content: "Start typing...";
123
- color: var(--disabled);
124
- pointer-events: none;
125
- }
126
- .editable h1 {
127
- font-size: 1.75rem;
128
- font-weight: 700;
129
- margin: 0.6rem 0 0.5rem;
130
- line-height: 1.3;
131
- }
132
- .editable h2 {
133
- font-size: 1.35rem;
134
- font-weight: 600;
135
- margin: 0.5rem 0 0.4rem;
136
- line-height: 1.3;
137
- }
138
- .editable p {
139
- margin-bottom: 0.5rem;
140
- }
141
- .editable ul,
142
- .editable ol {
143
- margin-left: 1.5rem;
144
- margin-bottom: 0.5rem;
145
- }
146
- .editable ul {
147
- list-style: disc;
148
- }
149
- .editable ol {
150
- list-style: decimal;
151
- }
152
- .editable li {
153
- margin-bottom: 0.2rem;
154
- line-height: 1.6;
155
- }
156
- .editable img {
157
- max-width: 100%;
158
- height: auto;
159
- border-radius: 0.35rem;
160
- margin: 0.5rem 0;
161
- }
162
- .editable a {
163
- color: var(--accent-color);
164
- text-decoration: underline;
165
- text-underline-offset: 2px;
166
- }
167
- .editable blockquote {
168
- border-left: 3px solid var(--accent-color);
169
- padding-left: 1rem;
170
- margin: 0.5rem 0;
171
- color: var(--secondary-text);
172
- }
173
-
174
- /* ── Side Panel ────────────────────────────────────────────────────── */
175
-
176
- .editor-side {
177
- width: 340px;
178
- min-width: 260px;
179
- border-left: 1px solid var(--divider);
180
- display: flex;
181
- flex-direction: column;
182
- background: var(--secondary-background);
183
- }
184
- .editor-side.hidden {
185
- display: none;
186
- }
187
-
188
- .side-tabs {
189
- display: flex;
190
- border-bottom: 1px solid var(--divider);
191
- padding: 0 0.5rem;
192
- }
193
- .side-tab {
194
- padding: 0.5rem 0.85rem;
195
- font-size: 0.8rem;
196
- font-weight: 500;
197
- color: var(--secondary-text);
198
- background: none;
199
- border: none;
200
- border-bottom: 2px solid transparent;
201
- cursor: pointer;
202
- transition: color 0.15s ease, border-color 0.15s ease;
203
- }
204
- .side-tab:hover {
205
- color: var(--primary-text);
206
- filter: none;
207
- }
208
- .side-tab.active {
209
- color: var(--accent-color);
210
- border-bottom-color: var(--accent-color);
211
- }
212
-
213
- .side-panels {
214
- flex: 1;
215
- overflow: hidden;
216
- display: flex;
217
- flex-direction: column;
218
- }
219
-
220
- .side-panel {
221
- display: none;
222
- flex-direction: column;
223
- flex: 1;
224
- padding: 0.75rem;
225
- overflow: hidden;
226
- }
227
- .side-panel.active {
228
- display: flex;
229
- }
230
-
231
- .side-panel textarea {
232
- flex: 1;
233
- min-height: 200px;
234
- font-family: "Courier New", monospace;
235
- font-size: 0.8rem;
236
- line-height: 1.5;
237
- resize: none;
238
- border-color: var(--divider);
239
- background: var(--background);
240
- color: var(--primary-text);
241
- border-radius: 0.3rem;
242
- padding: 0.75rem;
243
- tab-size: 2;
244
- }
245
-
246
- .code-actions {
247
- display: flex;
248
- gap: 0.35rem;
249
- margin-top: 0.5rem;
250
- }
251
- .code-actions button {
252
- flex: 1;
253
- padding: 0.35rem 0.5rem;
254
- font-size: 0.75rem;
255
- font-weight: 500;
256
- border-radius: 0.25rem;
257
- background: var(--divider);
258
- color: var(--primary-text);
259
- border: none;
260
- cursor: pointer;
261
- transition: filter 0.12s ease;
262
- }
263
- .code-actions button:hover {
264
- filter: brightness(110%);
265
- }
266
-
267
- .preview-content {
268
- flex: 1;
269
- overflow-y: auto;
270
- padding: 0.75rem;
271
- background: var(--background);
272
- border: 1px solid var(--divider);
273
- border-radius: 0.3rem;
274
- line-height: 1.6;
275
- font-size: 0.9rem;
276
- color: var(--primary-text);
277
- }
278
- .preview-content h1 {
279
- font-size: 1.5rem;
280
- font-weight: 700;
281
- margin-bottom: 0.4rem;
282
- }
283
- .preview-content h2 {
284
- font-size: 1.2rem;
285
- font-weight: 600;
286
- margin-bottom: 0.3rem;
287
- }
288
- .preview-content p {
289
- margin-bottom: 0.4rem;
290
- }
291
- .preview-content ul,
292
- .preview-content ol {
293
- margin-left: 1.25rem;
294
- margin-bottom: 0.4rem;
295
- }
296
- .preview-content ul {
297
- list-style: disc;
298
- }
299
- .preview-content ol {
300
- list-style: decimal;
301
- }
302
- .preview-content img {
303
- max-width: 100%;
304
- height: auto;
305
- }
306
-
307
- /* ── Footer ────────────────────────────────────────────────────────── */
308
-
309
- .editor-footer {
310
- display: flex;
311
- align-items: center;
312
- justify-content: space-between;
313
- padding: 0.4rem 0.75rem;
314
- border-top: 1px solid var(--divider);
315
- background: var(--secondary-background);
316
- font-size: 0.75rem;
317
- color: var(--secondary-text);
318
- gap: 1rem;
319
- }
320
-
321
- .editor-wordcount {
322
- white-space: nowrap;
323
- }
324
-
325
- .editor-shortcuts {
326
- display: flex;
327
- align-items: center;
328
- gap: 0.65rem;
329
- overflow: hidden;
330
- white-space: nowrap;
331
- }
332
- .editor-shortcuts kbd {
333
- display: inline-block;
334
- padding: 0.1rem 0.35rem;
335
- font-family: inherit;
336
- font-size: 0.65rem;
337
- font-weight: 600;
338
- color: var(--secondary-text);
339
- background: var(--divider);
340
- border-radius: 0.2rem;
341
- margin-right: 0.15rem;
342
- }
343
-
344
- /* ── Icon overrides (Material Symbols not in style.css) ──────────── */
345
-
346
- .icon-strikethrough::before {
347
- content: "\e257";
348
- }
349
- .icon-format_paragraph::before {
350
- content: "\e264";
351
- }
352
- .icon-link::before {
353
- content: "\e157";
354
- }
355
- .icon-format_clear::before {
356
- content: "\e239";
357
- }
358
- .icon-undo::before {
359
- content: "\e166";
360
- }
361
- .icon-redo::before {
362
- content: "\e15a";
363
- }
364
- .icon-code::before {
365
- content: "\e86f";
366
- }
367
-
368
- /* ── Responsive ────────────────────────────────────────────────────── */
369
-
370
- @media screen and (max-width: 768px) {
371
- .editor-body {
372
- flex-direction: column;
373
- }
374
- .editor-side {
375
- width: 100%;
376
- min-width: 0;
377
- border-left: none;
378
- border-top: 1px solid var(--divider);
379
- max-height: 50vh;
380
- }
381
- .editable {
382
- min-height: 220px;
383
- max-height: 50vh;
384
- padding: 1rem;
385
- }
386
- .editor-toolbar {
387
- gap: 1px;
388
- padding: 0.25rem;
389
- }
390
- .editor-toolbar button {
391
- width: 1.85rem;
392
- height: 1.85rem;
393
- }
394
- .toolbar-separator {
395
- margin: 0 0.2rem;
396
- }
397
- .editor-shortcuts {
398
- display: none;
399
- }
400
- }
401
-
402
- @media screen and (max-width: 480px) {
403
- .toolbar-end {
404
- padding-left: 0.25rem;
405
- }
406
- .editor-toolbar button {
407
- width: 1.75rem;
408
- height: 1.75rem;
409
- }
410
- .editor-toolbar button .icon {
411
- font-size: 1.05rem;
412
- }
413
- }