Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added new modal positions #1126

Merged
merged 15 commits into from
Dec 8, 2022
Merged

Added new modal positions #1126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2e75edb
Modal: removed Bootstrap classes
Trochonovitz Nov 28, 2022
b8076cd
Backdrop: removed Bootstrap classes
Trochonovitz Nov 28, 2022
3a0e0c2
Stepper: removed Bootstrap classes
Nov 28, 2022
11e2a92
Merge branch 'dev' of https://github.com/mdbootstrap/Tailwind-Element…
Trochonovitz Nov 29, 2022
7998fc3
Modal: rename bs components and fix animations
Trochonovitz Nov 29, 2022
0144143
Tooltip: added Tailwind animations and fix font
Trochonovitz Nov 30, 2022
8975d5e
Tooltip: fix commented code
Trochonovitz Nov 30, 2022
5692a29
Tooltip: fix for Popover styling
Trochonovitz Nov 30, 2022
2af6582
Popover: remove BS classes
Trochonovitz Nov 30, 2022
54aa772
Offcanvas: fix working with Backdrop
Trochonovitz Nov 30, 2022
fa22ae1
Manipulator: add helper function for many classes
Trochonovitz Nov 30, 2022
d9df333
Backdrop: add shortcut for adding many classes
Trochonovitz Nov 30, 2022
6ef623d
Modal: add new postions
Trochonovitz Nov 30, 2022
58260a2
Merge branch 'dev' of https://github.com/mdbootstrap/Tailwind-Element…
Trochonovitz Dec 6, 2022
5135ee0
Merge with dev
smolenski-mikolaj Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
288 changes: 270 additions & 18 deletions demo/sites/bs/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,29 +705,281 @@ <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalSmL
<br />
<br />

<br />
<br />
<br />
<!-- Button trigger modal -->
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-toggle="modal"
data-te-target="#leftTopModal"
>
Launch left top modal
</button>

<br />
<br />
<br />
<!-- Modal -->
<div
data-te-modal-init
class="z-[1055] fixed top-0 right-[25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="leftTopModal"
tabindex="-1"
aria-labelledby="leftTopModalLabel"
aria-hidden="true"
>
<div
data-te-modal-dialog-ref
class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[-100%] transition-all duration-300 ease-in-out"
>
<div
class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
>
<div
class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
>
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
data-te-modal-dismiss
aria-label="Close"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
<path
d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
/>
</svg>
</button>
</div>
<div class="flex-auto relative p-4" data-te-modal-body-ref>
Modal body text goes here.
</div>
<div
class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
>
<button
type="button"
class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-modal-dismiss
>
Close
</button>
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
>
Save changes
</button>
</div>
</div>
</div>
</div>

<br />
<br />
<br />
<!-- Button trigger modal -->
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-toggle="modal"
data-te-target="#rightTopModal"
>
Launch right top modal
</button>

<br />
<br />
<br />
<!-- Modal -->
<div
data-te-modal-init
class="z-[1055] fixed top-0 right-[-25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="rightTopModal"
tabindex="-1"
aria-labelledby="rightTopModalLabel"
aria-hidden="true"
>
<div
data-te-modal-dialog-ref
class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[100%] transition-all duration-300 ease-in-out"
>
<div
class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
>
<div
class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
>
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
data-te-modal-dismiss
aria-label="Close"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
<path
d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
/>
</svg>
</button>
</div>
<div class="flex-auto relative p-4" data-te-modal-body-ref>
Modal body text goes here.
</div>
<div
class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
>
<button
type="button"
class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-modal-dismiss
>
Close
</button>
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
>
Save changes
</button>
</div>
</div>
</div>
</div>

<br />
<br />
<br />
<!-- Button trigger modal -->
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-toggle="modal"
data-te-target="#rightBottomModal"
>
Launch right bottom modal
</button>

<br />
<br />
<br />
<!-- Modal -->
<div
data-te-modal-init
class="z-[1055] fixed top-[65%] right-[-25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="rightBottomModal"
tabindex="-1"
aria-labelledby="rightBottomModalLabel"
aria-hidden="true"
>
<div
data-te-modal-dialog-ref
class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[100%] transition-all duration-300 ease-in-out"
>
<div
class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
>
<div
class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
>
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
data-te-modal-dismiss
aria-label="Close"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
<path
d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
/>
</svg>
</button>
</div>
<div class="flex-auto relative p-4" data-te-modal-body-ref>
Modal body text goes here.
</div>
<div
class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
>
<button
type="button"
class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-modal-dismiss
>
Close
</button>
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
>
Save changes
</button>
</div>
</div>
</div>
</div>

<!-- Button trigger modal -->
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-toggle="modal"
data-te-target="#leftBottomModal"
>
Launch left bottom modal
</button>

<!-- Modal -->
<div
data-te-modal-init
class="z-[1055] fixed top-[65%] right-[25%] hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="leftBottomModal"
tabindex="-1"
aria-labelledby="leftBottomModalLabel"
aria-hidden="true"
>
<div
data-te-modal-dialog-ref
class="relative w-auto pointer-events-none min-[576px]:max-w-[500px] min-[576px]:my-7 min-[576px]:mx-auto opacity-0 translate-x-[-100%] transition-all duration-300 ease-in-out"
>
<div
class="border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)]"
>
<div
class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md"
>
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
class="box-content w-4 h-4 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline p-2 -my-2 -mr-2 ml-auto"
data-te-modal-dismiss
aria-label="Close"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000">
<path
d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"
/>
</svg>
</button>
</div>
<div class="flex-auto relative p-4" data-te-modal-body-ref>
Modal body text goes here.
</div>
<div
class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md"
>
<button
type="button"
class="px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
data-te-modal-dismiss
>
Close
</button>
<button
type="button"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1"
>
Save changes
</button>
</div>
</div>
</div>
</div>

<br />
<br />
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tw-elements",
"version": "1.0.0-alpha13",
"version": "1.0.0-alpha12",
"homepage": "https://tailwind-elements.com/",
"author": "MDBootstrap",
"style": "dist/css/index.min.css",
Expand Down
12 changes: 6 additions & 6 deletions site/resources/_gen/assets/css/css/style.css_ad9a12809e06de71aca16e9138fbecf4.content
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5465,6 +5465,10 @@ textarea.form-control.is-invalid {
margin-left: auto;
}

.mt-12 {
margin-top: 3rem;
}

.mb-2\.5 {
margin-bottom: 0.625rem;
}
Expand All @@ -5477,10 +5481,6 @@ textarea.form-control.is-invalid {
margin-right: -0.5rem;
}

.mt-12 {
margin-top: 3rem;
}

.-mt-12 {
margin-top: -3rem;
}
Expand Down Expand Up @@ -7970,11 +7970,11 @@ textarea.form-control.is-invalid {
height: 8px;
}

.scrollbar-track-gray-\31 00 {
.scrollbar-track-gray-100 {
--scrollbar-track: #f3f4f6 !important;
}

.scrollbar-thumb-gray-\34 00 {
.scrollbar-thumb-gray-400 {
--scrollbar-thumb: #9ca3af !important;
}

Expand Down