Als Modifier sind .modal--no-borders und .modal--no-padding definiert.
.modal--no-borders entfernt alle Rahmenlinien.
.modal--no-padding entfernt die Innenabstände für den Inhalt.
Die Variante mit beiden Modifiern wird im Moment ausschließlich für in das Modal eingebette Tabs verwendet.
.modal-content {
border: none;
}
.modal-title {
font-family: 'Roboto Condensed', sans-serif;
font-size: $font-size-base;
font-weight: 500;
justify-content: space-between;
letter-spacing: .1em;
line-height: 1;
text-transform: uppercase;
}
.modal-body {
> :last-child {
margin-bottom: 0;
}
}
.modal--no-borders {
--bs-modal-footer-border-width: 0;
--bs-modal-header-border-width: 0;
}
.modal--no-padding .modal-body {
padding: 0;
}
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Titel des Dialogfensters</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-bs-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary">Speichern</button>
</div>
</div>
</div>
</div><div class="modal modal--no-borders modal--no-padding" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Titel des Dialogfensters</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="demo-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="analysis-tab" data-bs-toggle="tab" data-bs-target="#analysis-content" type="button" role="tab" aria-controls="analysis-content" aria-selected="true">
Analyse mit ganz schön viel Text und vielen weiteren Wörtern.
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="relevance-tab" data-bs-toggle="tab" data-bs-target="#relevance-content" type="button" role="tab" aria-controls="relevance-content" aria-selected="false">
Relevanz
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="measures-tab" data-bs-toggle="tab" data-bs-target="#measures-content" type="button" role="tab" aria-controls="measures-content" aria-selected="false">
Maßnahmen
</button>
</li>
</ul>
<div class="tab-content" id="demo-tabs-content">
<div class="tab-pane fade show active" id="analysis-content" role="tabpanel" aria-labelledby="analysis-tab" tabindex="0">
<strong>Analyse</strong><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="tab-pane fade" id="relevance-content" role="tabpanel" aria-labelledby="relevance-tab" tabindex="0">
<strong>Relevanz</strong><br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="tab-pane fade" id="measures-content" role="tabpanel" aria-labelledby="measures-tab" tabindex="0">
<strong>Maßnahmen</strong><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</div>
</div>
</div>