diff --git a/ui/src/components/select/index.js b/ui/src/components/select/index.js
index abe8b35a..5f33b49a 100644
--- a/ui/src/components/select/index.js
+++ b/ui/src/components/select/index.js
@@ -1,11 +1,17 @@
const fns = require('../../shared/functions');
+const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
const {
- rndId
+ rndId,
+ remcalc
} = fns;
+const {
+ pseudoEl
+} = composers;
+
const {
default: styled
} = Styled;
@@ -15,8 +21,37 @@ const StyledLabel = styled.div`
color: #464646;
`;
+const SelectWrapper = styled.div`
+ position: relative;
+ display: inline-block;
+
+ &:after {
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid black;
+
+ ${pseudoEl({
+ top: '25px',
+ right: '20px'
+ })}
+ }
+`;
+
+
const StyledSelect = styled.select`
- color: #464646;
+ font-size:16px;
+ min-width: ${remcalc(288)};
+ min-height: ${remcalc(54)};
+ border-radius: 4px;
+ padding-left: ${remcalc(20)};
+ background-color: #FFFFFF;
+ box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+ border: solid 1px #D8D8D8;
+ -webkit-appearance: none;
+
+ &:before {
+ ${pseudoEl()}
+ }
/* select[multiple] is valid CSS syntax - not added to lint library yet */
/* stylelint-disable */
@@ -25,9 +60,9 @@ const StyledSelect = styled.select`
padding-left: 0;
padding-right: 0;
- & :global option {
- padding-left: 15px;
- padding-right: 15px;
+ & option {
+ padding-left: ${remcalc(15)};
+ padding-right: ${remcalc(15)};
width: 100%;
}
}
@@ -51,19 +86,22 @@ const Select = ({
{label}
-
- {children}
-
+
+
+
+ {children}
+
+
);
};
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 9fca487c..22806a2f 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
storiesOf('Select', module)
.add('Default', () => (
))
.add('multiple', () => (