VStepperVerticalItem.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .v-stepper-vertical-item {
  2. position: relative;
  3. transition-duration: 0.2s;
  4. transition-property: opacity;
  5. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  6. }
  7. .v-stepper-vertical-item__title {
  8. font-size: 1rem;
  9. }
  10. .v-stepper-vertical-item__subtitle {
  11. font-size: 0.75rem;
  12. }
  13. .v-stepper-vertical-item .v-expansion-panel-text {
  14. padding-inline-start: 32px;
  15. }
  16. .v-stepper-vertical-item:not(:last-child):before {
  17. content: "";
  18. position: absolute;
  19. width: 2px;
  20. height: calc(100% - 30px);
  21. background: rgba(var(--v-border-color), var(--v-border-opacity));
  22. left: 35px;
  23. top: 44px;
  24. z-index: 1;
  25. transition-duration: 300ms;
  26. transition-property: height;
  27. }
  28. .v-stepper-vertical-item:after {
  29. display: none;
  30. }
  31. .v-stepper-vertical-item.v-expansion-panel--disabled .v-expansion-panel-title, .v-stepper-vertical-item:not(.v-stepper-vertical-item--editable) .v-expansion-panel-title {
  32. pointer-events: none;
  33. }
  34. .v-stepper-vertical-item.v-expansion-panel--disabled .v-expansion-panel-title .v-expansion-panel-title__overlay, .v-stepper-vertical-item:not(.v-stepper-vertical-item--editable) .v-expansion-panel-title .v-expansion-panel-title__overlay {
  35. opacity: 0;
  36. }
  37. .v-stepper-vertical-item__avatar.v-avatar {
  38. background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity));
  39. color: rgb(var(--v-theme-on-surface-variant));
  40. transition-property: background;
  41. }
  42. .v-stepper-vertical-item__avatar.v-avatar .v-icon {
  43. font-size: 0.875rem;
  44. }
  45. .v-expansion-panel--active .v-stepper-vertical-item__avatar.v-avatar {
  46. background: rgb(var(--v-theme-surface-variant));
  47. }
  48. .v-stepper-vertical-item--error .v-stepper-vertical-item__avatar.v-avatar {
  49. background: rgb(var(--v-theme-error));
  50. color: rgb(var(--v-theme-on-error));
  51. }
  52. .v-stepper-vertical-item--error .v-stepper-vertical-item__title {
  53. color: rgb(var(--v-theme-error));
  54. }
  55. .v-stepper-vertical-item--error .v-stepper-vertical-item__subtitle {
  56. color: rgb(var(--v-theme-error));
  57. }
  58. .v-stepper-vertical-actions.v-stepper-actions .v-btn {
  59. margin-inline-end: 8px;
  60. }
  61. .v-stepper .v-stepper-vertical-actions.v-stepper-actions {
  62. justify-content: flex-end;
  63. padding: 24px 0 0;
  64. flex-direction: row-reverse;
  65. }