UNPKG

3.06 kBCSSView Raw
1/*!
2 * jQuery SmartTab v3
3 * The flexible jQuery tab control plugin
4 * http://www.techlaboratory.net/jquery-smarttab
5 *
6 * Created by Dipu Raj
7 * http://dipu.me
8 *
9 * Licensed under the terms of MIT License
10 * https://github.com/techlab/jquery-smarttab/blob/master/LICENSE
11 */
12/* SmartTab Base Styles */
13.st {
14 position: relative;
15}
16
17.st *,
18.st *::before,
19.st *::after {
20 box-sizing: border-box;
21}
22
23.st > .tab-content {
24 position: relative;
25 overflow: hidden;
26}
27
28.st > .nav {
29 display: flex;
30 flex-wrap: wrap;
31 list-style: none;
32 padding-left: 0;
33 margin-top: 0;
34 margin-bottom: 0;
35}
36
37@media screen and (max-width: 640px) {
38 .st > .nav {
39 flex-direction: column !important;
40 flex: 1 auto;
41 }
42}
43
44.st > .nav .nav-link {
45 display: block;
46 padding: .5rem 1rem;
47 text-decoration: none;
48 outline: 0 !important;
49}
50
51.st > .nav .nav-link:hover, .st > .nav .nav-link:active, .st > .nav .nav-link:focus {
52 text-decoration: none;
53 outline: 0 !important;
54}
55
56.st > .nav .nav-link::-moz-focus-inner {
57 border: 0 !important;
58}
59
60.st > .nav .nav-link.disabled {
61 color: #ccc !important;
62 pointer-events: none;
63 cursor: default;
64}
65
66.st.st-vertical {
67 display: flex !important;
68 flex-wrap: nowrap;
69}
70
71.st.st-vertical > .nav {
72 flex-direction: column !important;
73 flex: 1 auto;
74}
75
76.st.st-vertical > .nav .nav-link {
77 text-align: left;
78}
79
80.st.st-vertical > .nav > li, .st.st-vertical > .nav .nav-link {
81 flex-grow: unset !important;
82}
83
84.st.st-vertical > .tab-content {
85 flex: 1 100%;
86}
87
88.st.st-justified > .nav > li, .st.st-justified > .nav .nav-link {
89 flex-basis: 0;
90 flex-grow: 1;
91 text-align: center;
92}
93
94.st.st-loading {
95 -webkit-user-select: none;
96 -moz-user-select: none;
97 -ms-user-select: none;
98 user-select: none;
99}
100
101.st.st-loading::after {
102 content: "";
103 display: block;
104 position: absolute;
105 opacity: 1;
106 top: 0;
107 left: 0;
108 height: 100%;
109 width: 100%;
110 background: rgba(255, 255, 255, 0.7);
111 z-index: 2;
112 transition: all .2s ease;
113}
114
115.st.st-loading::before {
116 content: '';
117 display: inline-block;
118 position: absolute;
119 top: 45%;
120 left: 45%;
121 width: 2rem;
122 height: 2rem;
123 border: 10px solid #f3f3f3;
124 border-top: 10px solid #3498db;
125 border-radius: 50%;
126 z-index: 10;
127 -webkit-animation: spin 1s linear infinite;
128 animation: spin 1s linear infinite;
129}
130
131@-webkit-keyframes spin {
132 0% {
133 transform: rotate(0deg);
134 }
135
136 100% {
137 transform: rotate(360deg);
138 }
139}
140
141@keyframes spin {
142 0% {
143 transform: rotate(0deg);
144 }
145
146 100% {
147 transform: rotate(360deg);
148 }
149}
150
151/* SmartTab Theme: BsPills */
152.st-theme-bspills > .tab-content > .tab-pane {
153 padding: 10px;
154}
155
156.st-theme-bspills > .nav .nav-link {
157 height: 100%;
158 min-height: 100%;
159 color: #222 !important;
160 padding: .5rem 1rem;
161 border-radius: .25rem;
162}
163
164.st-theme-bspills > .nav .nav-link.active {
165 color: #fff !important;
166 background: #007bff;
167 cursor: pointer;
168}