| Current Path : /var/www/html/ukas/node_modules/vuesax/src/components/vsNavbar/Group/ |
| Current File : /var/www/html/ukas/node_modules/vuesax/src/components/vsNavbar/Group/style.sass |
@import '../../../styles/mixins'
.vs-navbar__group
position: relative
&:hover
.vs-navbar__group__item
opacity: 1
.vs-navbar__group__items
opacity: 1
visibility: visible
transform: translate(0, 100%)
&__item
padding: 10px 15px
background: transparent
color: inherit
font-weight: bold
transition: all .25s ease, color 0s
opacity: .7
border: 0px
&__items
position: absolute
bottom: 0px
left: 0px
display: flex
align-items: center
justify-content: center
flex-direction: column
margin-bottom: -12px
transform: translate(0, 90%)
background: -color('color')
border-radius: 5px 18px 18px 18px
padding: 10px
min-width: 160px
opacity: 0
box-shadow: 0px 5px 20px 0px rgba(0,0,0, -var('shadow-opacity'))
transition: all .25s ease
color: inherit
visibility: hidden
&:after
content: ''
left: 0px
top: -13px
background: transparent
width: 100%
height: 14px
position: absolute
z-index: -1
.vs-navbar__item
text-align: left
width: 100%
position: relative
padding: 5px 10px
&:before
content: ''
left: 0px
top: 0px
width: 4px
height: 4px
background: -color('text')
position: absolute
border-radius: 50%
top: calc(50% - 2px)
opacity: 0
transform: translate(-10px)
transition: all .25s ease
&.active
&:before
opacity: 1
transform: translate(0px)