Skip to content

Commit c63e9d7

Browse files
nolimits4webnolimits4web
committed
3.0.0-beta.7 release
1 parent a6f279b commit c63e9d7

File tree

80 files changed

+3386
-1061
lines changed

Some content is hidden

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

80 files changed

+3386
-1061
lines changed

‎packages/core/components/autocomplete/autocomplete-class.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -436,11 +436,12 @@ class Autocomplete extends Framework7Class {
436436
const ac = this;
437437
if (ac.params.renderItem) return ac.params.renderItem.call(ac, item, index);
438438
let itemHtml;
439+
const itemValue = item.value.replace(/"/g, '"');
439440
if (ac.params.openIn !== 'dropdown') {
440441
itemHtml = `
441442
<li>
442443
<label class="item-${item.inputType} item-content">
443-
<input type="${item.inputType}" name="${item.inputName}" value="${item.value}" ${item.selected ? 'checked' : ''}>
444+
<input type="${item.inputType}" name="${item.inputName}" value="${itemValue}" ${item.selected ? 'checked' : ''}>
444445
<i class="icon icon-${item.inputType}"></i>
445446
<div class="item-inner">
446447
<div class="item-title">${item.text}</div>
@@ -452,7 +453,7 @@ class Autocomplete extends Framework7Class {
452453
// Dropdown
453454
itemHtml = `
454455
<li>
455-
<label class="item-radio item-content" data-value="${item.value}">
456+
<label class="item-radio item-content" data-value="${itemValue}">
456457
<div class="item-inner">
457458
<div class="item-title">${item.text}</div>
458459
</div>

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// Buttons
44
.button {
55
color:@themeColor;
6-
border-radius: 2px;
6+
border-radius: 4px;
77
line-height: 36px;
88
height: 36px;
99
text-transform: uppercase;
@@ -12,6 +12,8 @@
1212
border: none;
1313
transition-duration: 300ms;
1414
transform: translate3d(0,0,0);
15+
font-weight: 500;
16+
letter-spacing: 0.03em;
1517
&.active-state {
1618
background: rgba(0,0,0,0.1);
1719
}
@@ -26,16 +28,16 @@
2628
&.button-big, &.button-big-md {
2729
height: 48px;
2830
line-height: 48px;
29-
border-radius: 3px;
31+
border-radius: 4px;
3032
}
3133
&.button-round, &.button-round-md {
3234
border-radius: 36px;
3335
}
3436
&.button-outline {
35-
border: 1px solid @themeColor;
36-
line-height: 34px;
37+
border: 2px solid @themeColor;
38+
line-height: 32px;
3739
&.button-big, &.button-big-md {
38-
line-height: 46px;
40+
line-height: 44px;
3941
}
4042
}
4143
&.button-small, &.button-small-md {
@@ -46,7 +48,7 @@
4648
letter-spacing: 0.03em;
4749
&.button-outline {
4850
border-width: 2px;
49-
line-height: 25px;
51+
line-height: 24px;
5052
}
5153
}
5254
> i.icon + span,
@@ -88,7 +90,7 @@
8890

8991
// Segmented Control
9092
.segmented {
91-
border-radius: 3px;
93+
border-radius: 4px;
9294
&.segmented-raised {
9395
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
9496
}
@@ -100,20 +102,20 @@
100102
.ltr({
101103
border-left: 1px solid rgba(0,0,0,0.1);
102104
&:first-child {
103-
border-radius: 3px 0 0 3px;
105+
border-radius: 4px 0 0 4px;
104106
border-left: none;
105107
}
106108
&.button-outline {
107-
border: 1px solid @themeColor;
109+
border: 2px solid @themeColor;
108110
&:nth-child(n + 2) {
109111
border-left: none;
110112
}
111113
}
112114
&:last-child {
113-
border-radius: 0 3px 3px 0;
115+
border-radius: 0 4px 4px 0;
114116
}
115117
&:first-child:last-child {
116-
border-radius: 5px;
118+
border-radius: 4px;
117119
}
118120
&.button-round:first-child {
119121
border-radius: 36px 0 0 36px;
@@ -125,20 +127,20 @@
125127
.rtl({
126128
border-right: 1px solid rgba(0,0,0,0.1);
127129
&:first-child {
128-
border-radius: 0 3px 3px 0;
130+
border-radius: 0 4px 4px 0;
129131
border-right: none;
130132
}
131133
&.button-outline {
132-
border: 1px solid @themeColor;
134+
border: 2px solid @themeColor;
133135
&:nth-child(n + 2) {
134136
border-right: none;
135137
}
136138
}
137139
&:last-child {
138-
border-radius: 3px 0 0 3px;
140+
border-radius: 4px 0 0 4px;
139141
}
140142
&:first-child:last-child {
141-
border-radius: 5px;
143+
border-radius: 4px;
142144
}
143145
&.button-round:first-child {
144146
border-radius: 0 36px 36px 0;

‎packages/core/components/calendar/calendar-class.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ class Calendar extends Framework7Class {
5757
function onHtmlClick(e) {
5858
const $targetEl = $(e.target);
5959
if (calendar.isPopover()) return;
60-
if (!calendar.opened) return;
60+
if (!calendar.opened || calendar.closing) return;
6161
if ($targetEl.closest('[class*="backdrop"]').length) return;
6262
if ($inputEl && $inputEl.length > 0) {
6363
if ($targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal, .calendar-modal').length === 0) {
@@ -596,7 +596,9 @@ class Calendar extends Framework7Class {
596596
const prevDateTime = prevDate.getTime();
597597
const transitionEndCallback = !calendar.animating;
598598
if (params.minDate) {
599-
if (prevDateTime < new Date(params.minDate).getTime()) {
599+
let minDate = new Date(params.minDate);
600+
minDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
601+
if (prevDateTime < minDate.getTime()) {
600602
calendar.resetMonth();
601603
return;
602604
}
@@ -660,8 +662,12 @@ class Calendar extends Framework7Class {
660662
if (params.maxDate && targetDate > new Date(params.maxDate).getTime()) {
661663
return false;
662664
}
663-
if (params.minDate && targetDate < new Date(params.minDate).getTime()) {
664-
return false;
665+
if (params.minDate) {
666+
let minDate = new Date(params.minDate);
667+
minDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
668+
if (targetDate < minDate.getTime()) {
669+
return false;
670+
}
665671
}
666672
const currentDate = new Date(calendar.currentYear, calendar.currentMonth).getTime();
667673
const dir = targetDate > currentDate ? 'next' : 'prev';
@@ -1126,7 +1132,9 @@ class Calendar extends Framework7Class {
11261132
onOpen() {
11271133
const calendar = this;
11281134
const { initialized, $el, app, $inputEl, inline, value, params } = calendar;
1135+
calendar.closing = false;
11291136
calendar.opened = true;
1137+
calendar.opening = true;
11301138

11311139
// Init main events
11321140
calendar.attachCalendarEvents();
@@ -1178,6 +1186,7 @@ class Calendar extends Framework7Class {
11781186
}
11791187
onOpened() {
11801188
const calendar = this;
1189+
calendar.opening = false;
11811190
if (calendar.$el) {
11821191
calendar.$el.trigger('calendar:opened', calendar);
11831192
}
@@ -1189,6 +1198,8 @@ class Calendar extends Framework7Class {
11891198
onClose() {
11901199
const calendar = this;
11911200
const app = calendar.app;
1201+
calendar.opening = false;
1202+
calendar.closing = true;
11921203

11931204
if (calendar.$inputEl && app.theme === 'md') {
11941205
calendar.$inputEl.trigger('blur');
@@ -1208,6 +1219,7 @@ class Calendar extends Framework7Class {
12081219
onClosed() {
12091220
const calendar = this;
12101221
calendar.opened = false;
1222+
calendar.closing = false;
12111223

12121224
if (!calendar.inline) {
12131225
Utils.nextTick(() => {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
1111
margin: 10px;
1212
}
13+
.card-outline {
14+
box-shadow: none;
15+
border: 1px solid rgba(0,0,0,0.12);
16+
}
1317
.card-header, .card-footer {
1418
a.link {
1519
line-height: 44px;
@@ -64,6 +68,9 @@
6468
.card {
6569
background-color: @blockBgDark;
6670
}
71+
.card-outline {
72+
border-color: #282829;
73+
}
6774
.card-header {
6875
.hairline-color(bottom, @blockBorderColorDark);
6976
}

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,17 @@
88
}
99
.card {
1010
margin: 8px;
11-
.md-depth(1);
11+
.elevation(1);
12+
}
13+
.card-outline {
14+
box-shadow: none;
15+
border: 1px solid rgba(0,0,0,0.12);
1216
}
1317
.card-header, .card-footer {
1418
a.link {
1519
.button;
1620
color:@themeColor;
17-
border-radius: 2px;
21+
border-radius: 4px;
1822
line-height: 36px;
1923
height: 36px;
2024
text-transform: uppercase;
@@ -23,6 +27,8 @@
2327
border: none;
2428
transition-duration: 300ms;
2529
transform: translate3d(0,0,0);
30+
font-weight: 500;
31+
letter-spacing: 0.03em;
2632
&.active-state {
2733
background: rgba(0,0,0,0.1);
2834
}
@@ -61,6 +67,9 @@
6167
.card {
6268
background-color: @blockBgDark;
6369
}
70+
.card-outline {
71+
border-color: #282829;
72+
}
6473
.card-header {
6574
.hairline-color(bottom, @blockBorderColorDark);
6675
}

‎packages/core/components/card/card.less

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
.card {
99
background: #fff;
1010
position: relative;
11-
border-radius: 2px;
11+
border-radius: 4px;
1212
font-size: 14px;
1313
.list, .block {
1414
margin: 0;
@@ -58,14 +58,14 @@
5858
}
5959
}
6060
.card-header {
61-
border-radius: 2px 2px 0 0;
61+
border-radius: 4px 4px 0 0;
6262
.hairline(bottom, #e1e1e1);
6363
&.no-hairline {
6464
.hairline-remove(bottom);
6565
}
6666
}
6767
.card-footer {
68-
border-radius: 0 0 2px 2px;
68+
border-radius: 0 0 4px 4px;
6969
.hairline(top, #e1e1e1);
7070
&.no-hairline {
7171
.hairline-remove(top);

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

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@
22
@import (multiple) '../../less/colors-ios.less';
33

44
.chip {
5-
font-size: 14px;
6-
color: #fff;
7-
background: rgba(0, 0, 0, 0.37);
8-
height: 23px;
9-
line-height: 23px;
5+
font-size: 13px;
6+
color: #000;
7+
background: rgba(0, 0, 0, 0.12);
8+
height: 24px;
109
border-radius: 12px;
11-
padding: 0 6px;
10+
padding: 0 10px;
11+
}
12+
.chip-outline {
13+
background: none;
14+
border: 1px solid rgba(0, 0, 0, 0.12);
1215
}
1316
.chip-media {
14-
width: 23px;
15-
height: 23px;
17+
width: 24px;
18+
height: 24px;
1619
vertical-align: middle;
1720
border-radius: 50%;
1821
text-align: center;
@@ -21,13 +24,13 @@
2124
font-size: 12px;
2225
box-sizing: border-box;
2326
.ltr({
24-
margin-left: -6px;
27+
margin-left: -10px;
2528
+ .chip-label {
2629
margin-left: 4px;
2730
}
2831
});
2932
.rtl({
30-
margin-right: -6px;
33+
margin-right: -10px;
3134
+ .chip-label {
3235
margin-right: 4px;
3336
}
@@ -39,31 +42,45 @@
3942
}
4043
}
4144
.chip-delete {
42-
width: 23px;
43-
height: 23px;
44-
line-height: 23px;
45-
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='#fff'/><line stroke='#000' stroke-width='2' stroke-miterlimit='10' x1='8' y1='8' x2='20' y2='20'/><line fill='none' stroke='#000' stroke-width='2' stroke-miterlimit='10' x1='20' y1='8' x2='8' y2='20'/></svg>");
45+
width: 24px;
46+
height: 24px;
47+
line-height: 24px;
48+
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='#000'/><line stroke='#fff' stroke-width='3' stroke-miterlimit='10' x1='8' y1='8' x2='20' y2='20'/><line fill='none' stroke='#fff' stroke-width='3' stroke-miterlimit='10' x1='20' y1='8' x2='8' y2='20'/></svg>");
4649
background-position: center;
47-
background-size: 13px 13px;
48-
opacity: 0.7;
50+
background-size: 14px 14px;
51+
opacity: 0.54;
4952
.ltr({
50-
margin-right: -6px;
53+
margin-right: -10px;
5154
});
5255
.rtl({
53-
margin-left: -6px;
56+
margin-left: -10px;
5457
});
5558
}
5659
// Dark Theme
5760
& when (@includeDarkTheme) {
5861
.theme-dark {
5962
.chip {
6063
background-color: #333;
64+
color: #fff;
65+
}
66+
.chip-outline {
67+
background: none;
68+
border-color: #333;
69+
}
70+
.chip-delete {
71+
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><circle cx='14' cy='14' r='14' fill='#fff'/><line stroke='#000' stroke-width='3' stroke-miterlimit='10' x1='8' y1='8' x2='20' y2='20'/><line fill='none' stroke='#000' stroke-width='3' stroke-miterlimit='10' x1='20' y1='8' x2='8' y2='20'/></svg>");
6172
}
6273
}
6374
}
6475
.color-loop({
6576
.chip.color-@{colorName} {
6677
background: @colorValue;
78+
color: #fff;
79+
&.chip-outline {
80+
background: none;
81+
border-color: @colorValue;
82+
color: @colorValue;
83+
}
6784
}
6885
});
6986
}

0 commit comments

Comments
 (0)