Remove the spacing var from Settings styles

This commit is contained in:
Vladimir Borisov 2019-09-27 17:59:22 +03:00
parent 1adb6b6815
commit 2c61153294
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603

View file

@ -20,18 +20,17 @@
display: flex;
flex-direction: row;
background-color: var(--color-backgroundlight);
--spacing: 1rem;
--input-width: 35rem;
.side-menu {
padding: var(--spacing);
padding: 1rem;
width: 17rem;
display: flex;
flex-direction: column;
background-color: var(--color-backgroundlighter);
.section-label {
padding: var(--spacing);
padding: 1rem;
font-size: 1.1rem;
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
color: var(--color-surfacelight);
@ -59,26 +58,26 @@
}
.scroll-container {
padding: 0 calc(var(--spacing) * 2);
padding: 0 2rem;
flex: 1;
overflow-y: auto;
.section {
padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
padding: 4rem 2rem;
.section-header {
margin: 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
margin: 0 1.5rem 1.5rem 1.5rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.input-container {
margin: calc(var(--spacing) * 1.5);
margin: 1.5rem;
display: flex;
flex-direction: column;
.input-header {
margin-bottom: calc(var(--spacing) * 0.5);
margin-bottom: 0.5rem;
color: var(--color-surfacelighter);
}
@ -94,7 +93,7 @@
align-items: center;
.avatar {
margin: 0 var(--spacing);
margin: 0 1rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
@ -117,7 +116,7 @@
}
&.link-container {
margin: var(--spacing) calc(var(--spacing) * 1.5);
margin: 1rem 1.5rem;
.link {
display: block;
@ -135,7 +134,7 @@
&.button-container {
.button {
padding: calc(var(--spacing) * 0.7);
padding: 0.7rem;
width: var(--input-width);
min-height: calc(var(--input-width) * 0.09);
display: flex;
@ -147,7 +146,7 @@
.icon {
width: 1.4rem;
height: 100%;
margin-right: calc(var(--spacing) * 0.5);
margin-right: 0.5rem;
fill: var(--color-surfacelighter);
}
@ -205,16 +204,16 @@
align-items: center;
.icon {
margin-right: calc(var(--spacing) * 0.5);
width: var(--spacing);
height: var(--spacing);
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal5);
}
.x-icon {
margin-right: calc(var(--spacing) * 0.5);
width: var(--spacing);
height: var(--spacing);
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal2);
}