Skip to content
Snippets Groups Projects
Commit b37d088d authored by Hervé Donner's avatar Hervé Donner
Browse files

ISAICP-9050: Fixup pattern-tile.html.twig and styling (regression from eb09d096 - ISAICP-8253).

parent f955ff3e
No related branches found
No related tags found
1 merge request!183Release v1.112.0
.tile{background-color:#fff;flex-direction:column;height:100%;position:relative}.tile__link{z-index:2}.tile__action{position:relative;z-index:3}.tile__figure{align-items:center;aspect-ratio:1/1;display:flex;justify-content:center;overflow:hidden}.tile__figure picture img{margin-bottom:0;width:100%}.tile__default-img{aspect-ratio:4/3}@media (min-width:768px){.tile__default-img{aspect-ratio:1/1}}.tile__body{padding:1rem}.tile__standout-info{font-size:.875rem;max-width:9.3rem;overflow:hidden;right:.5rem;text-overflow:ellipsis;top:-1rem;white-space:nowrap}.tile__info-icon,.tile__standout-info-icon{font-size:.75rem}.tile__info-icon{flex-shrink:0}.tile__info-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.tile__default-img:after{background-color:#fff;border-radius:50rem;content:"";display:block;height:6rem;position:absolute;width:6rem}.tile__default-icon{color:#a2a8ab;height:3rem;width:3rem;z-index:1}.tile__body{flex:1 1 auto;padding:1rem 1rem 0}.tile__title{-webkit-line-clamp:2}.tile__text,.tile__title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.tile__text{-webkit-line-clamp:4}.tile__text div,.tile__text p{display:inline}.tile__bundle-icon{background-color:#fae8cd;height:1.5rem;width:1.5rem}.tile .mark{align-items:center;background-color:#1073de;border-radius:50rem;display:flex;height:1.75rem;justify-content:center;position:absolute;right:.5rem;top:.5rem;width:1.75rem;z-index:1}.tile .mark.star:before{-webkit-mask-image:url(../icons/star.svg);mask-image:url(../icons/star.svg)}.tile .mark.pin:before,.tile .mark.star:before{background-color:#fff;content:"";display:inline-block;height:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:-.125em;width:1em}.tile .mark.pin:before{-webkit-mask-image:url(../icons/pin.svg);mask-image:url(../icons/pin.svg)}.tile__footer div span:first-child{flex:1}.tile__footer .flag__link{border-radius:50rem;padding:.4rem}.tile__footer .flag__link:hover{text-decoration:none}.tile__footer .flag__link:not(.flag__link--archived):hover{background-color:#e7f1fb}.tile__footer .flag__link--archived:hover{cursor:not-allowed}.tile__footer [data-joinup-card-stats-shared]:hover{cursor:help}.tile .field--name-oss-logo{padding:1rem;width:100%}.tile--horizontal{width:100%}.tile--horizontal .field--name-oss-logo{padding:1rem;width:100%}@media (min-width:768px){.tile--horizontal{flex-direction:row;flex-wrap:wrap;height:auto}.tile--horizontal .field--name-oss-logo{padding:0}.tile--horizontal .tile__figure{padding:1rem 0 0 1rem;width:180px}.tile--horizontal .tile__body{flex:1 1 calc(100% - 180px);max-width:calc(100% - 180px);overflow-wrap:anywhere;padding:1rem 1rem 0}.tile--horizontal .tile__standout-info{bottom:.5rem;right:unset;top:unset;transform:translateX(calc(-100% - 1.5rem))}.tile--horizontal .tile__footer{align-self:end;border-top:1px solid #dadee0;margin-top:1rem;width:100%}}
.tile{background-color:#fff;flex-direction:column;height:100%;position:relative}.tile__link{z-index:2}.tile__action{position:relative;z-index:3}.tile__figure{align-items:center;aspect-ratio:1/1;display:flex;justify-content:center;overflow:hidden}.tile__figure picture img{margin-bottom:0;width:100%}.tile__default-img{aspect-ratio:4/3}@media (min-width:768px){.tile__default-img{aspect-ratio:1/1}}.tile__body{padding:1rem}.tile__standout-info{font-size:.875rem;max-width:9.3rem;right:.5rem;top:-1rem}.tile__info-icon,.tile__standout-info-icon{font-size:.75rem}.tile__info-icon{flex-shrink:0}.tile__info-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.tile__default-img:after{background-color:#fff;border-radius:50rem;content:"";display:block;height:6rem;position:absolute;width:6rem}.tile__default-icon{color:#a2a8ab;height:3rem;width:3rem;z-index:1}.tile__body{flex:1 1 auto;padding:1rem 1rem 0}.tile__title{-webkit-line-clamp:2}.tile__text,.tile__title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.tile__text{-webkit-line-clamp:4}.tile__text div,.tile__text p{display:inline}.tile__bundle-icon{background-color:#fae8cd;height:1.5rem;width:1.5rem}.tile .mark{align-items:center;background-color:#1073de;border-radius:50rem;display:flex;height:1.75rem;justify-content:center;position:absolute;right:.5rem;top:.5rem;width:1.75rem;z-index:1}.tile .mark.star:before{-webkit-mask-image:url(../icons/star.svg);mask-image:url(../icons/star.svg)}.tile .mark.pin:before,.tile .mark.star:before{background-color:#fff;content:"";display:inline-block;height:1em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;vertical-align:-.125em;width:1em}.tile .mark.pin:before{-webkit-mask-image:url(../icons/pin.svg);mask-image:url(../icons/pin.svg)}.tile__footer div span:first-child{flex:1}.tile__footer .flag__link{border-radius:50rem;padding:.4rem}.tile__footer .flag__link:hover{text-decoration:none}.tile__footer .flag__link:not(.flag__link--archived):hover{background-color:#e7f1fb}.tile__footer .flag__link--archived:hover{cursor:not-allowed}.tile__footer [data-joinup-card-stats-shared]:hover{cursor:help}.tile .field--name-oss-logo{padding:1rem;width:100%}.tile--horizontal{width:100%}.tile--horizontal .field--name-oss-logo{padding:1rem;width:100%}@media (min-width:768px){.tile--horizontal{flex-direction:row;flex-wrap:wrap;height:auto}.tile--horizontal .field--name-oss-logo{padding:0}.tile--horizontal .tile__figure{padding:1rem 0 0 1rem;width:180px}.tile--horizontal .tile__body{flex:1 1 calc(100% - 180px);max-width:calc(100% - 180px);overflow-wrap:anywhere;padding:1rem 1rem 0}.tile--horizontal .tile__standout-info{bottom:.5rem;right:unset;top:unset;transform:translateX(calc(-100% - 1.5rem))}.tile--horizontal .tile__footer{align-self:end;border-top:1px solid #dadee0;margin-top:1rem;width:100%}}
/*# sourceMappingURL=tile.min.css.map */
\ No newline at end of file
......@@ -40,10 +40,7 @@
&__standout-info {
top: $spacer * -1;
right: $spacer * 0.5;
overflow: hidden;
max-width: 9.3rem;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.875rem;
}
&__standout-info-icon,
......
......@@ -73,7 +73,7 @@
</figure>
<div class="tile__body d-flex flex-column justify-content-between{% if _highlighted is not empty %} position-relative{% endif %}">
{% if _highlighted.text is not empty %}
<div class="tile__standout-info position-absolute bg-brand rounded text-white fw-bold px-2 py-1">
<div class="tile__standout-info position-absolute d-flex align-items-center text-end bg-brand rounded text-white fw-bold px-2 py-1">
{% if _highlighted.icon is not empty %}
<svg class="tile__standout-info-icon bi icon--xs me-1">
<use xlink:href="{{ bcl_icon_path }}#{{ _highlighted.icon }}"></use>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment