diff --git a/.storybook/config.js b/.storybook/config.js
index 7d970d4..1e7f850 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -2,9 +2,10 @@ import { configure, addDecorator } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import { withThemesProvider } from "storybook-addon-styled-component-theme";
-import "../src/components/index.css";
import themes from "../src/components/common/themes";
+import GlobalStyle from "./decorators/globalStyle";
+
const demoThemes = [
themes.default,
themes.lilacRoseDark,
@@ -29,7 +30,7 @@ addDecorator(
})
})
);
-
+addDecorator(GlobalStyle);
const req = require.context("../src", true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
diff --git a/.storybook/decorators/globalStyle.js b/.storybook/decorators/globalStyle.js
new file mode 100644
index 0000000..b26ac8a
--- /dev/null
+++ b/.storybook/decorators/globalStyle.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { createGlobalStyle } from "styled-components";
+
+import reset from "../../src/components/common/reset";
+
+const GlobalStyle = createGlobalStyle`
+ ${reset}
+`;
+
+export default storyFn => (
+ <>
+
+ {storyFn()}
+
+);
diff --git a/src/components/Bar/Bar.js b/src/components/Bar/Bar.js
index 3426855..c2ca87d 100644
--- a/src/components/Bar/Bar.js
+++ b/src/components/Bar/Bar.js
@@ -5,6 +5,7 @@ import { blockSizes } from "../common/theme.variables";
const StyledBar = styled.div`
display: inline-block;
+ box-sizing: border-box;
height: ${props => blockSizes[props.size]};
width: 5px;
border-top: 2px solid ${({ theme }) => theme.borderLightest};
diff --git a/src/components/Fab/Fab.css b/src/components/Fab/Fab.css
deleted file mode 100644
index c0e8f69..0000000
--- a/src/components/Fab/Fab.css
+++ /dev/null
@@ -1,47 +0,0 @@
-button {
- outline: none;
-}
-
-.Fab {
- display: inline-block;
- width: 60px;
- height: 60px;
- transform: translate(-50%, 50%);
- border-radius: 50%;
-
- /* violet */
- background: #b96ac9;
- /* background: radial-gradient(#6f2dbd, #b96ac9); */
- border-top: 4px solid #e980fc;
- border-left: 4px solid #e980fc;
- border-bottom: 4px solid #6f2dbd;
- border-right: 4px solid #6f2dbd;
-
- box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.45);
-}
-.Fab--square {
- border-radius: 0;
-}
-
-.Fab:not(.Fab--disabled):active {
- border-bottom: 4px solid #e980fc;
- border-right: 4px solid #e980fc;
- border-top: 4px solid #6f2dbd;
- border-left: 4px solid #6f2dbd;
- box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.55);
-}
-
-.Fab:not(.Fab--disabled):active .Fab__content {
- padding-top: 2px;
-}
-
-.Fab__content {
- display: inline-block;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- font-size: 24px;
- line-height: 24px;
- font-weight: bold;
-}
diff --git a/src/components/Fab/Fab.js b/src/components/Fab/Fab.js
deleted file mode 100644
index 7225271..0000000
--- a/src/components/Fab/Fab.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import propTypes from "prop-types";
-import cx from "classnames";
-
-import "./Fab.css";
-
-const Fab = ({
- type,
- size,
- onClick,
- className,
- style,
- disabled,
- active,
- children,
- square,
- ...otherProps
-}) => {
- const baseClass = "Fab";
-
- const rootClass = cx(baseClass, className, {
- [`${baseClass}--${size}`]: size,
- [`${baseClass}--disabled`]: disabled,
- [`${baseClass}--active`]: active,
- [`${baseClass}--square`]: square
- });
-
- return (
-
- );
-};
-
-Fab.defaultProps = {
- type: "button",
- onClick: null,
- style: {},
- disabled: false,
- size: "m",
- square: false,
- active: false
-};
-
-Fab.propTypes = {
- type: propTypes.string,
- size: propTypes.oneOf(["s", "m", "l", "xl"]),
- onClick: propTypes.func,
- className: propTypes.string,
- style: propTypes.object,
- disabled: propTypes.bool,
- active: propTypes.bool,
- square: propTypes.bool,
- children: propTypes.node
-};
-
-export default Fab;
diff --git a/src/components/Fab/Fab.stories.js b/src/components/Fab/Fab.stories.js
deleted file mode 100644
index 225dd2a..0000000
--- a/src/components/Fab/Fab.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-
-import Fab from "./Fab";
-
-const props = {
- type: "button",
- onClick: null,
- style: {}
-};
-
-export const actions = { onClick: action("onClick") };
-
-storiesOf("Fab", module)
- .addDecorator(story => (
-
- {story()}
-
- ))
- .add("default", () => +)
- .add("square", () => (
-
- +
-
- ));
diff --git a/src/components/InputBase/InputBase.js b/src/components/InputBase/InputBase.js
index e621b64..fca7ada 100644
--- a/src/components/InputBase/InputBase.js
+++ b/src/components/InputBase/InputBase.js
@@ -3,9 +3,10 @@ import propTypes from "prop-types";
import styled from "styled-components";
import { StyledTextInput, StyledCutout } from "../common";
+import { Cutout } from "../";
import { blockSizes } from "../common/theme.variables";
-const StyledInputWrapper = styled(StyledCutout)`
+const StyledInputWrapper = styled(Cutout)`
height: ${blockSizes.md};
padding: 2px;
background: ${({ theme, isDisabled }) =>
diff --git a/src/components/List/List.js b/src/components/List/List.js
index 0154b42..08ed321 100644
--- a/src/components/List/List.js
+++ b/src/components/List/List.js
@@ -16,6 +16,8 @@ const createListPositionStyles = ({
transform: translate(0, ${verticalAlign === "top" ? "-100%" : "100%"})
`;
const StyledList = styled.ul`
+ box-sizing: border-box;
+
width: ${props => (props.fullWidth ? "100%" : "auto")};
padding: 2px 4px 4px 2px;
${createBorderStyles()}
diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
index 18512bf..5c5f09f 100644
--- a/src/components/ListItem/ListItem.js
+++ b/src/components/ListItem/ListItem.js
@@ -6,6 +6,8 @@ import { createDisabledTextStyles } from "../common";
import { padding, blockSizes } from "../common/theme.variables";
const StyledListItem = styled.li`
+ box-sizing: border-box;
+
display: block;
position: relative;
height: ${props => blockSizes[props.size]};
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 83e85c3..fddaad6 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -50,6 +50,8 @@ const StyledDropdownIcon = styled.span`
`;
const StyledDropdownList = styled.ul`
+ box-sizing: border-box;
+
font-size: ${fontSizes.md};
position: absolute;
bottom: -2px;
@@ -64,11 +66,13 @@ const StyledDropdownList = styled.ul`
z-index: 99;
`;
const StyledDropdownListItem = styled.li`
- height: calc(${blockSizes.md} - 8px);
+ box-sizing: border-box;
+
width: 100%;
padding-left: ${padding.sm};
- line-height: calc(${blockSizes.md} - 8px);
+ height: calc(${blockSizes.md} - 4px);
+ line-height: calc(${blockSizes.md} - 4px);
font-size: ${fontSizes.md};
white-space: nowrap;
color: ${({ theme }) => theme.inputText};
diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js
index a20a55a..1da352a 100644
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -20,6 +20,7 @@ const StyledTextAreaWrapper = styled(StyledCutout)`
const StyledTextArea = styled.textarea`
width: 100%;
height: 100%;
+ box-sizing: border-box;
padding: ${padding.sm};
outline: none;
border: none;
diff --git a/src/components/common/reset.js b/src/components/common/reset.js
new file mode 100644
index 0000000..b29405f
--- /dev/null
+++ b/src/components/common/reset.js
@@ -0,0 +1,160 @@
+export default `
+ html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+a {
+ color: inherit;
+ text-decoration: none;
+}
+ul,
+li {
+ list-style-type: none;
+}
+button {
+ outline: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ color: black;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type="number"] {
+ -moz-appearance: textfield;
+}
+
+`;
diff --git a/src/components/index.js b/src/components/index.js
index 1aab901..327ac2d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,5 @@
import themes from "./common/themes";
+import reset from "./common/reset";
import Anchor from "./Anchor/Anchor";
import AppBar from "./AppBar/AppBar";
@@ -40,6 +41,7 @@ import WindowHeader from "./WindowHeader/WindowHeader";
export {
themes,
+ reset,
Anchor,
AppBar,
Bar,
diff --git a/website/src/App.js b/website/src/App.js
index af8836f..5b09af4 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -1,6 +1,5 @@
import React, { Component } from "react";
import styled, { ThemeProvider } from "styled-components";
-import "./components/index.css";
import { themes, Button } from "./components";
import { BrowserRouter as Router, Route } from "react-router-dom";
diff --git a/website/src/index.js b/website/src/index.js
index 48da9f6..c1684e8 100644
--- a/website/src/index.js
+++ b/website/src/index.js
@@ -1,6 +1,5 @@
import React from "react";
import ReactDOM from "react-dom";
-import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";