1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-24 10:16:16 +01:00
blog/_src/_assets/styl/_kremalicious/vex.styl

127 lines
2.4 KiB
Stylus
Raw Normal View History

.vex,
.vex *,
.vex *:before,
.vex *:after
box-sizing: border-box
.vex
position: fixed
overflow: auto
-webkit-overflow-scrolling: touch
z-index: 1111
top: 0
right: 0
bottom: 0
left: 0
.vex-scrollbar-measure
position: absolute
top: -9999px
width: 50px
height: 50px
overflow: scroll
.vex-overlay
animation: vex-fadein .3s
position: fixed
background: rgba(0, 0, 0, .4)
top: 0
right: 0
bottom: 0
left: 0
.vex.vex-closing &
animation: vex-fadeout .3s
.vex-content
animation: vex-fadein .3s
background: #fff
.vex.vex-closing &
animation: vex-fadeout .2s
.vex-dialog-form
margin: 0 // Browser reset
.vex-dialog-button
text-rendering: optimizeLegibility
appearance: none
cursor: pointer
-webkit-tap-highlight-color: transparent
// Prevent background scrolling when vex is open
// https://github.com/HubSpot/vex/issues/18
body.vex-open
overflow: hidden
//
// Custom theme
//
.vex-theme-kremalicious
display: flex
align-items: center
justify-content: center
.vex-overlay
background: alpha($body-bg, .8)
backdrop-filter: blur(5px)
.vex-content
background: transparent
padding: 0
position: relative
width: 100%
2016-06-09 19:25:01 +02:00
max-width: $screen-xs-min
border-radius: $border-radius-base
border: 1px solid alpha($brand-grey-light, .2)
.vex__title
@extend .h4
margin-top: ($spacer/2)
border-bottom: 1px solid alpha($brand-grey-light, .2)
padding-bottom: ($spacer/2)
.vex-dialog-buttons
margin-top: $spacer
border-top: 1px solid alpha($brand-grey-light, .2)
padding-top: ($spacer/2)
.vex-dialog-button
@extend .btn
.vex-dialog-button-primary
@extend .btn-primary
.vex-close
@extend .close
position: absolute
top: ($spacer/4)
right: ($spacer/2)
&:before
@extend .close
content: "\00D7" // ×
display: block
&:hover,
&:focus
&:before
color: $link-color
//
// Overlay/content animations
//
@keyframes vex-fadein
0%
opacity: 0
100%
opacity: 1
@keyframes vex-fadeout
0%
opacity: 1
100%
opacity: 0