Permalink
Browse files

fix(select): rotate arrow when dropdown open

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Dec 27, 2016
1 parent 8cbd3b2 commit adcc70e5079be869866d073fc822fd89a08431ac
Showing with 42 additions and 24 deletions.
  1. +1 −1 src/select/samples/00-standard.html
  2. +13 −1 src/select/select.js
  3. +28 −0 src/select/select.scss
  4. +0 −22 src/select/select_data.json
@@ -1,2 +1,2 @@
<label for="s1" class="label"></label>
<select class="select" id="s1"><option selected="selected">Select...</option></select>
<select class="select" id="s1"><option value="Select..." selected="selected">Select...</option></select>
View
@@ -1,4 +1,5 @@
import $ from '../js-common-components/dollar';
require('../js-common-components/accordion');
function fetchData(select) {
const rq = { url: '/assets/data/select_data.json',
@@ -20,10 +21,21 @@ function fetchData(select) {
xhr.send();
}
const initData = () => {
$('select').forEach(el => {
if (!el.getAttribute('data-initialized')) {
el.addEventListener('keyup', fetchData(el));
el.addEventListener('click', (ev) => {
ev.preventDefault();
ev.stopPropagation();
el.classList.add('is-expanded');
});
el.addEventListener('blur', (ev) => {
ev.preventDefault();
ev.stopPropagation();
el.classList.remove('is-expanded');
});
fetchData(el);
el.setAttribute('data-initialized', true);
}
});
View
@@ -36,3 +36,31 @@
outline: none;
box-shadow: 0 0 0 2px $focuscolor;
}
.is-expanded {
background-image: url(/assets/images/icons/icons_file_002_dropdownopen.svg);
}
.select option {
font-family: $mainfont;
background-color: #fff;
border: 1px solid $gray-300;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 11px;
}
.expandable__trigger:before {
content: " ";
position: absolute;
background-image: url(/assets/images/icons/dropdown_open.svg);
background-size: 1em;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(0);
transition: transform 0.3s ease;
}
@@ -1,22 +0,0 @@
{
"options": [
{
"value": "Papaya"
},
{
"value": "Banana"
},
{
"value": "Ananas"
},
{
"value": "Apple"
},
{
"value": "Kiwi"
},
{
"value": "Orange"
}
]
}

0 comments on commit adcc70e

Please sign in to comment.