Skip to content

Several style improvements #111

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

Merged
laravdiemen merged 9 commits into from
May 8, 2026
Merged

Several style improvements #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a14aa70
style: improve collapse default styling
laravdiemen May 7, 2026
95914b3
style: improve tabs default styling
laravdiemen May 7, 2026
88acd7c
chore: remove unused footer styles
laravdiemen May 7, 2026
352e81e
chore: remove unused group-aria-expanded
laravdiemen May 7, 2026
8d77a4c
fix: button hocus styles
laravdiemen May 7, 2026
9330385
style: improve button default styling
laravdiemen May 7, 2026
1a04bb8
style: improve breadcrumbs default styling
laravdiemen May 7, 2026
5be72a7
style: facetwp fselect border-radius when it is open
laravdiemen May 7, 2026
9bd7769
style: improve mobile-filters
laravdiemen May 7, 2026
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
11 changes: 6 additions & 5 deletions web/app/themes/sage/resources/styles/base/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,24 +109,25 @@
}

@utility is-button {
@apply inline-flex cursor-pointer items-center gap-(--button-gap) rounded-(--button-radius) border border-(--button-border-color) bg-(--button-bg-color) px-(--button-padding-x) py-(--button-padding-y) leading-snug! break-words text-(--button-color) no-underline transition-colors select-none;
@apply inline-flex cursor-pointer items-center gap-(--button-gap) rounded-(--button-radius) border-(length:--button-border-width) border-(--button-border-color) bg-(--button-bg-color) px-(--button-padding-x) py-(--button-padding-y) text-(length:--button-font-size) leading-snug! font-(--button-font-weight) wrap-break-word text-(--button-color) no-underline transition-colors select-none;

@WybeBosch WybeBosch May 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

ah nice met de length:


&:active {
@apply scale-(--button-scale-active);
}

@variant hocus {
@apply text-(--button-color); /* color is overridden by default a style */
--button-bg-color: var( --button-bg-color-hover );
--button-border-color: var( --button-border-color-hover );
--button-color: var( --button-color-hover );
--button-after-color: var( --button-after-color-hover ) !important;
--button-bg-color: var( --button-bg-color-hover ) !important;
--button-border-color: var( --button-border-color-hover ) !important;
--button-color: var( --button-color-hover ) !important;
}
}

