mirror of
https://github.com/koel/koel
synced 2024-12-21 01:53:11 +00:00
25 lines
530 B
Vue
25 lines
530 B
Vue
|
<template>
|
||
|
|
<button
|
||
|
|
class="relative flex items-center justify-center h-[42px] aspect-square rounded-full
|
||
|
|
bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer
|
||
|
|
hover:active-state active:scale-90"
|
||
|
|
type="button"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="postcss">
|
||
|
|
@tailwind utilities;
|
||
|
|
|
||
|
|
@layer utilities {
|
||
|
|
.active-state {
|
||
|
|
@apply opacity-100 text-k-text-primary bg-white/10;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
button.active {
|
||
|
|
@apply active-state;
|
||
|
|
}
|
||
|
|
</style>
|