From 294a9e26a9a7916e7a36259937d6d44c4f476df8 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 14 Dec 2016 17:22:09 +0000 Subject: [PATCH] updating option select component --- ui/src/components/select/index.js | 74 +++++++++++++++++++++++-------- ui/stories/index.js | 9 ++-- 2 files changed, 60 insertions(+), 23 deletions(-) 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', () => (