3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 01:09:20 +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 classnames from 'classnames';
import styles from './styles.module.css';
function BrowserWindow({children, minHeight, url}) {
return (
<div className={styles.container} style={{minHeight}}>
<div className={styles.row}>
<div className={classnames(styles.column, styles.left)}>
<div className={styles.browserWindow} style={{minHeight}}>
<div className={styles.browserWindowHeader}>
<div className={styles.buttons}>
<span className={styles.dot} style={{background: '#f25f58'}} />
<span className={styles.dot} style={{background: '#fbbe3c'}} />
<span className={styles.dot} style={{background: '#58cb42'}} />
</div>
<div className={classnames(styles.column, styles.middle)}>
<input disabled={true} type="text" value={url} readOnly />
<div className={styles.browserWindowAddressBar}>
<input disabled type="text" value={url} readOnly />
</div>
<div className={classnames(styles.column, styles.right)}>
<div style={{float: 'right'}}>
<div className={styles.browserWindowMenuIcon}>
<div>
<span className={styles.bar} />
<span className={styles.bar} />
<span className={styles.bar} />
@ -31,7 +30,7 @@ function BrowserWindow({children, minHeight, url}) {
</div>
</div>
<div className={styles.content}>{children}</div>
<div className={styles.browserWindowBody}>{children}</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-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: var(--ifm-global-radius);
border-top-right-radius: var(--ifm-global-radius);
}
.row {
display: flex;
.browserWindowHeader {
align-items: center;
background: var(--ifm-color-emphasis-alpha-10);
padding: 0.5rem;
display: flex;
padding: 0.5rem 1rem;
}
.row:after {
@ -16,12 +17,8 @@
clear: both;
}
.column {
float: left;
}
.left {
width: 15%;
.buttons {
white-space: nowrap;
}
.right {
@ -29,8 +26,10 @@
width: 10%;
}
.middle {
width: 75%;
.browserWindowAddressBar {
flex: 1 0 auto;
margin-left: 0.5rem;
margin-right: 1rem;
}
.dot {
@ -54,6 +53,10 @@ input[type='text'] {
padding: 5px 15px;
}
.browserWindowMenuIcon {
margin-left: auto;
}
.bar {
width: 17px;
height: 3px;
@ -62,6 +65,6 @@ input[type='text'] {
display: block;
}
.content {
.browserWindowBody {
padding: 1rem;
}