Default style for Topcoat Button Bar. Requirements are portable and accessible markup with flexible and performant css. No javascript required
A Pen by Seth Broweleit on CodePen.
<div class="topcoat-button-bar full"> | |
<div class="topcoat-button-bar__item"> | |
<button class="topcoat-button-bar__button full">One</button> | |
</div> | |
<div class="topcoat-button-bar__item"> | |
<button class="topcoat-button-bar__button full">Two</button> | |
</div> | |
<div class="topcoat-button-bar__item"> | |
<button class="topcoat-button-bar__button full">Three</button> | |
</div> | |
<div class="topcoat-button-bar__item"> | |
<button class="topcoat-button-bar__button full">Four + lots of text but this cell is the same size as its siblings bla bla bla bla</button> | |
</div> | |
</div> |
.full { | |
width: 100%; | |
} | |
.button-bar, | |
.topcoat-button-bar { | |
display: table; | |
table-layout: fixed; | |
white-space: no-wrap; | |
margin: 0; | |
padding: 0; | |
} | |
.topcoat-button-bar__item { | |
display: table-cell; | |
width: auto; | |
border-radius: 0; | |
} | |
.topcoat-button-bar > .topcoat-button-bar__item:first-child { | |
border-top-left-radius: 6px; | |
border-bottom-left-radius: 6px; | |
} | |
.topcoat-button-bar > .topcoat-button-bar__item:last-child { | |
border-top-right-radius: 6px; | |
border-bottom-right-radius: 6px; | |
} | |
.topcoat-button-bar__item:first-child > .topcoat-button-bar__button { | |
border-right: none; | |
} | |
.topcoat-button-bar__item:last-child > .topcoat-button-bar__button { | |
border-left: none; | |
} | |
.button, | |
.topcoat-button-bar__button { | |
position: relative; | |
display: inline-block; | |
overflow: hidden; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
border: none; | |
background: transparent; | |
background-clip: padding-box; | |
color: inherit; | |
vertical-align: top; | |
text-decoration: none; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
font: inherit; | |
cursor: default; | |
user-select: none; | |
} | |
.topcoat-button-bar__button { | |
padding: 0 1.25rem; | |
border: 1px solid #a5a8a8; | |
/* Important inheritance to manipulate border radius from parent */ | |
border-radius: inherit; | |
background-color: #e5e9e8; | |
-webkit-box-shadow: inset 0 1px #fff; | |
box-shadow: inset 0 1px #fff; | |
color: #454545; | |
text-shadow: 0 1px #fff; | |
line-height: 3rem; | |
} |