diff --git a/lib/components/ui/styles.mcss b/lib/components/ui/styles.mcss
new file mode 100644
index 00000000..858eb026
--- /dev/null
+++ b/lib/components/ui/styles.mcss
@@ -0,0 +1,3 @@
+@import './buttons.mcss';
+@import './colours.mcss';
+@import './typography.mcss';
diff --git a/src/components/fields/common/header/header.mcss b/src/components/fields/common/header/header.mcss
index d1cb006b..0a628f01 100644
--- a/src/components/fields/common/header/header.mcss
+++ b/src/components/fields/common/header/header.mcss
@@ -1,3 +1,5 @@
+@value styles: '../../../ui/styles.mcss';
+
.base {
margin-bottom: 1rem;
}
@@ -7,7 +9,10 @@
}
.hint {
- composes: small from '../../../ui/typography.mcss';
- composes: sans from '../../../ui/typography.mcss';
- color: #999;
+ composes: greyLightColor from styles;
+ composes: small sans from styles;
+}
+
+.error {
+ composes: errorColor from styles;
}
diff --git a/src/components/fields/common/header/index.js b/src/components/fields/common/header/index.js
index d8f4839b..c6b9e9f0 100644
--- a/src/components/fields/common/header/index.js
+++ b/src/components/fields/common/header/index.js
@@ -1,5 +1,6 @@
import React from 'react'
import Label from '../../../ui/label'
+import classNames from 'classnames'
import styles from './header.mcss'
/**
@@ -18,10 +19,22 @@ const FieldHeader = React.createClass({
if (!label && !hint) {
return null
}
+ let labelClassNames = classNames(styles.base,
+ styles.label,
+ {
+ [`${styles.error}`]: this.props.error,
+ }
+ )
+ let hintClassNames = classNames(styles.base,
+ styles.hint,
+ {
+ [`${styles.error}`]: this.props.error,
+ }
+ )
return (
- {(label) ? : null}
- {(hint) ? {hint} : null}
+ {(label) ? : null}
+ {(hint) ? {hint} : null}
)
}
diff --git a/src/components/fields/shared.mcss b/src/components/fields/shared.mcss
index 8c508f35..c0ffe419 100644
--- a/src/components/fields/shared.mcss
+++ b/src/components/fields/shared.mcss
@@ -1,3 +1,3 @@
.base {
- margin-bottom: 1.5rem;
+ margin-bottom: 1.6em;
}
diff --git a/src/components/ui/colours.mcss b/src/components/ui/colours.mcss
index a7f6c381..42ac3800 100644
--- a/src/components/ui/colours.mcss
+++ b/src/components/ui/colours.mcss
@@ -1,3 +1,34 @@
+/* Greys */
+
+@value greyLight: #ccc;
+@value greyTint: #f1f1f1;
+
+.greyLightColor {
+ color: greyLight;
+}
+
+.greyLightBackground {
+ background-color: greyLight;
+}
+
+.greyLightBorder {
+ border-color: greyLight;
+}
+
+.greyTintBackground {
+ background-color: greyTint;
+}
+
+/*
+
+primaryAlternate
+secondary
+secondaryAlternate
+error
+greys
+
+*/
+
/* Primary */
@value primary: #333;
@@ -14,6 +45,7 @@
border-color: primary;
}
+
/* Error */
@value error: #eb4d5c;
@@ -35,27 +67,35 @@
background-color: errorLight;
}
-/* Greys */
-@value greyLight: #ccc;
-@value greyTint: #f1f1f1;
+/* Highlight */
-.greyLightColor {
- color: greyLight;
+@value highlight: #7fc2ea;
+@value highlightLight: #dff1fc;
+
+.highlightColor {
+ color: highlight;
}
-.greyLightBackground {
- background-color: greyLight;
+.highlightBorder {
+ border-color: highlight;
}
-.greyLightBorder {
- border-color: greyLight;
+.highlightBackground {
+ background-color: highlight;
}
-.greyTintBackground {
- background-color: greyTint;
+.highlightLightColor {
+ color: highlightLight;
+}
+
+.highlightLightBorder {
+ border-color: highlightLight;
}
+.highlightLightBackground {
+ background-color: highlightLight;
+}
/* Blends */
@@ -69,21 +109,3 @@
.lightBlendColor {
color: lightBlend;
}
-
-/*
-primaryAlternate
-secondary
-secondaryAlternate
-error
-greys
-
-*/
-
-
-/*
-
-.greyLight
-.grey
-.greyDark
-
-*/
diff --git a/src/components/ui/input-boxes.mcss b/src/components/ui/input-boxes.mcss
index ad1a5341..00a64143 100644
--- a/src/components/ui/input-boxes.mcss
+++ b/src/components/ui/input-boxes.mcss
@@ -1,13 +1,15 @@
-@value colours: './colours.mcss';
-@value error, errorLight, greyLight, greyTint from colours;
+@value styles: './styles.mcss';
+
+@value error, errorLight, greyLight, greyTint, lightBlend from styles;
.inputBox {
- composes: sans normal from './typography.mcss';
- composes: primaryColor greyLightBorder greyTintBackground from './colours.mcss';
+ composes: sans normal from styles;
+ composes: primaryColor greyLightBorder greyTintBackground from styles;
box-shadow: inset 0px 2px 0px 0px rgba(20,15,10,0.03);
border-width: 0;
border-top-width: 1px;
border-top-style: solid;
+ border-radius: 0;
padding: 0.6em 0.7em 0.8em;
width: 100%;
transition-property: border-color, background-color;
@@ -17,42 +19,40 @@
/* States */
.error {
- composes: errorColor errorBorder errorLightBackground from './colours.mcss';
+ composes: errorColor errorBorder errorLightBackground from styles;
}
.error::placeholder {
color: rgba(0,0,0,0.2);
}
.focus {
- composes: darkBlendColor from './colours.mcss';
- border-color: #7fc2ea;
- background-color: #dff1fc;
+ composes: darkBlendColor highlightBorder highlightLightBackground from styles;
outline: none;
}
.focus::placeholder {
- color: rgba(0,0,0,0.2);
+ color: lightBlend;
}
/* Sizes */
.mini {
- composes: mini from './typography.mcss';
+ composes: mini from styles;
}
.small {
- composes: small from './typography.mcss';
+ composes: small from styles;
}
.normal {
- composes: normal from './typography.mcss';
+ composes: normal from styles;
}
.large {
- composes: large from './typography.mcss';
+ composes: large from styles;
}
.huge {
- composes: huge from './typography.mcss';
+ composes: huge from styles;
}
diff --git a/src/components/ui/input/input.mcss b/src/components/ui/input/input.mcss
index c239a605..8de38354 100644
--- a/src/components/ui/input/input.mcss
+++ b/src/components/ui/input/input.mcss
@@ -1,5 +1,5 @@
.input {
- composes: inputBox from '../input-boxes.mcss'
+ composes: inputBox from '../input-boxes.mcss';
}
/* States */
diff --git a/src/components/ui/select/select.mcss b/src/components/ui/select/select.mcss
new file mode 100644
index 00000000..c64945a6
--- /dev/null
+++ b/src/components/ui/select/select.mcss
@@ -0,0 +1,65 @@
+@value styles: '../styles.mcss';
+@value greyLight, highlight from styles;
+
+.label {
+ position: relative;
+}
+ .label:after {
+ top: 50%;
+ right: 1em;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: transparent;
+ border-top-color: greyLight;
+ border-width: 0.3em;
+ margin-left: -0.3em;
+ margin-top: -0.1em;
+ }
+
+.labelError:after {
+ border-top-color: error from styles;
+}
+.labelFocus:after {
+ border-top-color: highlight;
+}
+
+.select {
+ composes: inputBox from '../input-boxes.mcss';
+ appearance: none;
+}
+
+/* States */
+
+.error {
+ composes: error from '../input-boxes.mcss';
+}
+
+.focus {
+ composes: focus from '../input-boxes.mcss';
+}
+
+/* Sizes */
+
+.mini {
+ composes: mini from '../input-boxes.mcss';
+}
+
+.small {
+ composes: small from '../input-boxes.mcss';
+}
+
+.normal {
+ composes: normal from '../input-boxes.mcss';
+}
+
+.large {
+ composes: large from '../input-boxes.mcss';
+}
+
+.huge {
+ composes: huge from '../input-boxes.mcss';
+}
diff --git a/src/components/ui/styles.mcss b/src/components/ui/styles.mcss
new file mode 100644
index 00000000..858eb026
--- /dev/null
+++ b/src/components/ui/styles.mcss
@@ -0,0 +1,3 @@
+@import './buttons.mcss';
+@import './colours.mcss';
+@import './typography.mcss';