Skip to content

Commit 27a7343

Browse files
nolimits4webnolimits4web
committed
3.0.0-beta.2 Release
1 parent 030db05 commit 27a7343

File tree

613 files changed

+240229
-4
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

613 files changed

+240229
-4
lines changed

‎packages/core/components/accordion/accordion-ios.less

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.ios {
2+
@import (multiple) '../../less/colors-ios.less';
3+
.list {
4+
.accordion-item-toggle {
5+
.item-inner {
6+
background-size: 8px 13px;
7+
.ltr({
8+
background: no-repeat calc(~"100% - 15px") center;
9+
.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>");
10+
padding-right: 35px;
11+
});
12+
.rtl({
13+
padding-left: 35px;
14+
background-repeat: no-repeat;
15+
background-position: 15px center;
16+
.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>");
17+
});
18+
}
19+
&.active-state {
20+
background-color: #d9d9d9;
21+
}
22+
}
23+
}
24+
25+
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
26+
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
27+
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
28+
.media-list .accordion-item-opened > .item-link .item-title-row,
29+
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
30+
.accordion-item-opened.media-item > .item-link .item-title-row,
31+
.links-list .accordion-item-opened > a
32+
{
33+
.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>");
34+
background-size: 13px 13px;
35+
}
36+
37+
// Dark theme
38+
& when (@includeDarkTheme) {
39+
.theme-dark {
40+
.list {
41+
.accordion-item-toggle {
42+
.item-inner {
43+
.ltr({
44+
.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>");
45+
});
46+
.rtl({
47+
.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>");
48+
});
49+
}
50+
&.active-state {
51+
background-color: #363636;
52+
}
53+
}
54+
}
55+
56+
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
57+
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
58+
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
59+
.media-list .accordion-item-opened > .item-link .item-title-row,
60+
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
61+
.accordion-item-opened.media-item > .item-link .item-title-row,
62+
.links-list .accordion-item-opened > a
63+
{
64+
.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>");
65+
}
66+
}
67+
}
68+
}

‎packages/core/components/accordion/accordion-md.less

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.md {
2+
@import (multiple) '../../less/colors-md.less';
3+
.list {
4+
.accordion-item-toggle {
5+
.item-inner {
6+
.ltr({
7+
padding-right: 42px;
8+
background: no-repeat calc(~"100% - 16px") center;
9+
});
10+
.rtl({
11+
padding-left: 42px;
12+
background-repeat: no-repeat;
13+
background-position: 16px center;
14+
});
15+
}
16+
&.active-state {
17+
background-color: rgba(0,0,0,0.1);
18+
}
19+
}
20+
}
21+
.list .accordion-item-toggle .item-inner,
22+
.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner,
23+
.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner,
24+
.media-list .accordion-item .accordion-item-toggle .item-title-row,
25+
.media-list .accordion-item > .item-link .item-title-row,
26+
.accordion-item.media-item .accordion-item-toggle .item-title-row,
27+
.accordion-item.media-item > .item-link .item-title-row,
28+
.links-list .accordion-item > a
29+
{
30+
.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>");
31+
background-size: 13px 13px;
32+
}
33+
.list .accordion-item-toggle.accordion-item-opened .item-inner,
34+
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
35+
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
36+
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
37+
.media-list .accordion-item-opened > .item-link .item-title-row,
38+
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
39+
.accordion-item-opened.media-item > .item-link .item-title-row,
40+
.links-list .accordion-item-opened > a
41+
{
42+
.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>");
43+
}
44+
45+
& when (@includeDarkTheme) {
46+
.theme-dark {
47+
.list .accordion-item-toggle .item-inner,
48+
.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner,
49+
.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner,
50+
.media-list .accordion-item .accordion-item-toggle .item-title-row,
51+
.media-list .accordion-item > .item-link .item-title-row,
52+
.accordion-item.media-item .accordion-item-toggle .item-title-row,
53+
.accordion-item.media-item > .item-link .item-title-row,
54+
.links-list .accordion-item > a
55+
{
56+
.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>");
57+
}
58+
.list .accordion-item-toggle.accordion-item-opened .item-inner,
59+
.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
60+
.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
61+
.media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
62+
.media-list .accordion-item-opened > .item-link .item-title-row,
63+
.accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
64+
.accordion-item-opened.media-item > .item-link .item-title-row,
65+
.links-list .accordion-item-opened > a
66+
{
67+
.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>");
68+
}
69+
}
70+
}
71+
}

