Skip to content

Commit

Permalink
Added new modal positions (#1126)
Browse files Browse the repository at this point in the history 
* Modal: removed Bootstrap classes

* Backdrop: removed Bootstrap classes

* Stepper: removed Bootstrap classes

* Modal: rename bs components and fix animations

* Tooltip: added Tailwind animations and fix font

* Tooltip: fix commented code

* Tooltip: fix for Popover styling

* Popover: remove BS classes

* Offcanvas: fix working with Backdrop

* Manipulator: add helper function for many classes

* Backdrop: add shortcut for adding many classes

* Modal: add new postions

Co-authored-by: m.trochonowicz <m.trochonowicz@mdbootstrap.com>
Co-authored-by: Mikolaj Smolenski <smolenski.mikolaj@gmail.com>
  • Loading branch information
@Trochonovitz @smolenski-mikolaj
3 people committed Dec 8, 2022
1 parent ff19cde commit afa3296
Show file tree
Hide file tree
Showing 3 changed files with 277 additions and 25 deletions.
288 changes: 270 additions & 18 deletions demo/sites/bs/modal.html
View file
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
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
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

0 comments on commit afa3296

Please sign in to comment.