108 lines
2.7 KiB
Sass
108 lines
2.7 KiB
Sass
|
@use 'sass:math'
|
||
|
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
|
||
|
|
.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
|
||
|
|
|
||
|
|
.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
|