3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-06 10:20:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): browser window styles on smaller screen (#1586)

Browse source
This commit is contained in:
Wei Gao 2019-06-08 00:32:52 +08:00 • committed by Yangshun Tay
parent 1aa0ea1152
commit 111a21ea08
2 changed files with 26 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

17
website/components/BrowserWindow/index.js
View file

@ -6,24 +6,23 @@
*/ */
import React from 'react'; import React from 'react';
import classnames from 'classnames';
import styles from './styles.module.css'; import styles from './styles.module.css';
function BrowserWindow({children, minHeight, url}) { function BrowserWindow({children, minHeight, url}) {
return ( return (
<div className={styles.container} style={{minHeight}}> <div className={styles.browserWindow} style={{minHeight}}>
<div className={styles.row}> <div className={styles.browserWindowHeader}>
<div className={classnames(styles.column, styles.left)}> <div className={styles.buttons}>
<span className={styles.dot} style={{background: '#f25f58'}} /> <span className={styles.dot} style={{background: '#f25f58'}} />
<span className={styles.dot} style={{background: '#fbbe3c'}} /> <span className={styles.dot} style={{background: '#fbbe3c'}} />
<span className={styles.dot} style={{background: '#58cb42'}} /> <span className={styles.dot} style={{background: '#58cb42'}} />
</div> </div>
<div className={classnames(styles.column, styles.middle)}> <div className={styles.browserWindowAddressBar}>
<input disabled={true} type="text" value={url} readOnly /> <input disabled type="text" value={url} readOnly />
</div> </div>
<div className={classnames(styles.column, styles.right)}> <div className={styles.browserWindowMenuIcon}>
<div style={{float: 'right'}}> <div>
<span className={styles.bar} /> <span className={styles.bar} />
<span className={styles.bar} /> <span className={styles.bar} />
<span className={styles.bar} /> <span className={styles.bar} />
@ -31,7 +30,7 @@ function BrowserWindow({children, minHeight, url}) {
</div> </div>
</div> </div>
<div className={styles.content}>{children}</div> <div className={styles.browserWindowBody}>{children}</div>
</div> </div>
); );
} }

33
website/components/BrowserWindow/styles.module.css
View file

@ -1,13 +1,14 @@
.container { .browserWindow {
border: 3px solid var(--ifm-color-emphasis-alpha-10); border: 3px solid var(--ifm-color-emphasis-alpha-10);
border-top-left-radius: 4px; border-top-left-radius: var(--ifm-global-radius);
border-top-right-radius: 4px; border-top-right-radius: var(--ifm-global-radius);
} }
.row { .browserWindowHeader {
display: flex; align-items: center;
background: var(--ifm-color-emphasis-alpha-10); background: var(--ifm-color-emphasis-alpha-10);
padding: 0.5rem; display: flex;
padding: 0.5rem 1rem;
} }
.row:after { .row:after {
@ -16,12 +17,8 @@
clear: both; clear: both;
} }
.column { .buttons {
float: left; white-space: nowrap;
}
.left {
width: 15%;
} }
.right { .right {
@ -29,8 +26,10 @@
width: 10%; width: 10%;
} }
.middle { .browserWindowAddressBar {
width: 75%; flex: 1 0 auto;
margin-left: 0.5rem;
margin-right: 1rem;
} }
.dot { .dot {
@ -54,6 +53,10 @@ input[type='text'] {
padding: 5px 15px; padding: 5px 15px;
} }
.browserWindowMenuIcon {
margin-left: auto;
}
.bar { .bar {
width: 17px; width: 17px;
height: 3px; height: 3px;
@ -62,6 +65,6 @@ input[type='text'] {
display: block; display: block;
} }
.content { .browserWindowBody {
padding: 1rem; padding: 1rem;
} }