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

Changed buttons #12

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open

Changed buttons #12

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
281da14
Changed buttons and prevent scroll
jordythevulder Dec 17, 2024
2bf6747
Update demo
jordythevulder Dec 17, 2024
4b2b795
Changed readme with overflow clip
jordythevulder Dec 19, 2024
6421ac0
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/bla…
jordythevulder Dec 19, 2024
2968649
Finetuned styling and added muted variant
jordythevulder Dec 19, 2024
490c4a5
Update demo
jordythevulder Dec 19, 2024
0c628c4
Changed overflow hidden to clip comment
jordythevulder Dec 19, 2024
54cca17
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/bla…
jordythevulder Dec 19, 2024
5b7b661
Changed comment within muted button
jordythevulder Dec 19, 2024
d9caf64
Merge branch 'master' of github.com:rapidez/blade-components into fea…
jordythevulder Jan 13, 2025
ec3dc20
Removed inactive color variant
jordythevulder Jan 13, 2025
0330e9f
Update demo
jordythevulder Jan 13, 2025
22745f3
Updated readme and added base classes on buttons
jordythevulder Jan 13, 2025
48b583f
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/bla…
jordythevulder Jan 13, 2025
4661911
Update demo
jordythevulder Jan 13, 2025
8950fdd
erge branch 'master' of github.com:rapidez/blade-components into feat…
jordythevulder Jan 14, 2025
7b3e1c6
Changed border colors to have more contrast
jordythevulder Jan 14, 2025
4caf8db
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/bla…
jordythevulder Jan 14, 2025
7770c69
Update demo
jordythevulder Jan 14, 2025
f47f833
Removed slideover duplicate
jordythevulder Jan 14, 2025
ee6a873
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/bla…
jordythevulder Jan 14, 2025
403b161
Renamed base to tag and button to base
jordythevulder Jan 14, 2025
2fb7309
Update demo
jordythevulder Jan 14, 2025
8868ed1
Removed muted variant and remove border changes
jordythevulder Jan 15, 2025
ce4a1a9
Removed border contrast
jordythevulder Jan 15, 2025
c345483
Update demo
jordythevulder 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
26 changes: 13 additions & 13 deletions demo/components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,22 +200,22 @@ <h3 class="font-bold text-md">Components with a required label</h3>

<h2 class="font-bold text-lg">Button components</h2>
<div class="grid grid-cols-5 gap-5">
<button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed">
<button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed">
Button
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text">
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text border-b border-b-black/15">
Primary
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text">
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text border-b border-b-black/15">
Secondary
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
Outline
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text">
</button> <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text border-b border-b-black/15">
Conversion
</button> <div class="flex flex-col gap-2">
<strong>Slider:</strong>
<div class="flex items-center gap-2">
<button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
<button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
&lt;
</button> <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
</button> <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
&gt;
</button> </div>
</div>
Expand Down Expand Up @@ -276,11 +276,11 @@ <h2 class="text-lg font-bold mt-8">Slideover Component</h2>
<div class="flex flex-col gap-3">
<h3 class="text-md font-bold">Default</h3>
<div>
<label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text" for="default-slideover">
<label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text border-b border-b-black/15" for="default-slideover">
Open Slideover
</label> <div >
<input id="close-default-slideover" class="hidden" type="reset">
<input id="default-slideover" class="peer hidden slideover-checkbox" type="checkbox">
<input id="default-slideover" class="peer hidden prevent-scroll" type="checkbox">
<label
for="default-slideover"
class="pointer-events-none fixed inset-0 z-40 cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
Expand Down Expand Up @@ -312,11 +312,11 @@ <h3 class="text-md font-bold">Default</h3>
<div class="flex flex-col gap-3">
<h3 class="text-md font-bold">Right-positioned</h3>
<div>
<label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text" for="right-slideover">
<label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text border-b border-b-black/15" for="right-slideover">
Open Right Slideover
</label> <div >
<input id="close-right-slideover" class="hidden" type="reset">
<input id="right-slideover" class="peer hidden slideover-checkbox" type="checkbox">
<input id="right-slideover" class="peer hidden prevent-scroll" type="checkbox">
<label
for="right-slideover"
class="pointer-events-none fixed inset-0 z-40 cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
Expand Down Expand Up @@ -347,11 +347,11 @@ <h3 class="text-md font-bold">Right-positioned</h3>
<div class="flex flex-col gap-3">
<h3 class="text-md font-bold">Mobile only</h3>
<div>
<label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis lg:hidden" for="mobile-slideover">
<label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis lg:hidden" for="mobile-slideover">
Open Mobile Slideover
</label> <div >
<input id="close-mobile-slideover" class="hidden" type="reset">
<input id="mobile-slideover" class="peer hidden slideover-checkbox" type="checkbox">
<input id="mobile-slideover" class="peer hidden prevent-scroll" type="checkbox">
<label
for="mobile-slideover"
class="pointer-events-none fixed inset-0 z-40 cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/button/button.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
<x-rapidez::button>Something</x-rapidez::button>
```
--}}
<x-rapidez::button.base {{ $attributes->twMerge('relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed') }}>
<x-rapidez::button.base {{ $attributes->twMerge('relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed') }}>
{{ $slot }}
</x-rapidez::button.base>
2 changes: 1 addition & 1 deletion resources/views/components/button/conversion.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
<x-rapidez::button.conversion>Something</x-rapidez::button.conversion>
```
--}}
<x-rapidez::button {{ $attributes->twMerge('bg-conversion text-conversion-text') }}>
<x-rapidez::button {{ $attributes->twMerge('bg-conversion text-conversion-text border-b border-b-black/15') }}>
{{ $slot }}
</x-rapidez::button>
2 changes: 1 addition & 1 deletion resources/views/components/button/primary.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
<x-rapidez::button.primary>Something</x-rapidez::button.primary>
```
--}}
<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text') }}>
<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text border-b border-b-black/15') }}>
{{ $slot }}
</x-rapidez::button>
2 changes: 1 addition & 1 deletion resources/views/components/button/secondary.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
<x-rapidez::button.secondary>Something</x-rapidez::button.secondary>
```
--}}
<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text') }}>
<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text border-b border-b-black/15') }}>
{{ $slot }}
</x-rapidez::button>
4 changes: 2 additions & 2 deletions resources/views/components/slideover/slideover.blade.php
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

This is already handled within #13 right?

Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
## Body Class
Add this class to prevent scrolling when slideover is open:
```html
<body class="has-[.slideover-checkbox:checked]:overflow-hidden">
<body class="has-[.prevent-scroll:checked]:overflow-hidden">
```

## Nesting Slideovers
Expand Down Expand Up @@ -77,7 +77,7 @@
<x-rapidez::tag :is="$tag">
<input id="{{ 'close-' . $id }}" class="hidden" type="reset">
@if (!$hasParent)
<input @checked($open) id="{{ $id }}" class="peer hidden slideover-checkbox" type="checkbox">
<input @checked($open) id="{{ $id }}" class="peer hidden prevent-scroll" type="checkbox">
<label
for="{{ $closeId }}"
class="pointer-events-none fixed inset-0 z-40 cursor-pointer bg-black/40 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"
Expand Down
Loading