Improve panels design

This commit is contained in:
Alice Gaudon 2020-07-27 16:02:33 +02:00
parent c87eec28b2
commit ffe92674e5
1 changed files with 23 additions and 6 deletions

View File

@ -252,15 +252,23 @@ section > h2, .panel > h2 {
align-items: center;
position: relative;
text-align: center;
margin-top: 16px;
margin-top: 4px;
&::before, &::after {
font-size: 24px;
line-height: 1;
.feather {
margin: 0 16px 0 0;
opacity: 0.1;
}
&::after {
content: "";
flex: 1;
margin: 0 32px;
margin: 0 16px;
height: 0;
border-bottom: 1px solid $defaultTextColor;
opacity: 0.2;
opacity: 0.1;
}
}
@ -353,7 +361,7 @@ form {
& + .feather {
position: absolute;
z-index: -1;
pointer-events: none;
right: 8px;
bottom: 8px;
@ -557,7 +565,8 @@ button, .button {
}
.panel {
margin: 16px 0;
position: relative;
margin: 16px 0 48px;
padding: 8px;
background-color: $panelBackground;
border-radius: 5px;
@ -565,6 +574,14 @@ button, .button {
p {
margin: 16px 8px;
}
> .feather:first-child {
position: absolute;
--icon-size: 24px;
opacity: 0.1;
top: 8px;
left: 8px;
}
}
.sub-panel {