/* Segmented controllers -------------------------------------------------- */ .segmented-controller { display: -webkit-box; display: box; margin-bottom: 10px; overflow: hidden; font-size: 12px; font-weight: bold; list-style: none; background-color: transparent; border: 1px solid #007aff; border-radius: 4px; -webkit-box-orient: horizontal; box-orient: horizontal; } /* Section within controller */ .segmented-controller li { overflow: hidden; text-align: center; white-space: nowrap; border-left: 1px solid #007aff; -webkit-box-flex: 1; box-flex: 1; } /* Link that fills each section */ .segmented-controller li > a { display: block; padding: 8px 16px; overflow: hidden; line-height: 15px; color: #007aff; text-overflow: ellipsis; } /* Remove border-left and shadow from first section */ .segmented-controller li:first-child { border-left-width: 0; } /* Active segment of controller */ .segmented-controller li.active { background-color: #007aff; } /* Set color of links to white */ .segmented-controller li.active > a { color: #fff; } .segmented-controller-item { display: none; } .segmented-controller-item.active { display: block; }