Skip to content

Commit

Permalink
3.0.0-beta.2 Release
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Jun 1, 2018
1 parent 030db05 commit 27a7343
Show file tree
Hide file tree
Showing 613 changed files with 240,229 additions and 4 deletions.
68 changes: 68 additions & 0 deletions packages/core/components/accordion/accordion-ios.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.ios {
@import (multiple) '../../less/colors-ios.less';
.list {
.accordion-item-toggle {
.item-inner {
background-size: 8px 13px;
.ltr({
background: no-repeat calc(~"100% - 15px") center;
.svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
padding-right: 35px;
});
.rtl({
padding-left: 35px;
background-repeat: no-repeat;
background-position: 15px center;
.svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
});
}
&.active-state {
background-color: #d9d9d9;
}
}
}

.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
.media-list .accordion-item-opened > .item-link .item-title-row,
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
.accordion-item-opened.media-item > .item-link .item-title-row,
.links-list .accordion-item-opened > a
{
.svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
background-size: 13px 13px;
}

// Dark theme
& when (@includeDarkTheme) {
.theme-dark {
.list {
.accordion-item-toggle {
.item-inner {
.ltr({
.svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
});
.rtl({
.svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
});
}
&.active-state {
background-color: #363636;
}
}
}

.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
.media-list .accordion-item-opened > .item-link .item-title-row,
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
.accordion-item-opened.media-item > .item-link .item-title-row,
.links-list .accordion-item-opened > a
{
.svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
}
}
}
}
71 changes: 71 additions & 0 deletions packages/core/components/accordion/accordion-md.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.md {
@import (multiple) '../../less/colors-md.less';
.list {
.accordion-item-toggle {
.item-inner {
.ltr({
padding-right: 42px;
background: no-repeat calc(~"100% - 16px") center;
});
.rtl({
padding-left: 42px;
background-repeat: no-repeat;
background-position: 16px center;
});
}
&.active-state {
background-color: rgba(0,0,0,0.1);
}
}
}
.list .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item .accordion-item-toggle .item-title-row,
.media-list .accordion-item > .item-link .item-title-row,
.accordion-item.media-item .accordion-item-toggle .item-title-row,
.accordion-item.media-item > .item-link .item-title-row,
.links-list .accordion-item > a
{
.svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
background-size: 13px 13px;
}
.list .accordion-item-toggle.accordion-item-opened .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
.media-list .accordion-item-opened > .item-link .item-title-row,
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
.accordion-item-opened.media-item > .item-link .item-title-row,
.links-list .accordion-item-opened > a
{
.svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(1.5, 6.5) rotate(-135) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
}

& when (@includeDarkTheme) {
.theme-dark {
.list .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item .accordion-item-toggle .item-title-row,
.media-list .accordion-item > .item-link .item-title-row,
.accordion-item.media-item .accordion-item-toggle .item-title-row,
.accordion-item.media-item > .item-link .item-title-row,
.links-list .accordion-item > a
{
.svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
}
.list .accordion-item-toggle.accordion-item-opened .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
.media-list .accordion-item-opened > .item-link .item-title-row,
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
.accordion-item-opened.media-item > .item-link .item-title-row,
.links-list .accordion-item-opened > a
{
.svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(1.5, 6.5) rotate(-135) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
}
}
}
}
102 changes: 102 additions & 0 deletions packages/core/components/accordion/accordion.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
import $ from 'dom7';
import Utils from '../../utils/utils';

