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.

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

fix workflow top panel styling #1398

Merged
merged 1 commit into from
Jun 7, 2018
Merged

Conversation

erquhart
Copy link
Contributor

@erquhart erquhart commented May 31, 2018

Fixes styling break from recent dependencies update. Native CSS variables combined with PostCSS output optimizations converted this:

.nc-workflow {
  padding: var(--pageMargin);
  padding-bottom: 0;
}

to this:

.nc-workflow {
  padding: var(--pageMargin) var(--pageMargin) 0;
}

PostCSS static analysis counted the vars as single values, but the variable equates to 84px 18px, leading to an output of 84px 18px 84px 18px 0, which fails in the browser.

Fixed by not declaring the bottom padding subsequent to general padding declaration, but we should consider changing or dropping related optimizations if these kinds of issues prove common.

Bug demo: https://5b084974c965920b4c7644e3--cms-demo.netlify.com/#/workflow

Fix demo: https://deploy-preview-1398--cms-demo.netlify.com/#/workflow

@verythorough
Copy link
Contributor

verythorough commented May 31, 2018

Deploy preview for cms-demo ready!

Built with commit 47af2ef

https://deploy-preview-1398--cms-demo.netlify.com

@verythorough
Copy link
Contributor

verythorough commented May 31, 2018

Deploy preview for netlify-cms-www ready!

Built with commit 47af2ef

https://deploy-preview-1398--netlify-cms-www.netlify.com

@@ -2,8 +2,7 @@
@import "./WorkflowCard.css";

.nc-workflow {
padding: var(--pageMargin);
padding-bottom: 0;
padding: var(--pageMarginVertical) var(--pageMarginHorizontal) 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@erquhart We could just do padding: var(--pageMargin) 0;, instead of splitting it into vertical and horizontal. I'm fine either way.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duh, totally forgot about the three value syntax, good point.

@erquhart erquhart force-pushed the fix-workflow-top branch from 65f846f to 47af2ef Compare June 7, 2018 20:09
@tech4him1 tech4him1 merged commit 78e4b82 into decaporg:master Jun 7, 2018
@erquhart erquhart deleted the fix-workflow-top branch June 11, 2018 21:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants