@fsegurai/marked-extended-tabs 17.0.0-beta.5 → 17.0.0-beta.7

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 (6) hide show
  1. package/dist/styles/README.md +23 -19
  2. package/dist/styles/tabs-theme.css +273 -23
  3. package/dist/styles/tabs-theme.scss +287 -20
  4. package/dist/styles/tabs.css +43 -72
  5. package/dist/styles/tabs.scss +5 -31
  6. package/package.json +1 -1
package/dist/styles/README.md CHANGED
@@ -1,32 +1,36 @@
1
- # Tabs Styles
1
+ # Marked Extended Tabs - Styles
2
2
 
3
- This directory contains CSS/SCSS files for the `marked-extended-tabs` extension.
3
+ This directory contains the CSS and SCSS files for styling the tabs component.
4
4
 
5
- Files:
5
+ ## Quick Start
6
6
 
7
- - `tabs.css` / `tabs.scss` - Minimal structural styles for tabs navigation and content panels.
8
- - `tabs-theme.css` / `tabs-theme.scss` - Optional theme styles (colors, active state).
9
-
10
- Usage:
11
-
12
- In JS/TS:
7
+ ### Minimal Setup (CSS)
8
+ ```javascript
9
+ import '@fsegurai/marked-extended-tabs/styles/tabs.css';
10
+ ```
13
11
 
14
- ```js
12
+ ### With Theme (CSS)
13
+ ```javascript
15
14
  import '@fsegurai/marked-extended-tabs/styles/tabs.css';
16
15
  import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
17
16
  ```
18
17
 
19
- In CSS:
18
+ ### Using CDN
19
+ ```html
20
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-tabs@latest/dist/styles/tabs.css">
21
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-tabs@latest/dist/styles/tabs-theme.css">
22
+ ```
20
23
 
21
- ```css
22
- @import '@fsegurai/marked-extended-tabs/styles/tabs.css';
23
- @import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
24
+ ### Using SCSS
25
+ ```scss
26
+ @import '@fsegurai/marked-extended-tabs/styles/tabs.scss';
27
+ @import '@fsegurai/marked-extended-tabs/styles/tabs-theme.scss';
24
28
  ```
25
29
 
26
- In plain HTML (node_modules):
30
+ ## Files
27
31
 
28
- ```html
29
- <link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tabs/styles/tabs.css">
30
- <link rel="stylesheet" href="node_modules/@fsegurai/marked-extended-tabs/styles/tabs-theme.css">
31
- ```
32
+ - **tabs.css** - Minimal structural CSS (required)
33
+ - **tabs.scss** - SCSS with customizable variables
34
+ - **tabs-theme.css** - Complete theme with hover previews
35
+ - **tabs-theme.scss** - SCSS theme with customizable colors
32
36
 
package/dist/styles/tabs-theme.css CHANGED
@@ -1,40 +1,290 @@
1
1
  /**
2
- * Marked Extended Tabs - Theme Styles
3
- * Optional color and visual styling for tabs
4
- *
5
- * Import this file if you want the default theme:
6
- * @import '@fsegurai/marked-extended-tabs/styles/tabs-theme.css';
2
+ * Marked Extended Tabs - Full Theme
3
+ * Includes structural rules plus visual defaults.
7
4
  */
8
5
 
9
- /* CSS Variables for theming */
10
6
  :root {
11
- --marked-extended-tabs-background: #ffffff;
12
- --marked-extended-tabs-border-color: #e0e0e0;
13
- --marked-extended-tabs-label-color: #555555;
14
- --marked-extended-tabs-label-hover-background: #f5f5f5;
15
- --marked-extended-tabs-selected-background: #fafafa;
16
- --marked-extended-tabs-selected-border-color: #007bff;
17
- --marked-extended-tabs-selected-color: #004085;
18
- --marked-extended-tabs-content-background: #ffffff;
7
+ --marked-extended-tabs-border-color: #ddd;
8
+ --marked-extended-tabs-border-radius: 4px;
9
+ --marked-extended-tabs-container-bg: #fff;
10
+ --marked-extended-tabs-container-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
11
+ --marked-extended-tabs-nav-bg: #f5f5f5;
12
+ --marked-extended-tabs-nav-border-color: #ddd;
13
+ --marked-extended-tabs-label-color: #333;
14
+ --marked-extended-tabs-label-bg: transparent;
15
+ --marked-extended-tabs-label-hover-bg: #e8e8e8;
16
+ --marked-extended-tabs-label-hover-color: #222;
17
+ --marked-extended-tabs-selected-background: #fff;
18
+ --marked-extended-tabs-selected-border-color: #0066cc;
19
+ --marked-extended-tabs-selected-color: #0066cc;
20
+ --marked-extended-tabs-content-background: #fff;
21
+ --marked-extended-tabs-content-color: inherit;
22
+ --marked-extended-tabs-focus-outline: #4a9eff;
23
+ --marked-extended-tabs-scrollbar-track: #f1f1f1;
24
+ --marked-extended-tabs-scrollbar-thumb: #888;
25
+ --marked-extended-tabs-scrollbar-thumb-hover: #555;
26
+ --marked-extended-tabs-transition: all 0.2s ease;
27
+ --marked-extended-tabs-pills-nav-bg: #f8f9fa;
28
+ --marked-extended-tabs-pills-hover-bg: #e9ecef;
19
29
  }
