import styled from 'styled-components'; export const SummaryContainer = styled.div``; export const Summary = styled.div` text-align: left; min-height: 400px; display: flex; .container { position: relative; } `; export const PageHeader = styled.div` padding-top: 20px; padding-bottom: 20px; h3 { margin-bottom: 4px; font-weight: 600; font-size: 21px; } p { margin-bottom: 0; font-size: 14px; color: #696969; a { color: #101010; } } `; export const RoadmapMeta = styled.div` flex: 1; `; export const ShareRoadmap = styled.div` display: flex; align-items: center; a { margin-bottom: 0; & + a { margin-left: 5px; } } `; export const MobileNavHeader = styled.div` padding: 10px 0; display: flex; align-items: center; position: relative; `; export const SidebarButton = styled.button` background: transparent; border: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none; display: flex; align-items: center; svg { margin-right: 10px; } `; export const PageDetail = styled.div` padding: 25px 0 100px; `; export const PageTitle = styled.h1` font-size: 40px; font-weight: 700; `; export const Sidebar = styled.div` padding-bottom: 150px; ul { list-style: none; margin: 0; padding: 0; } .bullet { display: inline-block; margin-right: 7px; width: 7px; height: 7px; min-width: 7px; border-radius: 100%; background: #efefef; transform: translateX(-4px); transition: background 0.5s ease; } .links-group { padding: 30px 0 10px; width: 260px; h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; padding-left: 20px; } } .progress-badge { position: relative; top: -2px; margin-left: 5px; } .links-group.in-progress { opacity: 0.3; } .links-group li { list-style: none; margin: 7px 0; a { font-size: 14px; font-weight: normal; color: #696969; } .bullet { display: inline-block; margin-right: 12px; width: 7px; height: 7px; min-width: 7px; border-radius: 100%; background: #efefef; transform: translateX(-4px); transition: background 0.5s ease; } &.active a { color: #101010; } &.active .bullet { background: #101010; } } `; export const DesktopSidebarWrap = styled.div` border-left: 1px solid #efefef; ${Sidebar} { position: sticky; top: 0; background: white; } `; export const MobileSidebarWrap = styled.div` position: absolute; z-index: 999; background: white; width: 100%; left: 0; bottom: 100%; overflow-y: scroll; box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px; top: calc(100% + 1px); transition: bottom 0.5s ease 0s; &.visible { bottom: -50vh; } `; export const MobileSidebar = styled(Sidebar)` border-left: 1px solid #efefef; margin-left: 12px; padding-bottom: 20px; .links-group { width: auto; } .progress-badge { position: relative; top: -2px; margin-left: 5px; } `;