Fix styling for Link
This commit is contained in:
parent
c9a8cc09b2
commit
5b398f8343
|
@ -14,17 +14,42 @@
|
||||||
|
|
||||||
.navOption {
|
.navOption {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: max-content;
|
overflow: hidden;
|
||||||
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
white-space: nowrap;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navLink {
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readAll {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
border-bottom: 1px solid var(--blue-2);
|
border-bottom: 1px solid var(--blue-2);
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
width: '100%',
|
width: '100%',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selectedHeadingArea > .navOption {
|
||||||
|
color: var(--blue-2);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedHeadingArea {
|
||||||
|
background-color: var(--blue-1-05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedMarker {
|
||||||
|
background-color: var(--blue-2);
|
||||||
|
width: calc(4rem / 16);
|
||||||
|
margin: 0.4rem 0.1rem 0.4rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -35,25 +60,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectedHeadingArea > .navOption {
|
|
||||||
color: var(--blue-2);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedHeadingArea {
|
|
||||||
background-color: rgba(92, 175, 249, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedMarker {
|
|
||||||
background-color: var(--blue-2);
|
|
||||||
width: calc(4rem / 16);
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.readAll {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrowHeading {
|
.arrowHeading {
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
@ -92,6 +98,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footerDivider {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.nav {
|
.nav {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -2,8 +2,9 @@ import React, { ReactNode, ComponentType } from "react";
|
||||||
import styles from "./OrganizedContent.module.css";
|
import styles from "./OrganizedContent.module.css";
|
||||||
|
|
||||||
export interface LinkProps {
|
export interface LinkProps {
|
||||||
children: string | ReactNode | (string | ReactNode)[];
|
className: string;
|
||||||
url: string;
|
url: string;
|
||||||
|
children: string | ReactNode | (string | ReactNode)[];
|
||||||
}
|
}
|
||||||
|
|
||||||
type Link = ComponentType<LinkProps>;
|
type Link = ComponentType<LinkProps>;
|
||||||
|
@ -68,7 +69,6 @@ export const OrganizedContent = ({
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
//todo push class to link
|
|
||||||
const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.nav}>
|
<div className={styles.nav}>
|
||||||
|
@ -87,7 +87,9 @@ const Nav = ({ headings, currentIndex, link: Link }: ChildProps) => {
|
||||||
{index === currentIndex && (
|
{index === currentIndex && (
|
||||||
<span className={styles.selectedMarker} />
|
<span className={styles.selectedMarker} />
|
||||||
)}
|
)}
|
||||||
<Link url={heading.url}>{heading.name}</Link>
|
<Link className={styles.navLink} url={heading.url}>
|
||||||
|
{heading.name}
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.divider}></div>
|
<div className={styles.divider}></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -206,9 +206,10 @@ export function OrganizedContentDemo() {
|
||||||
|
|
||||||
const [index, setIndex] = useState(0);
|
const [index, setIndex] = useState(0);
|
||||||
|
|
||||||
function FakeLink({ url, children }: LinkProps) {
|
function FakeLink({ className, url, children }: LinkProps) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
className={className}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const target = sections.findIndex((section) => section.url === url);
|
const target = sections.findIndex((section) => section.url === url);
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@ body {
|
||||||
--teal-1: #76ffdc;
|
--teal-1: #76ffdc;
|
||||||
--teal-2: #4ed4b2;
|
--teal-2: #4ed4b2;
|
||||||
--blue-1: #5caff9;
|
--blue-1: #5caff9;
|
||||||
|
--blue-1-05: #5caff90D;
|
||||||
--blue-1-20: #5caff934;
|
--blue-1-20: #5caff934;
|
||||||
--blue-2: #1482e3;
|
--blue-2: #1482e3;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
|
@ -27,6 +28,7 @@ body {
|
||||||
--teal-1: #76ffdc;
|
--teal-1: #76ffdc;
|
||||||
--teal-2: #4ed4b2;
|
--teal-2: #4ed4b2;
|
||||||
--blue-1: #5caff9;
|
--blue-1: #5caff9;
|
||||||
|
--blue-1-05: #5caff90D;
|
||||||
--blue-1-20: #5caff934;
|
--blue-1-20: #5caff934;
|
||||||
--blue-2: #1482e3;
|
--blue-2: #1482e3;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
|
|
Loading…
Reference in New Issue