133 lines
3.2 KiB
Sass
133 lines
3.2 KiB
Sass
|
@use '../../styles/tools'
|
||
|
|
@use './variables' as *
|
||
|
|
|
||
|
|
.v-alert
|
||
|
|
display: grid
|
||
|
|
flex: 1 1
|
||
|
|
grid-template-areas: "prepend content append close" ". content . ."
|
||
|
|
grid-template-columns: max-content auto max-content max-content
|
||
|
|
position: relative
|
||
|
|
padding: $alert-padding
|
||
|
|
overflow: hidden
|
||
|
|
--v-border-color: #{$alert-border-color}
|
||
|
|
|
||
|
|
@include tools.position($alert-positions)
|
||
|
|
@include tools.rounded($alert-border-radius)
|
||
|
|
@include tools.variant($alert-variants...)
|
||
|
|
|
||
|
|
&--prominent
|
||
|
|
grid-template-areas: "prepend content append close" "prepend content . ."
|
||
|
|
|
||
|
|
&.v-alert--border
|
||
|
|
--v-border-opacity: #{$alert-border-opacity}
|
||
|
|
|
||
|
|
&.v-alert--border-start
|
||
|
|
padding-inline-start: $alert-padding + $alert-border-thin-width
|
||
|
|
|
||
|
|
&.v-alert--border-end
|
||
|
|
padding-inline-end: $alert-padding + $alert-border-thin-width
|
||
|
|
|
||
|
|
&--variant-plain
|
||
|
|
transition: $alert-plain-transition
|
||
|
|
|
||
|
|
@at-root
|
||
|
|
@include tools.density('v-alert', $alert-density) using ($modifier)
|
||
|
|
padding-bottom: $alert-padding + $modifier
|
||
|
|
padding-top: $alert-padding + $modifier
|
||
|
|
|
||
|
|
&.v-alert--border-top
|
||
|
|
padding-top: $alert-padding + $alert-border-thin-width + $modifier
|
||
|
|
|
||
|
|
&.v-alert--border-bottom
|
||
|
|
padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
|
||
|
|
|
||
|
|
.v-alert__border
|
||
|
|
border-radius: inherit
|
||
|
|
bottom: 0
|
||
|
|
left: 0
|
||
|
|
opacity: var(--v-border-opacity)
|
||
|
|
position: absolute
|
||
|
|
pointer-events: none
|
||
|
|
right: 0
|
||
|
|
top: 0
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
@include tools.border($alert-border...)
|
||
|
|
|
||
|
|
.v-alert--border-start &
|
||
|
|
border-inline-start-width: $alert-border-thin-width
|
||
|
|
|
||
|
|
.v-alert--border-end &
|
||
|
|
border-inline-end-width: $alert-border-thin-width
|
||
|
|
|
||
|
|
.v-alert--border-top &
|
||
|
|
border-top-width: $alert-border-thin-width
|
||
|
|
|
||
|
|
.v-alert--border-bottom &
|
||
|
|
border-bottom-width: $alert-border-thin-width
|
||
|
|
|
||
|
|
.v-alert__close
|
||
|
|
flex: 0 1 auto
|
||
|
|
grid-area: close
|
||
|
|
|
||
|
|
.v-alert__content
|
||
|
|
align-self: center
|
||
|
|
grid-area: content
|
||
|
|
overflow: hidden
|
||
|
|
|
||
|
|
.v-alert__append,
|
||
|
|
.v-alert__close
|
||
|
|
align-self: flex-start
|
||
|
|
margin-inline-start: $alert-append-margin-inline-start
|
||
|
|
|
||
|
|
.v-alert__append
|
||
|
|
align-self: flex-start
|
||
|
|
grid-area: append
|
||
|
|
|
||
|
|
+ .v-alert__close
|
||
|
|
margin-inline-start: $alert-append-close-margin-inline-start
|
||
|
|
|
||
|
|
.v-alert__prepend
|
||
|
|
align-self: flex-start
|
||
|
|
display: flex
|
||
|
|
align-items: center
|
||
|
|
grid-area: prepend
|
||
|
|
margin-inline-end: $alert-prepend-margin-inline-end
|
||
|
|
|
||
|
|
.v-alert--prominent &
|
||
|
|
align-self: center
|
||
|
|
|
||
|
|
.v-alert__underlay
|
||
|
|
grid-area: none
|
||
|
|
position: absolute
|
||
|
|
|
||
|
|
.v-alert--border-start &
|
||
|
|
border-top-left-radius: 0
|
||
|
|
border-bottom-left-radius: 0
|
||
|
|
|
||
|
|
.v-alert--border-end &
|
||
|
|
border-top-right-radius: 0
|
||
|
|
border-bottom-right-radius: 0
|
||
|
|
|
||
|
|
.v-alert--border-top &
|
||
|
|
border-top-left-radius: 0
|
||
|
|
border-top-right-radius: 0
|
||
|
|
|
||
|
|
.v-alert--border-bottom &
|
||
|
|
border-bottom-left-radius: 0
|
||
|
|
border-bottom-right-radius: 0
|
||
|
|
|
||
|
|
.v-alert-title
|
||
|
|
align-items: center
|
||
|
|
align-self: center
|
||
|
|
display: flex
|
||
|
|
font-size: $alert-title-font-size
|
||
|
|
font-weight: $alert-title-font-weight
|
||
|
|
hyphens: $alert-title-hyphens
|
||
|
|
letter-spacing: $alert-title-letter-spacing
|
||
|
|
line-height: $alert-title-line-height
|
||
|
|
overflow-wrap: $alert-title-overflow-wrap
|
||
|
|
text-transform: $alert-title-text-transform
|
||
|
|
word-break: $alert-title-word-break
|
||
|
|
word-wrap: $alert-title-word-wrap
|