All files / Select/partials SelectArrow.js

100% Statements 7/7
100% Branches 2/2
100% Functions 1/1
100% Lines 6/6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 441x 1x   1x 1x   17x                                                               44x          
import styled from 'styled-components'
import { autoCssGenerator, cssVar } from '../cssHelpers';
 
const v = cssVar('select-arrow');
const g = autoCssGenerator('select-arrow');
 
const isOpened = () => (`
  margin-top: ${v('size')/2}px;
  transform: rotate(-134deg);
`)
 
export default styled.div`
  position: relative;
  display: inline-block;
  box-sizing: border-box;
 
  ${g('border-right')}
  ${g('font-family')}
 
  border-style: none;
 
  /* FALLBACK */
  border-right-style: solid;
  border-bottom-style: solid;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-color: ${v('color')};
  border-bottom-color: ${v('color')};
  /* FALLBACK */
 
  border-right: 1px ${v('color')} solid;
  border-right: 1px var(--styled-select-arrow__color, ${v('color')}) solid;
  border-bottom: 1px ${v('color')} solid;
  border-bottom: 1px var(--styled-select-arrow__color, ${v('color')}) solid;
 
  border-bottom-right-radius: 25%;
  transform: rotate(45deg);
 
  ${props => props.isOpened && isOpened()}
 
  height: ${v('size')}px;
  width: ${v('size')}px;
`