VStepperItem.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. .v-stepper-item {
  2. align-items: center;
  3. align-self: stretch;
  4. display: inline-flex;
  5. flex: none;
  6. outline: none;
  7. opacity: var(--v-medium-emphasis-opacity);
  8. padding: 1.5rem;
  9. position: relative;
  10. transition-duration: 0.2s;
  11. transition-property: opacity;
  12. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  13. }
  14. .v-stepper-item:hover > .v-stepper-item__overlay {
  15. opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
  16. }
  17. .v-stepper-item:focus-visible > .v-stepper-item__overlay {
  18. opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
  19. }
  20. @supports not selector(:focus-visible) {
  21. .v-stepper-item:focus > .v-stepper-item__overlay {
  22. opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
  23. }
  24. }
  25. .v-stepper-item--active > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true] > .v-stepper-item__overlay {
  26. opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
  27. }
  28. .v-stepper-item--active:hover > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true]:hover > .v-stepper-item__overlay {
  29. opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
  30. }
  31. .v-stepper-item--active:focus-visible > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-stepper-item__overlay {
  32. opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
  33. }
  34. @supports not selector(:focus-visible) {
  35. .v-stepper-item--active:focus > .v-stepper-item__overlay, .v-stepper-item[aria-haspopup=menu][aria-expanded=true]:focus > .v-stepper-item__overlay {
  36. opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
  37. }
  38. }
  39. .v-stepper--non-linear .v-stepper-item {
  40. opacity: var(--v-high-emphasis-opacity);
  41. }
  42. .v-stepper-item--selected {
  43. opacity: 1;
  44. }
  45. .v-stepper-item--error {
  46. color: rgb(var(--v-theme-error));
  47. }
  48. .v-stepper-item--disabled {
  49. opacity: var(--v-medium-emphasis-opacity);
  50. pointer-events: none;
  51. }
  52. .v-stepper--alt-labels .v-stepper-item {
  53. flex-direction: column;
  54. justify-content: flex-start;
  55. align-items: center;
  56. flex-basis: 175px;
  57. }
  58. .v-stepper-item__avatar.v-avatar {
  59. background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity));
  60. color: rgb(var(--v-theme-on-surface-variant));
  61. font-size: 0.75rem;
  62. margin-inline-end: 8px;
  63. }
  64. .v-stepper--mobile .v-stepper-item__avatar.v-avatar {
  65. margin-inline-end: 0;
  66. }
  67. .v-stepper-item__avatar.v-avatar .v-icon {
  68. font-size: 0.875rem;
  69. }
  70. .v-stepper-item--selected .v-stepper-item__avatar.v-avatar, .v-stepper-item--complete .v-stepper-item__avatar.v-avatar {
  71. background: rgb(var(--v-theme-surface-variant));
  72. }
  73. .v-stepper-item--error .v-stepper-item__avatar.v-avatar {
  74. background: rgb(var(--v-theme-error));
  75. }
  76. .v-stepper--alt-labels .v-stepper-item__avatar.v-avatar {
  77. margin-bottom: 16px;
  78. margin-inline-end: 0;
  79. }
  80. .v-stepper-item__title {
  81. line-height: 1;
  82. }
  83. .v-stepper--mobile .v-stepper-item__title {
  84. display: none;
  85. }
  86. .v-stepper-item__subtitle {
  87. font-size: 0.75rem;
  88. text-align: left;
  89. line-height: 1;
  90. opacity: var(--v-medium-emphasis-opacity);
  91. }
  92. .v-stepper--alt-labels .v-stepper-item__subtitle {
  93. text-align: center;
  94. }
  95. .v-stepper--mobile .v-stepper-item__subtitle {
  96. display: none;
  97. }
  98. .v-stepper-item__overlay {
  99. background-color: currentColor;
  100. border-radius: inherit;
  101. opacity: 0;
  102. transition: opacity 0.2s ease-in-out;
  103. }
  104. .v-stepper-item__overlay,
  105. .v-stepper-item__underlay {
  106. pointer-events: none;
  107. }
  108. .v-stepper-item__overlay,
  109. .v-stepper-item__underlay {
  110. position: absolute;
  111. top: 0;
  112. left: 0;
  113. width: 100%;
  114. height: 100%;
  115. }