entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 8 Releases Wiki Activity

montpellier-2023: add styles for cell image & links-list (#81585)

This commit is contained in:
Thomas Jund 2023-09-27 16:16:11 +02:00
parent e8fd55b8a9
commit aba3babaeb
3 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
static/montpellier-2023/_custom.scss
View File

@ -314,6 +314,78 @@ div#main-content {
// CELLS
//
// Links list
%cell-links-list {
& > li {
position: relative;
&::before {
content: "";
background: url("img/links-list-item-arrow.svg") no-repeat;
background-position: bottom;
background-size: 100% auto;
margin: 0 0.5em;
width: 1.5em;
height: 1.1em;
display: inline-block;
padding-top: 1em;
box-sizing: content-box;
position: absolute;
left: 0;
z-index: 1;
}
}
& > li > a,
li div.description {
padding-left: 2.5rem;
p {
margin-left: 0;
margin-right: 0;
}
}
}
// foldable icon to left
div.cell.foldable > div > h2:first-child {
display: flex;
&::after {
position: static;
order: -1;
text-align: left;
align-self: end;
}
}
// cell with picture (to the right of title)
.gru-content .cell.has-asset-picture {
$image-size: 3rem;
> div {
display: flex;
flex-wrap: wrap;
align-items: center;
> * {
flex: 0 0 100%;
}
> h2:first-child {
flex: 1 0 50%;
margin-right: -1 * ($image-size + 1);
padding-right: $image-size + 2;
}
> picture {
display: block;
// order: -1;
flex: 0 0 $image-size;
align-self: center;
margin-right: 1rem;
position: relative;
z-index: 1;
img {
padding: 0;
height: $image-size;
width: $image-size;
object-fit: contain;
}
}
}
}
// Custom classes
.shadow-blue {
.gru-content &.cell {

2
static/montpellier-2023/_vars.scss
View File

@ -59,6 +59,8 @@ $title-transform: uppercase;
$cell-border: none;
$cell-border-radius: 10px;
$cell-entry-color: $font-color;
$cell-entry-hover-background: #F8F8F8;
$button-border-radius: 5px;
$button-background: $green;

3
static/montpellier-2023/img/links-list-item-arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Line 60" d="M23.4303 6.53033C23.7232 6.23744 23.7232 5.76257 23.4303 5.46967L18.6574 0.696701C18.3645 0.403808 17.8896 0.403808 17.5967 0.696701C17.3038 0.989595 17.3038 1.46447 17.5967 1.75736L21.8393 6L17.5967 10.2426C17.3038 10.5355 17.3038 11.0104 17.5967 11.3033C17.8896 11.5962 18.3645 11.5962 18.6574 11.3033L23.4303 6.53033ZM2.40302e-08 6.75L22.9 6.75L22.9 5.25L-2.40306e-08 5.25L2.40302e-08 6.75Z" fill="#0356F2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B