daisyui/components/rating.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.rating{@layer daisyui.l1.l2.l3{vertical-align:middle;--size:var(--size-selector,.25rem) * 6;display:inline-flex;position:relative;& input{cursor:pointer;appearance:none}& *{background-color:var(--color-base-content);opacity:.2;width:calc(var(--size) * 1);height:calc(var(--size));border-radius:0;@media (prefers-reduced-motion:no-preference){animation:.25s ease-out rating}}& .rating-hidden{background-color:#0000;width:.5rem}& :checked,& [aria-checked=true],& [aria-current=true],& :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}& :focus-visible{scale:1.1;@media (prefers-reduced-motion:no-preference){transition:scale .2s ease-out}}& :active:focus{animation:none;scale:1.1}}}.rating-half{@layer daisyui.l1.l2{& *{width:calc(var(--size) * .5)}}}.rating-xs{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 4}}.rating-sm{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 5}}.rating,.rating-md{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 6}}.rating-lg{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 7}}.rating-xl{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 8}}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@media (width>=640px){.sm\:rating{@layer daisyui.l1.l2.l3{vertical-align:middle;--size:var(--size-selector,.25rem) * 6;display:inline-flex;position:relative;& input{cursor:pointer;appearance:none}& *{background-color:var(--color-base-content);opacity:.2;width:calc(var(--size) * 1);height:calc(var(--size));border-radius:0;@media (prefers-reduced-motion:no-preference){animation:.25s ease-out rating}}& .rating-hidden{background-color:#0000;width:.5rem}& :checked,& [aria-checked=true],& [aria-current=true],& :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}& :focus-visible{scale:1.1;@media (prefers-reduced-motion:no-preference){transition:scale .2s ease-out}}& :active:focus{animation:none;scale:1.1}}}.sm\:rating-half{@layer daisyui.l1.l2{& *{width:calc(var(--size) * .5)}}}.sm\:rating-xs{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 4}}.sm\:rating-sm{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 5}}.sm\:rating,.sm\:rating-md{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 6}}.sm\:rating-lg{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 7}}.sm\:rating-xl{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 8}}}@media (width>=768px){.md\:rating{@layer daisyui.l1.l2.l3{vertical-align:middle;--size:var(--size-selector,.25rem) * 6;display:inline-flex;position:relative;& input{cursor:pointer;appearance:none}& *{background-color:var(--color-base-content);opacity:.2;width:calc(var(--size) * 1);height:calc(var(--size));border-radius:0;@media (prefers-reduced-motion:no-preference){animation:.25s ease-out rating}}& .rating-hidden{background-color:#0000;width:.5rem}& :checked,& [aria-checked=true],& [aria-current=true],& :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}& :focus-visible{scale:1.1;@media (prefers-reduced-motion:no-preference){transition:scale .2s ease-out}}& :active:focus{animation:none;scale:1.1}}}.md\:rating-half{@layer daisyui.l1.l2{& *{width:calc(var(--size) * .5)}}}.md\:rating-xs{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 4}}.md\:rating-sm{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 5}}.md\:rating,.md\:rating-md{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 6}}.md\:rating-lg{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 7}}.md\:rating-xl{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 8}}}@media (width>=1024px){.lg\:rating{@layer daisyui.l1.l2.l3{vertical-align:middle;--size:var(--size-selector,.25rem) * 6;display:inline-flex;position:relative;& input{cursor:pointer;appearance:none}& *{background-color:var(--color-base-content);opacity:.2;width:calc(var(--size) * 1);height:calc(var(--size));border-radius:0;@media (prefers-reduced-motion:no-preference){animation:.25s ease-out rating}}& .rating-hidden{background-color:#0000;width:.5rem}& :checked,& [aria-checked=true],& [aria-current=true],& :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}& :focus-visible{scale:1.1;@media (prefers-reduced-motion:no-preference){transition:scale .2s ease-out}}& :active:focus{animation:none;scale:1.1}}}.lg\:rating-half{@layer daisyui.l1.l2{& *{width:calc(var(--size) * .5)}}}.lg\:rating-xs{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 4}}.lg\:rating-sm{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 5}}.lg\:rating,.lg\:rating-md{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 6}}.lg\:rating-lg{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 7}}.lg\:rating-xl{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 8}}}@media (width>=1280px){.xl\:rating{@layer daisyui.l1.l2.l3{vertical-align:middle;--size:var(--size-selector,.25rem) * 6;display:inline-flex;position:relative;& input{cursor:pointer;appearance:none}& *{background-color:var(--color-base-content);opacity:.2;width:calc(var(--size) * 1);height:calc(var(--size));border-radius:0;@media (prefers-reduced-motion:no-preference){animation:.25s ease-out rating}}& .rating-hidden{background-color:#0000;width:.5rem}& :checked,& [aria-checked=true],& [aria-current=true],& :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}& :focus-visible{scale:1.1;@media (prefers-reduced-motion:no-preference){transition:scale .2s ease-out}}& :active:focus{animation:none;scale:1.1}}}.xl\:rating-half{@layer daisyui.l1.l2{& *{width:calc(var(--size) * .5)}}}.xl\:rating-xs{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 4}}.xl\:rating-sm{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 5}}.xl\:rating,.xl\:rating-md{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 6}}.xl\:rating-lg{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 7}}.xl\:rating-xl{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 8}}}@media (width>=1536px){.\32 xl\:rating{@layer daisyui.l1.l2.l3{vertical-align:middle;--size:var(--size-selector,.25rem) * 6;display:inline-flex;position:relative;& input{cursor:pointer;appearance:none}& *{background-color:var(--color-base-content);opacity:.2;width:calc(var(--size) * 1);height:calc(var(--size));border-radius:0;@media (prefers-reduced-motion:no-preference){animation:.25s ease-out rating}}& .rating-hidden{background-color:#0000;width:.5rem}& :checked,& [aria-checked=true],& [aria-current=true],& :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}& :focus-visible{scale:1.1;@media (prefers-reduced-motion:no-preference){transition:scale .2s ease-out}}& :active:focus{animation:none;scale:1.1}}}.\32 xl\:rating-half{@layer daisyui.l1.l2{& *{width:calc(var(--size) * .5)}}}.\32 xl\:rating-xs{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 4}}.\32 xl\:rating-sm{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 5}}.\32 xl\:rating,.\32 xl\:rating-md{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 6}}.\32 xl\:rating-lg{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 7}}.\32 xl\:rating-xl{@layer daisyui.l1.l2{--size:var(--size-selector,.25rem) * 8}}}}