vuesax
Version:
Framework Components for Vue js
59 lines (57 loc) • 1.33 kB
text/stylus
.con-vs-alert
// padding: 10px
border-radius: 6px
color: rgb(255,255,255)
width: 100%
position relative
font-size: .8rem
cursor: default
transition: all .25s ease
overflow hidden
.icon-alert
height: 100%
position: absolute
// left: 0px
propWithDir(left, null, 0)
padding: 10px
top 0px
font-size: 1.1rem
display: flex
align-items: center
.vs-alert
padding: 10px
overflow hidden
position relative
&.con-icon
// padding-left: 40px
propWithDir(padding, left, 40px)
.vs-alert--title
font-size .9rem
font-weight: bold
// margin-bottom: 3px
padding: 8px 10px
.vs-alert--close
position: relative
margin-top: 4px
// margin-right: 4px
propWithDir(margin, right, 4px)
display: inline-block
dirValue(float, right)
padding: 4px
border-radius: 6px
padding-bottom: 1px
// padding-top: 1px
cursor: pointer
transition: all .2s ease
&:hover
box-shadow: 0px 5px 15px 0px rgba(0,0,0,.1)
for colorx, i in $vs-colors
.con-vs-alert-{colorx}
background: getColor(colorx, .15)
box-shadow 0px 0px 25px 0px getColor(colorx, .15)
color: getColor(colorx, 1)
h4
box-shadow: 0px 6px 15px -7px getColor(colorx, .4)
.con-x
background: getColor(colorx, 1)
color: rgb(255,255,255)