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

Fix border bottom style #43

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix border bottom style #43

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fe3910
fix border bottom style
benri Jun 1, 2021
f7884f8
fix .url-area margin css var
benri Jun 1, 2021
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
9 changes: 4 additions & 5 deletions src/Styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@ export default css`
font-size: var(--api-method-documentation-url-font-size, 1.07rem);
font-weight: var(--api-method-documentation-url-font-weight);
line-height: var(--api-method-documentation-url-line-height);
margin-bottom: 40px;
margin-top: 20px;
margin: var(--api-method-documentation-url-margin);
margin: var(--api-method-documentation-url-margin, 20px 0 40px 0);
background-color: var(--api-method-documentation-url-background-color, var(--code-background-color));
color: var(
--api-method-documentation-url-font-color,
Expand All @@ -102,8 +100,9 @@ export default css`
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px var(--api-parameters-document-title-border-color, #e5e5e5) solid;
border: var(--api-parameters-document-title-border);
border-bottom: var(--api-parameters-document-title-border-bottom,
Copy link
Contributor

Choose a reason for hiding this comment

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

This is more restrictive than what we have now. I would at least keep the border attribute, and use this current border-bottom value as the default border-bottom value for the border attribute

Copy link
Contributor

Choose a reason for hiding this comment

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

@twoplustwoone but this is not how it works. border controls the border of all sides at once. I've already mentioned that and a possible solution in my more detailed explanation here:
advanced-rest-client/api-body-document#26 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes I understand, but why not do something like this instead:

border: var(--api-parameters-document-title-border);
border-bottom: var(--api-parameters-document-title-border-bottom, 1px var(--api-parameters-document-title-border-color, #e5e5e5) solid);

This would cover being able to change theborder-bottom and override border, which would fit what you mentioned in that PR, correct?

Copy link
Contributor

Choose a reason for hiding this comment

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

This would cover being able to change the border-bottom and override border, which would fit what you mentioned in that PR, correct?

Not exactly. Your solution will be backward compatible, so I have no objections here. However, it has two inconveniences (depending on the use cases you actually have or plan):

  1. Let's say I want my expandable menu to be bordered from all sides (even though I hardly image such a use case). I have --api-parameters-document-title-border to do that, but I also must set --api-parameters-document-title-border-color to avoid border-bottom overriding my bottom border with the default value.
    And here's what this will look like:
    image

  2. This will not work for the use case, where one would like to have both bottom and top borders.
    Here's what this could look like:
    image

But all this is just an idea based on the wrong idea 😄. As @benri already said in that PR, the reason he did this, is to hide the bottom border (which could be done just by using the transparent color).

If it doesn't make much sense to you - keep your solution, my only wish is to keep it at least backward compatible 🙂

Copy link
Contributor

Choose a reason for hiding this comment

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

@twoplustwoone, @benri, any news regarding this change? And what about this one advanced-rest-client/api-body-document#26?

1px var(--api-parameters-document-title-border-color, #e5e5e5) solid
);
cursor: pointer;
user-select: none;
transition: border-bottom-color 0.15s ease-in-out;
Expand Down