-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 in BUDC/concorel-frontend from feature/CONCORE…
…L-95-c_09-tab-tasks-frontend to develop * commit 'dc7ae10bb4c7c8025fa4893ef94bd4229f2699f2': CONCOREL-95: Make sure that active collapsible can be closed. CONCOREL-95: Add tabs-to-collapsible functionality with styles CONCOREL-95: Refactor accordion styles and structure to make it more reusable
- Loading branch information
Showing
13 changed files
with
424 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| @mixin accordion-wrapper($radius: 5px, $marginBottom: 40px) { | ||
| border-radius: $radius; | ||
| overflow: hidden; | ||
| margin-bottom: $marginBottom; | ||
| } | ||
|
|
||
| @mixin accordion-trigger($padding: 15px) { | ||
| box-sizing: border-box; | ||
| color: $colorMetallicBlue; | ||
| background-color: $colorPaleGrey; | ||
| margin-bottom: 2px; | ||
| padding: $padding ($padding + 10px + 5px) $padding; | ||
| position: relative; | ||
| line-height: 1; | ||
| font-weight: $fontWeightBlack; | ||
| cursor: pointer; | ||
| transition: all 0.25s ease-in-out; | ||
|
|
||
| &:after { | ||
| content: ' '; | ||
| display: block; | ||
| position: absolute; | ||
| top: $padding + 3px; | ||
| right: $padding; | ||
| // transition: transform 0.4s ease; // Pie: temporarily off by designers request | ||
| @include iconDataurlStyles('triangle-arrow'); | ||
| width: 10px; | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| color: $colorMetallicBlue; | ||
| background-color: $colorPaleGreyTwo; | ||
| } | ||
| } | ||
|
|
||
| @mixin accordion-trigger-active { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| background-color: $colorTangerine; | ||
| color: $colorWhite; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| &:after { | ||
| @include iconDataurlStyles('triangle-arrow', 'secondary'); | ||
| width: 10px; | ||
| transform: rotate(-.5turn); | ||
| } | ||
| } | ||
|
|
||
| @mixin accordion-panel($innerMargin: 30px) { | ||
| max-height: 0; | ||
| overflow: hidden; | ||
| transition: max-height 0.6s cubic-bezier(0, 1, 0, 1); | ||
| box-sizing: border-box; | ||
| background-color: $colorWhite; | ||
|
|
||
| &-inner { | ||
| margin: $innerMargin; | ||
| } | ||
| } | ||
|
|
||
| @mixin accordion-panel-active { | ||
| max-height: 1000px; | ||
| transition: max-height 0.6s ease-in-out; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| 'use strict'; | ||
|
|
||
| var _ = require('lodash'), | ||
| requireNew = require('require-new'), | ||
| dataHelper = require('../../../helpers/data.js'), | ||
| defaultData = requireNew('../../data/default.data.js'); | ||
|
|
||
| var data = _.merge(defaultData, { | ||
| meta: { | ||
| title: 'Tabs', | ||
| className: 'Tabs', | ||
| code: dataHelper.getTemplateCode('tabs.hbs'), | ||
| documentation: dataHelper.getDocumentation('tabs.md'), | ||
| centered: true | ||
| }, | ||
| tabs: [ | ||
| { | ||
| title: 'PRIVAT', | ||
| id: 'tab01', | ||
| panelId: '#panel01', | ||
| open: false | ||
| }, | ||
| { | ||
| title: 'HALBPRIVAT', | ||
| id: 'tab02', | ||
| panelId: '#panel02', | ||
| open: true | ||
| }, | ||
| { | ||
| title: 'Libero', | ||
| id: 'tab03', | ||
| panelId: '#panel03', | ||
| open: false | ||
| }, | ||
| { | ||
| title: 'Allgemein', | ||
| id: 'tab04', | ||
| panelId: '#panel04', | ||
| open: false | ||
| } | ||
| ], | ||
| panels: [ | ||
| { | ||
| id: 'panel01', | ||
| contents: '</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Vestibulum blandit</a>, enim quis faucibus luctus, erat arcu vestibulum odio, vitae efficitur nulla dui eu arcu. Pellentesque sagittis augue eget sem volutpat, ac porttitor velit aliquam. Donec placerat risus est, non facilisis ligula interdum ac. Curabitur et neque malesuada, porta sem ac, gravida enim. Vivamus in orci pharetra, porttitor ex nec, pellentesque nisl. Aliquam auctor faucibus congue. </p>' | ||
| }, | ||
| { | ||
| id: 'panel02', | ||
| open: true, | ||
| contents: '<h5>Praesent a maximus tellus</h5> <p>Aenean sed massa mattis, eleifend massa non, aliquam justo. Cras ultrices metus id elit volutpat pellentesque.</p> <p>Cras nec euismod risus. Suspendisse risus purus, commodo eu lacus sed, porttitor dapibus nulla. Ut risus nibh, bibendum in rutrum sed, mollis ut nunc. Aliquam et metus placerat, vulputate mauris vel, dignissim tellus. Mauris mollis metus at lorem pellentesque suscipit.</p>' | ||
| }, | ||
| { | ||
| id: 'panel03', | ||
| contents: '<p>Quisque ut rutrum nisi. Aliquam tincidunt malesuada lorem finibus aliquet. Sed pharetra neque sed eros sollicitudin fermentum. Nulla consectetur augue dolor, non tincidunt nisi convallis sed.</p>' | ||
| }, | ||
| { | ||
| id: 'panel04', | ||
| contents: '<p>Pellentesque sagittis augue eget sem volutpat, ac porttitor velit aliquam. Donec placerat risus est, non facilisis ligula interdum ac. Curabitur et neque malesuada, porta sem ac, gravida enim. Vivamus in orci pharetra, porttitor ex nec, pellentesque nisl. Aliquam auctor faucibus congue. </p>' | ||
|
|
||
| } | ||
|
|
||
| ] | ||
| }); | ||
|
|
||
| module.exports = data; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <div class="tabs" data-init="tabs"> | ||
| {{#if header}} | ||
| <h4 class="tabs__header"> | ||
| {{header}} | ||
| </h4> | ||
| {{/if}} | ||
|
|
||
| <ul class="tabs__controls" data-tabs="controls"> | ||
| {{#each tabs}} | ||
| <li class="tabs__trigger-wrapper"> | ||
| <a class="tabs__trigger{{#if open}} tabs__trigger--is-active{{/if}}" id={{id}} href={{panelId}} data-tabs="trigger">{{title}}</a> | ||
| </li> | ||
| {{/each}} | ||
| </ul> | ||
|
|
||
| <div class="tabs__panels" data-tabs="panels"> | ||
| {{#each panels}} | ||
| <div class="tabs__panel" id={{id}}> | ||
| <div class="tabs__panel-inner"> | ||
| {{{contents}}} | ||
| </div> | ||
| </div> | ||
| {{/each}} | ||
| </div> | ||
| </div> |
Oops, something went wrong.