mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
updating option select component
This commit is contained in:
parent
2ee92dfb52
commit
294a9e26a9
@ -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 = ({
|
||||
<StyledLabel htmlFor={id}>
|
||||
{label}
|
||||
</StyledLabel>
|
||||
<StyledSelect
|
||||
autoFocus={autoFocus}
|
||||
disabled={disabled}
|
||||
form={form}
|
||||
id={id}
|
||||
label={label}
|
||||
multiple={multiple}
|
||||
name={name}
|
||||
required={required}
|
||||
selected={selected}
|
||||
>
|
||||
{children}
|
||||
</StyledSelect>
|
||||
|
||||
<SelectWrapper>
|
||||
<StyledSelect
|
||||
autoFocus={autoFocus}
|
||||
disabled={disabled}
|
||||
form={form}
|
||||
id={id}
|
||||
label={label}
|
||||
multiple={multiple}
|
||||
name={name}
|
||||
required={required}
|
||||
selected={selected}
|
||||
>
|
||||
{children}
|
||||
</StyledSelect>
|
||||
</SelectWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
|
||||
storiesOf('Select', module)
|
||||
.add('Default', () => (
|
||||
<Select label='example select'>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>Apple</option>
|
||||
<option>Banana</option>
|
||||
<option>Pear</option>
|
||||
<option>Orange</option>
|
||||
</Select>
|
||||
))
|
||||
.add('multiple', () => (
|
||||
|
Loading…
Reference in New Issue
Block a user