@@ -8842,13 +8842,13 @@ table.dataTable th:active {
8842
8842
width : 14em ;
8843
8843
}
8844
8844
.wizard-pf-sidebar .list-group-item > a : hover {
8845
- text-decoration : none;
8846
8845
background-color : # ededed ;
8846
+ text-decoration : none;
8847
8847
}
8848
- .wizard-pf-sidebar .list-group-item > a : focus {
8848
+ .wizard-pf-sidebar .list-group-item > a : hover : focus {
8849
8849
text-decoration : none;
8850
8850
}
8851
- .wizard-pf-sidebar .list-group-item > a : focus span {
8851
+ .wizard-pf-sidebar .list-group-item > a : hover : focus span {
8852
8852
text-decoration : underline;
8853
8853
}
8854
8854
.wizard-pf-sidebar .list-group-item .active {
@@ -8915,7 +8915,6 @@ table.dataTable th:active {
8915
8915
list-style : none;
8916
8916
margin-bottom : 0 ;
8917
8917
padding : 15px 0 ;
8918
- /* draw the step number in the circle */
8919
8918
}
8920
8919
@media (min-width : 768px ) {
8921
8920
.wizard-pf-steps-indicator {
@@ -8926,7 +8925,7 @@ table.dataTable th:active {
8926
8925
justify-content : space-around;
8927
8926
}
8928
8927
}
8929
- .wizard-pf-steps-indicator li {
8928
+ .wizard-pf-steps-indicator . wizard-pf-step {
8930
8929
counter-increment : section;
8931
8930
float : left;
8932
8931
/* float for IE9 since it doesn't support flex. If items wrap, they overlap */
@@ -8941,15 +8940,15 @@ table.dataTable th:active {
8941
8940
text-align : center;
8942
8941
/* draw the line between the circles */
8943
8942
}
8944
- .wizard-pf-steps-indicator li : not (.active ) {
8943
+ .wizard-pf-steps-indicator . wizard-pf-step : not (.active ) {
8945
8944
display : none;
8946
8945
}
8947
8946
@media (min-width : 768px ) {
8948
- .wizard-pf-steps-indicator li : not (.active ) {
8947
+ .wizard-pf-steps-indicator . wizard-pf-step : not (.active ) {
8949
8948
display : block;
8950
8949
}
8951
8950
}
8952
- .wizard-pf-steps-indicator li a {
8951
+ .wizard-pf-steps-indicator . wizard-pf-step a {
8953
8952
-ms-flex-align : center;
8954
8953
align-items : center;
8955
8954
display : -ms-flexbox;
@@ -8959,41 +8958,41 @@ table.dataTable th:active {
8959
8958
font-weight : 700 ;
8960
8959
}
8961
8960
@media (min-width : 768px ) {
8962
- .wizard-pf-steps-indicator li a {
8961
+ .wizard-pf-steps-indicator . wizard-pf-step a {
8963
8962
font-weight : normal;
8964
8963
-ms-flex-pack : center;
8965
8964
justify-content : center;
8966
8965
}
8967
8966
}
8968
- .wizard-pf-steps-indicator li a .wizard-pf-step-title {
8967
+ .wizard-pf-steps-indicator . wizard-pf-step a .wizard-pf-step-title {
8969
8968
margin-left : 10px ;
8970
8969
}
8971
8970
@media (min-width : 768px ) {
8972
- .wizard-pf-steps-indicator li a .wizard-pf-step-title {
8971
+ .wizard-pf-steps-indicator . wizard-pf-step a .wizard-pf-step-title {
8973
8972
margin-left : 0 ;
8974
8973
}
8975
8974
}
8976
- .wizard-pf-steps-indicator li a .wizard-pf-step-title-substep {
8975
+ .wizard-pf-steps-indicator . wizard-pf-step a .wizard-pf-step-title-substep {
8977
8976
font-weight : normal;
8978
8977
margin-left : 10px ;
8979
8978
text-transform : capitalize;
8980
8979
}
8981
- .wizard-pf-steps-indicator li a .wizard-pf-step-title-substep : before {
8980
+ .wizard-pf-steps-indicator . wizard-pf-step a .wizard-pf-step-title-substep : before {
8982
8981
content : "\00BB" ;
8983
8982
font-size : 20px ;
8984
8983
margin-right : 10px ;
8985
8984
}
8986
- .wizard-pf-steps-indicator li a .wizard-pf-step-title-substep : not (.active ) {
8985
+ .wizard-pf-steps-indicator . wizard-pf-step a .wizard-pf-step-title-substep : not (.active ) {
8987
8986
display : none;
8988
8987
}
8989
8988
@media (min-width : 768px ) {
8990
- .wizard-pf-steps-indicator li {
8989
+ .wizard-pf-steps-indicator . wizard-pf-step {
8991
8990
/* don't draw the line between the circles on the ends */
8992
8991
}
8993
- .wizard-pf-steps-indicator li .wizard-pf-step-title-substep {
8992
+ .wizard-pf-steps-indicator . wizard-pf-step .wizard-pf-step-title-substep {
8994
8993
display : none;
8995
8994
}
8996
- .wizard-pf-steps-indicator li : before {
8995
+ .wizard-pf-steps-indicator . wizard-pf-step : before {
8997
8996
background-color : # bbb ;
8998
8997
content : "" ;
8999
8998
height : 2px ;
@@ -9002,59 +9001,59 @@ table.dataTable th:active {
9002
9001
right : 0 ;
9003
9002
top : 40px ;
9004
9003
}
9005
- .wizard-pf-steps-indicator li : first-child : before {
9004
+ .wizard-pf-steps-indicator . wizard-pf-step : first-child : before {
9006
9005
left : 50% ;
9007
9006
right : 0 ;
9008
9007
}
9009
- .wizard-pf-steps-indicator li : last-child : before {
9008
+ .wizard-pf-steps-indicator . wizard-pf-step : last-child : before {
9010
9009
left : 0 ;
9011
9010
right : 50% ;
9012
9011
}
9013
- .wizard-pf-steps-indicator li : only-of-type : before {
9012
+ .wizard-pf-steps-indicator . wizard-pf-step : only-of-type : before {
9014
9013
background-color : transparent;
9015
9014
}
9016
9015
}
9017
- .wizard-pf-steps-indicator li a {
9016
+ .wizard-pf-steps-indicator . wizard-pf-step a {
9018
9017
color : # 030303 ;
9019
9018
cursor : pointer;
9020
9019
font-size : 16px ;
9021
9020
margin-left : 1em ;
9022
9021
margin-right : 1em ;
9023
9022
text-decoration : none;
9024
9023
}
9025
- .wizard-pf-steps-indicator li a : hover .wizard-pf-step-number {
9024
+ .wizard-pf-steps-indicator . wizard-pf-step : not (. active ) : not (. disabled ) a : hover .wizard-pf-step-number {
9026
9025
background-color : # bbb ;
9027
9026
border-color : # bbb ;
9028
9027
color : # fff ;
9029
9028
}
9030
- .wizard-pf-steps-indicator .wizard-pf-step-number {
9029
+ .wizard-pf-steps-indicator .wizard-pf-step . wizard-pf-step -number {
9031
9030
background-color : # fff ;
9032
9031
border-radius : 50% ;
9033
- border : solid 2px # bbb ;
9032
+ border : solid 2px # 39a5dc ;
9034
9033
color : # bbb ;
9035
9034
font-size : 12px ;
9036
9035
font-weight : 700 ;
9037
9036
height : 25px ;
9038
9037
line-height : 22px ;
9039
9038
width : 25px ;
9039
+ display : inline-block;
9040
9040
}
9041
9041
@media (min-width : 768px ) {
9042
- .wizard-pf-steps-indicator .wizard-pf-step-number {
9042
+ .wizard-pf-steps-indicator .wizard-pf-step . wizard-pf-step -number {
9043
9043
left : calc (50% - 13px );
9044
9044
position : absolute;
9045
9045
top : 27px ;
9046
9046
}
9047
9047
}
9048
- .wizard-pf-steps-indicator .active .wizard-pf-step-number {
9048
+ .wizard-pf-steps-indicator .wizard-pf-step . active .wizard-pf-step-number {
9049
9049
background-color : # 39a5dc ;
9050
9050
border-color : # 39a5dc ;
9051
9051
cursor : default;
9052
9052
color : # fff ;
9053
9053
}
9054
- .wizard-pf-steps-indicator .viewed-pf .wizard-pf-step-number {
9055
- color : # 030303 ;
9056
- background-color : # fff ;
9057
- border-color : # 39a5dc ;
9054
+ .wizard-pf-steps-indicator .wizard-pf-step .active ~ .wizard-pf-step .wizard-pf-step-number {
9055
+ border-color : # bbb ;
9056
+ background : # fff ;
9058
9057
}
9059
9058
/* styles the main content portion of the wizard */
9060
9059
.wizard-pf-main {
@@ -9190,9 +9189,20 @@ table.dataTable th:active {
9190
9189
border-top : 1px solid # d1d1d1 ;
9191
9190
margin-top : 0 ;
9192
9191
padding-bottom : 17px ;
9192
+ display : -ms-flexbox;
9193
+ display : flex;
9194
+ -ms-flex-pack : end;
9195
+ justify-content : flex-end;
9193
9196
}
9194
- .wizard-pf-footer .btn -cancel {
9197
+ .wizard-pf-footer .wizard-pf -cancel {
9195
9198
margin-right : 25px ;
9199
+ -ms-flex-order : -1 ;
9200
+ order : -1 ;
9201
+ }
9202
+ .wizard-pf-footer .wizard-pf-next {
9203
+ -ms-flex-order : 1 ;
9204
+ order : 1 ;
9205
+ margin-left : 8px ;
9196
9206
}
9197
9207
@media (min-width : 768px ) {
9198
9208
.wizard-pf-row {
@@ -9219,9 +9229,7 @@ table.dataTable th:active {
9219
9229
padding : 0 ;
9220
9230
}
9221
9231
.wizard-pf-steps-alt {
9222
- margin-left : 15px ;
9223
- margin-top : 15px ;
9224
- background-image : linear-gradient (to right, transparent 11px , # d1d1d1 11px , # d1d1d1 13px , transparent 13px );
9232
+ margin : 15px 0 15px 15px ;
9225
9233
}
9226
9234
@media (min-width : 768px ) {
9227
9235
.wizard-pf-steps-alt {
@@ -9253,33 +9261,52 @@ table.dataTable th:active {
9253
9261
content : "\f106" ;
9254
9262
}
9255
9263
.wizard-pf-step-alt {
9256
- margin-bottom : 10px ;
9264
+ position : relative;
9265
+ z-index : 1 ;
9266
+ }
9267
+ .wizard-pf-step-alt : not (: last-child ) {
9268
+ padding-bottom : 10px ;
9257
9269
}
9258
9270
.wizard-pf-step-alt a {
9259
9271
display : -ms-flexbox;
9260
9272
display : flex;
9261
9273
-ms-flex : 1 ;
9262
9274
flex : 1 ;
9263
9275
}
9264
- .wizard-pf-step-alt a : hover {
9276
+ .wizard-pf-step-alt a : hover ,
9277
+ .wizard-pf-step-alt a : focus {
9265
9278
text-decoration : none;
9266
9279
}
9267
- .wizard-pf-step-alt a : hover .wizard-pf-step-alt-title {
9280
+ .wizard-pf-step-alt a : hover .wizard-pf-step-alt-title ,
9281
+ .wizard-pf-step-alt a : focus .wizard-pf-step-alt-title {
9268
9282
color : # 39a5dc ;
9269
9283
}
9270
9284
.wizard-pf-step-alt ul {
9271
9285
margin-left : 11px ;
9272
9286
}
9287
+ .wizard-pf-step-alt .wizard-pf-step-alt-number {
9288
+ border-radius : 50% ;
9289
+ font-size : 12px ;
9290
+ font-weight : 700 ;
9291
+ height : 24px ;
9292
+ width : 24px ;
9293
+ display : inline-block;
9294
+ text-align : center;
9295
+ -ms-flex : 0 0 auto;
9296
+ flex : 0 0 auto;
9297
+ border : 2px solid # 39a5dc ;
9298
+ background-color : # fff ;
9299
+ }
9273
9300
.wizard-pf-step-alt .wizard-pf-step-alt-title {
9301
+ color : # 030303 ;
9302
+ font-weight : 700 ;
9303
+ text-transform : capitalize;
9304
+ display : inline-block;
9274
9305
margin-left : 5px ;
9275
9306
-ms-flex-item-align : center;
9276
9307
-ms-grid-row-align : center;
9277
9308
align-self : center;
9278
9309
}
9279
- .wizard-pf-step-alt .wizard-pf-step-alt-number {
9280
- -ms-flex : 0 0 auto;
9281
- flex : 0 0 auto;
9282
- }
9283
9310
.wizard-pf-step-alt .active .wizard-pf-step-alt-number {
9284
9311
background-color : # 39a5dc ;
9285
9312
border-color : # 39a5dc ;
@@ -9289,55 +9316,46 @@ table.dataTable th:active {
9289
9316
.wizard-pf-step-alt .active .wizard-pf-step-alt-title {
9290
9317
color : # 39a5dc ;
9291
9318
}
9292
- .wizard-pf-step-alt .active .wizard-pf-step-alt-substep : first-of-type {
9293
- margin-top : 2px ;
9294
- }
9295
- .wizard-pf-step-alt .viewed .wizard-pf-step-alt-number {
9296
- color : # 030303 ;
9297
- background-color : # fff ;
9298
- border-color : # 39a5dc ;
9299
- }
9300
- .wizard-pf-step-alt-number {
9301
- background-color : # fff ;
9302
- border-radius : 50% ;
9303
- border : solid 2px # bbb ;
9319
+ .wizard-pf-step-alt .active ~ .wizard-pf-step-alt .wizard-pf-step-alt-number {
9304
9320
color : # bbb ;
9305
- font-size : 12px ;
9306
- font-weight : 700 ;
9307
- height : 24px ;
9308
- width : 24px ;
9309
- display : inline-block;
9310
- text-align : center;
9321
+ border-color : # bbb ;
9311
9322
}
9312
- .wizard-pf-step-alt-title {
9313
- color : # 030303 ;
9314
- font-weight : 700 ;
9315
- text-transform : capitalize;
9316
- display : inline-block;
9323
+ .wizard-pf-step-alt : not (.active ) a : hover .wizard-pf-step-alt-number {
9324
+ border-color : # bbb ;
9325
+ background : # bbb ;
9326
+ color : # fff ;
9327
+ }
9328
+ .wizard-pf-step-alt : before {
9329
+ content : "" ;
9330
+ position : absolute;
9331
+ left : 11px ;
9332
+ height : 100% ;
9333
+ border-left : 2px solid # bbb ;
9334
+ z-index : -1 ;
9317
9335
}
9318
9336
.wizard-pf-step-alt-substep {
9319
9337
display : -ms-flexbox;
9320
9338
display : flex;
9339
+ border-left : 2px solid transparent;
9321
9340
}
9322
9341
.wizard-pf-step-alt-substep a {
9323
9342
padding : 5px 0 5px 18px ;
9324
9343
color : # 393f44 ;
9325
9344
}
9326
- .wizard-pf-step-alt-substep : not (. disabled ) .active ,
9345
+ .wizard-pf-step-alt-substep .active ,
9327
9346
.wizard-pf-step-alt-substep : not (.disabled ): hover {
9328
9347
background-color : # ededed ;
9329
- background-image : linear-gradient (to right , # 39a5dc 2 px , transparent 2 px ) ;
9348
+ border-color : # 39a5dc ;
9330
9349
}
9331
- .wizard-pf-step-alt-substep : not (. disabled ) .active a ,
9350
+ .wizard-pf-step-alt-substep .active a ,
9332
9351
.wizard-pf-step-alt-substep : not (.disabled ): hover a {
9333
9352
color : # 39a5dc ;
9334
9353
}
9335
9354
.wizard-pf-step-alt-substep .active a {
9336
9355
font-weight : 700 ;
9337
9356
}
9338
- .wizard-pf-step-alt-substep .disabled {
9357
+ .wizard-pf-step .disabled > a : hover ,
9358
+ .wizard-pf-step-alt-substep .disabled > a : hover ,
9359
+ .wizard-pf-sidebar .list-group-item .disabled > a : hover {
9339
9360
cursor : not-allowed;
9340
- }
9341
- .wizard-pf-step-alt-substep .disabled a {
9342
- pointer-events : none;
9343
9361
}
0 commit comments