Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/Switcher: new style & clean up

Browse source
This commit is contained in:
wukko 2024-06-29 21:19:35 +06:00
parent f383f5d94e
commit c7befcb100
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
web/src/components/buttons/Switcher.svelte
View file

@ -17,27 +17,43 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.switcher :global(.button:first-child) { .switcher:not(.big) :global(.button:first-child) {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.switcher :global(.button:last-child) { .switcher:not(.big) :global(.button:last-child) {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.switcher.big :global(.button) { .switcher.big {
width: 100%; --switcher-inner-padding: 4px;
height: 40px; border-radius: calc(var(--border-radius) + var(--switcher-inner-padding));
background: var(--button);
box-shadow: var(--button-box-shadow);
padding: var(--switcher-inner-padding);
} }
.switcher > :global(:not(.button:first-child):not(.button:last-child)) { .switcher.big :global(.button) {
width: 100%;
height: calc(40px - var(--switcher-inner-padding));
}
.switcher.big :global(.button:not(:focus-visible)) {
box-shadow: none;
}
.switcher.big :global(.button:not(.active, :hover, :active)) {
background-color: transparent;
}
.switcher:not(.big) :global(.button:not(:first-child, :last-child)) {
border-radius: 0; border-radius: 0;
} }
/* clumsy hack to get rid of double border in a list of switches */ /* hack to get rid of double border in a list of switches */
.switcher > :global(:not(.button:first-child)) { .switcher:not(.big) :global(:not(.button:first-child)) {
margin-left: -1.5px; margin-left: -1.5px;
} }
</style> </style>