1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
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 |
|
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 | }
|