2021-07-22 11:15:27 -06:00
|
|
|
import tw, { styled, theme } from 'twin.macro';
|
2020-07-04 15:40:41 -07:00
|
|
|
|
|
|
|
const SubNavigation = styled.div`
|
2020-09-13 18:02:25 +01:00
|
|
|
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
|
2020-12-03 21:10:41 -07:00
|
|
|
|
2020-07-04 15:40:41 -07:00
|
|
|
& > div {
|
|
|
|
${tw`flex items-center text-sm mx-auto px-2`};
|
|
|
|
max-width: 1200px;
|
2020-12-03 21:10:41 -07:00
|
|
|
|
2020-07-04 15:40:41 -07:00
|
|
|
& > a, & > div {
|
2020-12-26 09:50:09 -08:00
|
|
|
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-nowrap transition-all duration-150`};
|
2020-12-03 21:10:41 -07:00
|
|
|
|
2020-07-04 15:40:41 -07:00
|
|
|
&:not(:first-of-type) {
|
|
|
|
${tw`ml-2`};
|
|
|
|
}
|
2020-12-03 21:10:41 -07:00
|
|
|
|
|
|
|
&:hover {
|
2020-07-04 15:40:41 -07:00
|
|
|
${tw`text-neutral-100`};
|
|
|
|
}
|
2020-12-03 21:10:41 -07:00
|
|
|
|
|
|
|
&:active, &.active {
|
|
|
|
${tw`text-neutral-100`};
|
2020-12-26 10:41:25 -08:00
|
|
|
box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
|
2020-07-04 15:40:41 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
export default SubNavigation;
|