colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
100 lines (85 loc) • 2.42 kB
text/stylus
// Modal
//
// Colette uses the accessible modal [a11y-dialog](https://www.npmjs.com/package/a11y-dialog).
//
// By defaut modal is 90% of viewport width
//
// For react project we use [react-modal](https://www.npmjs.com/package/react-modal)
// but CSS need some overwrite to match the overlay as a wrapper.
//
// .modal-window-auto - modal width related to content
// .modal-window-small - modal width 440px
// .modal-window-medium - modal width 600px
// .modal-window-closeOutside - close button outside modal body
// .modal-window-closeHidden - close button hidden
// .modal-window-fixedHeight - modal with a fixed height at 70vh and an inner scroll
//
// Markup: modal.twig
//
// Styleguide: Components.Modal
// Demo modal trigger button
//
// Markup:
// <button type="button" id="open-modal-btn" class="btn" data-a11y-dialog-show="accessible-modal">open modal</button>
//
// Styleguide: Components.Modal.demo
.modal
position fixed
overflow auto
width 100%
height 100%
z-index: $zIndex.modals
top 0
left 0
display flex
-webkit-overflow-scrolling touch // enable iOs momentum-based scrolling
&[aria-hidden=true]
display none
&-overlay
position fixed
top -30%
bottom -30% // These negative values avoid gap between address bar & overlay, on mobile, when address bar disappear
left 0
width 100%
background rgba(0, 0, 0, .6)
&-window
_pt(1)
_pb(1)
position relative
margin auto
width 90%
max-width 90%
display flex
flex-direction column
&-auto
width auto
&-small
width _rem(440)
&-medium
width _rem(600)
&-closeOutside
padding-top _rem(40px)
.modal-close
top _rem(10px)
right 0
&-closeHidden
.modal-close
display none
&-fixedHeight
.modal-content
height 70vh
overflow-y auto
&-close
position absolute
z-index 2
top _rem(10px) + _gutters(1)
right _rem(10px)
svg // this svg should be `cross`
width _rem(12px)
height _rem(12px)
transform rotate(45deg)
&-content
position relative
z-index 1
width 100%
overflow hidden