// Table of Contents // ================================================== // Modal // Styles // Directions // Colors // Backdrop // Media Queries // scss-lint:disable NestingDepth // Modal // ================================================== .modal { background: color(white); border-radius: border-radius(b); border-style: solid; border-width: 1px; display: none; left: 0; margin: 0 auto; overflow: hidden; right: 0; position: fixed; top: 0; width: 560px; z-index: 1061; &.clean { background: color(transparent); border-color: color(transparent); box-shadow: none; } &.fade { @include transition((opacity 0.2s linear, top 0.4s ease-in-out)); top: -100%; &.in { top: 12.5%; } } } .modal-header { border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; text-align: center; padding: 21px 20px 19px; } .modal-title { font-size: text-size(m); font-weight: text-weight(semibold); line-height: 1; } .modal-body { box-sizing: border-box; max-height: 300px; overflow-y: auto; padding: 25px 20px; } .modal-footer { border-top-style: solid; border-top-width: 1px; padding: 15px 20px; } // Styles // ================================================== .modal-aside { border-radius: 0; height: 100%; left: initial; margin: 0; right: 0; top: 0; form { height: 100%; } &.fade { @include transition((opacity 0.2s linear, right 0.4s ease-in-out)); right: -100%; top: 0; &.in { right: 0; top: 0; } } .modal-header, .modal-footer { height: 68px; } .modal-body { height: calc(100% - 136px); max-height: none; } .modal-footer { > .btn, > .btn-group { margin-top: -2px; } } &.left { left: 0; right: initial; &.fade { @include transition((opacity 0.2s linear, left 0.4s ease-in-out)); left: -100%; right: 0; &.in { left: 0; right: initial; } } } } // Backdrop // ================================================== .modal-backdrop { background: transparentize(color(black), 0.15); bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 1060; &.fade { opacity: 0; &.in { opacity: 1; } } &.white { background: transparentize(color(white), 0.15); } } // Media Queries // ================================================== @media only screen and (max-width: 812px) { .modal { width: calc(100% - 20px); } .modal-body { max-height: 280px; } } @media only screen and (min-width: 480px) and (max-width: 812px) { .modal { width: calc(100% - 120px); } .modal-body { max-height: 140px; } }