UI: fixes sidebar settings border and active styles (#13990)

- active setting should now correctly show an arrow which was previously floating in the middle of nowhere
- uses a correct color for border separation, previously the border was present but invisible as similar to the background
- slighty tweak padding
- makes arrow computation based on a variable
This commit is contained in:
Joffrey JAFFEUX 2021-08-10 08:53:22 +02:00 committed by GitHub
parent 6774c600a4
commit 2efe91f49f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -69,7 +69,7 @@
background: var(--primary-low);
li {
border-bottom: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low-mid-or-secondary-high);
&:last-of-type {
border-bottom: 0;
@ -82,7 +82,7 @@
a {
margin: 0;
padding: 13px;
padding: 0.75em;
font-size: $font-up-1;
line-height: $line-height-small;
cursor: pointer;
@ -92,13 +92,16 @@
&.active {
color: var(--secondary);
background-color: var(--quaternary);
position: relative;
--arrow-thickness: 8px;
&::after {
left: 90%;
top: 33%;
content: " ";
position: absolute;
border: 8px solid transparent;
right: 0;
top: calc(50% - var(--arrow-thickness));
content: " ";
border: var(--arrow-thickness) solid transparent;
border-left-color: var(--secondary);
}
}