Skip to content

Fix modal overflow style nesting (#26742)#26743

Merged
mdo merged 1 commit intotwbs:v4-devfrom
jdanil:v4-modal-overflow
Jul 20, 2018
Merged

Fix modal overflow style nesting (#26742)#26743
mdo merged 1 commit intotwbs:v4-devfrom
jdanil:v4-modal-overflow

Conversation

@jdanil
Copy link
Contributor

@jdanil jdanil commented Jun 22, 2018

Nest .modal styling directly under .modal-open to avoid issues when bootstrap is nested.

Fixes #26742.

Nest `.modal` styling directly under `.modal-open`
to avoid issues when bootstrap is nested.
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I'll tee this up for v4.1.3.

@mdo mdo merged commit c04d60b into twbs:v4-dev Jul 20, 2018
@mdo mdo mentioned this pull request Jul 20, 2018
@ysds
Copy link
Contributor

ysds commented Aug 24, 2018

This PR is not good enough If bootstrap supports a usage like #26742:

.app {
  @import '~bootstrap/scss/bootstrap';
}

The current SCSS:
https://github.com/twbs/bootstrap/pull/26743/files#diff-e1cc18729da61131b91b425ceaeaafa1L44

 .modal-dialog {
   ...
   .modal.fade & {
     ...
   }
   .modal.show & {
     ...
   }
 }

will be compiled:

.modal.fade .app .modal-dialog {
  ...
}
.modal.show .app .modal-dialog {
  ...
}

There are still some similar code in the other components. e.g.:

.show > &.dropdown-toggle {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants