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 EuiCodeBlock padding for scrollbar #2727

Merged
merged 4 commits into from
Jan 2, 2020
Merged

Fix EuiCodeBlock padding for scrollbar #2727

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
2d323aa
Fix EuiCodeBlock padding for scrollbar
Jan 2, 2020
5359411
cl
Jan 2, 2020
aa33351
Merge branch 'master' into code_block_padding
cchaos Jan 2, 2020
4ad2954
Fix comments
Jan 2, 2020
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
- Fixed `isExpanded` property of nodes from `EuiTreeView` ([#2700](https://github.com/elastic/eui/pull/#2700))
- Added text selection to `EuiLink` button ([#2722](https://github.com/elastic/eui/pull/#2722))
- Fixed bug in `EuiDataGrid` where resizing columns changed the active DOM element ([#2724](https://github.com/elastic/eui/pull/#2724))
- Fixed position of scrollbar in `EuiCodeBlock` ([#2727](https://github.com/elastic/eui/pull/#2727))

## [`17.3.1`](https://github.com/elastic/eui/tree/v17.3.1)

Expand Down
27 changes: 19 additions & 8 deletions src/components/code/_code_block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@
font-size: inherit;
}

&.euiCodeBlock--hasControls {
padding-right: $euiSizeL + $euiSizeXS;
}

.euiCodeBlock__controls {
position: absolute;
top: 0;
Expand Down Expand Up @@ -64,6 +60,9 @@
font-size: $euiFontSize;
}

// Storing for re-use the sizing of controls plus extra padding
$controlsPadding: $euiSizeL + $euiSizeXS;
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe put this higher in the document if you don't want to make a vars file?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I not only didn't want to make a vars file but it really isn't necessary to be global (accessible outside of this selector). I'll just add a comment above it so that it stands out while moving through the nested selectors.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep. Whenever I see a var I don't recognize I normally go through this order in assumptions of where it might is.

  1. /component/_variables.scss
  2. Top of .euiComponent, scoped within that component.

Just felt a little lonely there in the middle.


// Small padding
&.euiCodeBlock--paddingSmall {
.euiCodeBlock__pre {
Expand All @@ -74,6 +73,10 @@
top: $euiSizeS;
right: $euiSizeS;
}

&.euiCodeBlock--hasControls .euiCodeBlock__pre {
padding-right: $euiSizeS + $controlsPadding;
}
}

// Medium padding
Expand All @@ -86,6 +89,10 @@
top: $euiSize;
right: $euiSize;
}

&.euiCodeBlock--hasControls .euiCodeBlock__pre {
padding-right: $euiSize + $controlsPadding;
}
}

// Large padding
Expand All @@ -98,16 +105,20 @@
top: $euiSizeL;
right: $euiSizeL;
}

&.euiCodeBlock--hasControls .euiCodeBlock__pre {
padding-right: $euiSizeL + $controlsPadding;
}
}

/**
** 1. Size the code against the text its embedded within.
**/
/*
* 1. Size the code against the text its embedded within.
*/
&.euiCodeBlock--inline {
display: inline-block;
white-space: pre;
color: $euiTextColor;
font-size: 90%; // 1
font-size: 90%; /* 1 */
padding: 0 $euiSizeS;
background: $euiCodeBlockBackgroundColor;

Expand Down