Improves button group styles
This commit is contained in:
parent
a4adab31d2
commit
e79476fa85
@ -114,7 +114,7 @@ main {
|
||||
|
||||
/* main content wrapper */
|
||||
article {
|
||||
@apply grid grid-cols-1 w-full;
|
||||
@apply grid grid-cols-1 w-full pr-6 2xl:pr-8;
|
||||
grid-template-rows: 5rem auto;
|
||||
|
||||
/* main content title and actions */
|
||||
@ -136,7 +136,7 @@ main {
|
||||
}
|
||||
|
||||
menu {
|
||||
@apply flex flex-row items-center justify-end gap-2;
|
||||
@apply flex flex-row items-center justify-end gap-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -44,21 +44,20 @@ button,
|
||||
transition: background-color 100ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply bg-cyan-300;
|
||||
@apply bg-cyan-200;
|
||||
}
|
||||
|
||||
&:has(input:checked),
|
||||
&:active {
|
||||
@apply bg-cyan-300;
|
||||
@apply bg-cyan-300 border-r-transparent;
|
||||
box-shadow:
|
||||
inset 2.5px 0 0 0 var(--color-primary),
|
||||
inset 0 0.25rem 0 0 var(--color-cyan-400);
|
||||
left: 0;
|
||||
top: 2.5px;
|
||||
|
||||
+ label {
|
||||
box-shadow:
|
||||
inset 1.5px 0 0 0 var(--color-primary);
|
||||
+ label,
|
||||
+ button {
|
||||
box-shadow: inset 1.5px 0 0 0 var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,6 +72,11 @@ button,
|
||||
|
||||
&:last-child {
|
||||
@apply border-r-md rounded-r-md;
|
||||
|
||||
&:has(input:checked),
|
||||
&:active {
|
||||
@apply border-r-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
.calendar {
|
||||
@apply grid col-span-3 pr-6 2xl:pr-8 pb-6 2xl:pb-8 pt-2;
|
||||
@apply grid col-span-3 pb-6 2xl:pb-8 pt-2;
|
||||
grid-template-rows: 2rem 1fr;
|
||||
|
||||
hgroup {
|
||||
|
Loading…
Reference in New Issue
Block a user