const Accordion = {
toggleClicked($clickedEl) {
const app = this;
let $accordionItemEl = $clickedEl.closest('.accordion-item').eq(0);
if (!$accordionItemEl.length) $accordionItemEl = $clickedEl.parents('li').eq(0);
if ($clickedEl.parents('li').length > 1 && $clickedEl.parents('li')[0] !== $accordionItemEl[0]) return;
app.accordion.toggle($accordionItemEl);
},
open(el) {
const app = this;
const $el = $(el);
const $list = $el.parents('.accordion-list').eq(0);
let $contentEl = $el.children('.accordion-item-content');
if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
if ($contentEl.length === 0) return;
const $openedItem = $list.length > 0 && $el.parent().children('.accordion-item-opened');
if ($openedItem.length > 0) {
app.accordion.close($openedItem);
}
$contentEl.transitionEnd(() => {
if ($el.hasClass('accordion-item-opened')) {
$contentEl.transition(0);
$contentEl.css('height', 'auto');
$contentEl._clientLeft = $contentEl[0].clientLeft;
$contentEl.transition('');
$el.trigger('accordion:opened');
app.emit('accordionOpened', $el[0]);
} else {
$contentEl.css('height', '');
$el.trigger('accordion:closed');
app.emit('accordionClosed', $el[0]);
}
});
$contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
$el.trigger('accordion:open');
$el.addClass('accordion-item-opened');
app.emit('accordionOpen', $el[0]);
},
close(el) {
const app = this;
const $el = $(el);
let $contentEl = $el.children('.accordion-item-content');
if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
$el.removeClass('accordion-item-opened');
$contentEl.transition(0);
$contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
$contentEl._clientLeft = $contentEl[0].clientLeft;
$contentEl.transition('');
// Close
$contentEl.transitionEnd(() => {
if ($el.hasClass('accordion-item-opened')) {
$contentEl.transition(0);
$contentEl.css('height', 'auto');
$contentEl._clientLeft = $contentEl[0].clientLeft;
$contentEl.transition('');
$el.trigger('accordion:opened');
app.emit('accordionOpened', $el[0]);
} else {
$contentEl.css('height', '');
$el.trigger('accordion:closed');
app.emit('accordionClosed', $el[0]);
}
});
Utils.nextFrame(() => {
$contentEl.transition('');
$contentEl.css('height', '');
$el.trigger('accordion:close');
app.emit('accordionClose');
});
},
toggle(el) {
const app = this;
const $el = $(el);
if ($el.length === 0) return;
if ($el.hasClass('accordion-item-opened')) app.accordion.close(el);
else app.accordion.open(el);
},
};

export default {
name: 'accordion',
create() {
const app = this;
Utils.extend(app, {
accordion: {
open: Accordion.open.bind(app),
close: Accordion.close.bind(app),
toggle: Accordion.toggle.bind(app),
},
});
},
clicks: {
'.accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a': function open($clickedEl) {
const app = this;
Accordion.toggleClicked.call(app, $clickedEl);
},
},
};
74 changes: 74 additions & 0 deletions packages/core/components/accordion/accordion.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/* === Accordion === */
.accordion-item-toggle {
cursor: pointer;
transition-duration: 300ms;
&.active-state {
transition-duration: 300ms;
> .item-inner {
.hairline-color(bottom, transparent);
}
}
}
.accordion-item-toggle {
.item-inner {
transition-duration: 300ms;
transition-property: background-color;
&:after {
transition-duration: 300ms;
}
}
}
.accordion-item {
.item-link .item-inner:after {
transition-duration: 300ms;
}
.list, .block {
margin-top: 0;
margin-bottom: 0;
}
.block {
> h1, > h2, > h3, > h4, > p {
&:first-child {
margin-top: 10px;
}
&:last-child {
margin-bottom: 10px;
}
}
}
}
.accordion-item-opened {
.accordion-item-toggle .item-inner, > .item-link .item-inner {
.hairline-color(bottom, transparent);
}
}

.list li.accordion-item ul {
.ltr({
padding-left: 0;
});
.rtl({
padding-right: 0;
})
}
.accordion-item-content {
position: relative;
overflow: hidden;
height: 0;
font-size: 14px;
transition-duration: 300ms;
// transform: scale(1) translate3d(0,0,0);
.accordion-item-opened > & {
height: auto;
}
html.device-android-4 & {
transform: none;
}
}

& when (@includeIosTheme) {
@import url('./accordion-ios.less');
}
& when (@includeMdTheme) {
@import url('./accordion-md.less');
}

0 comments on commit 27a7343

Please sign in to comment.