VFab.sass 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. @use '../../styles/tools'
  2. @use '../../styles/settings'
  3. @use 'sass:math'
  4. @use 'sass:map'
  5. @use './variables' as *
  6. @use './mixins' as *
  7. @include tools.layer('components')
  8. .v-fab
  9. align-items: center
  10. display: inline-flex
  11. flex: 1 1 auto
  12. pointer-events: none
  13. position: relative
  14. transition-duration: $fab-transition-duration
  15. transition-timing-function: $fab-transition-timing-function
  16. vertical-align: middle
  17. .v-btn
  18. pointer-events: auto
  19. &--variant-elevated
  20. @include tools.elevation(3)
  21. &--app,
  22. &--absolute
  23. display: flex
  24. &--start,
  25. &--left
  26. justify-content: flex-start
  27. &--center
  28. align-items: center
  29. justify-content: center
  30. &--end,
  31. &--right
  32. justify-content: flex-end
  33. &--bottom
  34. align-items: flex-end
  35. &--top
  36. align-items: flex-start
  37. &--extended
  38. .v-btn
  39. // min-height: 56px
  40. // min-width: 80px
  41. border-radius: 9999px !important
  42. .v-fab__container
  43. align-self: center
  44. display: inline-flex
  45. position: absolute
  46. vertical-align: middle
  47. .v-fab--app &
  48. margin: 12px
  49. .v-fab--absolute &
  50. position: absolute
  51. z-index: 4
  52. .v-fab--offset.v-fab--top &
  53. transform: translateY(-50%)
  54. .v-fab--offset.v-fab--bottom &
  55. transform: translateY(50%)
  56. .v-fab--top &
  57. top: 0
  58. .v-fab--bottom &
  59. bottom: 0
  60. .v-fab--left &,
  61. .v-fab--start &
  62. left: 0
  63. .v-fab--right &,
  64. .v-fab--end &
  65. right: 0