updating option select component
This commit is contained in:
parent
2ee92dfb52
commit
294a9e26a9
@ -1,11 +1,17 @@
|
|||||||
const fns = require('../../shared/functions');
|
const fns = require('../../shared/functions');
|
||||||
|
const composers = require('../../shared/composers');
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
const Styled = require('styled-components');
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
const {
|
const {
|
||||||
rndId
|
rndId,
|
||||||
|
remcalc
|
||||||
} = fns;
|
} = fns;
|
||||||
|
|
||||||
|
const {
|
||||||
|
pseudoEl
|
||||||
|
} = composers;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
default: styled
|
default: styled
|
||||||
} = Styled;
|
} = Styled;
|
||||||
@ -15,8 +21,37 @@ const StyledLabel = styled.div`
|
|||||||
color: #464646;
|
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`
|
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 */
|
/* select[multiple] is valid CSS syntax - not added to lint library yet */
|
||||||
/* stylelint-disable */
|
/* stylelint-disable */
|
||||||
@ -25,9 +60,9 @@ const StyledSelect = styled.select`
|
|||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
|
||||||
& :global option {
|
& option {
|
||||||
padding-left: 15px;
|
padding-left: ${remcalc(15)};
|
||||||
padding-right: 15px;
|
padding-right: ${remcalc(15)};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -51,6 +86,8 @@ const Select = ({
|
|||||||
<StyledLabel htmlFor={id}>
|
<StyledLabel htmlFor={id}>
|
||||||
{label}
|
{label}
|
||||||
</StyledLabel>
|
</StyledLabel>
|
||||||
|
|
||||||
|
<SelectWrapper>
|
||||||
<StyledSelect
|
<StyledSelect
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
@ -64,6 +101,7 @@ const Select = ({
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</StyledSelect>
|
</StyledSelect>
|
||||||
|
</SelectWrapper>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
|
|||||||
storiesOf('Select', module)
|
storiesOf('Select', module)
|
||||||
.add('Default', () => (
|
.add('Default', () => (
|
||||||
<Select label='example select'>
|
<Select label='example select'>
|
||||||
<option>1</option>
|
<option>Apple</option>
|
||||||
<option>2</option>
|
<option>Banana</option>
|
||||||
<option>3</option>
|
<option>Pear</option>
|
||||||
<option>4</option>
|
<option>Orange</option>
|
||||||
<option>5</option>
|
|
||||||
</Select>
|
</Select>
|
||||||
))
|
))
|
||||||
.add('multiple', () => (
|
.add('multiple', () => (
|
||||||
|
Loading…
Reference in New Issue
Block a user