/* Don't add this to is-button. Pseudo selectors break ::file-selector-button in Chrome. */
@utility add-button-icons {
&::after {
@apply fontawesome;
@apply fontawesome text-(--button-after-color) transition-colors;
--fa-icon: '\f061';
}

Expand Down
7 changes: 6 additions & 1 deletion web/app/themes/sage/resources/styles/blocks/button/shared.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
:root {
--button-after-color-hover: inherit;
--button-after-color: inherit;
--button-bg-color-hover: var( --color-primary-700 );
--button-bg-color: var( --color-primary );
--button-border-color-hover: var( --color-primary );
--button-border-color-hover: var( --color-primary-700 );
--button-border-color: var( --color-primary );
--button-border-width: 1px;
--button-color-hover: var( --color-white );
--button-color: var( --color-white );
--button-font-size: var( --text-base );
--button-font-weight: var( --font-weight-normal );
--button-gap: 0.75em;
--button-padding-x: 1.25em;
--button-padding-y: 0.75em;
Expand Down
2 changes: 1 addition & 1 deletion web/app/themes/sage/resources/styles/blocks/collapse/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}

.wp-block-yard-collapse-item__header-input {
@apply resize-none! rounded-none border-none bg-inherit p-0 text-(--collapse-button-color) shadow-none;
@apply resize-none! rounded-none border-none bg-inherit p-0 text-(length:--collapse-button-font-size) leading-(--collapse-button-line-height) font-(--collapse-button-font-weight) text-(--collapse-button-color) shadow-none;
}

.wp-block-yard-collapse-item__header-toggle-button {
Expand Down
5 changes: 3 additions & 2 deletions web/app/themes/sage/resources/styles/blocks/collapse/shared.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
--collapse-button-color-hover: var( --color-white );
--collapse-button-color: currentColor;
--collapse-button-font-size: var( --text-base );
--collapse-button-font-weight: var( --font-weight-normal );
--collapse-button-gap: 1rem;
--collapse-button-line-height: 2;
--collapse-button-line-height: var( --text-base--line-height );
--collapse-button-padding-x: 1.5rem;
--collapse-button-padding-y: 1rem;

Expand Down Expand Up @@ -60,7 +61,7 @@
}

.wp-block-yard-collapse-item__header-button {
@apply flex items-start justify-between gap-(--collapse-button-gap) rounded-(--collapse-radius) bg-(--collapse-button-bg-color) px-(--collapse-button-padding-x) py-(--collapse-button-padding-y) font-normal text-(--collapse-button-color) transition-all;
@apply flex items-start justify-between gap-(--collapse-button-gap) rounded-(--collapse-radius) bg-(--collapse-button-bg-color) px-(--collapse-button-padding-x) py-(--collapse-button-padding-y) font-(--collapse-button-font-weight) text-(--collapse-button-color) transition-all;

&::after {
@apply collapse-icon shrink-0;
Expand Down
4 changes: 2 additions & 2 deletions web/app/themes/sage/resources/styles/blocks/tabs/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
}

.wp-block-yard-tabs-item__heading-input {
@apply !w-full !resize-none rounded-none border-none bg-transparent p-0 text-(--tabs-button-color) shadow-none;
@apply w-full! resize-none! rounded-none border-none bg-transparent p-0 text-(length:--tabs-button-font-size) leading-(--tabs-button-leading) font-(--tabs-button-font-weight) text-(--tabs-button-color) shadow-none;
}

.wp-block-yard-tabs-item__panel {
@apply col-start-2 row-start-1 row-end-[100];
@apply col-start-2 row-start-1 row-end-100;
}
11 changes: 9 additions & 2 deletions web/app/themes/sage/resources/styles/blocks/tabs/shared.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
--tabs-button-color-hover: var( --color-primary );
--tabs-button-color-selected: var( --color-primary );
--tabs-button-color: var( --color-white );
--tabs-button-font-size: var( --text-base );
--tabs-button-font-weight-selected: var( --font-weight-normal );
--tabs-button-font-weight: var( --font-weight-normal );
--tabs-button-gap: 1.25rem;
--tabs-button-leading: 1.25;
--tabs-button-padding: 1.25rem 1.5rem;
Expand All @@ -29,6 +32,7 @@
--tabs-button-icon-color-hover: var( --color-white );
--tabs-button-icon-color-selected: var( --color-white );
--tabs-button-icon-color: var( --color-white );
--tabs-button-icon-radius: var( --radius-theme );
--tabs-button-icon-size: 2rem;
--tabs-button-icon: '\f061';

Expand Down Expand Up @@ -59,7 +63,7 @@
}

.wp-block-yard-tabs-item__heading {
@apply mb-0 bg-(--tabs-list-bg-color) p-(--tabs-list-padding) text-base font-normal md:col-start-1;
@apply mb-0 bg-(--tabs-list-bg-color) p-(--tabs-list-padding) text-(length:--tabs-button-font-size) font-(--tabs-button-font-weight) md:col-start-1;

&:not( :first-of-type ) {
@apply pt-0;
Expand All @@ -81,6 +85,9 @@
&:has( .wp-block-yard-tabs-item__button.active ) {
--tabs-button-bg-color: var( --tabs-button-bg-color-selected );
--tabs-button-color: var( --tabs-button-color-selected );
--tabs-button-font-weight: var(
--tabs-button-font-weight-selected
);
--tabs-button-icon-bg-color: var(
--tabs-button-icon-bg-color-selected
);
Expand Down Expand Up @@ -108,7 +115,7 @@
@apply relative flex w-full items-center gap-(--tabs-button-gap) rounded-(--tabs-radius) bg-(--tabs-button-bg-color) p-(--tabs-button-padding) text-left leading-(--tabs-button-leading) text-(--tabs-button-color) transition-colors duration-300;

&::before {
@apply fontawesome left-(--tabs-button-padding-x) flex size-(--tabs-button-icon-size) shrink-0 items-center justify-center rounded-(--tabs-radius) border-(length:--tabs-button-icon-border-width) border-(--tabs-button-icon-border-color) bg-(--tabs-button-icon-bg-color) text-(--tabs-button-icon-color) transition-all duration-300;
@apply fontawesome left-(--tabs-button-padding-x) flex size-(--tabs-button-icon-size) shrink-0 items-center justify-center rounded-(--tabs-button-icon-radius) border-(length:--tabs-button-icon-border-width) border-(--tabs-button-icon-border-color) bg-(--tabs-button-icon-bg-color) leading-none text-(--tabs-button-icon-color) transition-all duration-300;
--fa-icon: var( --tabs-button-icon );
}

Expand Down
6 changes: 5 additions & 1 deletion web/app/themes/sage/resources/styles/components/facetwp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,10 @@
.fs-wrap {
@apply min-w-full;

&.fs-open .fs-label-wrap {
@apply rounded-b-none;
}
Comment on lines +132 to +134

@laravdiemen laravdiemen May 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Deze aanpassing lost dit issue op: #104


.fs-label-wrap {
@apply is-select;

Expand Down Expand Up @@ -240,4 +244,4 @@ dialog .facetwp-type-date_range {
@apply right-0! left-auto!;
}
}
}
}
26 changes: 0 additions & 26 deletions web/app/themes/sage/resources/styles/components/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,3 @@
}
}
}

.footer-menu {
.menu-item {
@apply text-sm;

&::before {
@apply mr-3 content-['|'];
}

&:first-child::before {
@apply content-none;
}

a {
@apply text-black no-underline;

@variant hocus {
@apply underline;
}
}
}
}

.cky-banner-element + .footer-menu .menu-item:first-child::before {
@apply content-['|'];
}
Comment on lines -13 to -38

