/** * * * 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: 700px; [purpose='modal-content'] { max-width: 700px; [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 { position: fixed; width: 100%; height: 75px;// should cover topbar z-index: 50; left: 0px; top: 0px; background-color: @accent-white; } .modal-content { border-radius: 0px; border-color: @accent-white; padding-top: 50px; padding-bottom: 50px; padding-left: 25px; padding-right: 25px; .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: @accent-white; &.show { opacity: 0.95; } }