gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-02 07:53:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

segment control css update

Browse Source
This commit is contained in:
PavelLaptev 2023-11-28 01:40:45 +01:00 committed by GitButler
parent 48db234f2a
commit 666da83180
1 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/ui/src/lib/components/SegmentControl/Segment.svelte
View File

@ -78,11 +78,9 @@
background-color: var(--clr-theme-container-pale); background-color: var(--clr-theme-container-pale);
padding: var(--space-4) var(--space-8); padding: var(--space-4) var(--space-8);
border-width: 1px; border-top-width: 1px;
border-top-color: var(--clr-theme-container-outline-light); border-bottom-width: 1px;
border-bottom-color: var(--clr-theme-container-outline-light); border-color: var(--clr-theme-container-outline-light);
border-left-color: transparent;
border-right-color: transparent;
transition: background var(--transition-fast); transition: background var(--transition-fast);
@ -92,8 +90,9 @@
&[aria-selected='true'] { &[aria-selected='true'] {
background-color: var(--clr-theme-container-light); background-color: var(--clr-theme-container-light);
border-left-color: var(--clr-theme-container-outline-light); padding: var(--space-4) var(--space-8);
border-right-color: var(--clr-theme-container-outline-light); border-right-width: 1px;
border-left-width: 1px;
& > .label { & > .label {
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
@ -102,19 +101,19 @@
color: var(--clr-theme-scale-ntrl-0); color: var(--clr-theme-scale-ntrl-0);
} }
&.left { &.left {
border-right-color: var(--clr-theme-container-outline-light); border-right-width: 1px;
} }
&.right { &.right {
border-left-color: var(--clr-theme-container-outline-light); border-left-width: 1px;
} }
} }
&.left { &.left {
border-left-width: 1px;
border-top-left-radius: var(--radius-m); border-top-left-radius: var(--radius-m);
border-left-color: var(--clr-theme-container-outline-light);
border-bottom-left-radius: var(--radius-m); border-bottom-left-radius: var(--radius-m);
} }
&.right { &.right {
border-right-color: var(--clr-theme-container-outline-light); border-right-width: 1px;
border-top-right-radius: var(--radius-m); border-top-right-radius: var(--radius-m);
border-bottom-right-radius: var(--radius-m); border-bottom-right-radius: var(--radius-m);
} }