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

rapport styles aside
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-13 11:42:22 +01:00
parent 3e9f68e248
commit 9444a59260
4 changed files with 66 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

55
assets/css/template/_rapport.scss
View file

@ -1,14 +1,15 @@
:root{
--rapport-w: 280px;
--rapport-w: 290px;
}
#rapport{
margin-bottom: 20vh;
padding-left: var(--rapport-w);
padding-left: calc(var(--rapport-w) + var(--padding-body)*1);
padding-bottom: 10vh;
margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w));
max-width: calc(var(--max-w-content) + var(--rapport-w) + var(--padding-body));
margin-top: calc(var(--spacing)*-1);
}
#rapport .rapport__header{
@ -32,7 +33,7 @@
.subtitle{
font-size: var(--fs-big);
line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*0.5);
// margin-top: calc(var(--spacing)*0.25);
font-weight: normal;
}
@ -53,12 +54,12 @@
}
.rapport__dl{
align-self: start;
// align-self: start;
font-size: var(--fs-small);
border-bottom: var(--border-light);
flex-grow: 2;
// flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*1);
.dl__group{
@include grid-content();
border-top: var(--border-light);
@ -88,14 +89,25 @@
}
label{
position: relative;
// position: relative;
}
.modal-share{
max-width: 220px;
.modal--share{
max-width: 240px;
position: absolute;
top: 30px;
left: 0px;
height: 250px;
top: calc(var(--h-block) * 1.5);
left: 260px;
&::before{
content: "◀";
transform: rotate(90deg);
font-size: 10px;
position: absolute;
top: -10px;
right: calc(var(--h-block) * 1.5);
}
}
.thumbnail{
@ -197,13 +209,14 @@
position: fixed;
top: calc(var(--header-h) + var(--padding-body));
left: var(--padding-body);
--border-aside: var(--border-light);
// border-radius: var(--radius-small);
height: calc(100vh - var(--header-h) - var(--padding-body)*4);
.tabs{
display: flex;
border: var(--border-light);
border: var(--border-aside);
height: calc(var(--h-block)*1.25);
.tab{
@ -217,7 +230,7 @@
.tab[for="tab-print"]{
width: calc(var(--h-block)*1.5);
border-right: var(--border-light);
border-right: var(--border-aside);
padding-left: 0;
justify-content: center;
.icon{
@ -234,7 +247,7 @@
padding: var(--padding-body);
height: calc(100% - var(--h-block)*1.25);
overflow: scroll;
border: var(--border-light);
border: var(--border-aside);
border-top: none;
}
@ -244,15 +257,21 @@
li{
font-size: var(--fs-small);
padding: 5px 1ch;
padding-top: 7px;
color: var(--color-txt-light);
a{
display: block;
padding: 5px 1ch;
padding-top: 7px;
}
}
li.selected{
// color: var(--color-accent);
background-color: var(--grey-800);
color: var(--color-txt);
}
li:hover{