studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

panel/btn mobile & scripts
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-25 19:40:55 +01:00
parent bd97c1c33e
commit f28680f77e
26 changed files with 506 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

85
assets/css/template/_report.scss
View file

@ -3,6 +3,54 @@
// LAOUT -----------------------------------
@media #{$small}{
[data-template="report"] {
#toggle-panel{
display: none;
}
#report__aside{
width: 100vw;
position: fixed;
top: 0px;
height: 100vh;
left: -100vw;
z-index: calc(var(--z-header) + 10);
transition: left .4s ease-in;
background: var(--color-bg);
.panel__header{
margin: 0 var(--padding-body);
border-bottom: var(--border-aside);
height: var(--header-h);
}
.panel__content{
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
padding-bottom: 30vh;
}
.btn--group{
display: none;
}
}
.panel-open #report__aside{
left: 0px;
}
}
}
@media #{$small-up}{
[data-template="report"] {
@ -49,14 +97,19 @@
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
.panel__header{
border: var(--border-aside);
height: calc(var(--h-block)*1.5);
}
.panel__content {
height: calc(100% - var(--h-block)*4);
height: calc(100% - var(--h-block)*4.25);
padding-bottom: 80px;
}
}
#report__aside {
left: calc(var(--panel-w)*-1);
@ -85,6 +138,7 @@
}
}
// HEADER -------------------------------------------------------------------------
@ -178,6 +232,10 @@
.section-content {
margin-bottom: calc(var(--spacing)*3);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
}
}
@ -210,33 +268,14 @@
#toggle-panel {
width: calc(var(--h-block) * 1);
padding: 0;
svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
top: 0px;
}
}
#report__aside {
--border-aside: var(--border-light);
// border-radius: var(--radius-small);
.panel__header {
display: flex;
border: var(--border-aside);
height: calc(var(--h-block)*1.25);
display: flex;
align-items: center;
justify-content: flex-start;