Skip to content

Commit 4e37b02

Browse files
techlabtechlab
committed
Updated themes and demos, and a few optimizations
1 parent 0c56b17 commit 4e37b02

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+12477
-130
lines changed

‎README.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# jQuery Smart Tab v3
2-
#### The flexible jQuery tab control plugin.
2+
#### The flexible jQuery tab control plugin
33

44
[![Build Status](https://travis-ci.org/techlab/jquery-smarttab.svg?branch=master)](https://travis-ci.org/techlab/jquery-smarttab)
55
[![npm version](https://badge.fury.io/js/jquery-smarttab.svg)](https://badge.fury.io/js/jquery-smarttab)
@@ -9,6 +9,8 @@
99

1010
Smart Tab is a flexible and heavily customizable **jQuery Tab control plugin**.
1111

12+
> If you think it is cool, you should also check it's sibling [React Smart Tab](http://techlaboratory.net/react-smarttab)
13+
1214
+ [Homepage](http://techlaboratory.net/jquery-smarttab)
1315
+ [Documentation](http://techlaboratory.net/jquery-smarttab#documentation)
1416
+ [Demos](http://techlaboratory.net/jquery-smarttab#demo)
@@ -47,6 +49,24 @@ Installation
4749
### [Composer](https://packagist.org/packages/techlab/jquery-smarttab)
4850
composer require techlab/jquery-smarttab
4951

52+
### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/jquery-smarttab)
53+
```html
54+
<!-- CSS -->
55+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
56+
57+
<!-- JavaScript -->
58+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
59+
```
60+
61+
### [CDN - UNPKG](https://unpkg.com/browse/jquery-smarttab/)
62+
```html
63+
<!-- CSS -->
64+
<link href="https://unpkg.com/[email protected]/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
65+
66+
<!-- JavaScript -->
67+
<script src="https://unpkg.com/[email protected]/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
68+
```
69+
5070
### Download
5171
#### [Download from GitHub](https://github.com/techlab/jquery-smarttab/archive/master.zip)
5272

@@ -140,7 +160,8 @@ Initialize the jQuery SmartTab
140160
});
141161
</script>
142162
```
143-
That's it!
163+
That's it!
164+
144165
Please see the [documentation](http://techlaboratory.net/jquery-smarttab#documentation) for more details on implementation and usage.
145166

146167
##### All options

‎dist/css/smart_tab.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@
118118
position: absolute;
119119
top: 45%;
120120
left: 45%;
121-
width: 1em;
122-
height: 1em;
121+
width: 2rem;
122+
height: 2rem;
123123
border: 10px solid #f3f3f3;
124124
border-top: 10px solid #3498db;
125125
border-radius: 50%;

‎dist/css/smart_tab.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/smart_tab_all.css

Lines changed: 162 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@
118118
position: absolute;
119119
top: 45%;
120120
left: 45%;
121-
width: 1em;
122-
height: 1em;
121+
width: 2rem;
122+
height: 2rem;
123123
border: 10px solid #f3f3f3;
124124
border-top: 10px solid #3498db;
125125
border-radius: 50%;
@@ -319,25 +319,25 @@
319319
border-top-right-radius: unset;
320320
}
321321

322-
/* SmartTab Theme: BsTabs */
323-
.st-theme-bstabs {
322+
/* SmartTab Theme: Round */
323+
.st-theme-round {
324324
border: 1px solid #dee2e6;
325325
border-top-width: 0;
326326
border-radius: 8px;
327327
}
328328

329-
.st-theme-bstabs > .tab-content > .tab-pane {
329+
.st-theme-round > .tab-content > .tab-pane {
330330
padding: 10px;
331331
}
332332

333-
.st-theme-bstabs > .nav {
333+
.st-theme-round > .nav {
334334
background: #ffffff;
335335
border-bottom: 1px solid #dee2e6;
336336
margin-right: -1px;
337337
margin-left: -1px;
338338
}
339339

340-
.st-theme-bstabs > .nav .nav-link {
340+
.st-theme-round > .nav .nav-link {
341341
position: relative;
342342
background: transparent;
343343
height: 100%;
@@ -349,15 +349,15 @@
349349
background: #ffffff;
350350
}
351351

352-
.st-theme-bstabs > .nav .nav-link.active {
352+
.st-theme-round > .nav .nav-link.active {
353353
color: #495057 !important;
354354
border-color: #dee2e6 !important;
355355
cursor: pointer;
356356
border-top-left-radius: 8px;
357357
border-top-right-radius: 8px;
358358
}
359359

360-
.st-theme-bstabs > .nav .nav-link.active::after {
360+
.st-theme-round > .nav .nav-link.active::after {
361361
content: "";
362362
background: #ffffff;
363363
height: 1px;
@@ -367,16 +367,16 @@
367367
bottom: -1px;
368368
}
369369

370-
.st-theme-bstabs > .nav .nav-link.disabled {
370+
.st-theme-round > .nav .nav-link.disabled {
371371
color: #eeeeee !important;
372372
}
373373

374-
.st-theme-bstabs.st-vertical {
374+
.st-theme-round.st-vertical {
375375
border-top-width: 1px;
376376
border-left-width: 0;
377377
}
378378

379-
.st-theme-bstabs.st-vertical > .nav {
379+
.st-theme-round.st-vertical > .nav {
380380
border-right: 1px solid #dee2e6;
381381
border-bottom: unset;
382382
margin-top: -1px;
@@ -385,40 +385,180 @@
385385
margin-left: 0;
386386
}
387387

388-
.st-theme-bstabs.st-vertical > .nav .nav-link {
388+
.st-theme-round.st-vertical > .nav .nav-link {
389389
border-bottom-width: 1px;
390390
border-right-width: 0;
391391
}
392392

393-
.st-theme-bstabs.st-vertical > .nav .nav-link.active {
393+
.st-theme-round.st-vertical > .nav .nav-link.active {
394394
border-top-left-radius: 8px;
395395
border-bottom-left-radius: 8px;
396396
border-top-right-radius: unset;
397397
}
398398

399-
.st-theme-bstabs.st-vertical > .nav .nav-link.active::after {
399+
.st-theme-round.st-vertical > .nav .nav-link.active::after {
400400
height: 100%;
401401
width: 1px;
402402
top: 0px;
403403
left: auto;
404404
right: -1px;
405405
}
406406

407-
/* SmartTab Theme: BsPills */
408-
.st-theme-bspills > .tab-content > .tab-pane {
407+
/* SmartTab Theme: Pills */
408+
.st-theme-pills > .tab-content > .tab-pane {
409409
padding: 10px;
410410
}
411411

412-
.st-theme-bspills > .nav .nav-link {
412+
.st-theme-pills > .nav {
413+
background: #5bc0de;
414+
padding: 11px 23px;
415+
border-radius: 0.1875rem;
416+
}
417+
418+
.st-theme-pills > .nav .nav-link {
413419
height: 100%;
414420
min-height: 100%;
415-
color: #222 !important;
421+
color: #fff !important;
416422
padding: .5rem 1rem;
417-
border-radius: .25rem;
418423
}
419424

420-
.st-theme-bspills > .nav .nav-link.active {
425+
.st-theme-pills > .nav .nav-link.active {
421426
color: #fff !important;
422-
background: #007bff;
427+
background: rgba(255, 255, 255, 0.2);
428+
border-radius: 30px;
429+
cursor: pointer;
430+
}
431+
432+
/* SmartTab Theme: GitHub */
433+
.st-theme-github > .tab-content > .tab-pane {
434+
padding: 10px;
435+
}
436+
437+
.st-theme-github > .nav {
438+
background: #fafbfc;
439+
border-bottom: 1px solid #e1e4e8;
440+
margin-right: -1px;
441+
margin-left: -1px;
442+
}
443+
444+
.st-theme-github > .nav .nav-link {
445+
position: relative;
446+
background: transparent;
447+
height: 100%;
448+
min-height: 100%;
449+
color: #586069;
450+
padding: 10px;
451+
border: 1px solid transparent;
452+
border-top-width: 3px;
453+
border-bottom-width: 0;
454+
background: #fafbfc;
455+
}
456+
457+
.st-theme-github > .nav .nav-link:hover, .st-theme-github > .nav .nav-link:focus {
458+
color: #24292e;
459+
}
460+
461+
.st-theme-github > .nav .nav-link.active {
462+
color: #495057 !important;
463+
border-color: #e1e4e8 !important;
464+
border-top-color: #e36209 !important;
465+
background-color: #ffffff !important;
466+
cursor: pointer;
467+
}
468+
469+
.st-theme-github > .nav .nav-link.active::after {
470+
content: "";
471+
background: #ffffff;
472+
height: 1px;
473+
position: absolute;
474+
width: 100%;
475+
left: 0px;
476+
bottom: -1px;
477+
}
478+
479+
.st-theme-github > .nav .nav-link.disabled {
480+
color: #eeeeee !important;
481+
}
482+
483+
.st-theme-github.st-vertical > .nav {
484+
border-right: 1px solid #e1e4e8;
485+
border-bottom: unset;
486+
margin-top: -1px;
487+
margin-bottom: -1px;
488+
margin-right: 0;
489+
margin-left: 0;
490+
}
491+
492+
.st-theme-github.st-vertical > .nav .nav-link {
493+
border-bottom-width: 1px;
494+
border-right-width: 0;
495+
border-top-width: 1px;
496+
border-left-width: 3px;
497+
}
498+
499+
.st-theme-github.st-vertical > .nav .nav-link.active {
500+
border-top-color: #e1e4e8 !important;
501+
border-left-color: #e36209 !important;
502+
}
503+
504+
.st-theme-github.st-vertical > .nav .nav-link.active::after {
505+
height: 100%;
506+
width: 1px;
507+
top: 0px;
508+
left: auto;
509+
right: -1px;
510+
}
511+
512+
/* SmartTab Theme: Sourceforge */
513+
.st-theme-sourceforge > .tab-content > .tab-pane {
514+
padding: 11px 15px;
515+
}
516+
517+
.st-theme-sourceforge > .nav {
518+
background: #fff;
519+
border-right: 1px solid;
520+
border-image-source: linear-gradient(to bottom, #333333 0%, #333333 3px, #dcdcdc 3px);
521+
border-image-slice: 0 1 0 0;
522+
}
523+
524+
.st-theme-sourceforge > .nav .nav-link {
525+
position: relative;
526+
height: 100%;
527+
min-height: 100%;
528+
padding: 10px;
529+
color: #586069;
530+
background: #fff;
531+
border-style: solid;
532+
border-width: 3px 0 1px 1px;
533+
border-image-source: linear-gradient(to bottom, #333333 0%, #333333 3px, #dcdcdc 3px);
534+
border-image-slice: 3 0 1 1;
535+
}
536+
537+
.st-theme-sourceforge > .nav .nav-link:hover, .st-theme-sourceforge > .nav .nav-link:focus {
538+
color: #09c !important;
539+
}
540+
541+
.st-theme-sourceforge > .nav .nav-link.active {
542+
color: #0cf !important;
543+
background-color: #ffffff !important;
423544
cursor: pointer;
545+
border-image-source: linear-gradient(to bottom, #00ccff 0%, #00ccff 3px, #dcdcdc 3px);
546+
border-image-slice: 3 0 0 1;
547+
}
548+
549+
.st-theme-sourceforge.st-vertical > .nav {
550+
border-top: 1px solid;
551+
border-image-source: linear-gradient(to right, #333333 0%, #333333 3px, #dcdcdc 3px);
552+
border-image-slice: 1 0 0 0;
553+
}
554+
555+
.st-theme-sourceforge.st-vertical > .nav .nav-link {
556+
border-width: 0 1px 1px 3px;
557+
border-image-source: linear-gradient(to right, #333333 0%, #333333 3px, #dcdcdc 3px);
558+
border-image-slice: 0 1 1 3;
559+
}
560+
561+
.st-theme-sourceforge.st-vertical > .nav .nav-link.active {
562+
border-image-source: linear-gradient(to right, #00ccff 0%, #00ccff 3px, #dcdcdc 3px);
563+
border-image-slice: 0 0 1 3;
424564
}

0 commit comments

Comments
 (0)