/** * * * App-wide styles for our modals. */ [parasails-component='modal'] { -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones [purpose='modal-dialog'] { z-index: 100; position: relative; // max-width: 800px; [purpose='modal-content'] { margin-top: 100px; max-width: 480px; [purpose='modal-close-button'] { .btn-reset(); opacity: 0.6; &:hover { opacity: 1; } } } } // Custom styles for the Bootstrap modal: // (Want to use Bootstrap's default styles? Just comment out the rest of the rules below) .petticoat { display: none; position: fixed; width: 100%; height: 75px;// should cover topbar z-index: 50; left: 0px; top: 0px; background-color: @accent-white; } .modal-content { border-color: @accent-white; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 16px; background-clip: border-box; padding-top: 40px; padding-bottom: 40px; padding-left: 40px; padding-right: 40px; .modal-header { border-bottom: none; display: block; position: relative; text-align: center; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; .modal-title { font-weight: @bold; } .modal-intro { margin-left: auto; margin-right: auto; color: @text-muted; margin-bottom: 20px; } hr { margin-top: 25px; margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 100px; height: 2px; border-top: 2px solid @brand; } } .modal-body { padding-top: 10px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; } .modal-footer { padding-top: 25px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; margin-top: 10px; } } } // Modal backdrop styles are exposed globally here because this gets appended to the .modal-backdrop { background-color: #8b8fa2; &.show { opacity: 0.45; } }