VBanner.sass 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. @use 'sass:math'
  2. @use '../../styles/tools'
  3. @use './variables' as *
  4. @include tools.layer('components')
  5. .v-banner
  6. display: grid
  7. flex: 1 1
  8. font-size: $banner-font-size
  9. grid-template-areas: "prepend content actions"
  10. grid-template-columns: max-content auto max-content
  11. grid-template-rows: max-content max-content
  12. line-height: $banner-line-height
  13. overflow: hidden
  14. padding-inline: $banner-padding-inline-start $banner-padding-inline-end
  15. padding-top: $banner-padding * 2
  16. padding-bottom: $banner-padding * 2
  17. position: relative
  18. width: $banner-width
  19. @include tools.border($banner-border...)
  20. @include tools.elevation($banner-elevation)
  21. @include tools.position($banner-positions)
  22. @include tools.rounded($banner-border-radius)
  23. @include tools.theme($banner-theme...)
  24. &--rounded
  25. @include tools.rounded($banner-rounded-border-radius)
  26. &--stacked
  27. &:not(.v-banner--one-line)
  28. grid-template-areas: "prepend content" ". actions"
  29. .v-banner-text
  30. padding-inline-end: $banner-stacked-padding-inline-end
  31. @at-root
  32. @include tools.density('v-banner', $banner-density) using ($modifier)
  33. .v-banner-actions
  34. margin-bottom: -($banner-padding + $modifier)
  35. &.v-banner--one-line
  36. padding-top: $banner-padding + $modifier
  37. padding-bottom: $banner-padding + $modifier
  38. .v-banner-actions
  39. margin-bottom: 0
  40. @if ($modifier == 0px)
  41. &.v-banner--one-line
  42. padding-top: $banner-padding + $modifier + 2
  43. &.v-banner--two-line
  44. padding-top: $banner-padding * 2 + $modifier
  45. padding-bottom: $banner-padding * 2 + $modifier
  46. &.v-banner--three-line
  47. padding-top: $banner-padding * 3 + $modifier
  48. padding-bottom: $banner-padding * 2 + $modifier
  49. &:not(.v-banner--one-line),
  50. &.v-banner--two-line,
  51. &.v-banner--three-line
  52. .v-banner-actions
  53. margin-top: $banner-action-margin + $modifier
  54. &--sticky
  55. top: $banner-sticky-top
  56. z-index: $banner-sticky-z-index
  57. .v-banner__content
  58. align-items: center
  59. display: flex
  60. grid-area: content
  61. .v-banner__prepend
  62. align-self: flex-start
  63. grid-area: prepend
  64. margin-inline-end: $banner-prepend-margin-end
  65. .v-banner-actions
  66. align-self: flex-end
  67. display: flex
  68. flex: 0 1
  69. grid-area: actions
  70. justify-content: flex-end
  71. .v-banner--two-line &,
  72. .v-banner--three-line &
  73. margin-top: $banner-actions-line-margin-top
  74. .v-banner-text
  75. -webkit-box-orient: vertical
  76. display: -webkit-box
  77. padding-inline-end: $banner-text-padding-end
  78. overflow: hidden
  79. .v-banner--one-line &
  80. -webkit-line-clamp: 1
  81. .v-banner--two-line &
  82. -webkit-line-clamp: 2
  83. .v-banner--three-line &
  84. -webkit-line-clamp: 3
  85. .v-banner--two-line &,
  86. .v-banner--three-line &
  87. align-self: flex-start