Skip to content

Commit

Permalink
refactor(backdrops): use Tailwind CSS v3.0 classes for bg opacity
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoltanszogyenyi
zoltanszogyenyi committed Nov 10, 2023
1 parent 43de722 commit 82e1c82
Show file tree
Hide file tree
Showing 10 changed files with 15 additions and 17 deletions.
4 changes: 2 additions & 2 deletions content/components/drawer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1256,7 +1256,7 @@ const options = {
edge: false,
edgeOffset: '',
backdropClasses:
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30',
'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
onHide: () => {
console.log('drawer is hidden');
},
Expand Down Expand Up @@ -1425,7 +1425,7 @@ const options: DrawerOptions = {
edge: false,
edgeOffset: '',
backdropClasses:
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30',
'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
onHide: () => {
console.log('drawer is hidden');
},
Expand Down
10 changes: 5 additions & 5 deletions content/components/modal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ Use this modal example with form input element to receive information from your
<label for="job-1" class="inline-flex items-center justify-between w-full p-5 text-gray-900 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-500 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-500">
<div class="block">
<div class="w-full text-lg font-semibold">UI/UX Engineer</div>
<div class="w-full text-gray-500 dark:text-gray-400">Bergside Inc.</div>
<div class="w-full text-gray-500 dark:text-gray-400">Flowbite</div>
</div>
<svg class="w-4 h-4 ms-3 rtl:rotate-180 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>
</label>
Expand All @@ -319,7 +319,7 @@ Use this modal example with form input element to receive information from your
<label for="job-2" class="inline-flex items-center justify-between w-full p-5 text-gray-900 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-500 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-500">
<div class="block">
<div class="w-full text-lg font-semibold">React Developer</div>
<div class="w-full text-gray-500 dark:text-gray-400">Bergside Inc.</div>
<div class="w-full text-gray-500 dark:text-gray-400">Alphabet</div>
</div>
<svg class="w-4 h-4 ms-3 rtl:rotate-180 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>
</label>
Expand All @@ -329,7 +329,7 @@ Use this modal example with form input element to receive information from your
<label for="job-3" class="inline-flex items-center justify-between w-full p-5 text-gray-900 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-500 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-500">
<div class="block">
<div class="w-full text-lg font-semibold">Full Stack Engineer</div>
<div class="w-full text-gray-500 dark:text-gray-400">Bergside Inc.</div>
<div class="w-full text-gray-500 dark:text-gray-400">Apple</div>
</div>
<svg class="w-4 h-4 ms-3 rtl:rotate-180 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>
</label>
Expand Down Expand Up @@ -1136,7 +1136,7 @@ const options = {
placement: 'bottom-right',
backdrop: 'dynamic',
backdropClasses:
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
closable: true,
onHide: () => {
console.log('modal is hidden');
Expand Down Expand Up @@ -1300,7 +1300,7 @@ const modalOptions: ModalOptions = {
placement: 'bottom-right',
backdrop: 'dynamic',
backdropClasses:
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
closable: true,
onHide: () => {
console.log('modal is hidden');
Expand Down
2 changes: 1 addition & 1 deletion content/getting-started/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ const $modalElement = document.querySelector('#modalEl');
const modalOptions = {
placement: 'bottom-right',
backdrop: 'dynamic',
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
onHide: () => {
console.log('modal is hidden');
},
Expand Down
2 changes: 1 addition & 1 deletion content/getting-started/javascript.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const $targetEl = document.getElementById('modalEl');
const options = {
placement: 'bottom-right',
backdrop: 'dynamic',
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
closable: true,
onHide: () => {
console.log('modal is hidden');
Expand Down
2 changes: 1 addition & 1 deletion content/getting-started/nuxt-js.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ onMounted(() => {

// set modal options
const modalOptions = {
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40'
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40'
}

// create a new modal instance
Expand Down
2 changes: 1 addition & 1 deletion content/getting-started/quickstart.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const $modalElement = document.querySelector('#modalEl');
const modalOptions = {
placement: 'bottom-right',
backdrop: 'dynamic',
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
onHide: () => {
console.log('modal is hidden');
},
Expand Down
2 changes: 1 addition & 1 deletion content/getting-started/vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ onMounted(() => {
const $closeButton = document.querySelector('#closeButton');

const modalOptions = {
backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40'
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40'
}

if ($modalElement) {
Expand Down
3 changes: 1 addition & 2 deletions src/components/drawer/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ const Default: DrawerOptions = {
backdrop: true,
edge: false,
edgeOffset: 'bottom-[60px]',
backdropClasses:
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30',
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
onShow: () => {},
onHide: () => {},
onToggle: () => {},
Expand Down
3 changes: 1 addition & 2 deletions src/components/modal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import instances from '../../dom/instances';

const Default: ModalOptions = {
placement: 'center',
backdropClasses:
'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
backdrop: 'dynamic',
closable: true,
onHide: () => {},
Expand Down
2 changes: 1 addition & 1 deletion src/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ code.language-html .token.comment{
}

.DocSearch-Container {
@apply bg-gray-900 bg-opacity-50 dark:bg-opacity-80;
@apply bg-gray-900/50 dark:bg-gray-900/80;
}

.DocSearch-Modal {
Expand Down

0 comments on commit 82e1c82

Please sign in to comment.