Skip to content

Commit

Permalink
DIG-24399 Changing to use flex to align items
Browse files Browse the repository at this point in the history
  • Loading branch information
@eriksalhus
eriksalhus committed Sep 26, 2017
1 parent 9ecc31c commit ddc3d39
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 34 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# CHANGELOG

## Version 2.0.5
* Changing to use flex to align items instead of absolute positioning

## Version 2.0.4
* Set default background of `ffe-accordion-item__toggler` explicit to transparent.
This fixes IE11 error where background becomes gray when a toggler is a button.
Expand Down
109 changes: 81 additions & 28 deletions examples/accordion.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,60 +32,53 @@ <h3 class="ffe-h3">Blå</h3>
<li class="ffe-accordion-item ffe-accordion-item--blue"
aria-expanded="false">
<button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
<div class="ffe-accordion-item__title">What is Lorem Ipsum?</div>
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>What is Lorem Ipsum?</span>
</button>
</li>
<li class="ffe-accordion-item ffe-accordion-item--blue"
aria-expanded="false">
<button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
<div class="ffe-accordion-item__title">Why do we use it?</div>
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>Why do we use it?</span>
</button>
</li>
<li class="ffe-accordion-item ffe-accordion-item--blue"
aria-expanded="true">
<button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
<div class="ffe-accordion-item__title">Where does it come from?</div>
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue ffe-accordion-item__icon--open"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>Where does it come from?</span>
</button>
<div>
<span></span>
<div>
<div>
<div class="ffe-accordion-item__content ffe-accordion-item__content--blue">
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum'
will uncover many web sites still in their infancy. Various versions
have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</div>
</div>
</div>
<div class="ffe-accordion-item__content ffe-accordion-item__content--blue">
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum'
will uncover many web sites still in their infancy. Various versions
have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</div>
</li>
<li class="ffe-accordion-item ffe-accordion-item--blue"
aria-expanded="false">
<button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
<div class="ffe-accordion-item__title">Where can I get some?</div>
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>Where can I get some?</span>
</button>
</li>
</ul>
Expand All @@ -97,29 +90,29 @@ <h3 class="ffe-h3">Hvit</h3>
<li class="ffe-accordion-item"
aria-expanded="false">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">What is Lorem Ipsum?</div>
<svg class="ffe-accordion-item__icon"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>What is Lorem Ipsum?</span>
</button>
</li>
<li class="ffe-accordion-item" aria-expanded="false">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">Why do we use it?</div>
<svg class="ffe-accordion-item__icon"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>Why do we use it?</span>
</button>
</li>
<li class="ffe-accordion-item" aria-expanded="true">
<button class="ffe-accordion-item__toggler">
<svg class="ffe-accordion-item__icon"
<div class="ffe-accordion-item__title">Where does it come from?</div>
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>Where does it come from?</span>
</button>
<div>
<span></span>
Expand All @@ -144,11 +137,71 @@ <h3 class="ffe-h3">Hvit</h3>
<li class="ffe-accordion-item"
aria-expanded="false">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">Where can I get some?</div>
<svg class="ffe-accordion-item__icon"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
</button>
</li>
</ul>
</div>

<div class="ffe-content-container ffe-content-container--text-left">
<h3 class="ffe-h3">Hvit med flere linjer</h3>

<ul class="ffe-accordion">
<li class="ffe-accordion-item"
aria-expanded="false">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">
<div>What is Lorem Ipsum?</div>
<div class="ffe-small-text">Sub-description of the contents</div>
</div>
<svg class="ffe-accordion-item__icon"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
</button>
</li>
<li class="ffe-accordion-item" aria-expanded="false">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">Why do we use it?</div>
<svg class="ffe-accordion-item__icon"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
</button>
</li>
<li class="ffe-accordion-item" aria-expanded="true">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">Where does it come from?</div>
<svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
</button>
<div class="ffe-accordion-item__content">
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum'
will uncover many web sites still in their infancy. Various versions
have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
</div>
</li>
<li class="ffe-accordion-item"
aria-expanded="false">
<button class="ffe-accordion-item__toggler">
<div class="ffe-accordion-item__title">Where can I get some?</div>
<svg class="ffe-accordion-item__icon"
viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
<path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
</svg>
<span>Where can I get some?</span>
</button>
</li>
</ul>
Expand Down
17 changes: 12 additions & 5 deletions less/ffe-accordion.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
margin-bottom: 0;
position: relative;
list-style: none;
width: 100%;

&:last-of-type {
border-bottom: solid @ffe-grey-silver 1px;
Expand All @@ -32,9 +33,10 @@
fill: @ffe-blue-azure;
width: 17px;
height: 17px;
position: absolute;
right: 20px;
top: 25px;
align-self: center;
max-width: 17px;
min-width: 17px;
margin-left: 10px;
transition:
transform @ffe-transition-duration @ffe-ease-in-out-back,
fill @ffe-transition-duration @ffe-ease;
Expand All @@ -61,13 +63,18 @@
}
}

.ffe-accordion-item__title {
flex-grow: 1;
}

.ffe-accordion-item__toggler {
background-color: transparent;
border: none;
color: @ffe-blue-azure;
cursor: pointer;
display: inline-block;
padding: 20px 40px 20px 20px;
display: flex;
flex-flow: row nowrap;
padding: 20px;
text-decoration: none;
text-align: left;
transition:
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ffe-accordion",
"version": "2.0.4",
"version": "2.0.5",
"description": "Accordion component for FFE.",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit ddc3d39

Please sign in to comment.