Merge pull request #395 from netlify/visual-tweaks
Small update to the UI's look and feel
This commit is contained in:
@ -1,10 +1,14 @@
|
||||
@import '../UI/theme';
|
||||
|
||||
.appBar {
|
||||
padding: 8px 24px;
|
||||
height: auto;
|
||||
background-color: var(--backgroundAltColor);
|
||||
color: var(--defaultColorLight);
|
||||
}
|
||||
|
||||
/* Gross stuff below, React Toolbox hacks */
|
||||
|
||||
.homeLink,
|
||||
.iconMenu {
|
||||
margin-left: 2%;
|
||||
@ -19,8 +23,8 @@
|
||||
.leftIcon span {
|
||||
/* stylelint-disable */
|
||||
|
||||
color: var(--foregroundAltColor) !important;
|
||||
font-size: 30px !important;
|
||||
color: var(--defaultColorLight) !important;
|
||||
font-size: 24px !important;
|
||||
|
||||
/* stylelint-enable */
|
||||
}
|
||||
|
@ -1,32 +1,41 @@
|
||||
@import "../UI/theme";
|
||||
|
||||
.control {
|
||||
color: #7c8382;
|
||||
color: var(--textColor);
|
||||
position: relative;
|
||||
padding: 20px 0 10px 0;
|
||||
margin-top: 16px;
|
||||
|
||||
& input,
|
||||
& textarea,
|
||||
& select {
|
||||
font-family: monospace;
|
||||
font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border: var(--textFieldBorder);
|
||||
border-radius: var(--borderRadius);
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
background-color: var(--controlBGColor);
|
||||
font-size: 18px;
|
||||
color: #7c8382;
|
||||
font-size: 16px;
|
||||
color: var(--textColor);
|
||||
transition: border-color .3s ease;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
color: var(--controlLabelColor);
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.labelWithError {
|
||||
@ -40,3 +49,7 @@
|
||||
color: #FF706F;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
@ -18,11 +18,11 @@
|
||||
}
|
||||
|
||||
.controlPane {
|
||||
height: calc(100% - 55px);
|
||||
overflow: auto;
|
||||
padding: 20px 20px 0;
|
||||
height: calc(100% - 55px);
|
||||
border-right: 1px solid var(--defaultColorLight);
|
||||
background-color: var(--backgroundTertiaryColorDark);
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
|
||||
.previewPane {
|
||||
@ -41,7 +41,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 1px solid var(--defaultColorLight);
|
||||
border-top: var(--border);
|
||||
background: var(--backgroundColor);
|
||||
text-align: right;
|
||||
}
|
||||
@ -52,3 +52,7 @@
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
border: var(--textFieldBorder);
|
||||
}
|
||||
|
@ -1,14 +1,21 @@
|
||||
.card {
|
||||
flex: 0 300px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 16px;
|
||||
max-width: 50%;
|
||||
max-height: 290px;
|
||||
width: 240px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.cardImage {
|
||||
width: 240px;
|
||||
margin: -16px -24px 16px -24px;
|
||||
width: calc(100% + 24px + 24px);
|
||||
height: 135px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
@ -18,7 +25,7 @@
|
||||
.cardsGrid {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-left: -15px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.cardList {
|
||||
|
@ -6,14 +6,14 @@
|
||||
}
|
||||
|
||||
.inputField {
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin: 0 24px;
|
||||
padding: 10px 14px;
|
||||
border: 0;
|
||||
border-radius: var(--borderRadius);
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
.stickyActive:not(.stickyAtBottom) {
|
||||
position: fixed !important;
|
||||
top: 64px !important;
|
||||
top: 54px !important;
|
||||
}
|
||||
|
||||
.stickyAtBottom {
|
||||
|
@ -163,6 +163,11 @@ export class Sticky extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
|
||||
/**
|
||||
* classNameActive: class to apply when Sticky is active.
|
||||
*/
|
||||
classNameActive: PropTypes.string,
|
||||
|
||||
/**
|
||||
* fillContainerWidth: allows the sticky width to be dynamically set to the width of it's
|
||||
* StickyContainer when sticky (fixed positioning).
|
||||
@ -201,6 +206,7 @@ export class Sticky extends Component {
|
||||
styles.sticky,
|
||||
{
|
||||
[styles.stickyActive]: state.shouldStick,
|
||||
[props.classNameActive]: state.shouldStick,
|
||||
[styles.stickyAtBottom]: state.shouldStickAtBottom,
|
||||
},
|
||||
)}
|
||||
|
@ -1,8 +1,39 @@
|
||||
@import '../theme.css';
|
||||
|
||||
.card {
|
||||
composes: base container rounded depth;
|
||||
composes: base container rounded;
|
||||
overflow: hidden;
|
||||
border: var(--textFieldBorder);
|
||||
transition: all .1s ease-in-out;
|
||||
transform: translateY(0);
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.card > iframe,
|
||||
.card > video,
|
||||
.card > img {
|
||||
margin: -16px -24px 16px;
|
||||
width: calc(100% + 16px + 16px);
|
||||
}
|
||||
|
||||
.card h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: var(--defaultColor);
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 24px;
|
||||
padding: 0;
|
||||
color: var(--textMutedColor);
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer) {
|
||||
@ -17,17 +48,3 @@
|
||||
.card > *:not(iframe, video, img, header, footer):last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card > iframe,
|
||||
.card > video,
|
||||
.card > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card h1 {
|
||||
margin: 15px 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: var(--defaultColor);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
@ -1,31 +1,35 @@
|
||||
:root {
|
||||
--defaultColor: #333;
|
||||
--defaultColorLight: #eee;
|
||||
--defaultColorLight: #fff;
|
||||
--backgroundColor: #fff;
|
||||
--backgroundColorShaded: #eee;
|
||||
--shadowColor: rgba(0, 0, 0, .25);
|
||||
--shadowColor: rgba(19, 39, 48, .24);
|
||||
--infoColor: #69c;
|
||||
--primaryColor: #4990e2;
|
||||
--successColor: #1c7;
|
||||
--warningColor: #fa0;
|
||||
--errorColor: #f52;
|
||||
--textColor: #272e30;
|
||||
--borderRadius: 2px;
|
||||
--borderRadiusLarge: 10px;
|
||||
--dropShadow:
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
--textColor: #191919;
|
||||
--textMutedColor: #8c8c8c;
|
||||
--borderRadius: 4px;
|
||||
--borderRadiusLarge: 8px;
|
||||
--secondaryColor: #d9d9d9;
|
||||
--dropShadow: 0 2px 8px 0 var(--secondaryColor);
|
||||
--topmostZindex: 99999;
|
||||
--foregroundAltColor: #fff;
|
||||
--backgroundAltColor: #272e30;
|
||||
--textFieldBorderColor: #e7e7e7;
|
||||
--backgroundAltColor: #232528;
|
||||
--textFieldBorderColor: var(--secondaryColor);
|
||||
--highlightFGColor: #fff;
|
||||
--highlightBGColor: #3ab7a5;
|
||||
--highlightFGAltColor: #eee;
|
||||
--controlLabelColor: var(--textColor);
|
||||
--controlLabelColor: #8b8b8b;
|
||||
--controlBGColor: #fff;
|
||||
--backgroundTertiaryColor: #f2f5f4;
|
||||
--backgroundTertiaryColor: #fff;
|
||||
--backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
|
||||
--richTextEditorMinHeight: 300px;
|
||||
--borderWidth: 2px;
|
||||
--border: solid var(--borderWidth) var(--secondaryColor);
|
||||
--textFieldBorder: var(--border);
|
||||
}
|
||||
|
||||
.base {
|
||||
@ -42,7 +46,7 @@
|
||||
}
|
||||
|
||||
.depth {
|
||||
box-shadow: var(--shadowColor) 0 1px 6px;
|
||||
box-shadow: var(--dropShadow);
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
|
@ -4,6 +4,11 @@
|
||||
--iconSize: 30px;
|
||||
}
|
||||
|
||||
/* redux-notifications override */
|
||||
:global(.notif__container) {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.root {
|
||||
composes: base container rounded depth from '../theme.css';
|
||||
overflow: hidden;
|
||||
|
@ -1,5 +1,7 @@
|
||||
@import '../UI/theme.css';
|
||||
|
||||
:root {
|
||||
--highlightColor: #e1eeea;
|
||||
--highlightColor: #38ab9b;
|
||||
--defaultFontSize: 1em;
|
||||
}
|
||||
|
||||
@ -11,6 +13,7 @@
|
||||
.column {
|
||||
flex: 1 33%;
|
||||
margin: -10px;
|
||||
margin-top: 24px;
|
||||
padding: 10px;
|
||||
max-width: 33%;
|
||||
transition: background-color .5s ease;
|
||||
@ -18,7 +21,8 @@
|
||||
|
||||
.columnHovered {
|
||||
composes: column;
|
||||
background-color: var(--highlightColor);
|
||||
border: 2px dashed var(--highlightColor);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.columnHeading {
|
||||
@ -32,3 +36,11 @@
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Gross stuff below, React Toolbox hacks */
|
||||
|
||||
.cardTitle h5 {
|
||||
color: var(--backgroundAltColor) !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 21px !important;
|
||||
}
|
||||
|
@ -88,6 +88,7 @@ class UnpublishedListing extends React.Component {
|
||||
<CardTitle
|
||||
title={entry.getIn(['data', 'title'])}
|
||||
subtitle={`by ${ author }`}
|
||||
className={styles.cardTitle}
|
||||
/>
|
||||
<CardText>
|
||||
Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}
|
||||
|
@ -12,7 +12,8 @@
|
||||
font-size: .75em;
|
||||
text-transform: uppercase;
|
||||
|
||||
background: var(--backgroundColorShaded);
|
||||
background: var(--backgroundAltColor);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.meta {}
|
||||
|
21
src/components/Widgets/ImageControl.css
Normal file
21
src/components/Widgets/ImageControl.css
Normal file
@ -0,0 +1,21 @@
|
||||
@import "../UI/theme.css";
|
||||
|
||||
.input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 20px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.imageUpload {
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
border: var(--border);
|
||||
border-style: dashed;
|
||||
border-radius: var(--borderRadius);
|
||||
cursor: pointer;
|
||||
}
|
@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
|
||||
import { truncateMiddle } from '../../lib/textHelper';
|
||||
import { Loader } from '../UI';
|
||||
import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
|
||||
import styles from './ImageControl.css';
|
||||
|
||||
const MAX_DISPLAY_LENGTH = 50;
|
||||
|
||||
@ -81,8 +82,8 @@ export default class ImageControl extends React.Component {
|
||||
const imageName = this.renderImageName();
|
||||
if (processing) {
|
||||
return (
|
||||
<div style={styles.imageUpload}>
|
||||
<span style={styles.message}>
|
||||
<div className={styles.imageUpload}>
|
||||
<span className={styles.message}>
|
||||
<Loader active />
|
||||
</span>
|
||||
</div>
|
||||
@ -90,19 +91,19 @@ export default class ImageControl extends React.Component {
|
||||
}
|
||||
return (
|
||||
<div
|
||||
style={styles.imageUpload}
|
||||
className={styles.imageUpload}
|
||||
onDragEnter={this.handleDragEnter}
|
||||
onDragOver={this.handleDragOver}
|
||||
onDrop={this.handleChange}
|
||||
>
|
||||
<span style={styles.message} onClick={this.handleClick}>
|
||||
{imageName ? imageName : 'Tip: Click here to upload an image from your file browser, or drag an image directly into this box from your desktop'}
|
||||
<span className={styles.message} onClick={this.handleClick}>
|
||||
{imageName ? imageName : 'Click here to upload an image from your computer, or drag and drop a file directly into this box'}
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={this.handleChange}
|
||||
style={styles.input}
|
||||
className={styles.input}
|
||||
ref={this.handleFileInputRef}
|
||||
/>
|
||||
</div>
|
||||
@ -110,24 +111,6 @@ export default class ImageControl extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const styles = {
|
||||
input: {
|
||||
display: 'none',
|
||||
},
|
||||
message: {
|
||||
padding: '20px',
|
||||
display: 'block',
|
||||
fontSize: '12px',
|
||||
},
|
||||
imageUpload: {
|
||||
backgroundColor: '#fff',
|
||||
textAlign: 'center',
|
||||
color: '#999',
|
||||
border: '1px dashed #eee',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
};
|
||||
|
||||
ImageControl.propTypes = {
|
||||
onAddAsset: PropTypes.func.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import "../../../UI/theme";
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
}
|
||||
@ -6,6 +8,10 @@
|
||||
composes: editorControlBar from "../VisualEditor/index.css";
|
||||
}
|
||||
|
||||
.editorControlBarSticky {
|
||||
composes: editorControlBarSticky from "../VisualEditor/index.css";
|
||||
}
|
||||
|
||||
.dragging { }
|
||||
|
||||
.shim {
|
||||
@ -28,4 +34,5 @@
|
||||
.textarea {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
min-height: var(--richTextEditorMinHeight);
|
||||
}
|
||||
|
@ -320,7 +320,11 @@ export default class RawEditor extends React.Component {
|
||||
onDragOver={this.handleDragOver}
|
||||
onDrop={this.handleDrop}
|
||||
>
|
||||
<Sticky className={styles.editorControlBar} fillContainerWidth>
|
||||
<Sticky
|
||||
className={styles.editorControlBar}
|
||||
classNameActive={styles.editorControlBarSticky}
|
||||
fillContainerWidth
|
||||
>
|
||||
<Toolbar
|
||||
selectionPosition={selectionPosition}
|
||||
onH1={this.handleHeader('#')}
|
||||
@ -338,6 +342,7 @@ export default class RawEditor extends React.Component {
|
||||
/>
|
||||
</Sticky>
|
||||
<TextareaAutosize
|
||||
className={styles.textarea}
|
||||
inputRef={this.handleRef}
|
||||
className={styles.textarea}
|
||||
value={this.props.value || ''}
|
||||
|
@ -2,10 +2,11 @@
|
||||
|
||||
.pluginForm {
|
||||
position: absolute;
|
||||
background-color: var(--backgroundTertiaryColorDark);
|
||||
background-color: var(--backgroundColor);
|
||||
margin-top: -20px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 20px;
|
||||
border: var(--border);
|
||||
border-radius: var(--borderRadius);
|
||||
box-shadow: var(--dropShadow);
|
||||
overflow: hidden;
|
||||
|
@ -1,10 +1,14 @@
|
||||
@import "../../../UI/theme";
|
||||
|
||||
.editorControlBar {
|
||||
background-color: var(--controlBGColor);
|
||||
border-bottom: 1px solid var(--backgroundTertiaryColorDark);
|
||||
border-radius: var(--borderRadius) var(--borderRadius) 0 0;
|
||||
z-index: 1;
|
||||
border: 2px solid transparent;
|
||||
border-top: 0;
|
||||
background-color: var(--controlBGColor);
|
||||
}
|
||||
|
||||
.editorControlBarSticky {
|
||||
border-color: var(--textFieldBorderColor);
|
||||
}
|
||||
|
||||
.editor {
|
||||
@ -69,8 +73,11 @@
|
||||
position: relative;
|
||||
background-color: var(--controlBGColor);
|
||||
padding: 12px;
|
||||
border-radius: 0 0 var(--borderRadius) var(--borderRadius);
|
||||
overflow: hidden;
|
||||
border-radius: var(--borderRadius);
|
||||
overflow-x: auto;
|
||||
border: var(--textFieldBorder);
|
||||
min-height: var(--richTextEditorMinHeight);
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
|
@ -275,7 +275,11 @@ export default class Editor extends Component {
|
||||
onDragOver={this.handleDragOver}
|
||||
onDrop={this.handleDrop}
|
||||
>
|
||||
<Sticky className={styles.editorControlBar} fillContainerWidth>
|
||||
<Sticky
|
||||
className={styles.editorControlBar}
|
||||
classNameActive={styles.editorControlBarSticky}
|
||||
fillContainerWidth
|
||||
>
|
||||
<Toolbar
|
||||
selectionPosition={selectionPosition}
|
||||
onH1={this.handleHeader(1)}
|
||||
|
Reference in New Issue
Block a user