body.cmi-flex-modal-open
overflow: hidden
// base modal structure .cmi-flex-modal, .cmi-flex-modal-dialog, .cmi-flex-modal-dialog-inner, .cmi-flex-modal-dialog > header.cmi-header, .cmi-flex-modal-dialog > main.cmi-main, .cmi-flex-modal-dialog > footer.cmi-footer .cmi-flex-modal-dialog-inner > header.cmi-header, .cmi-flex-modal-dialog-inner > main.cmi-main, .cmi-flex-modal-dialog-inner > footer.cmi-footer
+box-sizing(border-box)
.cmi-flex-modal
+position(fixed, 0 0 0 0) +backface-visibility(hidden) display: block overflow: hidden outline: 0 z-index: $modal-z-index background-color: $modal-backdrop-color
.cmi-flex-modal-dialog
+display(flex) +flex-direction(column) +flex-wrap(nowrap) +align-items(stretch) +cmi-border-radius(3px) overflow: hidden z-index: 0 margin: 0 padding: 0 outline: 0
.cmi-flex-modal-dialog
+position(absolute, 5% 5% auto 5%) max-height: 90% @extend .cmi-z-depth-5
.cmi-flex-modal-dialog
> header.cmi-header, > main.cmi-main, > footer.cmi-footer position: relative > header.cmi-header, > footer.cmi-footer +display(flex) +flex-shrink(0) overflow: hidden z-index: 10 > header.cmi-header +border-top-radius(3px) height: $modal-header-height background-color: $modal-header-bgcolor > main.cmi-main +display(flex) +flex-direction(row) +flex-shrink(1) +backface-visibility(hidden) +flex-wrap(nowrap) display: -ms-flexbox display: ms-flexbox -ms-flex-direction: row -ms-flex-pack: justify -ms-flex-align: stretch -ms-flex-line-pack: stretch overflow: scroll overflow-x: hidden overflow-y: scroll z-index: 1 width: 100% max-height: 100vh margin-top: -$modal-header-height padding-top: $modal-header-height margin-bottom: -$modal-footer-height padding-bottom: $modal-footer-height - 1px background-color: $modal-main-bgcolor will-change: overflow > footer.cmi-footer +border-bottom-radius(3px) height: $modal-footer-height background-color: $modal-footer-bgcolor > main.cmi-main > aside.cmi-aside, > section.cmi-section position: relative overflow: auto height: auto -webkit-overflow-scrolling: touch -ms-overflow-style: none > aside.cmi-aside +flex-grow(0) width: $modal-sidebar-width min-width: $modal-sidebar-width background-color: $modal-sidebar-bgcolor > .cmi-section +flex-grow(1)
// modal additional content styling .cmi-flex-modal-dialog, .cmi-flex-modal-dialog-inner
> header.cmi-header, > footer.cmi-footer .cmi-pull-left .cmi-a.cmi-btn margin-right: 8px .cmi-pull-right .cmi-a.cmi-btn margin-left: 8px .cmi-flex-modal-back position: relative overflow: visible min-width: 0 height: auto padding: 4px 6px 2px 6px line-height: 1.3 letter-spacing: 0 .cmi-i font-size: 15px .cmi-btn height: auto
.cmi-flex-modal-header-inside
position: relative display: block width: 100% padding: 8px +clearfix h1.cmi-h1, h2.cmi-h2, h3.cmi-h3, h4.cmi-h4, h5.cmi-h5 margin: 5px font-weight: 200 font-size: 16px line-height: 1.2 color: #e5e5e5 .cmi-flex-modal-close position: relative overflow: visible min-width: 0 height: auto margin: 0 padding: 4px 6px 2px 6px line-height: 1.3 letter-spacing: 0 .cmi-flex-modal-back, .cmi-flex-modal-close margin: 0 color: #e5e5e5 border: 1px solid #606060 background-color: $modal-header-bgcolor i.cmi-i color: #ccc &:hover background-color: darken($modal-header-bgcolor, 5%) i.cmi-i color: #fff .cmi-btn.cmi-flex-modal-back margin-right: 8px
.cmi-flex-modal-footer-inside
position: relative display: block width: 100% padding: 0px 8px +clearfix .cmi-flex-modal-back margin: 13px 0 color: #e5e5e5 border: 1px solid #cccccc background-color: $modal-footer-bgcolor i.cmi-i color: #999999 &:hover background-color: darken($modal-footer-bgcolor, 5%) i.cmi-i color: #333
ul.cmi-flex-modal-aside-tab-list
margin: 8px 0 8px 8px padding: 0 list-style: none li.cmi-li position: relative overflow: hidden a.cmi-a position: relative display: block padding: 8px 20px font-size: 13px text-align: right color: $modal-sidebar-tab-link-color +border-left-radius(3px) &:hover color: #000 cursor: pointer text-decoration: none background-color: darken($modal-sidebar-bgcolor, 5%) li.cmi-li.cmi-active > a.cmi-a, a.cmi-a.cmi-active color: $color-primary background-color: #fff