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

Add overlay color #696

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+3 −2
Open

Add overlay color #696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a559bd8
Add overlay color
JimmyHoenderdaal Jan 9, 2025
41d035a
Update overlay opacity
JimmyHoenderdaal Jan 13, 2025
3c59b98
Revert opacity inside overlay color
JimmyHoenderdaal Jan 15, 2025
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
2 changes: 1 addition & 1 deletion resources/views/components/slideover/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<input @checked($open) id="{{ $id }}" class="peer hidden" v-on:change="toggleScroll($event.target.checked)" type="checkbox">
<label
for="{{ $closeId }}"
class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
class="pointer-events-none fixed inset-0 z-slideover-overlay cursor-pointer bg-overlay opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
></label>
@else
<input @checked($open) id="{{ $id }}" class="peer hidden" type="checkbox">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/layouts/partials/header/autocomplete.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class="relative w-full"
>
<x-rapidez::reactive-base slot-scope="autocompleteScope">
<div
class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-overlay opacity-0 transition duration-500"
:class="autocompleteScope.overlay ? 'pointer-events-auto opacity-100 prevent-scroll' : 'opacity-0 pointer-events-none '"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also think we need an <x-overlay component, so every overlay is the same. What do you think?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be a good idea but should this exist inside the rapidez core or blade-components you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think the core would do

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Little bit out of scope for this pull request?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with Roene, Let's do this at a later moment, and then inside the blade-components package

></div>
<x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': autocompleteScope.overlay }" />
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export default {
DEFAULT: color('--background', colors.slate[100]),
muted: color('--background-muted', colors.slate[50]),
},
overlay: color('--overlay', 'rgba(0, 0, 0, 0.4)'),
},
zIndex: {
'header': '100',
Expand Down
Loading