diff options
Diffstat (limited to 'app/assets/stylesheets/framework/modal.scss')
-rw-r--r-- | app/assets/stylesheets/framework/modal.scss | 51 |
1 files changed, 43 insertions, 8 deletions
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index f75e5b55506..fd9a75bc5b6 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -19,23 +19,31 @@ } } - // leave enough space for the close icon .modal-title { + line-height: $gl-line-height-24; + + // leave enough space for the close icon &.mw-100, &.w-100 { - // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here - // https://github.com/twbs/bootstrap/pull/26976 - margin-right: -28px; - padding-right: 28px; + margin-right: -$modal-header-padding-x; + padding-right: $modal-header-padding-x; } } + + .close { + font-weight: $gl-font-weight-normal; + line-height: $gl-line-height; + color: $gray-900; + opacity: 1; + } } .modal-body { background-color: $modal-body-bg; line-height: $line-height-base; position: relative; - padding: #{3 * $grid-size} #{2 * $grid-size}; + min-height: $modal-body-height; + padding: #{2 * $grid-size} #{6 * $grid-size} #{2 * $grid-size} #{2 * $grid-size}; text-align: left; white-space: normal; @@ -52,12 +60,20 @@ display: flex; flex-direction: row; + .btn { + margin: 0; + } + .btn + .btn:not(.dropdown-toggle-split), .btn + .btn-group, .btn-group + .btn { margin-left: $grid-size; } + .btn-group .btn + .btn { + margin-left: -1px; + } + @include media-breakpoint-down(xs) { flex-direction: column; @@ -67,6 +83,11 @@ margin-left: 0; margin-top: $grid-size; } + + .btn-group .btn + .btn { + margin-left: -1px; + margin-top: 0; + } } } @@ -85,9 +106,23 @@ body.modal-open { .modal { background-color: $black-transparent; - @include media-breakpoint-up(md) { + .modal-content { + border-radius: $modal-border-radius; + + > :first-child { + border-top-left-radius: $modal-border-radius; + border-top-right-radius: $modal-border-radius; + } + + > :last-child { + border-bottom-left-radius: $modal-border-radius; + border-bottom-right-radius: $modal-border-radius; + } + } + + @include media-breakpoint-up(sm) { .modal-dialog { - margin: 30px auto; + margin: 64px auto; } } } |