Skip to content

Commit

Permalink
Updated themes and demos, and a few optimizations
Browse files Browse the repository at this point in the history
  • Loading branch information
@techlab
techlab committed Jun 14, 2020
1 parent 0c56b17 commit 4e37b02
Show file tree
Hide file tree
Showing 50 changed files with 12,477 additions and 130 deletions.
25 changes: 23 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# jQuery Smart Tab v3
#### The flexible jQuery tab control plugin.
#### The flexible jQuery tab control plugin

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

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

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

### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/jquery-smarttab)
```html
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
```

### [CDN - UNPKG](https://unpkg.com/browse/jquery-smarttab/)
```html
<!-- CSS -->
<link href="https://unpkg.com/[email protected]/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
```

### Download
#### [Download from GitHub](https://github.com/techlab/jquery-smarttab/archive/master.zip)

Expand Down Expand Up @@ -140,7 +160,8 @@ Initialize the jQuery SmartTab
});
</script>
```
That's it!
That's it!

Please see the [documentation](http://techlaboratory.net/jquery-smarttab#documentation) for more details on implementation and usage.

##### All options
Expand Down
4 changes: 2 additions & 2 deletions dist/css/smart_tab.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@
position: absolute;
top: 45%;
left: 45%;
width: 1em;
height: 1em;
width: 2rem;
height: 2rem;
border: 10px solid #f3f3f3;
border-top: 10px solid #3498db;
border-radius: 50%;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/smart_tab.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

184 changes: 162 additions & 22 deletions dist/css/smart_tab_all.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@
position: absolute;
top: 45%;
left: 45%;
width: 1em;
height: 1em;
width: 2rem;
height: 2rem;
border: 10px solid #f3f3f3;
border-top: 10px solid #3498db;
border-radius: 50%;
Expand Down Expand Up @@ -319,25 +319,25 @@
border-top-right-radius: unset;
}

/* SmartTab Theme: BsTabs */
.st-theme-bstabs {
/* SmartTab Theme: Round */
.st-theme-round {
border: 1px solid #dee2e6;
border-top-width: 0;
border-radius: 8px;
}

.st-theme-bstabs > .tab-content > .tab-pane {
.st-theme-round > .tab-content > .tab-pane {
padding: 10px;
}

.st-theme-bstabs > .nav {
.st-theme-round > .nav {
background: #ffffff;
border-bottom: 1px solid #dee2e6;
margin-right: -1px;
margin-left: -1px;
}

.st-theme-bstabs > .nav .nav-link {
.st-theme-round > .nav .nav-link {
position: relative;
background: transparent;
height: 100%;
Expand All @@ -349,15 +349,15 @@
background: #ffffff;
}

.st-theme-bstabs > .nav .nav-link.active {
.st-theme-round > .nav .nav-link.active {
color: #495057 !important;
border-color: #dee2e6 !important;
cursor: pointer;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.st-theme-bstabs > .nav .nav-link.active::after {
.st-theme-round > .nav .nav-link.active::after {
content: "";
background: #ffffff;
height: 1px;
Expand All @@ -367,16 +367,16 @@
bottom: -1px;
}

.st-theme-bstabs > .nav .nav-link.disabled {
.st-theme-round > .nav .nav-link.disabled {
color: #eeeeee !important;
}

.st-theme-bstabs.st-vertical {
.st-theme-round.st-vertical {
border-top-width: 1px;
border-left-width: 0;
}

.st-theme-bstabs.st-vertical > .nav {
.st-theme-round.st-vertical > .nav {
border-right: 1px solid #dee2e6;
border-bottom: unset;
margin-top: -1px;
Expand All @@ -385,40 +385,180 @@
margin-left: 0;
}

.st-theme-bstabs.st-vertical > .nav .nav-link {
.st-theme-round.st-vertical > .nav .nav-link {
border-bottom-width: 1px;
border-right-width: 0;
}

.st-theme-bstabs.st-vertical > .nav .nav-link.active {
.st-theme-round.st-vertical > .nav .nav-link.active {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: unset;
}

.st-theme-bstabs.st-vertical > .nav .nav-link.active::after {
.st-theme-round.st-vertical > .nav .nav-link.active::after {
height: 100%;
width: 1px;
top: 0px;
left: auto;
right: -1px;
}

/* SmartTab Theme: BsPills */
.st-theme-bspills > .tab-content > .tab-pane {
/* SmartTab Theme: Pills */
.st-theme-pills > .tab-content > .tab-pane {
padding: 10px;
}

.st-theme-bspills > .nav .nav-link {
.st-theme-pills > .nav {
background: #5bc0de;
padding: 11px 23px;
border-radius: 0.1875rem;
}

.st-theme-pills > .nav .nav-link {
height: 100%;
min-height: 100%;
color: #222 !important;
color: #fff !important;
padding: .5rem 1rem;
border-radius: .25rem;
}

.st-theme-bspills > .nav .nav-link.active {
.st-theme-pills > .nav .nav-link.active {
color: #fff !important;
background: #007bff;
background: rgba(255, 255, 255, 0.2);
border-radius: 30px;
cursor: pointer;
}

/* SmartTab Theme: GitHub */
.st-theme-github > .tab-content > .tab-pane {
padding: 10px;
}

.st-theme-github > .nav {
background: #fafbfc;
border-bottom: 1px solid #e1e4e8;
margin-right: -1px;
margin-left: -1px;
}

.st-theme-github > .nav .nav-link {
position: relative;
background: transparent;
height: 100%;
min-height: 100%;
color: #586069;
padding: 10px;
border: 1px solid transparent;
border-top-width: 3px;
border-bottom-width: 0;
background: #fafbfc;
}

.st-theme-github > .nav .nav-link:hover, .st-theme-github > .nav .nav-link:focus {
color: #24292e;
}

.st-theme-github > .nav .nav-link.active {
color: #495057 !important;
border-color: #e1e4e8 !important;
border-top-color: #e36209 !important;
background-color: #ffffff !important;
cursor: pointer;
}

.st-theme-github > .nav .nav-link.active::after {
content: "";
background: #ffffff;
height: 1px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
}

.st-theme-github > .nav .nav-link.disabled {
color: #eeeeee !important;
}

.st-theme-github.st-vertical > .nav {
border-right: 1px solid #e1e4e8;
border-bottom: unset;
margin-top: -1px;
margin-bottom: -1px;
margin-right: 0;
margin-left: 0;
}

.st-theme-github.st-vertical > .nav .nav-link {
border-bottom-width: 1px;
border-right-width: 0;
border-top-width: 1px;
border-left-width: 3px;
}

.st-theme-github.st-vertical > .nav .nav-link.active {
border-top-color: #e1e4e8 !important;
border-left-color: #e36209 !important;
}

.st-theme-github.st-vertical > .nav .nav-link.active::after {
height: 100%;
width: 1px;
top: 0px;
left: auto;
right: -1px;
}

/* SmartTab Theme: Sourceforge */
.st-theme-sourceforge > .tab-content > .tab-pane {
padding: 11px 15px;
}

.st-theme-sourceforge > .nav {
background: #fff;
border-right: 1px solid;
border-image-source: linear-gradient(to bottom, #333333 0%, #333333 3px, #dcdcdc 3px);
border-image-slice: 0 1 0 0;
}

.st-theme-sourceforge > .nav .nav-link {
position: relative;
height: 100%;
min-height: 100%;
padding: 10px;
color: #586069;
background: #fff;
border-style: solid;
border-width: 3px 0 1px 1px;
border-image-source: linear-gradient(to bottom, #333333 0%, #333333 3px, #dcdcdc 3px);
border-image-slice: 3 0 1 1;
}

.st-theme-sourceforge > .nav .nav-link:hover, .st-theme-sourceforge > .nav .nav-link:focus {
color: #09c !important;
}

.st-theme-sourceforge > .nav .nav-link.active {
color: #0cf !important;
background-color: #ffffff !important;
cursor: pointer;
border-image-source: linear-gradient(to bottom, #00ccff 0%, #00ccff 3px, #dcdcdc 3px);
border-image-slice: 3 0 0 1;
}

.st-theme-sourceforge.st-vertical > .nav {
border-top: 1px solid;
border-image-source: linear-gradient(to right, #333333 0%, #333333 3px, #dcdcdc 3px);
border-image-slice: 1 0 0 0;
}

.st-theme-sourceforge.st-vertical > .nav .nav-link {
border-width: 0 1px 1px 3px;
border-image-source: linear-gradient(to right, #333333 0%, #333333 3px, #dcdcdc 3px);
border-image-slice: 0 1 1 3;
}

.st-theme-sourceforge.st-vertical > .nav .nav-link.active {
border-image-source: linear-gradient(to right, #00ccff 0%, #00ccff 3px, #dcdcdc 3px);
border-image-slice: 0 0 1 3;
}
Loading

0 comments on commit 4e37b02

Please sign in to comment.