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

card open-graph
All checks were successful
Deploy / Deploy to Production (push) Successful in 10s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-06 15:43:31 +01:00
parent 4642425f43
commit dc223ae1b8
24 changed files with 1199 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,157 +1,178 @@
button {
cursor: pointer;
font-family: var(--font);
font-size: var(--fons-normal);
color: var(--color-txt);
&:hover {
color: var(--grey-100);
}
a {
text-decoration: none;
width: 100%;
height: 100%;
}
}
button:disabled {
cursor: auto;
}
.soutenir {
a {
color: var(--color-accent);
&:hover {
color: var(--color-accent) !important;
text-decoration: underline !important;
button{
cursor: pointer;
font-family: var(--font);
font-size: var(--fons-normal);
color: var(--color-txt);
&:hover{
color: var(--grey-100);
}
}
}
.btn--bold,
.btn--bold-inline {
display: block;
height: calc(var(--h-block) * 1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
text-transform: uppercase;
line-height: 1;
overflow: hidden;
white-space: nowrap;
a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 4px;
}
&.no-link {
display: flex;
align-items: center;
justify-content: center;
padding: 0 2ch;
padding-top: 4px;
}
}
.btn--bold {
background-color: var(--color-txt);
color: var(--color-bg);
&:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
a {
color: var(--color-bg);
a{
text-decoration: none;
width: 100%;
height: 100%;
}
}
}
.btn--bold-inline {
background-color: var(--color-bg);
button:disabled{
cursor: auto;
}
.btn--bold-inline:hover {
background-color: var(--grey-800);
color: var(--color-txt);
a {
.soutenir{
a{
color: var(--color-accent);
&:hover{
color: var(--color-accent)!important;
text-decoration: underline!important;
}
}
}
.btn--bold,
.btn--bold-inline{
display: block;
height: calc(var(--h-block)*1);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
text-transform: uppercase;
line-height: 1;
overflow: hidden;
white-space: nowrap;
a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 4px;
}
&.no-link{
display: flex;
align-items: center;
justify-content: center;
padding: 0 2ch;
padding-top: 4px;
}
}
.btn--bold{
background-color: var(--color-txt);
color: var(--color-bg);
&:hover{
background-color: var(--color-accent);
border-color: var(--color-accent);
a{
color: var(--color-bg);
}
}
}
.btn--bold-inline{
background-color: var(--color-bg);
}
.btn--bold-inline:hover{
background-color: var(--grey-800);
color: var(--color-txt);
}
a{
background-color: var(--grey-800);
color: var(--color-txt);
}
}
// DELETE ?
.btn__default {
--size: calc(var(--h-block) - 8px);
font-size: var(--fs-normal);
font-weight: var(--fw-normal);
height: var(--size);
padding-right: 1.5ch;
.btn__default{
position: relative;
display: flex;
align-items: center;
gap: 0ch;
// padding-right: 0.5ch;
color: var(--color-accent);
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
.icon,
.txt {
z-index: 10;
}
.icon {
width: var(--size);
--size: calc(var(--h-block) - 8px);
font-size: var(--fs-normal);
font-weight: var(--fw-normal);
height: var(--size);
padding-right: 1.5ch;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
svg {
fill: var(--color-bg);
width: 80%;
}
}
.txt {
font-family: var(--font-title);
gap: 0ch;
// padding-right: 0.5ch;
color: var(--color-accent);
font-size: var(--fs-normal);
font-weight: var(--fw-bold);
padding-left: 1ch;
}
font-weight: var(--fw-medium);
text-decoration: none;
&::after {
content: "";
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size) / 2);
width: var(--size);
height: var(--size);
position: absolute;
left: 0;
z-index: 0;
transition: width 0.2s;
}
cursor: pointer;
&:hover {
//
.txt {
color: var(--color-bg);
display: block;
.icon, .txt{ z-index: 10; }
.icon{
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
svg{
fill: var(--color-bg);
width: 80%;
}
}
&::after {
width: 100%;
.txt{
font-family: var(--font-title);
color: var(--color-accent);
font-size: var(--fs-normal);
font-weight: var(--fw-bold);
padding-left: 1ch;
}
}
&::after{
content: '';
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size)/2);
width: var(--size);
height: var(--size);
position: absolute;
left: 0;
z-index: 0;
transition: width .2s
}
&:hover{
//
.txt{
color: var(--color-bg);
display: block;
}
&::after{
width: 100%;
}
}
}