Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clark/steps update #1022

Merged
merged 4 commits into from
Mar 18, 2024
Merged

Clark/steps update #1022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
20dfe9b
fix: adjust Walkthrough styles
clarkmcadoo Mar 15, 2024
da2c000
fix: forgot to adjust bottom of line
clarkmcadoo Mar 15, 2024
244c47a
fix: linting issue:
clarkmcadoo Mar 15, 2024
dd21a4f
fix: linting issue:
clarkmcadoo Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Walkthrough = ({ className, children }) => {
<div
css={css`
--timeline-width: 2px;
--ring-size: 2.5rem;
--ring-size: 34px;
--ring-border-width: 2px;

display: flex;
Expand Down
18 changes: 11 additions & 7 deletions packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,13 @@ const WalkthroughStep = ({ className, children, title, number, id }) => {
&:hover {
aside {
div {
background-color: var(--brand-button-primary-accent);
border-color: var(--brand-button-primary-accent);
color: var(--brand-button-primary-accent);
font-weight: 600;
transition: border 325ms, color 325ms, font-weight 325ms;
color: black;
font-weight: 500;
transform: scale(1.18) translateX(14px);
transition: background-color 325ms, border 325ms, color 325ms,
transform 325ms;
}

&::after {
Expand All @@ -32,11 +35,11 @@ const WalkthroughStep = ({ className, children, title, number, id }) => {

&::after {
background: var(--secondary-text-color);
bottom: 0;
bottom: 10px;
content: '';
position: absolute;
right: calc(var(--timeline-width) * -1);
top: 0;
top: 35px;
transition: background 325ms;
width: var(--timeline-width);
z-index: -1;
Expand All @@ -60,7 +63,7 @@ const WalkthroughStep = ({ className, children, title, number, id }) => {
border: var(--ring-border-width) var(--secondary-text-color) solid;
color: var(--secondary-text-color);
display: grid;
font-size: 23px; // Centering gets weird w/ circle divs
font-size: 18px;
font-weight: 400;
height: var(--ring-size);
place-items: center;
Expand All @@ -69,7 +72,8 @@ const WalkthroughStep = ({ className, children, title, number, id }) => {
text-align: center;
top: -4px;
transform: translateX(50%);
transition: border 325ms, color 325ms;
transition: background-color 325ms, border 325ms, color 325ms,
transform 325ms;
width: var(--ring-size);

@media screen and (max-width: 1000px) {
Expand Down
Loading