@WybeBosch WybeBosch May 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

was dit code van het oude widgets footer menu?

@laravdiemen laravdiemen May 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Dit was voordat we navi gebruikte

4 changes: 2 additions & 2 deletions web/app/themes/sage/resources/views/components/facetwp/mobile-filters.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
'label' => __('Filters', 'sage'),
])

<x-brave::dialog.trigger :dialogId="$dialogId" class="is-button z-50 w-full justify-center lg:hidden">
<x-brave::dialog.trigger :dialogId="$dialogId" class="is-button w-full justify-center lg:hidden">
<i class="fa-light fa-sliders" aria-hidden="true"></i>
{{ $label }}
</x-brave::dialog.trigger>
Expand All @@ -29,7 +29,7 @@ class="leading-0 -m-2 flex size-[46px] items-center justify-center text-2xl">
<x-facetwp.filters :facets="$facets" />
</div>

<div class="z-2 sticky bottom-4 mt-auto flex gap-2 px-4">
<div class="z-2 sticky bottom-0 mt-auto flex gap-2 bg-white p-4">
<x-facetwp.reset-button />

<x-brave::dialog.trigger :dialogId="$dialogId" class="is-button w-full justify-center">
Expand Down
11 changes: 4 additions & 7 deletions web/app/themes/sage/resources/views/components/header/mobile-menu.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,10 @@
'label' => __('Menu', 'sage'),
])

<x-brave::dialog.trigger :dialogId="$dialogId" class="hamburger group flex h-[46px] flex-col gap-y-2 lg:hidden">
<span
class="block h-0.5 w-8 rounded-full bg-black transition-all duration-300 ease-in-out group-aria-expanded:w-8 group-aria-expanded:translate-y-3 group-aria-expanded:rotate-45"></span>
<span
class="block h-0.5 w-6 rounded-full bg-black transition-all duration-300 ease-in-out group-aria-expanded:scale-0"></span>
<span
class="block h-0.5 w-4 rounded-full bg-black transition-all duration-300 ease-in-out group-aria-expanded:w-8 group-aria-expanded:-translate-y-2 group-aria-expanded:-rotate-45"></span>
<x-brave::dialog.trigger :dialogId="$dialogId" class="hamburger flex h-[46px] flex-col gap-y-2 lg:hidden">
<span class="block h-0.5 w-8 rounded-full bg-black transition-all duration-300 ease-in-out"></span>
<span class="block h-0.5 w-6 rounded-full bg-black transition-all duration-300 ease-in-out"></span>
<span class="block h-0.5 w-4 rounded-full bg-black transition-all duration-300 ease-in-out"></span>
<span class="mt-auto text-xs leading-none">{{ $label }}</span>
</x-brave::dialog.trigger>

Expand Down
52 changes: 26 additions & 26 deletions web/app/themes/sage/resources/views/components/layout/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action('get_header'); ?>

<div id="app" class="flex min-h-screen flex-col overflow-x-clip">
<a class="is-button on-focus-visible focus:fixed! focus:left-4! focus:top-4!" href="#main">
{{ __('Skip to content') }}
</a>

@include('sections.header')

<main id="main" class="main is-main-content create-main-content-alignment mt-(--combined-bar-height) flex-auto">
@if (post_password_required())
@php(the_content())
@else
<x-brave-breadcrumb class="container py-3 text-sm" listClass="align-items-center flex flex-wrap"
itemClass="not-last:after:content-['|'] after:mx-2 text-gray-500"
linkClass="inline-block text-black no-underline hocus:text-primary focus:underline" />
{{ $slot }}
@endif
</main>

@include('sections.footer')
</div>

<?php do_action('get_footer'); ?>
<?php wp_footer(); ?>
<?php wp_body_open(); ?>
<?php do_action('get_header'); ?>

<div id="app" class="flex min-h-screen flex-col overflow-x-clip">
<a class="is-button on-focus-visible focus:fixed! focus:left-4! focus:top-4!" href="#main">
{{ __('Skip to content') }}
</a>

@include('sections.header')

<main id="main" class="main is-main-content create-main-content-alignment mt-(--combined-bar-height) flex-auto">
@if (post_password_required())
@php(the_content())
@else
<x-brave-breadcrumb class="container py-3 text-sm" listClass="items-center flex flex-wrap"
itemClass="flex not-last:after:content-['|'] after:mx-2 text-gray-500 [&>span]:block [&>span]:max-w-[200px] [&>span]:overflow-hidden [&>span]:text-ellipsis [&>span]:whitespace-nowrap"

@WybeBosch WybeBosch May 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

wow ik wist niet dat je [&>] kon gebruiken in tailwind??? wat vet. heb het nog niet eerder nodig gehad.

linkClass="inline-block text-black no-underline hocus:text-primary hocus:underline" />
{{ $slot }}
@endif
</main>

@include('sections.footer')
</div>

<?php do_action('get_footer'); ?>
<?php wp_footer(); ?>
</body>

</html>
Loading