mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 18:18:49 +02:00
127 lines
2.4 KiB
Stylus
127 lines
2.4 KiB
Stylus
.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%
|
|
max-width: $screen-small-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
|