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

btn home
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m18s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-26 15:46:21 +01:00
parent 4c34b3c398
commit e7da4d77b5
10 changed files with 197 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

99
assets/css/components/_buttons.scss
View file

@ -129,8 +129,7 @@ button:disabled{
}
}
.btn--bold,
.btn--bold-inline{
.btn--bold{
display: block;
height: calc(var(--h-block)*1);
border: var(--border);
@ -188,12 +187,98 @@ button:disabled{
}
.btn--bold-inline{
.btn--see-more{
margin-top: calc(var(--spacing)*1);
margin-inline: auto;
display: block;
height: calc(var(--h-block)*1);
border: 1px solid var(--color-txt-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
white-space: nowrap;
color: var(--color-txt-light);
background-color: var(--color-bg);
// svg{
// fill: var(--color-txt);
// size: 13px!important;
// }
@include icon(12px);
.icon{
position: relative;
top: -2px;
}
svg{
fill: var(--color-txt-light);
}
a{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 1.25ch;
padding-top: 4px;
font-size: var(--fs-small);
}
&:hover{
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
a{
background-color: var(--grey-950);
color: var(--grey-100);
}
svg{ fill: var(--grey-100); }
}
}
.btn--home{
display: block;
height: calc(var(--h-block)*1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
white-space: nowrap;
background-color: var(--color-bg);
font-weight: 500;
@include icon(12px);
.icon{
position: relative;
top: -2px;
}
a{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 1.25ch;
padding-top: 4px;
}
&:hover{
background-color: var(--grey-950);
color: var(--grey-100);

125
assets/css/style.css
View file

@ -481,8 +481,7 @@ button:disabled {
padding-top: 4px;
}
.btn--bold,
.btn--bold-inline {
.btn--bold {
display: block;
height: calc(var(--h-block) * 1);
border: var(--border);
@ -492,24 +491,20 @@ button:disabled {
overflow: hidden;
white-space: nowrap;
}
.btn--bold .icon,
.btn--bold-inline .icon {
.btn--bold .icon {
display: flex;
width: 12px;
height: 12px;
}
.btn--bold .icon svg,
.btn--bold-inline .icon svg {
.btn--bold .icon svg {
width: 12px;
height: 12px;
}
.btn--bold svg,
.btn--bold-inline svg {
.btn--bold svg {
position: relative;
top: -1px;
}
.btn--bold a,
.btn--bold-inline a {
.btn--bold a {
display: flex;
align-items: center;
justify-content: center;
@ -519,8 +514,7 @@ button:disabled {
padding: 0 1.25ch;
padding-top: 4px;
}
.btn--bold.no-link,
.btn--bold-inline.no-link {
.btn--bold.no-link {
display: flex;
align-items: center;
justify-content: center;
@ -547,19 +541,105 @@ button:disabled {
fill: var(--color-bg);
}
.btn--bold-inline {
.btn--see-more {
margin-top: calc(var(--spacing) * 1);
margin-inline: auto;
display: block;
height: calc(var(--h-block) * 1);
border: 1px solid var(--color-txt-light);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
white-space: nowrap;
color: var(--color-txt-light);
background-color: var(--color-bg);
}
.btn--bold-inline:hover {
.btn--see-more .icon {
display: flex;
width: 12px;
height: 12px;
}
.btn--see-more .icon svg {
width: 12px;
height: 12px;
}
.btn--see-more .icon {
position: relative;
top: -2px;
}
.btn--see-more svg {
fill: var(--color-txt-light);
}
.btn--see-more a {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 1.25ch;
padding-top: 4px;
font-size: var(--fs-small);
}
.btn--see-more:hover {
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
}
.btn--bold-inline:hover a {
.btn--see-more:hover a {
background-color: var(--grey-950);
color: var(--grey-100);
}
.btn--bold-inline:hover svg {
.btn--see-more:hover svg {
fill: var(--grey-100);
}
.btn--home {
display: block;
height: calc(var(--h-block) * 1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
white-space: nowrap;
background-color: var(--color-bg);
font-weight: 500;
}
.btn--home .icon {
display: flex;
width: 12px;
height: 12px;
}
.btn--home .icon svg {
width: 12px;
height: 12px;
}
.btn--home .icon {
position: relative;
top: -2px;
}
.btn--home a {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 1.25ch;
padding-top: 4px;
}
.btn--home:hover {
background-color: var(--grey-950);
color: var(--grey-100);
border-color: var(--grey-100);
}
.btn--home:hover a {
background-color: var(--grey-950);
color: var(--grey-100);
}
.btn--home:hover svg {
fill: var(--grey-100);
}
@ -3064,19 +3144,6 @@ main .page__header ul.details li:hover {
line-height: 1.1;
margin-bottom: calc(var(--spacing) * 1);
}
.section--home .btn--bold-inline {
text-transform: none;
font-weight: 500;
font-size: var(--fs-small);
}
.section--home .btn--bold-inline .icon {
position: relative;
top: 2px;
}
.section--home .btn--bold-inline svg {
width: 13px;
height: 13px;
}
@media screen and (min-width: 1080px) {
.section--home .section--inner {
max-width: 1600px;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

14
assets/css/template/_home.scss
View file

@ -24,19 +24,7 @@
margin-bottom: calc(var(--spacing)*1);
}
.btn--bold-inline{
text-transform: none;
font-weight: 500;
font-size: var(--fs-small);
.icon{
position: relative;
top: 2px;
}
svg{
width: 13px;
height: 13px;
}
}
@media #{$medium-up} {

4
site/templates/home.php
View file

@ -30,7 +30,7 @@ $count = max(4, (int)$section->count()->value());
<?php endif ?>
<?php if ($section->buttonText()->isNotEmpty()): ?>
<button class="btn--bold-inline">
<button class="btn--home">
<a href="<?= $section->buttonLink()->esc() ?>">
<span class="text"><?= $section->buttonText()->esc() ?></span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
@ -298,7 +298,7 @@ $count = max(4, (int)$section->count()->value());
<?php endif ?>
<div class="see-more">
<button class="btn--bold-inline">
<button class="btn--see-more">
<a href="<?= esc($seeMoreUrl) ?>">
<span class="text"><?= esc($seeMoreLabel) ?></span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

2
site/templates/impact.php
View file

@ -71,7 +71,7 @@
<?php endforeach ?>
<div class="see-more">
<button class="btn--bold-inline">
<button class="btn--see-more">
<a href="/enquetes">
<span class="text">Voir toutes les enquêtes</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

2
site/templates/investigation.php
View file

@ -419,7 +419,7 @@ if ($package):
<?php endforeach ?>
<div class="see-more">
<button class="btn--bold-inline">
<button class="btn--see-more">
<a href="/enquetes">
<span class="text">Voir toutes les enquêtes</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

2
site/templates/news-item.php
View file

@ -69,7 +69,7 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
<?php endforeach ?>
<div class="see-more">
<button class="btn--bold-inline">
<button class="btn--see-more">
<a href="/enquetes">
<span class="text"><?= t('investigations.see_all') ?></span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

2
site/templates/project.php
View file

@ -67,7 +67,7 @@
<?php endforeach ?>
<div class="see-more">
<button class="btn--bold-inline">
<button class="btn--see-more">
<a href="/enquetes">
<span class="text"><?= t('investigations.see_all') ?></span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>

2
site/templates/resource.php
View file

@ -67,7 +67,7 @@
<?php endforeach ?>
<div class="see-more">
<button class="btn--bold-inline">
<button class="btn--see-more">
<a href="/enquetes">
<span class="text"><?= t('investigations.see_all') ?></span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>