UNPKG

4.5 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: Default */
160.sw-theme-default {
161 border: 1px solid #eeeeee;
162}
163
164.sw-theme-default > .tab-content > .tab-pane {
165 padding: 10px;
166}
167
168.sw-theme-default .toolbar > .btn {
169 color: #fff;
170 background-color: #17a2b8;
171 border: 1px solid #17a2b8;
172 padding: .375rem .75rem;
173 border-radius: .25rem;
174 font-weight: 400;
175}
176
177.sw-theme-default > .nav {
178 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
179}
180
181.sw-theme-default > .nav .nav-link {
182 position: relative;
183 height: 100%;
184 min-height: 100%;
185}
186
187.sw-theme-default > .nav .nav-link::after {
188 content: "";
189 position: absolute;
190 height: 2px;
191 width: 0;
192 left: 0px;
193 bottom: -1px;
194 background: #999999;
195 transition: all .35s ease .15s;
196}
197
198.sw-theme-default > .nav .nav-link.inactive {
199 color: #999999;
200 cursor: not-allowed;
201}
202
203.sw-theme-default > .nav .nav-link.active {
204 color: #17a2b8 !important;
205 cursor: pointer;
206}
207
208.sw-theme-default > .nav .nav-link.active::after {
209 background: #17a2b8 !important;
210 width: 100%;
211}
212
213.sw-theme-default > .nav .nav-link.done {
214 color: #5cb85c !important;
215 cursor: pointer;
216}
217
218.sw-theme-default > .nav .nav-link.done::after {
219 background: #5cb85c;
220 width: 100%;
221}
222
223.sw-theme-default > .nav .nav-link.disabled {
224 color: #dddddd !important;
225 cursor: not-allowed;
226}
227
228.sw-theme-default > .nav .nav-link.disabled::after {
229 background: #dddddd;
230 width: 100%;
231}
232
233.sw-theme-default > .nav .nav-link.danger {
234 color: #d9534f !important;
235 cursor: pointer;
236}
237
238.sw-theme-default > .nav .nav-link.danger::after {
239 background: #d9534f;
240 width: 100%;
241}