VStepperItem.css 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .v-stepper-item {
  2. align-items: center;
  3. align-self: stretch;
  4. display: inline-flex;
  5. flex: none;
  6. opacity: var(--v-medium-emphasis-opacity);
  7. padding: 1.5rem;
  8. transition-duration: 0.2s;
  9. transition-property: opacity;
  10. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  11. }
  12. .v-stepper-item--selected {
  13. opacity: 1;
  14. }
  15. .v-stepper-item--error {
  16. color: rgb(var(--v-theme-error));
  17. }
  18. .v-stepper-item--disabled {
  19. opacity: var(--v-medium-emphasis-opacity);
  20. pointer-events: none;
  21. }
  22. .v-stepper--alt-labels .v-stepper-item {
  23. flex-direction: column;
  24. justify-content: flex-start;
  25. align-items: center;
  26. flex-basis: 175px;
  27. }
  28. .v-stepper-item__avatar.v-avatar {
  29. background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity));
  30. color: rgb(var(--v-theme-on-surface-variant));
  31. font-size: 0.75rem;
  32. margin-inline-end: 8px;
  33. }
  34. .v-stepper-item__avatar.v-avatar .v-icon {
  35. font-size: 0.875rem;
  36. }
  37. .v-stepper-item--selected .v-stepper-item__avatar.v-avatar, .v-stepper-item--complete .v-stepper-item__avatar.v-avatar {
  38. background: rgb(var(--v-theme-surface-variant));
  39. }
  40. .v-stepper-item--error .v-stepper-item__avatar.v-avatar {
  41. background: rgb(var(--v-theme-error));
  42. }
  43. .v-stepper--alt-labels .v-stepper-item__avatar.v-avatar {
  44. margin-bottom: 16px;
  45. margin-inline-end: 0;
  46. }
  47. .v-stepper-item__title {
  48. line-height: 1;
  49. }
  50. .v-stepper--mobile .v-stepper-item__title {
  51. display: none;
  52. }
  53. .v-stepper-item__subtitle {
  54. font-size: 0.75rem;
  55. text-align: left;
  56. line-height: 1;
  57. opacity: var(--v-medium-emphasis-opacity);
  58. }
  59. .v-stepper--alt-labels .v-stepper-item__subtitle {
  60. text-align: center;
  61. }
  62. .v-stepper--mobile .v-stepper-item__subtitle {
  63. display: none;
  64. }