routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+81
@@ -0,0 +1,81 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-badge
|
||||
display: inline-block
|
||||
line-height: $badge-line-height
|
||||
|
||||
.v-badge__badge
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
border-radius: $badge-border-radius
|
||||
font-family: $badge-font-family
|
||||
font-size: $badge-font-size
|
||||
font-weight: $badge-font-weight
|
||||
height: $badge-height
|
||||
justify-content: center
|
||||
min-width: $badge-min-width
|
||||
padding: $badge-padding
|
||||
position: absolute
|
||||
text-align: center
|
||||
text-indent: 0
|
||||
transition: $badge-transition
|
||||
white-space: nowrap
|
||||
|
||||
@include tools.theme($badge-theme...)
|
||||
|
||||
&:has(.v-icon)
|
||||
padding: $badge-icon-padding
|
||||
|
||||
.v-badge--bordered &
|
||||
&::after
|
||||
border-radius: inherit
|
||||
border-style: $badge-border-style
|
||||
border-width: $badge-border-width
|
||||
color: $badge-border-color
|
||||
content: ''
|
||||
position: absolute
|
||||
inset: 0
|
||||
transform: $badge-border-transform
|
||||
|
||||
.v-badge--dot &
|
||||
border-radius: $badge-dot-border-radius
|
||||
height: $badge-dot-height
|
||||
min-width: 0
|
||||
padding: 0
|
||||
width: $badge-dot-width
|
||||
|
||||
&::after
|
||||
border-width: $badge-dot-border-width
|
||||
|
||||
.v-badge--inline &
|
||||
position: relative
|
||||
vertical-align: $badge-inline-vertical-align
|
||||
|
||||
.v-icon
|
||||
color: inherit
|
||||
font-size: $badge-font-size
|
||||
margin: $badge-icon-margin
|
||||
|
||||
img,
|
||||
.v-img
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
.v-badge__wrapper
|
||||
display: flex
|
||||
position: relative
|
||||
|
||||
.v-badge--inline &
|
||||
align-items: center
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
margin: $badge-wrapper-margin
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
.v-badge__badge
|
||||
forced-color-adjust: preserve-parent-color
|
||||
background: highlight
|
||||
color: highlighttext
|
||||
Reference in New Issue
Block a user