All files / components/dropdown dropdown.styled.js

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import styled from 'styled-components'
import Proptypes from 'prop-types'
 
const DropDownStyled = styled.div`
  background:transparent;
  width:auto;
  clear: both;
  float: left;
  position: relative;
 
  input.input-focus{width:0px; border:none}
 
  .dropdown-container
  {
    position:absolute;
    box-sizing: border-box;
    z-index:10;
    display:none;
    transition: display 1s linear;
    width: ${p => p.referenceSize + 'px'};
 
    &.show
    {
      display:block;
    }
 
    >.dropdown-arrow {
      position: absolute;
      background: #ffffff;
      z-index: 11;
      left:${p => p.arrowPosition + 'px'};
 
      &.dropdown-arrow:after, &.dropdown-arrow:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
 
      &.dropdown-arrow:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 7px;
        margin-left: -7px;
      }
      &.dropdown-arrow:before {
        border-color: rgba(197, 208, 225, 0);
        border-bottom-color: #c5d0e1;
        border-width: 8px;
        margin-left: -8px;
      }
 
      &.arrow-top{ transform: rotate(180deg); bottom:14px; }
      &.arrow-bottom{ top: 14px; }
    }
 
    >.dropdown-items-container
    {
      position: absolute;
      border-radius: 2px;
      background-color: #ffffff;
      box-shadow: 0 1px 2px 0 rgba(51,60,72,0.3);
      border: solid 1px #c5d0e1;
      z-index: 10;
      padding: 10px 0;
 
      &.top { bottom:13px; }
      &.bottom { top:13px; }
      &.left{ left:0px; }
      &.right{ right:0px;}
    }
  }
`
 
DropDownStyled.propTypes = {
  width: Proptypes.string
}
 
DropDownStyled.defaultProps = {
  width: '100%'
}
 
export default DropDownStyled