filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 17:44:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(CodeBlock): make topbar responsive

Browse Source
This commit is contained in:
Aminejv 2022-02-07 16:12:46 +01:00
parent 340a460439
commit 9bfe47f38f
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/system/CodeBlock.js
View File

@ -196,7 +196,7 @@ const STYLES_LINE = css`
justify-content: space-between; justify-content: space-between;
`; `;
const STYLES_TOPBAR = css` const STYLES_TOPBAR = (theme) => css`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -207,6 +207,11 @@ const STYLES_TOPBAR = css`
border-top-left-radius: 4px; border-top-left-radius: 4px;
margin-bottom: -4px; margin-bottom: -4px;
box-sizing: border-box; box-sizing: border-box;
@media (max-width: ${theme.sizes.mobile}px) {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
`; `;
const STYLES_TOPBAR_PLAIN = css` const STYLES_TOPBAR_PLAIN = css`
@ -223,6 +228,7 @@ const STYLES_TOPBAR_PLAIN = css`
`; `;
const STYLES_TOPBAR_TITLE = css` const STYLES_TOPBAR_TITLE = css`
flex-grow: 1;
text-transform: uppercase; text-transform: uppercase;
color: ${Constants.semantic.textGray}; color: ${Constants.semantic.textGray};
font-size: ${Constants.typescale.lvlN1}; font-size: ${Constants.typescale.lvlN1};
@ -232,7 +238,6 @@ const STYLES_TOPBAR_TITLE = css`
`; `;
const STYLES_LANGSWITCHER = css` const STYLES_LANGSWITCHER = css`
margin-left: auto;
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;