Tabs (Search-Result Filter)
CODE
×
HTML
<div class='nav-tabs'> <div class='select filter'>Alle Treffer <span class="grey">(4)</span></div> <div class='tab active'>Alle (4)</div> <div class='tab a1'>Seiten <span class="grey">(3)</span></div> <div class='tab a1 a2'>Dokumente <span class="grey">(1)</span></div> </div>
CSS
@media screen and (max-width: 1119px) { div.nav-tabs { margin-left: 30px; margin-right: 30px; } } @media screen and (max-width: 767px) { div.nav-tabs { margin-left: 20px; margin-right: 20px; } } div.tab.active { background-color: rgba(78,78,78,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; margin-right: 15px; margin-left: 15px; } div.select.filter { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMTAuNywwLjlMNiw1LjdMMS4zLDAuOUwwLjYsMS42TDYsNy4xbDUuNC01LjVMMTAuNywwLjl6Ii8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-size: 12px 8px; background-position: calc(100% - 30px) center; } div.nav-tabs > div.select.filter { display: none; } div.tab:first-of-type { margin-left: -1px; } @media screen and (max-width: 767px) { div.nav-tabs > div.select.filter { display: block; margin-bottom: 0; } div.nav-tabs > div.tab.active { display: none; } div.nav-tabs > div.tab.a1 { display: none; } div.nav-tabs > div.tab.a1.a2 { display: none; } } div.tab { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.02rem; word-spacing: 0.05rem; text-align:center; display: inline-block; border-radius: 41px; border: none; padding: 11px 20px 12px 20px; vertical-align: middle; margin: 18px 5px; -webkit-transition: all 180ms ease-in-out; transition: all 180ms ease-in-out; cursor: pointer; overflow: hidden; cursor:pointer; color: var(--black); background-color: var(--white); } div.tab:hover, div.tab:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } div.select { color: rgba(112,112,112,1); line-height: 1.4; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 17px; padding-right: 62px; padding-bottom: 12px; padding-left: 28px; width: 100%; max-width: 800px; height: 59px; }
JS
Tabs (Search-Result Filter)
×
Alle Treffer
(4)
Alle (4)
Seiten
(3)
Dokumente
(1)