kazhnuz/mouette
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat: add button groups

Browse source
This commit is contained in:
Kazhnuz 2024-09-10 23:23:10 +02:00
parent 15b633210c
commit 2418a617e0
2 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -20,8 +20,7 @@
</ul>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Mouette</a></li>
<li><span class="active">Exemple</span></li>
<li><a href="#" class="button">Mouette</a></li>
</ul>
</nav>
@ -53,6 +52,13 @@
<span class="badge">Badge span</span>
<br />
<a href="#" class="button link">Bouton lien .link</a>
<br />
<div class="button-group">
<button>Bouton (groupé)</button>
<a href="#" class="button">Bouton lien</a>
<a href="#" class="button">Bouton lien</a>
<button>Bouton</button>
</div>
</p>
<main>

16
src/components/_buttons.scss
View file

@ -46,4 +46,20 @@ a[href].button:not(.link), a[href].button:visited:not(.link), button, input[type
:disabled, .disabled {
filter: #{"grayscale(1)"};
opacity: 0.5;
}
.button-group {
display:flex;
.button, button {
margin:0;
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 1px solid var(--color-accent-text);
}
}
}