| Current Path : /var/www/html/mswp/node_modules/vuesax/src/components/vsSidebar/Item/ |
| Current File : /var/www/html/mswp/node_modules/vuesax/src/components/vsSidebar/Item/style.sass |
@import '../../../styles/mixins'
.vs-sidebar__item
width: 100%
padding: 14px 16px
padding-top: 15px
text-align: left
background: transparent
font-size: 1rem
font-weight: bold
opacity: .7
transition: all .25s ease
display: flex
align-items: center
justify-content: flex-start
position: relative
color: -color('text')
border: 0px
&.hasIcon
padding: 0px
&.active
padding-left: 8px
&:hover
padding-left: 8px
opacity: 1
&:after
content: ''
position: absolute
left: -4px
top: 0px
width: 10px
height: 100%
background: -color('color')
border-radius: 0px 20px 20px 0px
transform: translate(-6px)
transition: all .25s ease
z-index: 60
&.active:not(.hasIcon)
padding-left: 25px
&.active
opacity: 1
// background: -color('background', .1) !important
color: -color('color')
&:after
transform: translate(0px)
&__icon
min-width: 50px
height: 47px
display: flex
align-items: center
justify-content: center
font-size: 1.2rem
z-index: 50
background: -color('background')
&:hover:not(.hasIcon)
opacity: 1
padding-left: 25px
&__text
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
z-index: 10
transition: all .25s ease
font-size: .9rem
&__arrow
width: 7px
height: 7px
position: relative
justify-self: flex-end
margin-left: auto
margin-right: 15px
transition: all .25s ease
transform: rotate(-135deg) !important
z-index: 80
.vs-icon-arrow
&:before
width: 2px
&:after
height: 2px
&__text-tooltip
position: fixed
left: 50px
opacity: 0
pointer-events: none
transition: all .25s ease
font-size: .85rem
white-space: nowrap