UNPKG

4.46 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: BsTabs */
152.st-theme-bstabs {
153 border: 1px solid #dee2e6;
154 border-top-width: 0;
155 border-radius: 8px;
156}
157
158.st-theme-bstabs > .tab-content > .tab-pane {
159 padding: 10px;
160}
161
162.st-theme-bstabs > .nav {
163 background: #ffffff;
164 border-bottom: 1px solid #dee2e6;
165 margin-right: -1px;
166 margin-left: -1px;
167}
168
169.st-theme-bstabs > .nav .nav-link {
170 position: relative;
171 background: transparent;
172 height: 100%;
173 min-height: 100%;
174 color: #bbbbbb !important;
175 padding: 10px;
176 border: 1px solid transparent;
177 border-bottom-width: 0;
178 background: #ffffff;
179}
180
181.st-theme-bstabs > .nav .nav-link.active {
182 color: #495057 !important;
183 border-color: #dee2e6 !important;
184 cursor: pointer;
185 border-top-left-radius: 8px;
186 border-top-right-radius: 8px;
187}
188
189.st-theme-bstabs > .nav .nav-link.active::after {
190 content: "";
191 background: #ffffff;
192 height: 1px;
193 position: absolute;
194 width: 100%;
195 left: 0px;
196 bottom: -1px;
197}
198
199.st-theme-bstabs > .nav .nav-link.disabled {
200 color: #eeeeee !important;
201}
202
203.st-theme-bstabs.st-vertical {
204 border-top-width: 1px;
205 border-left-width: 0;
206}
207
208.st-theme-bstabs.st-vertical > .nav {
209 border-right: 1px solid #dee2e6;
210 border-bottom: unset;
211 margin-top: -1px;
212 margin-bottom: -1px;
213 margin-right: 0;
214 margin-left: 0;
215}
216
217.st-theme-bstabs.st-vertical > .nav .nav-link {
218 border-bottom-width: 1px;
219 border-right-width: 0;
220}
221
222.st-theme-bstabs.st-vertical > .nav .nav-link.active {
223 border-top-left-radius: 8px;
224 border-bottom-left-radius: 8px;
225 border-top-right-radius: unset;
226}
227
228.st-theme-bstabs.st-vertical > .nav .nav-link.active::after {
229 height: 100%;
230 width: 1px;
231 top: 0px;
232 left: auto;
233 right: -1px;
234}