‎packages/core/components/accordion/accordion.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
2+
import $ from 'dom7';
3+
import Utils from '../../utils/utils';
4+
5+
const Accordion = {
6+
toggleClicked($clickedEl) {
7+
const app = this;
8+
let $accordionItemEl = $clickedEl.closest('.accordion-item').eq(0);
9+
if (!$accordionItemEl.length) $accordionItemEl = $clickedEl.parents('li').eq(0);
10+
if ($clickedEl.parents('li').length > 1 && $clickedEl.parents('li')[0] !== $accordionItemEl[0]) return;
11+
app.accordion.toggle($accordionItemEl);
12+
},
13+
open(el) {
14+
const app = this;
15+
const $el = $(el);
16+
const $list = $el.parents('.accordion-list').eq(0);
17+
let $contentEl = $el.children('.accordion-item-content');
18+
if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
19+
if ($contentEl.length === 0) return;
20+
const $openedItem = $list.length > 0 && $el.parent().children('.accordion-item-opened');
21+
if ($openedItem.length > 0) {
22+
app.accordion.close($openedItem);
23+
}
24+
$contentEl.transitionEnd(() => {
25+
if ($el.hasClass('accordion-item-opened')) {
26+
$contentEl.transition(0);
27+
$contentEl.css('height', 'auto');
28+
$contentEl._clientLeft = $contentEl[0].clientLeft;
29+
$contentEl.transition('');
30+
$el.trigger('accordion:opened');
31+
app.emit('accordionOpened', $el[0]);
32+
} else {
33+
$contentEl.css('height', '');
34+
$el.trigger('accordion:closed');
35+
app.emit('accordionClosed', $el[0]);
36+
}
37+
});
38+
$contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
39+
$el.trigger('accordion:open');
40+
$el.addClass('accordion-item-opened');
41+
app.emit('accordionOpen', $el[0]);
42+
},
43+
close(el) {
44+
const app = this;
45+
const $el = $(el);
46+
let $contentEl = $el.children('.accordion-item-content');
47+
if ($contentEl.length === 0) $contentEl = $el.find('.accordion-item-content');
48+
$el.removeClass('accordion-item-opened');
49+
$contentEl.transition(0);
50+
$contentEl.css('height', `${$contentEl[0].scrollHeight}px`);
51+
$contentEl._clientLeft = $contentEl[0].clientLeft;
52+
$contentEl.transition('');
53+
// Close
54+
$contentEl.transitionEnd(() => {
55+
if ($el.hasClass('accordion-item-opened')) {
56+
$contentEl.transition(0);
57+
$contentEl.css('height', 'auto');
58+
$contentEl._clientLeft = $contentEl[0].clientLeft;
59+
$contentEl.transition('');
60+
$el.trigger('accordion:opened');
61+
app.emit('accordionOpened', $el[0]);
62+
} else {
63+
$contentEl.css('height', '');
64+
$el.trigger('accordion:closed');
65+
app.emit('accordionClosed', $el[0]);
66+
}
67+
});
68+
Utils.nextFrame(() => {
69+
$contentEl.transition('');
70+
$contentEl.css('height', '');
71+
$el.trigger('accordion:close');
72+
app.emit('accordionClose');
73+
});
74+
},
75+
toggle(el) {
76+
const app = this;
77+
const $el = $(el);
78+
if ($el.length === 0) return;
79+
if ($el.hasClass('accordion-item-opened')) app.accordion.close(el);
80+
else app.accordion.open(el);
81+
},
82+
};
83+
84+
export default {
85+
name: 'accordion',
86+
create() {
87+
const app = this;
88+
Utils.extend(app, {
89+
accordion: {
90+
open: Accordion.open.bind(app),
91+
close: Accordion.close.bind(app),
92+
toggle: Accordion.toggle.bind(app),
93+
},
94+
});
95+
},
96+
clicks: {
97+
'.accordion-item .item-link, .accordion-item-toggle, .links-list.accordion-list > ul > li > a': function open($clickedEl) {
98+
const app = this;
99+
Accordion.toggleClicked.call(app, $clickedEl);
100+
},
101+
},
102+
};

‎packages/core/components/accordion/accordion.less

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* === Accordion === */
2+
.accordion-item-toggle {
3+
cursor: pointer;
4+
transition-duration: 300ms;
5+
&.active-state {
6+
transition-duration: 300ms;
7+
> .item-inner {
8+
.hairline-color(bottom, transparent);
9+
}
10+
}
11+
}
12+
.accordion-item-toggle {
13+
.item-inner {
14+
transition-duration: 300ms;
15+
transition-property: background-color;
16+
&:after {
17+
transition-duration: 300ms;
18+
}
19+
}
20+
}
21+
.accordion-item {
22+
.item-link .item-inner:after {
23+
transition-duration: 300ms;
24+
}
25+
.list, .block {
26+
margin-top: 0;
27+
margin-bottom: 0;
28+
}
29+
.block {
30+
> h1, > h2, > h3, > h4, > p {
31+
&:first-child {
32+
margin-top: 10px;
33+
}
34+
&:last-child {
35+
margin-bottom: 10px;
36+
}
37+
}
38+
}
39+
}
40+
.accordion-item-opened {
41+
.accordion-item-toggle .item-inner, > .item-link .item-inner {
42+
.hairline-color(bottom, transparent);
43+
}
44+
}
45+
46+
.list li.accordion-item ul {
47+
.ltr({
48+
padding-left: 0;
49+
});
50+
.rtl({
51+
padding-right: 0;
52+
})
53+
}
54+
.accordion-item-content {
55+
position: relative;
56+
overflow: hidden;
57+
height: 0;
58+
font-size: 14px;
59+
transition-duration: 300ms;
60+
// transform: scale(1) translate3d(0,0,0);
61+
.accordion-item-opened > & {
62+
height: auto;
63+
}
64+
html.device-android-4 & {
65+
transform: none;
66+
}
67+
}
68+
69+
& when (@includeIosTheme) {
70+
@import url('./accordion-ios.less');
71+
}
72+
& when (@includeMdTheme) {
73+
@import url('./accordion-md.less');
74+
}

0 commit comments

Comments
 (0)