123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- @use 'sass:math'
- @use '../../styles/tools'
- @use './variables' as *
- @include tools.layer('components')
- .v-banner
- display: grid
- flex: 1 1
- font-size: $banner-font-size
- grid-template-areas: "prepend content actions"
- grid-template-columns: max-content auto max-content
- grid-template-rows: max-content max-content
- line-height: $banner-line-height
- overflow: hidden
- padding-inline: $banner-padding-inline-start $banner-padding-inline-end
- padding-top: $banner-padding * 2
- padding-bottom: $banner-padding * 2
- position: relative
- width: $banner-width
- @include tools.border($banner-border...)
- @include tools.elevation($banner-elevation)
- @include tools.position($banner-positions)
- @include tools.rounded($banner-border-radius)
- @include tools.theme($banner-theme...)
- &--rounded
- @include tools.rounded($banner-rounded-border-radius)
- &--stacked
- &:not(.v-banner--one-line)
- grid-template-areas: "prepend content" ". actions"
- .v-banner-text
- padding-inline-end: $banner-stacked-padding-inline-end
- @at-root
- @include tools.density('v-banner', $banner-density) using ($modifier)
- .v-banner-actions
- margin-bottom: -($banner-padding + $modifier)
- &.v-banner--one-line
- padding-top: $banner-padding + $modifier
- padding-bottom: $banner-padding + $modifier
- .v-banner-actions
- margin-bottom: 0
- @if ($modifier == 0px)
- &.v-banner--one-line
- padding-top: $banner-padding + $modifier + 2
- &.v-banner--two-line
- padding-top: $banner-padding * 2 + $modifier
- padding-bottom: $banner-padding * 2 + $modifier
- &.v-banner--three-line
- padding-top: $banner-padding * 3 + $modifier
- padding-bottom: $banner-padding * 2 + $modifier
- &:not(.v-banner--one-line),
- &.v-banner--two-line,
- &.v-banner--three-line
- .v-banner-actions
- margin-top: $banner-action-margin + $modifier
- &--sticky
- top: $banner-sticky-top
- z-index: $banner-sticky-z-index
- .v-banner__content
- align-items: center
- display: flex
- grid-area: content
- .v-banner__prepend
- align-self: flex-start
- grid-area: prepend
- margin-inline-end: $banner-prepend-margin-end
- .v-banner-actions
- align-self: flex-end
- display: flex
- flex: 0 1
- grid-area: actions
- justify-content: flex-end
- .v-banner--two-line &,
- .v-banner--three-line &
- margin-top: $banner-actions-line-margin-top
- .v-banner-text
- -webkit-box-orient: vertical
- display: -webkit-box
- padding-inline-end: $banner-text-padding-end
- overflow: hidden
- .v-banner--one-line &
- -webkit-line-clamp: 1
- .v-banner--two-line &
- -webkit-line-clamp: 2
- .v-banner--three-line &
- -webkit-line-clamp: 3
- .v-banner--two-line &,
- .v-banner--three-line &
- align-self: flex-start
|