ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve panels design

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/sass/layout.scss
View File

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