UNPKG

4.53 kBCSSView Raw
1/*!
2 * jQuery SmartWizard v5
3 * jQuery Wizard Plugin
4 * http://www.techlaboratory.net/smartwizard
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-smartwizard/blob/master/LICENSE
11 */
12/* SmartWizard Base Styles */
13.sw {
14 position: relative;
15}
16
17.sw *,
18.sw *::before,
19.sw *::after {
20 box-sizing: border-box;
21}
22
23.sw > .tab-content {
24 position: relative;
25 overflow: hidden;
26}
27
28.sw .toolbar {
29 padding: .8rem;
30}
31
32.sw .toolbar > .btn {
33 display: inline-block;
34 text-decoration: none;
35 text-align: center;
36 text-transform: none;
37 vertical-align: middle;
38 -webkit-user-select: none;
39 -moz-user-select: none;
40 -ms-user-select: none;
41 user-select: none;
42 margin-left: .2rem;
43 margin-right: .2rem;
44 cursor: pointer;
45}
46
47.sw .toolbar > .btn.disabled, .sw .toolbar > .btn:disabled {
48 opacity: .65;
49}
50
51.sw > .nav {
52 display: flex;
53 flex-wrap: wrap;
54 list-style: none;
55 padding-left: 0;
56 margin-top: 0;
57 margin-bottom: 0;
58}
59
60@media screen and (max-width: 640px) {
61 .sw > .nav {
62 flex-direction: column !important;
63 flex: 1 auto;
64 }
65}
66
67.sw > .nav .nav-link {
68 display: block;
69 padding: .5rem 1rem;
70 text-decoration: none;
71}
72
73.sw > .nav .nav-link:hover, .sw > .nav .nav-link:active, .sw > .nav .nav-link:focus {
74 text-decoration: none;
75}
76
77.sw > .nav .nav-link::-moz-focus-inner {
78 border: 0 !important;
79}
80
81.sw > .nav .nav-link.disabled {
82 color: #ccc !important;
83 pointer-events: none;
84 cursor: default;
85}
86
87.sw > .nav .nav-link.hidden {
88 display: none !important;
89}
90
91.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link {
92 flex-basis: 0;
93 flex-grow: 1;
94 text-align: center;
95}
96
97.sw.sw-dark {
98 color: rgba(255, 255, 255, 0.95);
99 background: #000;
100}
101
102.sw.sw-loading {
103 -webkit-user-select: none;
104 -moz-user-select: none;
105 -ms-user-select: none;
106 user-select: none;
107}
108
109.sw.sw-loading::after {
110 content: "";
111 display: block;
112 position: absolute;
113 opacity: 1;
114 top: 0;
115 left: 0;
116 height: 100%;
117 width: 100%;
118 background: rgba(255, 255, 255, 0.7);
119 z-index: 2;
120 transition: all .2s ease;
121}
122
123.sw.sw-loading::before {
124 content: '';
125 display: inline-block;
126 position: absolute;
127 top: 45%;
128 left: 45%;
129 width: 2rem;
130 height: 2rem;
131 border: 10px solid #f3f3f3;
132 border-top: 10px solid #3498db;
133 border-radius: 50%;
134 z-index: 10;
135 -webkit-animation: spin 1s linear infinite;
136 animation: spin 1s linear infinite;
137}
138
139@-webkit-keyframes spin {
140 0% {
141 transform: rotate(0deg);
142 }
143
144 100% {
145 transform: rotate(360deg);
146 }
147}
148
149@keyframes spin {
150 0% {
151 transform: rotate(0deg);
152 }
153
154 100% {
155 transform: rotate(360deg);
156 }
157}
158
159/* SmartWizard Theme: Dark */
160.sw-theme-dark {
161 border: 1px solid #eeeeee;
162 box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
163 color: rgba(255, 255, 255, 0.95);
164 background: #181c20;
165}
166
167.sw-theme-dark > .tab-content > .tab-pane {
168 padding: 10px;
169}
170
171.sw-theme-dark .toolbar > .btn {
172 color: #fff;
173 background-color: #17a2b8;
174 border: 1px solid #17a2b8;
175 padding: .375rem .75rem;
176 border-radius: .25rem;
177 font-weight: 400;
178}
179
180.sw-theme-dark > .nav {
181 background: #0D0F12;
182}
183
184.sw-theme-dark > .nav .nav-link {
185 position: relative;
186 height: 100%;
187 min-height: 100%;
188}
189
190.sw-theme-dark > .nav .nav-link::after {
191 content: "";
192 position: absolute;
193 height: 2px;
194 width: 100%;
195 left: 0px;
196 bottom: -1px;
197 background: #999999;
198 transition: all 250ms ease 0s;
199 transform: scale(0);
200}
201
202.sw-theme-dark > .nav .nav-link.inactive {
203 color: #999999;
204 cursor: not-allowed;
205}
206
207.sw-theme-dark > .nav .nav-link.active {
208 color: #17a2b8 !important;
209 cursor: pointer;
210}
211
212.sw-theme-dark > .nav .nav-link.active::after {
213 background: #17a2b8 !important;
214 transform: scale(1);
215}
216
217.sw-theme-dark > .nav .nav-link.done {
218 color: #5cb85c !important;
219 cursor: pointer;
220}
221
222.sw-theme-dark > .nav .nav-link.done::after {
223 background: #5cb85c;
224 transform: scale(1);
225}
226
227.sw-theme-dark > .nav .nav-link.disabled {
228 color: #f9f9f9 !important;
229 cursor: not-allowed;
230}
231
232.sw-theme-dark > .nav .nav-link.disabled::after {
233 background: #f9f9f9;
234}
235
236.sw-theme-dark > .nav .nav-link.danger {
237 color: #d9534f !important;
238 cursor: pointer;
239}
240
241.sw-theme-dark > .nav .nav-link.danger::after {
242 background: #d9534f;
243}