Implementieren von Modals
Die Implementierung von Modals folgt der Dokumentation von Bootstrap.
Jegliche Klassen und Funktionen aus der Dokumentation sind verfügbar. Zusätzlich gibt es die Klase .modal-teal um den
Header des Modals in die genannte Farbe einzufärben.
<button class="btn btn--primary" data-bs-toggle="modal" data-bs-target="#demoModalWhite">Open Modal Demo White</button>
<button class="btn btn--primary-outline" data-bs-toggle="modal" data-bs-target="#demoModalTeal">
Open Modal Demo Teal
</button>
<div class="modal fade" id="demoModalWhite" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title headline headline--h5" id="demoModalTitle">Modal Title Demo White</h4>
<button type="button" class="modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
This is some placeholder content of the open accordions associated content. Lorem ipsum dolor sit amet,
consent tetur sadipscing elitr, sed diam nonumy eirmod tempor. 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.
</p>
<p>
This is some placeholder content of the open accordions associated content. Lorem ipsum dolor sit amet,
consent tetur sadipscing elitr, sed diam nonumy eirmod tempor. 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.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn--outline-primary" data-bs-dismiss="modal">Close Modal</button>
<button type="button" class="btn btn--primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="demoModalTeal" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-teal modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title headline headline--h5" id="demoModalTitle">Modal title Demo Teal</h4>
<button type="button" class="modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
This is some placeholder content of the open accordions associated content. Lorem ipsum dolor sit amet,
consent tetur sadipscing elitr, sed diam nonumy eirmod tempor. 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.
</p>
<p>
This is some placeholder content of the open accordions associated content. Lorem ipsum dolor sit amet,
consent tetur sadipscing elitr, sed diam nonumy eirmod tempor. 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.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn--outline-primary" data-bs-dismiss="modal">Close Modal</button>
<button type="button" class="btn btn--primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
@import 'bootstrap/scss/modal.scss';
.modal {
backdrop-filter: blur(5px);
&-header {
border-radius: 0;
}
&-content {
border-radius: 0;
border: none;
}
&-title {
font-weight: 700;
}
&-close {
-webkit-appearance: none;
width: 16px;
height: 16px;
border: none;
background-color: transparent;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.862.138a.47.47 0 0 1 .055.6l-.055.065L8.666 8l7.196 7.197a.47.47 0 0 1-.6.72l-.065-.055L8 8.666.803 15.862a.47.47 0 0 1-.72-.6l.055-.065L7.334 8 .138.803a.47.47 0 0 1 .6-.72l.065.055L8 7.334 15.197.138a.47.47 0 0 1 .665 0Z' fill='%230E2249' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
}
&-body {
font-size: $font-size-root;
color: $blue;
}
&-footer {
justify-content: flex-start;
border-top: none;
}
// Teal
&-teal {
.modal-header {
background-color: $teal;
color: white;
.headline {
color: white;
}
}
.modal-close {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.862.138a.47.47 0 0 1 .055.6l-.055.065L8.666 8l7.196 7.197a.47.47 0 0 1-.6.72l-.065-.055L8 8.666.803 15.862a.47.47 0 0 1-.72-.6l.055-.065L7.334 8 .138.803a.47.47 0 0 1 .6-.72l.065.055L8 7.334 15.197.138a.47.47 0 0 1 .665 0Z' fill='white' fill-rule='nonzero'/%3E%3C/svg%3E%0A");
}
}
}