diff --git a/components/dropdown/index.cjsx b/components/dropdown/index.cjsx
index 25034207..f6eed48c 100644
--- a/components/dropdown/index.cjsx
+++ b/components/dropdown/index.cjsx
@@ -24,7 +24,6 @@ module.exports = React.createClass
# -- Events
onSelect: (event) ->
- console.log "onSelect", event.target
@setState active: true
onItem: (event) ->
@@ -33,17 +32,17 @@ module.exports = React.createClass
# -- Render
render: ->
className = @props.className
- className += " active" if @state.active is true
-
- console.log "render.className", className
-
-
+ if @state.active is true
+ className += " active"
+ stylesheet = height: @getDOMNode().offsetHeight * Object.keys(@props.dataSource).length
+
{@props.dataSource[@state.value]}
-
- {
- for key, label of @props.dataSource
- - {label}
- }
+
+ {
+ for key, label of @props.dataSource
+ - {label}
+ }
diff --git a/components/dropdown/style.styl b/components/dropdown/style.styl
index 985fa369..44c89d47 100644
--- a/components/dropdown/style.styl
+++ b/components/dropdown/style.styl
@@ -3,36 +3,38 @@
[data-component-dropdown]
position : relative
margin-bottom : SPACE
- width : (4 * UNIT)
height : INPUT_HEIGHT
+ width : inherit
color : COLOR
border-bottom : 1px solid lighten(COLOR, 75%)
+
// -- Class
&.active
> span
opacity : 0
- transform translateY(25%)
+ transform translateY((INPUT_HEIGHT / 4))
&:after
transform scale(0)
> ul
- z-index : 2
- visibility : visible
- height : auto
opacity : 1
transform translateY(0%)
box-shadow ZDEPTH_SHADOW_1
+ > li
+ opacity : 1
+ transition opacity ANIMATION_DURATION ANIMATION_EASE
+ &:not(.active) > ul
+ pointer-events :none
// -- Children
> *
width : 100%
- transition-property opacity, transform, box-shadow, height
- transition-duration ANIMATION_DURATION
- transition-timing-function ANIMATION_EASE
> span
display : block
- // padding : (SPACE / 2) 0
line-height : INPUT_HEIGHT
font-size : FONT_SIZE_NORMAL
+ transition-property opacity, transform
+ transition-duration ANIMATION_DURATION
+ transition-timing-function ANIMATION_EASE
&:after
SIZE = (INPUT_HEIGHT / 7)
position : absolute
@@ -41,30 +43,33 @@
top : SPACE
width : 0
height : 0
- border-left : SIZE solid transparent
- border-right : SIZE solid transparent
+ border-left : BORDER = SIZE solid transparent
+ border-right : BORDER
border-top : SIZE solid lighten(COLOR, 75%)
transition transform ANIMATION_DURATION ANIMATION_EASE
> ul
- z-index : -1
+ z-index : 2
position : absolute
- overflow : hidden
top : 0
left : -(OFFSET = (SPACE / 1.25))
right : -(OFFSET)
width : auto
height : 0
+ max-height : 50vh
list-style : none
opacity : 0
background-color : WHITE
border-radius : BORDER_RADIUS
- transform translateY(-(INPUT_HEIGHT))
+ transform translateY(-(INPUT_HEIGHT / 2))
+ transition-property height, box-shadow, opacity, transform
+ transition-duration ANIMATION_DURATION
+ transition-timing-function ANIMATION_EASE
> li
padding : (SPACE / 2) OFFSET
- font-size : FONT_SIZE_SMALL
+ opacity : 0
&:hover
background-color : BACKGROUND
cursor : pointer
&.selected
- color : THEME
+ color : PRIMARY
diff --git a/spec/components/dropdown.cjsx b/spec/components/dropdown.cjsx
index 3891728d..025aa828 100644
--- a/spec/components/dropdown.cjsx
+++ b/spec/components/dropdown.cjsx
@@ -14,6 +14,7 @@ module.exports = React.createClass
"TH-th" : "Thailand"
"EN-gb" : "England"
"EN-en" : "USA"
+ "FR-fr" : "France"
# -- Events
onAutocompleteValues: (ref, method) ->
@@ -28,10 +29,7 @@ module.exports = React.createClass
Dropdown
lorem ipsum...
-
-
-