← All changes
|
modules/basic-elements/public/css/public-powerkit-basic-elements.css
+90
-0
3.1.1
→
2.4.6
View file →
| @@ -30,11 +30,15 @@ | ||
| 30 | 30 | padding: 0.375rem 0.75rem; |
| 31 | 31 | font-size: 1rem; |
| 32 | 32 | line-height: 1.5; |
| 33 | 33 | border-radius: 0.25rem; |
| 34 | + -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; | |
| 35 | + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; | |
| 34 | 36 | transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
| 37 | + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; | |
| 35 | 38 | color: white; |
| 36 | 39 | border: none; |
| 40 | + -webkit-box-shadow: none !important; | |
| 37 | 41 | box-shadow: none !important; |
| 38 | 42 | text-decoration: none !important; |
| 39 | 43 | } |
| 40 | 44 | |
| @@ -39,8 +43,9 @@ | ||
| 39 | 43 | } |
| 40 | 44 | |
| 41 | 45 | @media (prefers-reduced-motion: reduce) { |
| 42 | 46 | .pk-button { |
| 47 | + -webkit-transition: none; | |
| 43 | 48 | transition: none; |
| 44 | 49 | } |
| 45 | 50 | } |
| 46 | 51 | |
| @@ -49,8 +54,9 @@ | ||
| 49 | 54 | } |
| 50 | 55 | |
| 51 | 56 | .pk-button:focus, .pk-button.focus { |
| 52 | 57 | outline: 0; |
| 58 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); | |
| 53 | 59 | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); |
| 54 | 60 | } |
| 55 | 61 | |
| 56 | 62 | .pk-button-primary { |
| @@ -65,8 +71,9 @@ | ||
| 65 | 71 | border-color: #0062cc; |
| 66 | 72 | } |
| 67 | 73 | |
| 68 | 74 | .pk-button-primary:focus, .pk-button-primary.focus { |
| 75 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); | |
| 69 | 76 | box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); |
| 70 | 77 | } |
| 71 | 78 | |
| 72 | 79 | .pk-button-primary.disabled, .pk-button-primary:disabled { |
| @@ -83,8 +90,9 @@ | ||
| 83 | 90 | } |
| 84 | 91 | |
| 85 | 92 | .pk-button-primary:not(:disabled):not(.disabled):active:focus, .pk-button-primary:not(:disabled):not(.disabled).active:focus, |
| 86 | 93 | .show > .pk-button-primary.dropdown-toggle:focus { |
| 94 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); | |
| 87 | 95 | box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); |
| 88 | 96 | } |
| 89 | 97 | |
| 90 | 98 | .pk-button-secondary { |
| @@ -99,8 +107,9 @@ | ||
| 99 | 107 | border-color: #878686; |
| 100 | 108 | } |
| 101 | 109 | |
| 102 | 110 | .pk-button-secondary:focus, .pk-button-secondary.focus { |
| 111 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(141, 142, 142, 0.5); | |
| 103 | 112 | box-shadow: 0 0 0 0.2rem rgba(141, 142, 142, 0.5); |
| 104 | 113 | } |
| 105 | 114 | |
| 106 | 115 | .pk-button-secondary.disabled, .pk-button-secondary:disabled { |
| @@ -117,8 +126,9 @@ | ||
| 117 | 126 | } |
| 118 | 127 | |
| 119 | 128 | .pk-button-secondary:not(:disabled):not(.disabled):active:focus, .pk-button-secondary:not(:disabled):not(.disabled).active:focus, |
| 120 | 129 | .show > .pk-button-secondary.dropdown-toggle:focus { |
| 130 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(141, 142, 142, 0.5); | |
| 121 | 131 | box-shadow: 0 0 0 0.2rem rgba(141, 142, 142, 0.5); |
| 122 | 132 | } |
| 123 | 133 | |
| 124 | 134 | .pk-button-success { |
| @@ -133,8 +143,9 @@ | ||
| 133 | 143 | border-color: #1e7e34; |
| 134 | 144 | } |
| 135 | 145 | |
| 136 | 146 | .pk-button-success:focus, .pk-button-success.focus { |
| 147 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); | |
| 137 | 148 | box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); |
| 138 | 149 | } |
| 139 | 150 | |
| 140 | 151 | .pk-button-success.disabled, .pk-button-success:disabled { |
| @@ -151,8 +162,9 @@ | ||
| 151 | 162 | } |
| 152 | 163 | |
| 153 | 164 | .pk-button-success:not(:disabled):not(.disabled):active:focus, .pk-button-success:not(:disabled):not(.disabled).active:focus, |
| 154 | 165 | .show > .pk-button-success.dropdown-toggle:focus { |
| 166 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); | |
| 155 | 167 | box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); |
| 156 | 168 | } |
| 157 | 169 | |
| 158 | 170 | .pk-button-info { |
| @@ -167,8 +179,9 @@ | ||
| 167 | 179 | border-color: #117a8b; |
| 168 | 180 | } |
| 169 | 181 | |
| 170 | 182 | .pk-button-info:focus, .pk-button-info.focus { |
| 183 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); | |
| 171 | 184 | box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); |
| 172 | 185 | } |
| 173 | 186 | |
| 174 | 187 | .pk-button-info.disabled, .pk-button-info:disabled { |
| @@ -185,8 +198,9 @@ | ||
| 185 | 198 | } |
| 186 | 199 | |
| 187 | 200 | .pk-button-info:not(:disabled):not(.disabled):active:focus, .pk-button-info:not(:disabled):not(.disabled).active:focus, |
| 188 | 201 | .show > .pk-button-info.dropdown-toggle:focus { |
| 202 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); | |
| 189 | 203 | box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); |
| 190 | 204 | } |
| 191 | 205 | |
| 192 | 206 | .pk-button-warning { |
| @@ -201,8 +215,9 @@ | ||
| 201 | 215 | border-color: #d39e00; |
| 202 | 216 | } |
| 203 | 217 | |
| 204 | 218 | .pk-button-warning:focus, .pk-button-warning.focus { |
| 219 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); | |
| 205 | 220 | box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); |
| 206 | 221 | } |
| 207 | 222 | |
| 208 | 223 | .pk-button-warning.disabled, .pk-button-warning:disabled { |
| @@ -219,8 +234,9 @@ | ||
| 219 | 234 | } |
| 220 | 235 | |
| 221 | 236 | .pk-button-warning:not(:disabled):not(.disabled):active:focus, .pk-button-warning:not(:disabled):not(.disabled).active:focus, |
| 222 | 237 | .show > .pk-button-warning.dropdown-toggle:focus { |
| 238 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); | |
| 223 | 239 | box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); |
| 224 | 240 | } |
| 225 | 241 | |
| 226 | 242 | .pk-button-danger { |
| @@ -235,8 +251,9 @@ | ||
| 235 | 251 | border-color: #bd2130; |
| 236 | 252 | } |
| 237 | 253 | |
| 238 | 254 | .pk-button-danger:focus, .pk-button-danger.focus { |
| 255 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); | |
| 239 | 256 | box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); |
| 240 | 257 | } |
| 241 | 258 | |
| 242 | 259 | .pk-button-danger.disabled, .pk-button-danger:disabled { |
| @@ -253,8 +270,9 @@ | ||
| 253 | 270 | } |
| 254 | 271 | |
| 255 | 272 | .pk-button-danger:not(:disabled):not(.disabled):active:focus, .pk-button-danger:not(:disabled):not(.disabled).active:focus, |
| 256 | 273 | .show > .pk-button-danger.dropdown-toggle:focus { |
| 274 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); | |
| 257 | 275 | box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); |
| 258 | 276 | } |
| 259 | 277 | |
| 260 | 278 | .pk-button-light { |
| @@ -269,8 +287,9 @@ | ||
| 269 | 287 | border-color: #dae0e5; |
| 270 | 288 | } |
| 271 | 289 | |
| 272 | 290 | .pk-button-light:focus, .pk-button-light.focus { |
| 291 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); | |
| 273 | 292 | box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); |
| 274 | 293 | } |
| 275 | 294 | |
| 276 | 295 | .pk-button-light.disabled, .pk-button-light:disabled { |
| @@ -287,8 +306,9 @@ | ||
| 287 | 306 | } |
| 288 | 307 | |
| 289 | 308 | .pk-button-light:not(:disabled):not(.disabled):active:focus, .pk-button-light:not(:disabled):not(.disabled).active:focus, |
| 290 | 309 | .show > .pk-button-light.dropdown-toggle:focus { |
| 310 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); | |
| 291 | 311 | box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); |
| 292 | 312 | } |
| 293 | 313 | |
| 294 | 314 | .pk-button-dark { |
| @@ -303,8 +323,9 @@ | ||
| 303 | 323 | border-color: #1d2124; |
| 304 | 324 | } |
| 305 | 325 | |
| 306 | 326 | .pk-button-dark:focus, .pk-button-dark.focus { |
| 327 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); | |
| 307 | 328 | box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); |
| 308 | 329 | } |
| 309 | 330 | |
| 310 | 331 | .pk-button-dark.disabled, .pk-button-dark:disabled { |
| @@ -321,8 +342,9 @@ | ||
| 321 | 342 | } |
| 322 | 343 | |
| 323 | 344 | .pk-button-dark:not(:disabled):not(.disabled):active:focus, .pk-button-dark:not(:disabled):not(.disabled).active:focus, |
| 324 | 345 | .show > .pk-button-dark.dropdown-toggle:focus { |
| 346 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); | |
| 325 | 347 | box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); |
| 326 | 348 | } |
| 327 | 349 | |
| 328 | 350 | .pk-button-outline-primary { |
| @@ -336,8 +358,9 @@ | ||
| 336 | 358 | border-color: #007bff; |
| 337 | 359 | } |
| 338 | 360 | |
| 339 | 361 | .pk-button-outline-primary:focus, .pk-button-outline-primary.focus { |
| 362 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); | |
| 340 | 363 | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); |
| 341 | 364 | } |
| 342 | 365 | |
| 343 | 366 | .pk-button-outline-primary.disabled, .pk-button-outline-primary:disabled { |
| @@ -353,8 +376,9 @@ | ||
| 353 | 376 | } |
| 354 | 377 | |
| 355 | 378 | .pk-button-outline-primary:not(:disabled):not(.disabled):active:focus, .pk-button-outline-primary:not(:disabled):not(.disabled).active:focus, |
| 356 | 379 | .show > .pk-button-outline-primary.dropdown-toggle:focus { |
| 380 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); | |
| 357 | 381 | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); |
| 358 | 382 | } |
| 359 | 383 | |
| 360 | 384 | .pk-button-outline-secondary { |
| @@ -368,8 +392,9 @@ | ||
| 368 | 392 | border-color: #A0A0A0; |
| 369 | 393 | } |
| 370 | 394 | |
| 371 | 395 | .pk-button-outline-secondary:focus, .pk-button-outline-secondary.focus { |
| 396 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(160, 160, 160, 0.5); | |
| 372 | 397 | box-shadow: 0 0 0 0.2rem rgba(160, 160, 160, 0.5); |
| 373 | 398 | } |
| 374 | 399 | |
| 375 | 400 | .pk-button-outline-secondary.disabled, .pk-button-outline-secondary:disabled { |
| @@ -385,8 +410,9 @@ | ||
| 385 | 410 | } |
| 386 | 411 | |
| 387 | 412 | .pk-button-outline-secondary:not(:disabled):not(.disabled):active:focus, .pk-button-outline-secondary:not(:disabled):not(.disabled).active:focus, |
| 388 | 413 | .show > .pk-button-outline-secondary.dropdown-toggle:focus { |
| 414 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(160, 160, 160, 0.5); | |
| 389 | 415 | box-shadow: 0 0 0 0.2rem rgba(160, 160, 160, 0.5); |
| 390 | 416 | } |
| 391 | 417 | |
| 392 | 418 | .pk-button-outline-success { |
| @@ -400,8 +426,9 @@ | ||
| 400 | 426 | border-color: #28a745; |
| 401 | 427 | } |
| 402 | 428 | |
| 403 | 429 | .pk-button-outline-success:focus, .pk-button-outline-success.focus { |
| 430 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); | |
| 404 | 431 | box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); |
| 405 | 432 | } |
| 406 | 433 | |
| 407 | 434 | .pk-button-outline-success.disabled, .pk-button-outline-success:disabled { |
| @@ -417,8 +444,9 @@ | ||
| 417 | 444 | } |
| 418 | 445 | |
| 419 | 446 | .pk-button-outline-success:not(:disabled):not(.disabled):active:focus, .pk-button-outline-success:not(:disabled):not(.disabled).active:focus, |
| 420 | 447 | .show > .pk-button-outline-success.dropdown-toggle:focus { |
| 448 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); | |
| 421 | 449 | box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); |
| 422 | 450 | } |
| 423 | 451 | |
| 424 | 452 | .pk-button-outline-info { |
| @@ -432,8 +460,9 @@ | ||
| 432 | 460 | border-color: #17a2b8; |
| 433 | 461 | } |
| 434 | 462 | |
| 435 | 463 | .pk-button-outline-info:focus, .pk-button-outline-info.focus { |
| 464 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); | |
| 436 | 465 | box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); |
| 437 | 466 | } |
| 438 | 467 | |
| 439 | 468 | .pk-button-outline-info.disabled, .pk-button-outline-info:disabled { |
| @@ -449,8 +478,9 @@ | ||
| 449 | 478 | } |
| 450 | 479 | |
| 451 | 480 | .pk-button-outline-info:not(:disabled):not(.disabled):active:focus, .pk-button-outline-info:not(:disabled):not(.disabled).active:focus, |
| 452 | 481 | .show > .pk-button-outline-info.dropdown-toggle:focus { |
| 482 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); | |
| 453 | 483 | box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); |
| 454 | 484 | } |
| 455 | 485 | |
| 456 | 486 | .pk-button-outline-warning { |
| @@ -464,8 +494,9 @@ | ||
| 464 | 494 | border-color: #ffc107; |
| 465 | 495 | } |
| 466 | 496 | |
| 467 | 497 | .pk-button-outline-warning:focus, .pk-button-outline-warning.focus { |
| 498 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); | |
| 468 | 499 | box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); |
| 469 | 500 | } |
| 470 | 501 | |
| 471 | 502 | .pk-button-outline-warning.disabled, .pk-button-outline-warning:disabled { |
| @@ -481,8 +512,9 @@ | ||
| 481 | 512 | } |
| 482 | 513 | |
| 483 | 514 | .pk-button-outline-warning:not(:disabled):not(.disabled):active:focus, .pk-button-outline-warning:not(:disabled):not(.disabled).active:focus, |
| 484 | 515 | .show > .pk-button-outline-warning.dropdown-toggle:focus { |
| 516 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); | |
| 485 | 517 | box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); |
| 486 | 518 | } |
| 487 | 519 | |
| 488 | 520 | .pk-button-outline-danger { |
| @@ -496,8 +528,9 @@ | ||
| 496 | 528 | border-color: #dc3545; |
| 497 | 529 | } |
| 498 | 530 | |
| 499 | 531 | .pk-button-outline-danger:focus, .pk-button-outline-danger.focus { |
| 532 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); | |
| 500 | 533 | box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); |
| 501 | 534 | } |
| 502 | 535 | |
| 503 | 536 | .pk-button-outline-danger.disabled, .pk-button-outline-danger:disabled { |
| @@ -513,8 +546,9 @@ | ||
| 513 | 546 | } |
| 514 | 547 | |
| 515 | 548 | .pk-button-outline-danger:not(:disabled):not(.disabled):active:focus, .pk-button-outline-danger:not(:disabled):not(.disabled).active:focus, |
| 516 | 549 | .show > .pk-button-outline-danger.dropdown-toggle:focus { |
| 550 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); | |
| 517 | 551 | box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); |
| 518 | 552 | } |
| 519 | 553 | |
| 520 | 554 | .pk-button-outline-light { |
| @@ -528,8 +562,9 @@ | ||
| 528 | 562 | border-color: #f8f9fa; |
| 529 | 563 | } |
| 530 | 564 | |
| 531 | 565 | .pk-button-outline-light:focus, .pk-button-outline-light.focus { |
| 566 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); | |
| 532 | 567 | box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); |
| 533 | 568 | } |
| 534 | 569 | |
| 535 | 570 | .pk-button-outline-light.disabled, .pk-button-outline-light:disabled { |
| @@ -545,8 +580,9 @@ | ||
| 545 | 580 | } |
| 546 | 581 | |
| 547 | 582 | .pk-button-outline-light:not(:disabled):not(.disabled):active:focus, .pk-button-outline-light:not(:disabled):not(.disabled).active:focus, |
| 548 | 583 | .show > .pk-button-outline-light.dropdown-toggle:focus { |
| 584 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); | |
| 549 | 585 | box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); |
| 550 | 586 | } |
| 551 | 587 | |
| 552 | 588 | .pk-button-outline-dark { |
| @@ -560,8 +596,9 @@ | ||
| 560 | 596 | border-color: #343a40; |
| 561 | 597 | } |
| 562 | 598 | |
| 563 | 599 | .pk-button-outline-dark:focus, .pk-button-outline-dark.focus { |
| 600 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); | |
| 564 | 601 | box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); |
| 565 | 602 | } |
| 566 | 603 | |
| 567 | 604 | .pk-button-outline-dark.disabled, .pk-button-outline-dark:disabled { |
| @@ -577,8 +614,9 @@ | ||
| 577 | 614 | } |
| 578 | 615 | |
| 579 | 616 | .pk-button-outline-dark:not(:disabled):not(.disabled):active:focus, .pk-button-outline-dark:not(:disabled):not(.disabled).active:focus, |
| 580 | 617 | .show > .pk-button-outline-dark.dropdown-toggle:focus { |
| 618 | + -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); | |
| 581 | 619 | box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); |
| 582 | 620 | } |
| 583 | 621 | |
| 584 | 622 | .pk-button-lg { |
| @@ -606,10 +644,16 @@ | ||
| 606 | 644 | |
| 607 | 645 | /* Tabs */ |
| 608 | 646 | /*--------------------------------------------------------------*/ |
| 609 | 647 | .pk-nav { |
| 648 | + display: -webkit-box; | |
| 649 | + display: -ms-flexbox; | |
| 610 | 650 | display: flex; |
| 651 | + -webkit-box-orient: vertical; | |
| 652 | + -webkit-box-direction: normal; | |
| 653 | + -ms-flex-direction: column; | |
| 611 | 654 | flex-direction: column; |
| 655 | + -ms-flex-wrap: wrap; | |
| 612 | 656 | flex-wrap: wrap; |
| 613 | 657 | padding-left: 0; |
| 614 | 658 | margin-bottom: 0; |
| 615 | 659 | list-style: none; |
| @@ -615,13 +659,15 @@ | ||
| 615 | 659 | list-style: none; |
| 616 | 660 | } |
| 617 | 661 | |
| 618 | 662 | .pk-fade { |
| 663 | + -webkit-transition: opacity 0.15s linear; | |
| 619 | 664 | transition: opacity 0.15s linear; |
| 620 | 665 | } |
| 621 | 666 | |
| 622 | 667 | @media (prefers-reduced-motion: reduce) { |
| 623 | 668 | .pk-fade { |
| 669 | + -webkit-transition: none; | |
| 624 | 670 | transition: none; |
| 625 | 671 | } |
| 626 | 672 | } |
| 627 | 673 | |
| @@ -670,8 +716,9 @@ | ||
| 670 | 716 | padding: 1rem 1.5rem; |
| 671 | 717 | line-height: 1; |
| 672 | 718 | font-size: 1rem; |
| 673 | 719 | text-decoration: none !important; |
| 720 | + -webkit-box-shadow: none !important; | |
| 674 | 721 | box-shadow: none !important; |
| 675 | 722 | } |
| 676 | 723 | |
| 677 | 724 | .pk-tabs .pk-tab-pane > *:last-child { |
| @@ -704,8 +751,11 @@ | ||
| 704 | 751 | .pk-tabs .pk-nav-tabs .pk-nav-link.pk-active { |
| 705 | 752 | background-color: transparent; |
| 706 | 753 | } |
| 707 | 754 | .pk-tabs-horizontal .pk-nav { |
| 755 | + -webkit-box-orient: horizontal; | |
| 756 | + -webkit-box-direction: normal; | |
| 757 | + -ms-flex-direction: row; | |
| 708 | 758 | flex-direction: row; |
| 709 | 759 | } |
| 710 | 760 | .pk-tabs-horizontal .pk-nav-tabs { |
| 711 | 761 | border-bottom: 1px solid #dee2e6; |
| @@ -710,8 +760,9 @@ | ||
| 710 | 760 | .pk-tabs-horizontal .pk-nav-tabs { |
| 711 | 761 | border-bottom: 1px solid #dee2e6; |
| 712 | 762 | } |
| 713 | 763 | .pk-tabs-horizontal .pk-nav-item { |
| 764 | + -webkit-transform: translateY(1px); | |
| 714 | 765 | transform: translateY(1px); |
| 715 | 766 | } |
| 716 | 767 | .pk-tabs-horizontal .pk-nav-link.pk-active { |
| 717 | 768 | border-bottom-color: #fff; |
| @@ -716,11 +767,15 @@ | ||
| 716 | 767 | .pk-tabs-horizontal .pk-nav-link.pk-active { |
| 717 | 768 | border-bottom-color: #fff; |
| 718 | 769 | } |
| 719 | 770 | .pk-tabs-vertical .pk-tabs-container { |
| 771 | + display: -webkit-box; | |
| 772 | + display: -ms-flexbox; | |
| 720 | 773 | display: flex; |
| 721 | 774 | } |
| 722 | 775 | .pk-tabs-vertical .pk-tabs-navigation { |
| 776 | + -webkit-box-flex: 0; | |
| 777 | + -ms-flex: 0 0 30%; | |
| 723 | 778 | flex: 0 0 30%; |
| 724 | 779 | } |
| 725 | 780 | .pk-tabs-vertical .pk-tabs-navigation .pk-nav { |
| 726 | 781 | margin-bottom: 0; |
| @@ -727,16 +782,22 @@ | ||
| 727 | 782 | } |
| 728 | 783 | .pk-tabs-vertical .pk-tabs-navigation .pk-nav-item { |
| 729 | 784 | width: 100%; |
| 730 | 785 | max-width: 100%; |
| 786 | + -webkit-transform: translateX(1px); | |
| 731 | 787 | transform: translateX(1px); |
| 732 | 788 | } |
| 733 | 789 | .pk-tabs-vertical .pk-tabs-content { |
| 734 | 790 | margin-left: 5%; |
| 791 | + -webkit-box-flex: 0; | |
| 792 | + -ms-flex: 0 0 65%; | |
| 735 | 793 | flex: 0 0 65%; |
| 736 | 794 | } |
| 737 | 795 | .pk-tabs-vertical .pk-nav-tabs { |
| 738 | 796 | border-right: 1px solid #dee2e6; |
| 797 | + -webkit-box-orient: vertical; | |
| 798 | + -webkit-box-direction: normal; | |
| 799 | + -ms-flex-direction: column; | |
| 739 | 800 | flex-direction: column; |
| 740 | 801 | height: 100%; |
| 741 | 802 | } |
| 742 | 803 | .pk-tabs-vertical .pk-nav-tabs .pk-nav-link { |
| @@ -745,8 +806,11 @@ | ||
| 745 | 806 | .pk-tabs-vertical .pk-nav-tabs .pk-nav-link.pk-active { |
| 746 | 807 | border-right-color: #fff; |
| 747 | 808 | } |
| 748 | 809 | .pk-tabs-vertical .pk-nav-pills { |
| 810 | + -webkit-box-orient: vertical; | |
| 811 | + -webkit-box-direction: normal; | |
| 812 | + -ms-flex-direction: column; | |
| 749 | 813 | flex-direction: column; |
| 750 | 814 | } |
| 751 | 815 | } |
| 752 | 816 | |
| @@ -753,9 +817,14 @@ | ||
| 753 | 817 | /* Collapsibles */ |
| 754 | 818 | /*--------------------------------------------------------------*/ |
| 755 | 819 | .pk-card { |
| 756 | 820 | position: relative; |
| 821 | + display: -webkit-box; | |
| 822 | + display: -ms-flexbox; | |
| 757 | 823 | display: flex; |
| 824 | + -webkit-box-orient: vertical; | |
| 825 | + -webkit-box-direction: normal; | |
| 826 | + -ms-flex-direction: column; | |
| 758 | 827 | flex-direction: column; |
| 759 | 828 | min-width: 0; |
| 760 | 829 | word-wrap: break-word; |
| 761 | 830 | margin-bottom: 0; |
| @@ -772,8 +841,10 @@ | ||
| 772 | 841 | overflow: hidden; |
| 773 | 842 | } |
| 774 | 843 | |
| 775 | 844 | .pk-card-body { |
| 845 | + -webkit-box-flex: 1; | |
| 846 | + -ms-flex: 1 1 auto; | |
| 776 | 847 | flex: 1 1 auto; |
| 777 | 848 | padding: 0.75rem 0; |
| 778 | 849 | } |
| 779 | 850 | |
| @@ -786,15 +857,21 @@ | ||
| 786 | 857 | margin-bottom: 0; |
| 787 | 858 | } |
| 788 | 859 | |
| 789 | 860 | .pk-card-header a { |
| 861 | + display: -webkit-box; | |
| 862 | + display: -ms-flexbox; | |
| 790 | 863 | display: flex; |
| 864 | + -webkit-box-pack: justify; | |
| 865 | + -ms-flex-pack: justify; | |
| 791 | 866 | justify-content: space-between; |
| 792 | 867 | padding: 0.75rem 0; |
| 793 | 868 | border: none; |
| 794 | 869 | color: #212529; |
| 870 | + -webkit-transition: 0.3s; | |
| 795 | 871 | transition: 0.3s; |
| 796 | 872 | text-decoration: none !important; |
| 873 | + -webkit-box-shadow: none !important; | |
| 797 | 874 | box-shadow: none !important; |
| 798 | 875 | } |
| 799 | 876 | |
| 800 | 877 | .pk-card-header a:hover { |
| @@ -803,8 +880,9 @@ | ||
| 803 | 880 | |
| 804 | 881 | .pk-card-header a:after { |
| 805 | 882 | font-family: 'powerkit-icons'; |
| 806 | 883 | content: "\e914"; |
| 884 | + -webkit-transition: 0.3s; | |
| 807 | 885 | transition: 0.3s; |
| 808 | 886 | } |
| 809 | 887 | |
| 810 | 888 | .pk-card.expanded .pk-card-header a { |
| @@ -811,8 +889,9 @@ | ||
| 811 | 889 | color: inherit; |
| 812 | 890 | } |
| 813 | 891 | |
| 814 | 892 | .pk-card.expanded .pk-card-header a:after { |
| 893 | + -webkit-transform: rotate(90deg); | |
| 815 | 894 | transform: rotate(90deg); |
| 816 | 895 | } |
| 817 | 896 | |
| 818 | 897 | /* Progress */ |
| @@ -834,8 +913,10 @@ | ||
| 834 | 913 | } |
| 835 | 914 | } |
| 836 | 915 | |
| 837 | 916 | .pk-progress { |
| 917 | + display: -webkit-box; | |
| 918 | + display: -ms-flexbox; | |
| 838 | 919 | display: flex; |
| 839 | 920 | height: 1rem; |
| 840 | 921 | overflow: hidden; |
| 841 | 922 | font-size: 0.75rem; |
| @@ -843,19 +924,28 @@ | ||
| 843 | 924 | border-radius: 0.25rem; |
| 844 | 925 | } |
| 845 | 926 | |
| 846 | 927 | .pk-progress-bar { |
| 928 | + display: -webkit-box; | |
| 929 | + display: -ms-flexbox; | |
| 847 | 930 | display: flex; |
| 931 | + -webkit-box-orient: vertical; | |
| 932 | + -webkit-box-direction: normal; | |
| 933 | + -ms-flex-direction: column; | |
| 848 | 934 | flex-direction: column; |
| 935 | + -webkit-box-pack: center; | |
| 936 | + -ms-flex-pack: center; | |
| 849 | 937 | justify-content: center; |
| 850 | 938 | color: #fff; |
| 851 | 939 | text-align: center; |
| 852 | 940 | white-space: nowrap; |
| 941 | + -webkit-transition: width 0.6s ease; | |
| 853 | 942 | transition: width 0.6s ease; |
| 854 | 943 | } |
| 855 | 944 | |
| 856 | 945 | @media (prefers-reduced-motion: reduce) { |
| 857 | 946 | .pk-progress-bar { |
| 947 | + -webkit-transition: none; | |
| 858 | 948 | transition: none; |
| 859 | 949 | } |
| 860 | 950 | } |
| 861 | 951 | |