@autobest-ui/components 1.1.4 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -10
- package/esm/affix/style/index.scss +34 -34
- package/esm/base.scss +42 -42
- package/esm/carousel/style/index.scss +37 -37
- package/esm/checkbox/style/index.scss +117 -117
- package/esm/collapse/style/index.scss +42 -42
- package/esm/confirm/style/index.scss +44 -44
- package/esm/date-picker/calendar/grid/index.scss +85 -85
- package/esm/date-picker/calendar/index.d.ts +4 -0
- package/esm/date-picker/calendar/index.js +1 -1
- package/esm/date-picker/calendar/index.scss +57 -57
- package/esm/date-picker/index.d.ts +17 -6
- package/esm/date-picker/index.js +49 -8
- package/esm/date-picker/style/index.css +1 -1
- package/esm/date-picker/style/index.scss +23 -19
- package/esm/drawer/style/index.scss +44 -44
- package/esm/ellipsis/style/index.scss +35 -35
- package/esm/guide/style/index.scss +17 -17
- package/esm/icon/style/index.scss +6 -6
- package/esm/index.d.ts +2 -1
- package/esm/input-number/index.d.ts +30 -17
- package/esm/input-number/index.js +116 -36
- package/esm/input-number/style/index.scss +86 -86
- package/esm/lazy-image/style/index.scss +24 -24
- package/esm/link-list/style/index.scss +125 -125
- package/esm/loading/style/index.scss +30 -30
- package/esm/loading-bar/style/index.scss +62 -62
- package/esm/loading-container/style/index.scss +27 -27
- package/esm/loading-icon/style/index.scss +23 -23
- package/esm/mask/style/index.scss +34 -34
- package/esm/message/style/index.scss +70 -70
- package/esm/modal/style/index.scss +112 -112
- package/esm/move/style/index.scss +7 -7
- package/esm/popover/style/index.scss +59 -59
- package/esm/select/style/index.scss +126 -126
- package/esm/show-more/style/index.scss +22 -22
- package/esm/skeleton/style/index.scss +26 -26
- package/esm/style.css +5 -19
- package/esm/table/body/BodyRow.d.ts +9 -3
- package/esm/table/body/BodyRow.js +6 -2
- package/esm/table/body/index.d.ts +2 -2
- package/esm/table/body/index.js +8 -7
- package/esm/table/header/HeaderCell.d.ts +2 -2
- package/esm/table/header/HeaderRow.d.ts +2 -2
- package/esm/table/index.d.ts +4 -4
- package/esm/table/index.js +3 -3
- package/esm/table/interface.d.ts +9 -3
- package/esm/table/style/index.scss +51 -51
- package/esm/tabs/style/index.scss +62 -62
- package/esm/tooltip/style/index.scss +61 -61
- package/esm/trigger/style/index.scss +79 -79
- package/lib/affix/style/index.scss +34 -34
- package/lib/base.scss +42 -42
- package/lib/carousel/style/index.scss +37 -37
- package/lib/checkbox/style/index.scss +117 -117
- package/lib/collapse/style/index.scss +42 -42
- package/lib/confirm/style/index.scss +44 -44
- package/lib/date-picker/calendar/grid/index.scss +85 -85
- package/lib/date-picker/calendar/index.d.ts +4 -0
- package/lib/date-picker/calendar/index.js +1 -1
- package/lib/date-picker/calendar/index.scss +57 -57
- package/lib/date-picker/index.d.ts +17 -6
- package/lib/date-picker/index.js +49 -8
- package/lib/date-picker/style/index.css +1 -1
- package/lib/date-picker/style/index.scss +23 -19
- package/lib/drawer/style/index.scss +44 -44
- package/lib/ellipsis/style/index.scss +35 -35
- package/lib/guide/style/index.scss +17 -17
- package/lib/icon/style/index.scss +6 -6
- package/lib/index.d.ts +2 -1
- package/lib/input-number/index.d.ts +30 -17
- package/lib/input-number/index.js +116 -36
- package/lib/input-number/style/index.scss +86 -86
- package/lib/lazy-image/style/index.scss +24 -24
- package/lib/link-list/style/index.scss +125 -125
- package/lib/loading/style/index.scss +30 -30
- package/lib/loading-bar/style/index.scss +62 -62
- package/lib/loading-container/style/index.scss +27 -27
- package/lib/loading-icon/style/index.scss +23 -23
- package/lib/mask/style/index.scss +34 -34
- package/lib/message/style/index.scss +70 -70
- package/lib/modal/style/index.scss +112 -112
- package/lib/move/style/index.scss +7 -7
- package/lib/popover/style/index.scss +59 -59
- package/lib/select/style/index.scss +126 -126
- package/lib/show-more/style/index.scss +22 -22
- package/lib/skeleton/style/index.scss +26 -26
- package/lib/style.css +5 -19
- package/lib/table/body/BodyRow.d.ts +9 -3
- package/lib/table/body/BodyRow.js +6 -2
- package/lib/table/body/index.d.ts +2 -2
- package/lib/table/body/index.js +8 -7
- package/lib/table/header/HeaderCell.d.ts +2 -2
- package/lib/table/header/HeaderRow.d.ts +2 -2
- package/lib/table/index.d.ts +4 -4
- package/lib/table/index.js +3 -3
- package/lib/table/interface.d.ts +9 -3
- package/lib/table/style/index.scss +51 -51
- package/lib/tabs/style/index.scss +62 -62
- package/lib/tooltip/style/index.scss +61 -61
- package/lib/trigger/style/index.scss +79 -79
- package/package.json +2 -2
- package/esm/accordion/__stories__/style.css +0 -1
- package/esm/accordion/__stories__/style.scss +0 -59
- package/esm/affix/__stories__/style.css +0 -1
- package/esm/affix/__stories__/style.scss +0 -13
- package/esm/carousel/__stories__/style.css +0 -1
- package/esm/carousel/__stories__/style.scss +0 -41
- package/esm/collapse/__stories__/style.css +0 -1
- package/esm/collapse/__stories__/style.scss +0 -19
- package/esm/guide/__stories__/style.css +0 -1
- package/esm/guide/__stories__/style.scss +0 -14
- package/esm/icon/__stories__/iconNames.d.ts +0 -2
- package/esm/icon/__stories__/iconNames.js +0 -1
- package/esm/icon/__stories__/style.css +0 -1
- package/esm/icon/__stories__/style.scss +0 -40
- package/esm/lazy-image/__stories__/style.css +0 -1
- package/esm/lazy-image/__stories__/style.scss +0 -9
- package/esm/loading-container/__stories__/style.css +0 -1
- package/esm/loading-container/__stories__/style.scss +0 -6
- package/esm/move/__stories__/style.css +0 -1
- package/esm/move/__stories__/style.scss +0 -6
- package/esm/popover/__stories__/style.css +0 -1
- package/esm/popover/__stories__/style.scss +0 -16
- package/esm/select/__stories__/style.css +0 -1
- package/esm/select/__stories__/style.scss +0 -8
- package/esm/skeleton/__stories__/style.css +0 -1
- package/esm/skeleton/__stories__/style.scss +0 -3
- package/esm/table/__stories__/style.css +0 -1
- package/esm/table/__stories__/style.scss +0 -34
- package/esm/tabs/__stories__/style.css +0 -1
- package/esm/tabs/__stories__/style.scss +0 -8
- package/lib/accordion/__stories__/style.css +0 -1
- package/lib/accordion/__stories__/style.scss +0 -59
- package/lib/affix/__stories__/style.css +0 -1
- package/lib/affix/__stories__/style.scss +0 -13
- package/lib/carousel/__stories__/style.css +0 -1
- package/lib/carousel/__stories__/style.scss +0 -41
- package/lib/collapse/__stories__/style.css +0 -1
- package/lib/collapse/__stories__/style.scss +0 -19
- package/lib/guide/__stories__/style.css +0 -1
- package/lib/guide/__stories__/style.scss +0 -14
- package/lib/icon/__stories__/iconNames.d.ts +0 -2
- package/lib/icon/__stories__/iconNames.js +0 -8
- package/lib/icon/__stories__/style.css +0 -1
- package/lib/icon/__stories__/style.scss +0 -40
- package/lib/lazy-image/__stories__/style.css +0 -1
- package/lib/lazy-image/__stories__/style.scss +0 -9
- package/lib/loading-container/__stories__/style.css +0 -1
- package/lib/loading-container/__stories__/style.scss +0 -6
- package/lib/move/__stories__/style.css +0 -1
- package/lib/move/__stories__/style.scss +0 -6
- package/lib/popover/__stories__/style.css +0 -1
- package/lib/popover/__stories__/style.scss +0 -16
- package/lib/select/__stories__/style.css +0 -1
- package/lib/select/__stories__/style.scss +0 -8
- package/lib/skeleton/__stories__/style.css +0 -1
- package/lib/skeleton/__stories__/style.scss +0 -3
- package/lib/table/__stories__/style.css +0 -1
- package/lib/table/__stories__/style.scss +0 -34
- package/lib/tabs/__stories__/style.css +0 -1
- package/lib/tabs/__stories__/style.scss +0 -8
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
$namespace: ab-table;
|
|
2
|
-
|
|
3
|
-
.#{$namespace} {
|
|
4
|
-
overflow-x: auto;
|
|
5
|
-
|
|
6
|
-
table {
|
|
7
|
-
border-spacing: 0;
|
|
8
|
-
width: 100%;
|
|
9
|
-
table-layout: fixed;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&-header {
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
|
|
15
|
-
table {
|
|
16
|
-
width: calc(100% - .17rem);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&-body {
|
|
21
|
-
overflow: auto scroll;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&-checkbox {
|
|
25
|
-
width: .32rem;
|
|
26
|
-
text-align: center;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&-title {
|
|
30
|
-
display: flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
text-align: left;
|
|
33
|
-
|
|
34
|
-
&.#{$namespace}-point {
|
|
35
|
-
cursor: pointer;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&-arrow {
|
|
40
|
-
padding: 0 .05rem;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@media only screen and (max-width: 767px) {
|
|
45
|
-
.#{$namespace} {
|
|
46
|
-
&-header {
|
|
47
|
-
table {
|
|
48
|
-
width: 100%;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
1
|
+
$namespace: ab-table;
|
|
2
|
+
|
|
3
|
+
.#{$namespace} {
|
|
4
|
+
overflow-x: auto;
|
|
5
|
+
|
|
6
|
+
table {
|
|
7
|
+
border-spacing: 0;
|
|
8
|
+
width: 100%;
|
|
9
|
+
table-layout: fixed;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&-header {
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
|
|
15
|
+
table {
|
|
16
|
+
width: calc(100% - .17rem);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-body {
|
|
21
|
+
overflow: auto scroll;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&-checkbox {
|
|
25
|
+
width: .32rem;
|
|
26
|
+
text-align: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&-title {
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
text-align: left;
|
|
33
|
+
|
|
34
|
+
&.#{$namespace}-point {
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&-arrow {
|
|
40
|
+
padding: 0 .05rem;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media only screen and (max-width: 767px) {
|
|
45
|
+
.#{$namespace} {
|
|
46
|
+
&-header {
|
|
47
|
+
table {
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
52
|
}
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
$namespace: ab-tabs;
|
|
2
|
-
|
|
3
|
-
.#{$namespace} {
|
|
4
|
-
position: relative;
|
|
5
|
-
display: flex;
|
|
6
|
-
|
|
7
|
-
&-item {
|
|
8
|
-
cursor: pointer;
|
|
9
|
-
|
|
10
|
-
&.#{$namespace}-active {
|
|
11
|
-
font-weight: bold;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
&.#{$namespace}-disabled {
|
|
15
|
-
cursor: not-allowed;
|
|
16
|
-
opacity: 0.7;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&-bar {
|
|
21
|
-
position: absolute;
|
|
22
|
-
background-color: #b22222;
|
|
23
|
-
transition: all .25s;
|
|
24
|
-
width: 0;
|
|
25
|
-
height: 0;
|
|
26
|
-
overflow: hidden;
|
|
27
|
-
margin: 0;
|
|
28
|
-
padding: 0;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&-top, &-bottom {
|
|
32
|
-
flex-direction: row;
|
|
33
|
-
|
|
34
|
-
> .#{$namespace}-bar {
|
|
35
|
-
left: 0;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&-left, &-right {
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
|
|
42
|
-
> .#{$namespace}-bar {
|
|
43
|
-
top: 0;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&-top > &-bar {
|
|
48
|
-
bottom: 0;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&-bottom > &-bar {
|
|
52
|
-
top: 0;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&-left > &-bar {
|
|
56
|
-
right: 0;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&-right > &-bar {
|
|
60
|
-
left: 0;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
1
|
+
$namespace: ab-tabs;
|
|
2
|
+
|
|
3
|
+
.#{$namespace} {
|
|
4
|
+
position: relative;
|
|
5
|
+
display: flex;
|
|
6
|
+
|
|
7
|
+
&-item {
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
|
|
10
|
+
&.#{$namespace}-active {
|
|
11
|
+
font-weight: bold;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&.#{$namespace}-disabled {
|
|
15
|
+
cursor: not-allowed;
|
|
16
|
+
opacity: 0.7;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-bar {
|
|
21
|
+
position: absolute;
|
|
22
|
+
background-color: #b22222;
|
|
23
|
+
transition: all .25s;
|
|
24
|
+
width: 0;
|
|
25
|
+
height: 0;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&-top, &-bottom {
|
|
32
|
+
flex-direction: row;
|
|
33
|
+
|
|
34
|
+
> .#{$namespace}-bar {
|
|
35
|
+
left: 0;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&-left, &-right {
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
|
|
42
|
+
> .#{$namespace}-bar {
|
|
43
|
+
top: 0;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&-top > &-bar {
|
|
48
|
+
bottom: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&-bottom > &-bar {
|
|
52
|
+
top: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&-left > &-bar {
|
|
56
|
+
right: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-right > &-bar {
|
|
60
|
+
left: 0;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
$namespace: ab-tooltip;
|
|
2
|
-
|
|
3
|
-
.#{$namespace} {
|
|
4
|
-
&-wrap {
|
|
5
|
-
background-clip: padding-box;
|
|
6
|
-
padding: .08rem .11rem .05rem;
|
|
7
|
-
min-width: 210px;
|
|
8
|
-
border-radius: 4px;
|
|
9
|
-
line-height: 1.4;
|
|
10
|
-
border: 1px solid #906C00;
|
|
11
|
-
box-shadow: 1px 1px 5px -1px #000;
|
|
12
|
-
background-color: #FFFAEC;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&-inner {
|
|
16
|
-
position: relative;
|
|
17
|
-
width: 100%;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
font-size: .12rem;
|
|
20
|
-
|
|
21
|
-
&-expand {
|
|
22
|
-
padding-right: .1rem;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&-arrow {
|
|
27
|
-
position: absolute;
|
|
28
|
-
display: block;
|
|
29
|
-
width: 8px;
|
|
30
|
-
height: 8px;
|
|
31
|
-
border-top-color: transparent;
|
|
32
|
-
border-left-color: transparent;
|
|
33
|
-
border-style: solid;
|
|
34
|
-
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
|
|
35
|
-
background-color: #FFFAEC;
|
|
36
|
-
border-right-color: #906C00;
|
|
37
|
-
border-bottom-color: #906C00;
|
|
38
|
-
border-width: 1px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&-close {
|
|
42
|
-
position: absolute;
|
|
43
|
-
right: .02rem;
|
|
44
|
-
top: .05rem;
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
padding: 0 .05rem;
|
|
47
|
-
color: #bfbfbf;
|
|
48
|
-
font-size: 0.2rem;
|
|
49
|
-
line-height: 1;
|
|
50
|
-
z-index: 2;
|
|
51
|
-
|
|
52
|
-
&:hover {
|
|
53
|
-
color: #4A4A4A;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@media only screen and (max-width: 767px) {
|
|
59
|
-
.#{$namespace}-wrap {
|
|
60
|
-
width: calc(100% - .3rem);
|
|
61
|
-
}
|
|
1
|
+
$namespace: ab-tooltip;
|
|
2
|
+
|
|
3
|
+
.#{$namespace} {
|
|
4
|
+
&-wrap {
|
|
5
|
+
background-clip: padding-box;
|
|
6
|
+
padding: .08rem .11rem .05rem;
|
|
7
|
+
min-width: 210px;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
line-height: 1.4;
|
|
10
|
+
border: 1px solid #906C00;
|
|
11
|
+
box-shadow: 1px 1px 5px -1px #000;
|
|
12
|
+
background-color: #FFFAEC;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&-inner {
|
|
16
|
+
position: relative;
|
|
17
|
+
width: 100%;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
font-size: .12rem;
|
|
20
|
+
|
|
21
|
+
&-expand {
|
|
22
|
+
padding-right: .1rem;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-arrow {
|
|
27
|
+
position: absolute;
|
|
28
|
+
display: block;
|
|
29
|
+
width: 8px;
|
|
30
|
+
height: 8px;
|
|
31
|
+
border-top-color: transparent;
|
|
32
|
+
border-left-color: transparent;
|
|
33
|
+
border-style: solid;
|
|
34
|
+
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
|
|
35
|
+
background-color: #FFFAEC;
|
|
36
|
+
border-right-color: #906C00;
|
|
37
|
+
border-bottom-color: #906C00;
|
|
38
|
+
border-width: 1px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&-close {
|
|
42
|
+
position: absolute;
|
|
43
|
+
right: .02rem;
|
|
44
|
+
top: .05rem;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
padding: 0 .05rem;
|
|
47
|
+
color: #bfbfbf;
|
|
48
|
+
font-size: 0.2rem;
|
|
49
|
+
line-height: 1;
|
|
50
|
+
z-index: 2;
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
color: #4A4A4A;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media only screen and (max-width: 767px) {
|
|
59
|
+
.#{$namespace}-wrap {
|
|
60
|
+
width: calc(100% - .3rem);
|
|
61
|
+
}
|
|
62
62
|
}
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
$namespace: ab-trigger;
|
|
2
|
-
$popupFade: #{$namespace}-fade;
|
|
3
|
-
|
|
4
|
-
.#{$namespace} {
|
|
5
|
-
&-wrap {
|
|
6
|
-
position: absolute;
|
|
7
|
-
top: 0;
|
|
8
|
-
left: 0;
|
|
9
|
-
z-index: 101;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&-wrap.#{$namespace}-hidden {
|
|
13
|
-
display: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&-mask {
|
|
17
|
-
position: fixed;
|
|
18
|
-
top: 0;
|
|
19
|
-
left: 0;
|
|
20
|
-
bottom: 0;
|
|
21
|
-
right: 0;
|
|
22
|
-
z-index: 101;
|
|
23
|
-
background-color: transparent;
|
|
24
|
-
display: none;
|
|
25
|
-
|
|
26
|
-
&.#{$namespace}-mask-show {
|
|
27
|
-
display: block;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.#{$popupFade} {
|
|
33
|
-
&-enter, &-hr-enter, &-appear, &-hr-appear {
|
|
34
|
-
opacity: 0;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&-enter, &-appear {
|
|
38
|
-
transform: scale(0.7);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&-hr-enter, &-hr-appear {
|
|
42
|
-
opacity: 0;
|
|
43
|
-
transform: scaleY(0.7);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&-enter-active, &-hr-enter-active, &-appear-active, &-hr-appear-active {
|
|
47
|
-
opacity: 1;
|
|
48
|
-
transition: opacity 200ms, transform 200ms;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&-enter-active, &-appear-active {
|
|
52
|
-
transform: scale(1);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&-hr-enter-active, &-hr-appear-active {
|
|
56
|
-
transform: scaleY(1);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&-exit, &-hr-exit {
|
|
60
|
-
opacity: 1;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
&-exit-active, &-hr-exit-active {
|
|
64
|
-
opacity: 0;
|
|
65
|
-
transition: opacity 200ms, transform 200ms;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&-exit-active {
|
|
69
|
-
transform: scale(0.7);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&-hr-exit-active {
|
|
73
|
-
transform: scaleY(0.7);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&-exit-done, &-hr-exit-done {
|
|
77
|
-
display: none;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
1
|
+
$namespace: ab-trigger;
|
|
2
|
+
$popupFade: #{$namespace}-fade;
|
|
3
|
+
|
|
4
|
+
.#{$namespace} {
|
|
5
|
+
&-wrap {
|
|
6
|
+
position: absolute;
|
|
7
|
+
top: 0;
|
|
8
|
+
left: 0;
|
|
9
|
+
z-index: 101;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&-wrap.#{$namespace}-hidden {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&-mask {
|
|
17
|
+
position: fixed;
|
|
18
|
+
top: 0;
|
|
19
|
+
left: 0;
|
|
20
|
+
bottom: 0;
|
|
21
|
+
right: 0;
|
|
22
|
+
z-index: 101;
|
|
23
|
+
background-color: transparent;
|
|
24
|
+
display: none;
|
|
25
|
+
|
|
26
|
+
&.#{$namespace}-mask-show {
|
|
27
|
+
display: block;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.#{$popupFade} {
|
|
33
|
+
&-enter, &-hr-enter, &-appear, &-hr-appear {
|
|
34
|
+
opacity: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&-enter, &-appear {
|
|
38
|
+
transform: scale(0.7);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&-hr-enter, &-hr-appear {
|
|
42
|
+
opacity: 0;
|
|
43
|
+
transform: scaleY(0.7);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&-enter-active, &-hr-enter-active, &-appear-active, &-hr-appear-active {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
transition: opacity 200ms, transform 200ms;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&-enter-active, &-appear-active {
|
|
52
|
+
transform: scale(1);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&-hr-enter-active, &-hr-appear-active {
|
|
56
|
+
transform: scaleY(1);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-exit, &-hr-exit {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&-exit-active, &-hr-exit-active {
|
|
64
|
+
opacity: 0;
|
|
65
|
+
transition: opacity 200ms, transform 200ms;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&-exit-active {
|
|
69
|
+
transform: scale(0.7);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&-hr-exit-active {
|
|
73
|
+
transform: scaleY(0.7);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&-exit-done, &-hr-exit-done {
|
|
77
|
+
display: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
$namespace: ab-affix;
|
|
2
|
-
$customFade: #{$namespace}-fade;
|
|
3
|
-
|
|
4
|
-
.#{$namespace} {
|
|
5
|
-
&, &-custom {
|
|
6
|
-
z-index: 100;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
&-custom {
|
|
10
|
-
position: fixed;
|
|
11
|
-
transition: transform 200ms cubic-bezier(.7, .3, .1, 1);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.#{$customFade} {
|
|
16
|
-
&-enter, &-appear {
|
|
17
|
-
transform: translate(0, -100%)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&-enter-active, &-appear-active {
|
|
21
|
-
transform: translate(0, 0);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&-exit {
|
|
25
|
-
transform: translate(0, 0);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&-exit-active {
|
|
29
|
-
transform: translate(0, -100%)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
&-exit-done {
|
|
33
|
-
display: none;
|
|
34
|
-
}
|
|
1
|
+
$namespace: ab-affix;
|
|
2
|
+
$customFade: #{$namespace}-fade;
|
|
3
|
+
|
|
4
|
+
.#{$namespace} {
|
|
5
|
+
&, &-custom {
|
|
6
|
+
z-index: 100;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&-custom {
|
|
10
|
+
position: fixed;
|
|
11
|
+
transition: transform 200ms cubic-bezier(.7, .3, .1, 1);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.#{$customFade} {
|
|
16
|
+
&-enter, &-appear {
|
|
17
|
+
transform: translate(0, -100%)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-enter-active, &-appear-active {
|
|
21
|
+
transform: translate(0, 0);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&-exit {
|
|
25
|
+
transform: translate(0, 0);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&-exit-active {
|
|
29
|
+
transform: translate(0, -100%)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&-exit-done {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
35
|
}
|
package/lib/base.scss
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
/* reset css */
|
|
2
|
-
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, a, textarea {
|
|
3
|
-
box-sizing: border-box;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
html {
|
|
7
|
-
font-size: 100px;
|
|
8
|
-
font-family: Arial, sans-serif;
|
|
9
|
-
touch-action: manipulation;
|
|
10
|
-
-ms-touch-action: manipulation;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@media only screen and (max-width: 767px) {
|
|
14
|
-
html {
|
|
15
|
-
//font-size: 24.15459vw;
|
|
16
|
-
// 暂时取消对UI自适应,而是统一成一种
|
|
17
|
-
font-size: 100px;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
body {
|
|
22
|
-
font-size: .12rem;
|
|
23
|
-
color: #333;
|
|
24
|
-
margin: 0;
|
|
25
|
-
padding: 0;
|
|
26
|
-
-webkit-font-smoothing: antialiased;
|
|
27
|
-
-moz-osx-font-smoothing: grayscale;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
a {
|
|
31
|
-
text-decoration: none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
input {
|
|
35
|
-
outline: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
ul, li {
|
|
39
|
-
padding: 0;
|
|
40
|
-
margin: 0;
|
|
41
|
-
list-style: none;
|
|
42
|
-
}
|
|
1
|
+
/* reset css */
|
|
2
|
+
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, a, textarea {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
html {
|
|
7
|
+
font-size: 100px;
|
|
8
|
+
font-family: Arial, sans-serif;
|
|
9
|
+
touch-action: manipulation;
|
|
10
|
+
-ms-touch-action: manipulation;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@media only screen and (max-width: 767px) {
|
|
14
|
+
html {
|
|
15
|
+
//font-size: 24.15459vw;
|
|
16
|
+
// 暂时取消对UI自适应,而是统一成一种
|
|
17
|
+
font-size: 100px;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body {
|
|
22
|
+
font-size: .12rem;
|
|
23
|
+
color: #333;
|
|
24
|
+
margin: 0;
|
|
25
|
+
padding: 0;
|
|
26
|
+
-webkit-font-smoothing: antialiased;
|
|
27
|
+
-moz-osx-font-smoothing: grayscale;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
a {
|
|
31
|
+
text-decoration: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
input {
|
|
35
|
+
outline: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
ul, li {
|
|
39
|
+
padding: 0;
|
|
40
|
+
margin: 0;
|
|
41
|
+
list-style: none;
|
|
42
|
+
}
|