Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@hardik-sagacity
hardik-sagacity committed Nov 10, 2023
1 parent 32ea278 commit 8764b8b
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 45 deletions.
16 changes: 5 additions & 11 deletions dist/minimacss.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/minimacss.css.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/minimacss.min.css
View file

Large diffs are not rendered by default.

69 changes: 42 additions & 27 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -711,51 +711,66 @@ <h5 class="mb-0 font-semibold">Slideover Header</h5>
<!-- Modal -->
<section class="container mt-5">
<h2>Modal</h2>
<button onclick="document.getElementById('myModal').showModal()" class="btn btn-primary">Open Modal</button>
<!-- The Modal -->
<dialog id="myModal" class="modal modal-lg">
<button onclick="document.getElementById('myModalsm').showModal()" class="btn btn-primary">Open Small Modal</button>
<button onclick="document.getElementById('myModallg').showModal()" class="btn btn-primary">Open Large Modal</button>
<button onclick="document.getElementById('myModalxl').showModal()" class="btn btn-primary">Open Extra Large Modal</button>

<dialog id="myModalsm" class="modal modal-sm">
<header class="modal-header">
<h5 class="mb-0 font-semibold">Modal Header</h5>
<p class="mb-0 text-secondary">This is long Modal sub title</p>
<button class="close-icon" onclick="document.getElementById('myModal').close();"
<button class="close-icon" onclick="document.getElementById('myModalsm').close();"
aria-label="Close">&times;</button>
</header>
<div class="modal-body">
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
</div>
<footer class="modal-footer">
<button class="btn btn-outline-primary"
onclick="document.getElementById('myModalsm').close();">Cancel</button>
<button class="btn btn-primary ml-3" onclick="document.getElementById('myModalsm').close();">Save</button>
</footer>
</dialog>


<dialog id="myModallg" class="modal modal-lg">
<header class="modal-header">
<h5 class="mb-0 font-semibold">Modal Header</h5>
<p class="mb-0 text-secondary">This is long Modal sub title</p>
<button class="close-icon" onclick="document.getElementById('myModallg').close();"
aria-label="Close">&times;</button>
</header>
<div class="modal-body">
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
</div>
<footer class="modal-footer">
<button class="btn btn-outline-primary"
onclick="document.getElementById('myModallg').close();">Cancel</button>
<button class="btn btn-primary ml-3" onclick="document.getElementById('myModallg').close();">Save</button>
</footer>
</dialog>


<dialog id="myModalxl" class="modal modal-xl">
<header class="modal-header">
<h5 class="mb-0 font-semibold">Modal Header</h5>
<p class="mb-0 text-secondary">This is long Modal sub title</p>
<button class="close-icon" onclick="document.getElementById('myModalxl').close();"
aria-label="Close">&times;</button>
</header>
<div class="modal-body">
<p class="my-10">Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est
egestas
vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
</div>
<footer class="modal-footer">
<button class="btn btn-outline-primary"
onclick="document.getElementById('myModal').close();">Cancel</button>
<button class="btn btn-primary ml-3" onclick="document.getElementById('myModal').close();">Save</button>
onclick="document.getElementById('myModalxl').close();">Cancel</button>
<button class="btn btn-primary ml-3" onclick="document.getElementById('myModalxl').close();">Save</button>
</footer>
</dialog>
</section>
Expand Down
1 change: 0 additions & 1 deletion src/base/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,6 @@ figure {
code {
font-family: monospace;
font-size: 1em;
padding: 0.25em;
background-color: var(--code-bg-color);
border-radius: $border-radius;
}
Expand Down
3 changes: 1 addition & 2 deletions src/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@ html:has(.modal[open]) {
@each $size, $width in $modal-widths {
.modal-#{$size} {
max-inline-size: min($width, 95%);
max-block-size: min($width, 95%);
max-block-size: min($width, 95%);
max-block-size: min(100%, 95%);
}
}
1 change: 0 additions & 1 deletion src/minimacss.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
[data-theme="dark"] {
@include dark;
}
@import 'themes/dark';
@import 'base/typography';
@import 'components/accordion';
@import 'components/modal';
Expand Down

0 comments on commit 8764b8b

Please sign in to comment.