20
30
 
21
- /* Container theming */
22
31
  .marked-extended-tabs-container {
23
- background: var(--marked-extended-tabs-background);
24
- border-color: var(--marked-extended-tabs-border-color);
32
+ display: block;
33
+ margin: 1rem 0;
34
+ border: 1px solid var(--marked-extended-tabs-border-color, #ddd);
35
+ border-radius: var(--marked-extended-tabs-border-radius, 4px);
36
+ background: var(--marked-extended-tabs-container-bg, #fff);
37
+ box-shadow: var(--marked-extended-tabs-container-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
38
+ overflow: hidden;
39
+ }
40
+
41
+ .marked-extended-tabs-container .marked-extended-tabs-input {
42
+ position: absolute;
43
+ opacity: 0;
44
+ pointer-events: none;
45
+ }
46
+
47
+ .marked-extended-tabs-container .marked-extended-tabs-nav {
48
+ display: flex;
49
+ justify-content: space-evenly;
50
+ margin: 0;
51
+ padding: 0;
52
+ list-style: none;
53
+ overflow-x: auto;
54
+ background: var(--marked-extended-tabs-nav-bg, #f5f5f5);
55
+ border-bottom: 1px solid var(--marked-extended-tabs-nav-border-color, #ddd);
56
+ scrollbar-width: thin;
25
57
  }
26
58
 
27
- /* Tab label theming */
28
59
  .marked-extended-tabs-container .marked-extended-tabs-label {
29
- color: var(--marked-extended-tabs-label-color);
60
+ display: flex;
61
+ flex: 1 1 auto;
62
+ justify-content: center;
63
+ align-items: center;
64
+ flex-direction: row;
65
+ flex-wrap: wrap;
66
+ gap: 0.5rem;
67
+ padding: 0.75rem 1rem;
68
+ font-size: 1rem;
69
+ font-weight: 500;
70
+ text-align: center;
71
+ white-space: nowrap;
72
+ cursor: pointer;
73
+ color: var(--marked-extended-tabs-label-color, #333);
74
+ background: var(--marked-extended-tabs-label-bg, transparent);
75
+ border: 0;
76
+ border-bottom: 2px solid transparent;
77
+ transition: var(--marked-extended-tabs-transition, all 0.2s ease);
30
78
  }
31
79
 
32
- /* Tab label hover state */
33
80
  .marked-extended-tabs-container .marked-extended-tabs-label:hover {
34
- background: var(--marked-extended-tabs-label-hover-background);
81
+ background: var(--marked-extended-tabs-label-hover-bg, #e8e8e8);
82
+ color: var(--marked-extended-tabs-label-hover-color, #222);
83
+ }
84
+
85
+ .marked-extended-tabs-container .marked-extended-tabs-label.active,
86
+ .marked-extended-tabs-container .marked-extended-tabs-label[aria-selected='true'] {
87
+ background: var(--marked-extended-tabs-selected-background, #fff);
88
+ border-bottom-color: var(--marked-extended-tabs-selected-border-color, #0066cc);
89
+ color: var(--marked-extended-tabs-selected-color, #0066cc);
90
+ font-weight: 600;
91
+ }
92
+
93
+ .marked-extended-tabs-container .marked-extended-tabs-input:focus-visible + .marked-extended-tabs-label,
94
+ .marked-extended-tabs-container .marked-extended-tabs-label:focus-visible {
95
+ outline: 2px solid var(--marked-extended-tabs-focus-outline, #4a9eff);
96
+ outline-offset: 2px;
97
+ }
98
+
99
+ .marked-extended-tabs-container .marked-extended-tabs-icon {
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ font-size: 1.2rem;
104
+ opacity: 0.8;
35
105
  }
36
106
 
37
- /* Content area theming */
38
107
  .marked-extended-tabs-container .marked-extended-tabs-content {
39
- background: var(--marked-extended-tabs-content-background);
108
+ padding: 1rem;
109
+ background: var(--marked-extended-tabs-content-background, #fff);
110
+ color: var(--marked-extended-tabs-content-color, inherit);
111
+ }
112
+
113
+ .marked-extended-tabs-container .marked-extended-tabs-content-pane {
114
+ display: none;
115
+ }
116
+
117
+ .marked-extended-tabs-container .marked-extended-tabs-content img {
118
+ max-width: 100%;
119
+ width: 100%;
120
+ height: auto;
121
+ display: block;
122
+ object-fit: cover;
123
+ margin: 0;
124
+ }
125
+
126
+ .marked-extended-tabs-container .marked-extended-tabs-nav::-webkit-scrollbar {
127
+ height: 4px;
128
+ }
129
+
130
+ .marked-extended-tabs-container .marked-extended-tabs-nav::-webkit-scrollbar-track {
131
+ background: var(--marked-extended-tabs-scrollbar-track, #f1f1f1);
132
+ }
133
+
134
+ .marked-extended-tabs-container .marked-extended-tabs-nav::-webkit-scrollbar-thumb {
135
+ background: var(--marked-extended-tabs-scrollbar-thumb, #888);
136
+ border-radius: 2px;
137
+ }
138
+
139
+ .marked-extended-tabs-container .marked-extended-tabs-nav::-webkit-scrollbar-thumb:hover {
140
+ background: var(--marked-extended-tabs-scrollbar-thumb-hover, #555);
141
+ }
142
+
143
+ @keyframes tab-fade-in {
144
+ from {
145
+ opacity: 0;
146
+ }
147
+ to {
148
+ opacity: 1;
149
+ }
150
+ }
151
+
152
+ @keyframes tab-slide-in {
153
+ from {
154
+ transform: translateY(10px);
155
+ opacity: 0;
156
+ }
157
+ to {
158
+ transform: translateY(0);
159
+ opacity: 1;
160
+ }
161
+ }
162
+
163
+ .marked-extended-tabs-container.tabs-compact .marked-extended-tabs-label {
164
+ padding: 0.5rem 0.75rem;
165
+ font-size: 0.875rem;
166
+ }
167
+
168
+ .marked-extended-tabs-container.tabs-compact .marked-extended-tabs-content {
169
+ padding: 0.75rem;
170
+ }
171
+
172
+ .marked-extended-tabs-container.tabs-vertical {
173
+ display: flex;
174
+ flex-direction: row;
175
+ }
176
+
177
+ .marked-extended-tabs-container.tabs-vertical .marked-extended-tabs-nav {
178
+ flex-direction: column;
179
+ min-width: 200px;
180
+ border-bottom: 0;
181
+ border-right: 1px solid var(--marked-extended-tabs-border-color, #ddd);
182
+ }
183
+
184
+ .marked-extended-tabs-container.tabs-vertical .marked-extended-tabs-label {
185
+ border-bottom: 0;
186
+ border-right: 2px solid transparent;
187
+ justify-content: flex-start;
188
+ text-align: left;
189
+ }
190
+
191
+ .marked-extended-tabs-container.tabs-vertical .marked-extended-tabs-label.active,
192
+ .marked-extended-tabs-container.tabs-vertical .marked-extended-tabs-label[aria-selected='true'] {
193
+ border-right-color: var(--marked-extended-tabs-selected-border-color, #0066cc);
194
+ }
195
+
196
+ .marked-extended-tabs-container.tabs-vertical .marked-extended-tabs-content {
197
+ flex: 1;
198
+ }
199
+
200
+ .marked-extended-tabs-container.tabs-pills .marked-extended-tabs-nav {
201
+ gap: 0.5rem;
202
+ padding: 0.5rem;
203
+ border-bottom: 0;
204
+ background: var(--marked-extended-tabs-pills-nav-bg, #f8f9fa);
205
+ }
206
+
207
+ .marked-extended-tabs-container.tabs-pills .marked-extended-tabs-label {
208
+ border-bottom: 0;
209
+ border-radius: 20px;
210
+ padding: 0.5rem 1rem;
211
+ }
212
+
213
+ .marked-extended-tabs-container.tabs-pills .marked-extended-tabs-label:hover {
214
+ background: var(--marked-extended-tabs-pills-hover-bg, #e9ecef);
215
+ }
216
+
217
+ body.dark {
218
+ --marked-extended-tabs-border-color: #444c56;
219
+ --marked-extended-tabs-container-bg: #22272e;
220
+ --marked-extended-tabs-container-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
221
+ --marked-extended-tabs-nav-bg: #2d333b;
222
+ --marked-extended-tabs-nav-border-color: #444c56;
223
+ --marked-extended-tabs-label-color: #d1d5da;
224
+ --marked-extended-tabs-label-hover-bg: #444c56;
225
+ --marked-extended-tabs-label-hover-color: #f0f6fc;
226
+ --marked-extended-tabs-selected-background: #3b4551;
227
+ --marked-extended-tabs-selected-border-color: #58a6ff;
228
+ --marked-extended-tabs-selected-color: #58a6ff;
229
+ --marked-extended-tabs-content-background: #22272e;
230
+ --marked-extended-tabs-content-color: #d1d5da;
231
+ --marked-extended-tabs-scrollbar-track: #2a2a2a;
232
+ --marked-extended-tabs-scrollbar-thumb: #555;
233
+ --marked-extended-tabs-scrollbar-thumb-hover: #777;
234
+ --marked-extended-tabs-pills-nav-bg: #2d333b;
235
+ --marked-extended-tabs-pills-hover-bg: #444c56;
236
+ }
237
+
238
+ @media (max-width: 768px) {
239
+ .marked-extended-tabs-container .marked-extended-tabs-label {
240
+ font-size: 0.9rem;
241
+ padding: 0.5rem 0.75rem;
242
+ gap: 0.4rem;
243
+ }
244
+
245
+ .marked-extended-tabs-container .marked-extended-tabs-icon {
246
+ font-size: 1rem;
247
+ }
248
+ }
249
+
250
+ @media (max-width: 480px) {
251
+ .marked-extended-tabs-container .marked-extended-tabs-label {
252
+ flex-direction: column;
253
+ padding: 0.5rem;
254
+ font-size: 0.85rem;
255
+ }
256
+
257
+ .marked-extended-tabs-container.tabs-vertical {
258
+ flex-direction: column;
259
+ }
260
+
261
+ .marked-extended-tabs-container.tabs-vertical .marked-extended-tabs-nav {
262
+ min-width: auto;
263
+ border-right: 0;
264
+ border-bottom: 1px solid var(--marked-extended-tabs-border-color, #ddd);
265
+ }
266
+ }
267
+
268
+ @media print {
269
+ .marked-extended-tabs-container {
270
+ border: 1px solid #000;
271
+ box-shadow: none;
272
+ }
273
+
274
+ .marked-extended-tabs-container .marked-extended-tabs-nav {
275
+ display: none;
276
+ }
277
+
278
+ .marked-extended-tabs-container .marked-extended-tabs-content .marked-extended-tabs-content-pane {
279
+ display: block !important;
280
+ page-break-inside: avoid;
281
+ border-top: 2px solid #000;
282
+ padding-top: 1rem;
283
+ margin-top: 1rem;
284
+ }
285
+
286
+ .marked-extended-tabs-container .marked-extended-tabs-content .marked-extended-tabs-content-pane:first-child {
287
+ border-top: 0;
288
+ margin-top: 0;
289
+ }
40
290
  }
package/dist/styles/tabs-theme.scss CHANGED
@@ -1,37 +1,304 @@
1
1
  /**
2
- * Marked Extended Tabs - Theme Styles (SCSS)
3
- * Optional color and visual styling for tabs
2
+ * Marked Extended Tabs - Full Theme (SCSS)
3
+ * Includes structural rules plus visual defaults.
4
4
  */
5
5
 
6
- /* CSS Variables for theming */
7
6
  :root {
8
- --marked-extended-tabs-background: #ffffff;
9
- --marked-extended-tabs-border-color: #e0e0e0;
10
- --marked-extended-tabs-label-color: #555555;
11
- --marked-extended-tabs-label-hover-background: #f5f5f5;
12
- --marked-extended-tabs-selected-background: #fafafa;
13
- --marked-extended-tabs-selected-border-color: #007bff;
14
- --marked-extended-tabs-selected-color: #004085;
15
- --marked-extended-tabs-content-background: #ffffff;
7
+ --marked-extended-tabs-border-color: #ddd;
8
+ --marked-extended-tabs-border-radius: 4px;
9
+ --marked-extended-tabs-container-bg: #fff;
10
+ --marked-extended-tabs-container-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
11
+ --marked-extended-tabs-nav-bg: #f5f5f5;
12
+ --marked-extended-tabs-nav-border-color: #ddd;
13
+ --marked-extended-tabs-label-color: #333;
14
+ --marked-extended-tabs-label-bg: transparent;
15
+ --marked-extended-tabs-label-hover-bg: #e8e8e8;
16
+ --marked-extended-tabs-label-hover-color: #222;
17
+ --marked-extended-tabs-selected-background: #fff;
18
+ --marked-extended-tabs-selected-border-color: #0066cc;
19
+ --marked-extended-tabs-selected-color: #0066cc;
20
+ --marked-extended-tabs-content-background: #fff;
21
+ --marked-extended-tabs-content-color: inherit;
22
+ --marked-extended-tabs-focus-outline: #4a9eff;
23
+ --marked-extended-tabs-scrollbar-track: #f1f1f1;
24
+ --marked-extended-tabs-scrollbar-thumb: #888;
25
+ --marked-extended-tabs-scrollbar-thumb-hover: #555;
26
+ --marked-extended-tabs-transition: all 0.2s ease;
27
+ --marked-extended-tabs-pills-nav-bg: #f8f9fa;
28
+ --marked-extended-tabs-pills-hover-bg: #e9ecef;
16
29
  }
17
30
 
18
- /* Container and label theming */
19
31
  .marked-extended-tabs-container {
20
- background: var(--marked-extended-tabs-background);
21
- border-color: var(--marked-extended-tabs-border-color);
32
+ display: block;
33
+ margin: 1rem 0;
34
+ border: 1px solid var(--marked-extended-tabs-border-color, #ddd);
35
+ border-radius: var(--marked-extended-tabs-border-radius, 4px);
36
+ background: var(--marked-extended-tabs-container-bg, #fff);
37
+ box-shadow: var(--marked-extended-tabs-container-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
38
+ overflow: hidden;
39
+
40
+ .marked-extended-tabs-input {
41
+ position: absolute;
42
+ opacity: 0;
43
+ pointer-events: none;
44
+ }
45
+
46
+ .marked-extended-tabs-nav {
47
+ display: flex;
48
+ justify-content: space-evenly;
49
+ margin: 0;
50
+ padding: 0;
51
+ list-style: none;
52
+ overflow-x: auto;
53
+ background: var(--marked-extended-tabs-nav-bg, #f5f5f5);
54
+ border-bottom: 1px solid var(--marked-extended-tabs-nav-border-color, #ddd);
55
+ scrollbar-width: thin;
56
+
57
+ &::-webkit-scrollbar {
58
+ height: 4px;
59
+ }
60
+
61
+ &::-webkit-scrollbar-track {
62
+ background: var(--marked-extended-tabs-scrollbar-track, #f1f1f1);
63
+ }
64
+
65
+ &::-webkit-scrollbar-thumb {
66
+ background: var(--marked-extended-tabs-scrollbar-thumb, #888);
67
+ border-radius: 2px;
68
+
69
+ &:hover {
70
+ background: var(--marked-extended-tabs-scrollbar-thumb-hover, #555);
71
+ }
72
+ }
73
+ }
22
74
 
23
- /* Tab label theming */
24
75
  .marked-extended-tabs-label {
25
- color: var(--marked-extended-tabs-label-color);
76
+ display: flex;
77
+ flex: 1 1 auto;
78
+ justify-content: center;
79
+ align-items: center;
80
+ flex-direction: row;
81
+ flex-wrap: wrap;
82
+ gap: 0.5rem;
83
+ padding: 0.75rem 1rem;
84
+ font-size: 1rem;
85
+ font-weight: 500;
86
+ text-align: center;
87
+ white-space: nowrap;
88
+ cursor: pointer;
89
+ color: var(--marked-extended-tabs-label-color, #333);
90
+ background: var(--marked-extended-tabs-label-bg, transparent);
91
+ border: 0;
92
+ border-bottom: 2px solid transparent;
93
+ transition: var(--marked-extended-tabs-transition, all 0.2s ease);
26
94
 
27
- /* Tab label hover state */
28
95
  &:hover {
29
- background: var(--marked-extended-tabs-label-hover-background);
96
+ background: var(--marked-extended-tabs-label-hover-bg, #e8e8e8);
97
+ color: var(--marked-extended-tabs-label-hover-color, #222);
98
+ }
99
+
100
+ &.active,
101
+ &[aria-selected='true'] {
102
+ background: var(--marked-extended-tabs-selected-background, #fff);
103
+ border-bottom-color: var(--marked-extended-tabs-selected-border-color, #0066cc);
104
+ color: var(--marked-extended-tabs-selected-color, #0066cc);
105
+ font-weight: 600;
106
+ }
107
+
108
+ &:focus-visible {
109
+ outline: 2px solid var(--marked-extended-tabs-focus-outline, #4a9eff);
110
+ outline-offset: 2px;
30
111
  }
31
112
  }
32
113
 
33
- /* Content area theming */
114
+ .marked-extended-tabs-input:focus-visible + .marked-extended-tabs-label {
115
+ outline: 2px solid var(--marked-extended-tabs-focus-outline, #4a9eff);
116
+ outline-offset: 2px;
117
+ }
118
+
119
+ .marked-extended-tabs-icon {
120
+ display: inline-flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ font-size: 1.2rem;
124
+ opacity: 0.8;
125
+ }
126
+
34
127
  .marked-extended-tabs-content {
35
- background: var(--marked-extended-tabs-content-background);
128
+ padding: 1rem;
129
+ background: var(--marked-extended-tabs-content-background, #fff);
130
+ color: var(--marked-extended-tabs-content-color, inherit);
131
+
132
+ img {
133
+ max-width: 100%;
134
+ width: 100%;
135
+ height: auto;
136
+ display: block;
137
+ object-fit: cover;
138
+ margin: 0;
139
+ }
140
+ }
141
+
142
+ .marked-extended-tabs-content-pane {
143
+ display: none;
144
+ }
145
+
146
+ &.tabs-compact {
147
+ .marked-extended-tabs-label {
148
+ padding: 0.5rem 0.75rem;
149
+ font-size: 0.875rem;
150
+ }
151
+
152
+ .marked-extended-tabs-content {
153
+ padding: 0.75rem;
154
+ }
155
+ }
156
+
157
+ &.tabs-vertical {
158
+ display: flex;
159
+ flex-direction: row;
160
+
161
+ .marked-extended-tabs-nav {
162
+ flex-direction: column;
163
+ min-width: 200px;
164
+ border-bottom: 0;
165
+ border-right: 1px solid var(--marked-extended-tabs-border-color, #ddd);
166
+ }
167
+
168
+ .marked-extended-tabs-label {
169
+ border-bottom: 0;
170
+ border-right: 2px solid transparent;
171
+ justify-content: flex-start;
172
+ text-align: left;
173
+
174
+ &.active,
175
+ &[aria-selected='true'] {
176
+ border-right-color: var(--marked-extended-tabs-selected-border-color, #0066cc);
177
+ }
178
+ }
179
+
180
+ .marked-extended-tabs-content {
181
+ flex: 1;
182
+ }
183
+ }
184
+
185
+ &.tabs-pills {
186
+ .marked-extended-tabs-nav {
187
+ gap: 0.5rem;
188
+ padding: 0.5rem;
189
+ border-bottom: 0;
190
+ background: var(--marked-extended-tabs-pills-nav-bg, #f8f9fa);
191
+ }
192
+
193
+ .marked-extended-tabs-label {
194
+ border-bottom: 0;
195
+ border-radius: 20px;
196
+ padding: 0.5rem 1rem;
197
+
198
+ &:hover {
199
+ background: var(--marked-extended-tabs-pills-hover-bg, #e9ecef);
200
+ }
201
+ }
202
+ }
203
+ }
204
+
205
+ @keyframes tab-fade-in {
206
+ from {
207
+ opacity: 0;
208
+ }
209
+ to {
210
+ opacity: 1;
211
+ }
212
+ }
213
+
214
+ @keyframes tab-slide-in {
215
+ from {
216
+ transform: translateY(10px);
217
+ opacity: 0;
218
+ }
219
+ to {
220
+ transform: translateY(0);
221
+ opacity: 1;
222
+ }
223
+ }
224
+
225
+ body.dark {
226
+ --marked-extended-tabs-border-color: #444c56;
227
+ --marked-extended-tabs-container-bg: #22272e;
228
+ --marked-extended-tabs-container-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
229
+ --marked-extended-tabs-nav-bg: #2d333b;
230
+ --marked-extended-tabs-nav-border-color: #444c56;
231
+ --marked-extended-tabs-label-color: #d1d5da;
232
+ --marked-extended-tabs-label-hover-bg: #444c56;
233
+ --marked-extended-tabs-label-hover-color: #f0f6fc;
234
+ --marked-extended-tabs-selected-background: #3b4551;
235
+ --marked-extended-tabs-selected-border-color: #58a6ff;
236
+ --marked-extended-tabs-selected-color: #58a6ff;
237
+ --marked-extended-tabs-content-background: #22272e;
238
+ --marked-extended-tabs-content-color: #d1d5da;
239
+ --marked-extended-tabs-scrollbar-track: #2a2a2a;
240
+ --marked-extended-tabs-scrollbar-thumb: #555;
241
+ --marked-extended-tabs-scrollbar-thumb-hover: #777;
242
+ --marked-extended-tabs-pills-nav-bg: #2d333b;
243
+ --marked-extended-tabs-pills-hover-bg: #444c56;
244
+ }
245
+
246
+ @media (max-width: 768px) {
247
+ .marked-extended-tabs-container {
248
+ .marked-extended-tabs-label {
249
+ font-size: 0.9rem;
250
+ padding: 0.5rem 0.75rem;
251
+ gap: 0.4rem;
252
+ }
253
+
254
+ .marked-extended-tabs-icon {
255
+ font-size: 1rem;
256
+ }
257
+ }
258
+ }
259
+
260
+ @media (max-width: 480px) {
261
+ .marked-extended-tabs-container {
262
+ .marked-extended-tabs-label {
263
+ flex-direction: column;
264
+ padding: 0.5rem;
265
+ font-size: 0.85rem;
266
+ }
267
+
268
+ &.tabs-vertical {
269
+ flex-direction: column;
270
+
271
+ .marked-extended-tabs-nav {
272
+ min-width: auto;
273
+ border-right: 0;
274
+ border-bottom: 1px solid var(--marked-extended-tabs-border-color, #ddd);
275
+ }
276
+ }
277
+ }
278
+ }
279
+
280
+ @media print {
281
+ .marked-extended-tabs-container {
282
+ border: 1px solid #000;
283
+ box-shadow: none;
284
+
285
+ .marked-extended-tabs-nav {
286
+ display: none;
287
+ }
288
+
289
+ .marked-extended-tabs-content {
290
+ .marked-extended-tabs-content-pane {
291
+ display: block !important;
292
+ page-break-inside: avoid;
293
+ border-top: 2px solid #000;
294
+ padding-top: 1rem;
295
+ margin-top: 1rem;
296
+
297
+ &:first-child {
298
+ border-top: 0;
299
+ margin-top: 0;
300
+ }
301
+ }
302
+ }
36
303
  }
37
304
  }
package/dist/styles/tabs.css CHANGED
@@ -1,107 +1,78 @@
1
1
  /**
2
2
  * Marked Extended Tabs - Structural Styles
3
- * Minimal CSS required for tabs functionality
3
+ * Minimal CSS required for tabs functionality.
4
4
  *
5
- * Import this file if you want the basic tabs structure:
5
+ * Import this file when you want to fully customize visuals:
6
6
  * @import '@fsegurai/marked-extended-tabs/styles/tabs.css';
7
7
  */
8
8
 
9
- /* Main container */
10
9
  .marked-extended-tabs-container {
11
- display: block;
12
- margin: 1rem 0;
13
- border: 1px solid transparent;
14
- border-radius: 4px;
15
- overflow: hidden;
10
+ display: block;
11
+ margin: 1rem 0;
16
12
  }
17
13
 
18
- /* Hide radio inputs (CSS-only approach) */
19
14
  .marked-extended-tabs-container .marked-extended-tabs-input {
20
- position: absolute;
21
- opacity: 0;
22
- pointer-events: none;
15
+ position: absolute;
16
+ opacity: 0;
17
+ pointer-events: none;
23
18
  }
24
19
 
25
- /* Navigation container */
26
20
  .marked-extended-tabs-container .marked-extended-tabs-nav {
27
- display: flex;
28
- justify-content: space-evenly;
29
- margin: 0;
30
- padding: 0;
31
- list-style: none;
32
- overflow-x: auto;
21
+ display: flex;
22
+ justify-content: space-evenly;
23
+ margin: 0;
24
+ padding: 0;
25
+ list-style: none;
26
+ overflow-x: auto;
33
27
  }
34
28
 
35
- /* Tab labels (clickable) */
36
29
  .marked-extended-tabs-container .marked-extended-tabs-label {
37
- display: flex;
38
- flex: 1 1 auto;
39
- justify-content: center;
40
- align-items: center;
41
- flex-direction: row;
42
- flex-wrap: wrap;
43
- gap: 0.5rem;
44
- padding: 0.75rem 1rem;
45
- font-size: 1rem;
46
- font-weight: 500;
47
- text-align: center;
48
- cursor: pointer;
49
- background: transparent;
50
- border: none;
51
- border-bottom: 2px solid transparent;
52
- transition: all 0.2s ease;
30
+ display: flex;
31
+ flex: 1 1 auto;
32
+ justify-content: center;
33
+ align-items: center;
34
+ flex-direction: row;
35
+ flex-wrap: wrap;
36
+ gap: 0.5rem;
37
+ padding: 0.75rem 1rem;
38
+ text-align: center;
39
+ cursor: pointer;
40
+ border: 0;
53
41
  }
54
42
 
55
- /* Tab icon */
56
43
  .marked-extended-tabs-container .marked-extended-tabs-icon {
57
- display: inline-flex;
58
- align-items: center;
59
- justify-content: center;
60
- font-size: 1.2rem;
44
+ display: inline-flex;
45
+ align-items: center;
46
+ justify-content: center;
61
47
  }
62
48
 
63
- /* Content container */
64
49
  .marked-extended-tabs-container .marked-extended-tabs-content {
65
- padding: 1rem;
50
+ padding: 1rem;
66
51
  }
67
52
 
68
- /* Individual tab content panes (hidden by default) */
69
53
  .marked-extended-tabs-container .marked-extended-tabs-content-pane {
70
- display: none;
54
+ display: none;
71
55
  }
72
56
 
73
- /* Image handling in tab content */
74
57
  .marked-extended-tabs-container .marked-extended-tabs-content img {
75
- max-width: 100%;
76
- width: 100%;
77
- height: auto;
78
- display: block;
79
- object-fit: cover;
80
- margin: 0;
58
+ max-width: 100%;
59
+ width: 100%;
60
+ height: auto;
61
+ display: block;
62
+ object-fit: cover;
63
+ margin: 0;
81
64
  }
82
65
 
83
- /* Tablet responsiveness */
84
66
  @media (max-width: 768px) {
85
- .marked-extended-tabs-container .marked-extended-tabs-label {
86
- font-size: 0.9rem;
87
- padding: 0.5rem 0.75rem;
88
- gap: 0.4rem;
89
- }
90
-
91
- .marked-extended-tabs-container .marked-extended-tabs-icon {
92
- font-size: 1rem;
93
- }
67
+ .marked-extended-tabs-container .marked-extended-tabs-label {
68
+ padding: 0.5rem 0.75rem;
69
+ gap: 0.4rem;
70
+ }
94
71
  }
95
72
 
96
- /* Mobile responsiveness */
97
73
  @media (max-width: 480px) {
98
- .marked-extended-tabs-container .marked-extended-tabs-label {
99
- flex-direction: column;
100
- padding: 0.5rem;
101
- font-size: 0.85rem;
102
- }
103
-
104
- .marked-extended-tabs-container .marked-extended-tabs-icon {
105
- font-size: 1rem;
106
- }
74
+ .marked-extended-tabs-container .marked-extended-tabs-label {
75
+ flex-direction: column;
76
+ padding: 0.5rem;
77
+ }
107
78
  }
package/dist/styles/tabs.scss CHANGED
@@ -1,24 +1,21 @@
1
1
  /**
2
2
  * Marked Extended Tabs - Structural Styles (SCSS)
3
- * Minimal SCSS required for tabs functionality
3
+ * Minimal SCSS required for tabs functionality.
4
+ *
5
+ * Import this file when you want to fully customize visuals:
6
+ * @import '@fsegurai/marked-extended-tabs/styles/tabs.scss';
4
7
  */
5
8
 
6
- /* Main container */
7
9
  .marked-extended-tabs-container {
8
10
  display: block;
9
11
  margin: 1rem 0;
10
- border: 1px solid transparent;
11
- border-radius: 4px;
12
- overflow: hidden;
13
12
 
14
- /* Hide radio inputs (CSS-only approach) */
15
13
  .marked-extended-tabs-input {
16
14
  position: absolute;
17
15
  opacity: 0;
18
16
  pointer-events: none;
19
17
  }
20
18
 
21
- /* Navigation container */
22
19
  .marked-extended-tabs-nav {
23
20
  display: flex;
24
21
  justify-content: space-evenly;
@@ -28,7 +25,6 @@
28
25
  overflow-x: auto;
29
26
  }
30
27
 
31
- /* Tab labels (clickable) */
32
28
  .marked-extended-tabs-label {
33
29
  display: flex;
34
30
  flex: 1 1 auto;
@@ -38,29 +34,20 @@
38
34
  flex-wrap: wrap;
39
35
  gap: 0.5rem;
40
36
  padding: 0.75rem 1rem;
41
- font-size: 1rem;
42
- font-weight: 500;
43
37
  text-align: center;
44
38
  cursor: pointer;
45
- background: transparent;
46
- border: none;
47
- border-bottom: 2px solid transparent;
48
- transition: all 0.2s ease;
39
+ border: 0;
49
40
  }
50
41
 
51
- /* Tab icon */
52
42
  .marked-extended-tabs-icon {
53
43
  display: inline-flex;
54
44
  align-items: center;
55
45
  justify-content: center;
56
- font-size: 1.2rem;
57
46
  }
58
47
 
59
- /* Content container */
60
48
  .marked-extended-tabs-content {
61
49
  padding: 1rem;
62
50
 
63
- /* Image handling in tab content */
64
51
  img {
65
52
  max-width: 100%;
66
53
  width: 100%;
@@ -71,38 +58,25 @@
71
58
  }
72
59
  }
73
60
 
74
- /* Individual tab content panes (hidden by default) */
75
61
  .marked-extended-tabs-content-pane {
76
62
  display: none;
77
63
  }
78
64
  }
79
65
 
80
- /* Tablet responsiveness */
81
66
  @media (max-width: 768px) {
82
67
  .marked-extended-tabs-container {
83
68
  .marked-extended-tabs-label {
84
- font-size: 0.9rem;
85
69
  padding: 0.5rem 0.75rem;
86
70
  gap: 0.4rem;
87
71
  }
88
-
89
- .marked-extended-tabs-icon {
90
- font-size: 1rem;
91
- }
92
72
  }
93
73
  }
94
74
 
95
- /* Mobile responsiveness */
96
75
  @media (max-width: 480px) {
97
76
  .marked-extended-tabs-container {
98
77
  .marked-extended-tabs-label {
99
78
  flex-direction: column;
100
79
  padding: 0.5rem;
101
- font-size: 0.85rem;
102
- }
103
-
104
- .marked-extended-tabs-icon {
105
- font-size: 1rem;
106
80
  }
107
81
  }
108
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fsegurai/marked-extended-tabs",
3
- "version": "17.0.0-beta.5",
3
+ "version": "17.0.0-beta.7",
4
4
  "description": "Extension for Marked.js that adds support for extended tabs, allowing the creation of tabbed content sections within Markdown documents. It supports any Markdown rendering and can be customized to fit your needs.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",