Skip to content

feat(rating): make rating size modifiers responsive #4368

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

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

feat(rating): make rating size modifiers responsive #4368

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
4023548
feat(rating): make rating size modifiers responsive
pdanpdan Jan 5, 2026
3249a4b
chore: prefix `--size-` variables with `rt-` to avoid prefix replacem…
pdanpdan Jan 7, 2026
fe83765
chore: formatting
pdanpdan Jan 10, 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
117 changes: 50 additions & 67 deletions packages/daisyui/src/components/rating.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,106 +2,89 @@
@layer daisyui.l1.l2.l3 {
@apply relative inline-flex align-middle;

& input {
border: none;
@apply appearance-none;
--size: var(--size-selector, 0.25rem) * var(--rt-size-mul);

input {
@apply cursor-pointer appearance-none;
}

:where(*) {
@apply bg-base-content h-6 w-6 rounded-none opacity-20;
* {
@apply bg-base-content rounded-none opacity-20;

width: calc(var(--size) * var(--rt-size-w-mul));
height: calc(var(--size));

@media (prefers-reduced-motion: no-preference) {
animation: rating 0.25s ease-out;
}
&:is(input) {
@apply cursor-pointer;
}
}

& .rating-hidden {
.rating-hidden {
@apply w-2 bg-transparent;
}

input[type="radio"]:checked {
background-image: none;
:checked,
[aria-checked="true"],
[aria-current="true"],
:has(~ :checked, ~ [aria-checked="true"], ~ [aria-current="true"]) {
@apply opacity-100;
}

* {
&:checked,
&[aria-checked="true"],
&[aria-current="true"],
&:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
@apply opacity-100;
}

&:focus-visible {
scale: 1.1;
@media (prefers-reduced-motion: no-preference) {
transition: scale 0.2s ease-out;
}
:focus-visible {
scale: 1.1;
@media (prefers-reduced-motion: no-preference) {
transition: scale 0.2s ease-out;
}
}

& *:active:focus {
:active:focus {
animation: none;
}

& *:active:focus {
scale: 1.1;
}
}
}

.rating-half {
@layer daisyui.l1.l2 {
&.rating-xs :where(*:not(.rating-hidden)) {
@apply size-4;
}

&.rating-sm :where(*:not(.rating-hidden)) {
@apply size-5;
}

&.rating-md :where(*:not(.rating-hidden)) {
@apply size-6;
}

&.rating-lg :where(*:not(.rating-hidden)) {
@apply size-7;
}

&.rating-xl :where(*:not(.rating-hidden)) {
@apply size-8;
}
--rt-size-w-mul: 0.5;
}
}

.rating-half {
.rating,
.rating-full {
@layer daisyui.l1.l2 {
:where(*:not(.rating-hidden)) {
@apply w-3;
}
--rt-size-w-mul: 1;
}
}

.rating-half {
.rating-xs {
@layer daisyui.l1.l2 {
&.rating-xs *:not(.rating-hidden) {
@apply w-2;
}
--rt-size-mul: 4;
}
}

&.rating-sm *:not(.rating-hidden) {
@apply w-2.5;
}
.rating-sm {
@layer daisyui.l1.l2 {
--rt-size-mul: 5;
}
}

&.rating-md *:not(.rating-hidden) {
@apply w-3;
}
.rating,
.rating-md {
@layer daisyui.l1.l2 {
--rt-size-mul: 6;
}
}

&.rating-lg *:not(.rating-hidden) {
@apply w-[.875rem];
}
.rating-lg {
@layer daisyui.l1.l2 {
--rt-size-mul: 7;
}
}

&.rating-xl *:not(.rating-hidden) {
@apply w-4;
}
.rating-xl {
@layer daisyui.l1.l2 {
--rt-size-mul: 8;
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/docs/src/routes/(routes)/components/rating/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ classnames:
modifier:
- class: rating-half
desc: To shows half of the shapes. Useful for half star ratings
- class: rating-full
desc: To shows full shapes. Useful to override half star ratings
- class: rating-hidden
desc: For the first radio to make it hidden so user can clear the rating
size:
Expand Down Expand Up @@ -38,7 +40,7 @@ classnames:
### ~Rating
<div class="rating">
<input type="radio" name="rating-1" class="mask mask-star" aria-label="1 star" />
<input type="radio" name="rating-1" class="mask mask-star" aria-label="2 star" />
<input type="radio" name="rating-1" class="mask mask-star" aria-label="2 star" checked="checked" />
<input type="radio" name="rating-1" class="mask mask-star" aria-label="3 star" />
<input type="radio" name="rating-1" class="mask mask-star" aria-label="4 star" />
<input type="radio" name="rating-1" class="mask mask-star" aria-label="5 star" />
Expand Down
1 change: 1 addition & 0 deletions packages/docs/src/routes/(routes)/docs/utilities/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ If you are using a prefix for daisyUI, these CSS variables will be prefixed with
| | `--range-fill` | binary, whether to fill the range slider progress or not |
| | `--range-p` | padding of the range slider thumb |
| | `--size` | size of the range slider |
| Rating | `--size` | size of the rating element |
| Select | `--input-color` | color of the input |
| | `--size` | size of the select |
| Tab | `--tabs-height` | height of the tabs |
Expand Down