EVOLUTION-NINJA
Edit File: yeoTabs.css
.responsiveTabsContainer { //width: 600px; } .responsiveTabsContainer h2 { font-size: 16px; } .responsiveTabsContainer h2.tab { margin: 0; background-color: #DBDBDB; border: 1px solid #ccc; cursor: pointer; padding: 10px; } .responsiveTabsContainer ul[role="tabList"] { display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; margin-bottom: -1px; margin-top: 0; padding: 0; } .responsiveTabsContainer ul[role="tabList"] li { -webkit-flex: 1 1 auto; flex: 1 1 auto; list-style: none; color: #999; padding: 10px; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .responsiveTabsContainer ul[role="tabList"] li[aria-selected='true'] { color: black; background-color: #fff; background: white; border: 1px solid #ccc; border-bottom: 1px solid white; padding: 9px; } .responsiveTabsContainer .panels label { display: none; } .responsiveTabsContainer .panels div[aria-hidden='true'] { display: none; } .responsiveTabsContainer .panels .tab { display: none; } .responsiveTabsContainer .panels .panel { background-color: white; border: 1px solid #ccc; padding: 10px; } @media all and (max-width: 640px) { .responsiveTabsContainer { width: 100%; } .responsiveTabsContainer ul[role="tabList"] { -webkit-flex-direction: column; flex-direction: column; display: none; } .responsiveTabsContainer .panels .tab { display: block; } }