VStepperItem.sass 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. @use '../../styles/settings'
  2. @use '../../styles/tools'
  3. @use './variables' as *
  4. @include tools.layer('components')
  5. .v-stepper-item
  6. align-items: center
  7. align-self: stretch
  8. display: inline-flex
  9. flex: none
  10. outline: none
  11. opacity: $stepper-item-opacity
  12. padding: $stepper-item-padding
  13. position: relative
  14. transition-duration: $stepper-item-transition-duration
  15. transition-property: $stepper-item-transition-property
  16. transition-timing-function: $stepper-item-transition-timing-function
  17. @include tools.states('.v-stepper-item__overlay')
  18. .v-stepper--non-linear &
  19. opacity: var(--v-high-emphasis-opacity)
  20. &--selected
  21. opacity: 1
  22. &--error
  23. color: rgb(var(--v-theme-error))
  24. &--disabled
  25. opacity: var(--v-medium-emphasis-opacity)
  26. pointer-events: none
  27. .v-stepper--alt-labels &
  28. flex-direction: column
  29. justify-content: flex-start
  30. align-items: center
  31. flex-basis: $stepper-alt-labels-flex-basis
  32. .v-stepper-item__avatar.v-avatar
  33. background: $stepper-item-avatar-background
  34. color: $stepper-item-avatar-color
  35. font-size: $stepper-item-avatar-font-size
  36. margin-inline-end: $stepper-item-avatar-margin-inline-end
  37. .v-stepper--mobile &
  38. margin-inline-end: 0
  39. .v-icon
  40. font-size: $stepper-item-avatar-icon-font-size
  41. .v-stepper-item--selected &,
  42. .v-stepper-item--complete &
  43. background: rgb(var(--v-theme-surface-variant))
  44. .v-stepper-item--error &
  45. background: rgb(var(--v-theme-error))
  46. .v-stepper--alt-labels &
  47. margin-bottom: $stepper-item-alt-labels-margin-bottom
  48. margin-inline-end: 0
  49. //.v-stepper-item__content
  50. // .v-stepper--alt-labels &
  51. // min-height: 28px
  52. .v-stepper-item__title
  53. line-height: $stepper-item-title-line-height
  54. .v-stepper--mobile &
  55. display: none
  56. .v-stepper-item__subtitle
  57. font-size: $stepper-item-subtitle-font-size
  58. text-align: left
  59. line-height: $stepper-item-subtitle-line-height
  60. opacity: $stepper-item-subtitle-opacity
  61. .v-stepper--alt-labels &
  62. text-align: center
  63. .v-stepper--mobile &
  64. display: none
  65. .v-stepper-item__overlay
  66. background-color: currentColor
  67. border-radius: inherit
  68. opacity: 0
  69. transition: opacity .2s ease-in-out
  70. .v-stepper-item__overlay,
  71. .v-stepper-item__underlay
  72. pointer-events: none
  73. @include tools.absolute()