<p></p>
<blockquote>
<p dir="auto">I don't know if there's any way to avoid specifying the classes for the first and last item in the group? Bootstrap button groups work (somehow, I haven't investigated) just based on the position of the button in the button group</p>
</blockquote>
<p dir="auto">Look at css in the intermediate commits, particularly this one: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/openstreetmap/openstreetmap-website/commit/7904b49bb13c23b8c8beb4f5bcf25fa12d8374dd/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/commit/7904b49bb13c23b8c8beb4f5bcf25fa12d8374dd"><tt>7904b49</tt></a> . I decided that if I keep it that's going to be too much custom css. And that's not very obvious css with selector combinators.</p>
<blockquote>
<p dir="auto">The rounding would be even better if we used the SASS variables from bootstrap - e.g. <code class="notranslate">border-start-start-radius: $border-radius;</code> so that they match the rest of the site automatically (although given the small sizes, it's not currently noticeable</p>
</blockquote>
<p dir="auto">The rounding was set in pixels before I made any changes here. It's in pixels probably because the button sizes are in pixels. And they are in pixels probably because they have raster icons.</p>
<blockquote>
<p dir="auto">The rounding would be even better than that, if we could use bootstrap classes to control the rounding (so that if e.g. we have responsive rounding radii, it works automatically). But I can't find any description of how to round only one corner with the bootstrap docs, so maybe that's not possible.</p>
</blockquote>
<p dir="auto">I managed to round two, three or four corners with bootstrap classes but not one. And what sort of responsive radii do you want if icons are of fixed sizes?</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3704#issuecomment-1285127031">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJN26722TAQQXUNDC3WED6BJANCNFSM6AAAAAAQQIS5C4">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLO3HJYXKFGHOY7CKRTWED6BJA5CNFSM6AAAAAAQQIS5C6WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTSMTF5XO.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/3704/c1285127031</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3704#issuecomment-1285127031",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3704#issuecomment-1285127031",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>