@autobest-ui/components 1.1.2 → 1.2.1

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.
Files changed (106) hide show
  1. package/README.md +10 -10
  2. package/esm/accordion/__stories__/style.scss +58 -58
  3. package/esm/affix/__stories__/style.scss +13 -13
  4. package/esm/affix/style/index.scss +34 -34
  5. package/esm/base.scss +42 -42
  6. package/esm/carousel/__stories__/style.scss +41 -41
  7. package/esm/carousel/index.d.ts +21 -13
  8. package/esm/carousel/index.js +77 -44
  9. package/esm/carousel/style/index.css +1 -1
  10. package/esm/carousel/style/index.scss +43 -37
  11. package/esm/checkbox/style/index.scss +117 -117
  12. package/esm/collapse/__stories__/style.scss +18 -18
  13. package/esm/collapse/style/index.scss +42 -42
  14. package/esm/confirm/style/index.scss +44 -44
  15. package/esm/date-picker/calendar/grid/index.scss +85 -85
  16. package/esm/date-picker/calendar/index.scss +57 -57
  17. package/esm/date-picker/style/index.scss +18 -18
  18. package/esm/drawer/style/index.scss +44 -44
  19. package/esm/ellipsis/style/index.scss +35 -35
  20. package/esm/guide/__stories__/style.scss +13 -13
  21. package/esm/guide/style/index.scss +17 -17
  22. package/esm/icon/__stories__/style.scss +39 -39
  23. package/esm/icon/style/index.scss +6 -6
  24. package/esm/index.d.ts +1 -1
  25. package/esm/index.js +1 -1
  26. package/esm/input-number/style/index.scss +86 -86
  27. package/esm/lazy-image/__stories__/style.scss +9 -9
  28. package/esm/lazy-image/style/index.scss +24 -24
  29. package/esm/link-list/style/index.scss +125 -125
  30. package/esm/loading/style/index.scss +30 -30
  31. package/esm/loading-bar/style/index.scss +62 -62
  32. package/esm/loading-container/__stories__/style.scss +5 -5
  33. package/esm/loading-container/style/index.scss +27 -27
  34. package/esm/loading-icon/style/index.scss +23 -23
  35. package/esm/mask/style/index.scss +34 -34
  36. package/esm/message/style/index.scss +70 -70
  37. package/esm/modal/style/index.scss +112 -112
  38. package/esm/move/__stories__/style.scss +6 -6
  39. package/esm/move/style/index.scss +7 -7
  40. package/esm/popover/__stories__/style.scss +15 -15
  41. package/esm/popover/style/index.scss +59 -59
  42. package/esm/select/__stories__/style.scss +8 -8
  43. package/esm/select/style/index.scss +126 -126
  44. package/esm/show-more/style/index.scss +22 -22
  45. package/esm/skeleton/__stories__/style.scss +2 -2
  46. package/esm/skeleton/style/index.scss +26 -26
  47. package/esm/style.css +16 -16
  48. package/esm/table/__stories__/style.scss +33 -33
  49. package/esm/table/style/index.scss +51 -51
  50. package/esm/tabs/__stories__/style.scss +8 -8
  51. package/esm/tabs/style/index.scss +62 -62
  52. package/esm/tooltip/style/index.scss +61 -61
  53. package/esm/trigger/style/index.scss +79 -79
  54. package/lib/accordion/__stories__/style.scss +58 -58
  55. package/lib/affix/__stories__/style.scss +13 -13
  56. package/lib/affix/style/index.scss +34 -34
  57. package/lib/base.scss +42 -42
  58. package/lib/carousel/__stories__/style.scss +41 -41
  59. package/lib/carousel/index.d.ts +21 -13
  60. package/lib/carousel/index.js +80 -45
  61. package/lib/carousel/style/index.css +1 -1
  62. package/lib/carousel/style/index.scss +43 -37
  63. package/lib/checkbox/style/index.scss +117 -117
  64. package/lib/collapse/__stories__/style.scss +18 -18
  65. package/lib/collapse/style/index.scss +42 -42
  66. package/lib/confirm/style/index.scss +44 -44
  67. package/lib/date-picker/calendar/grid/index.scss +85 -85
  68. package/lib/date-picker/calendar/index.scss +57 -57
  69. package/lib/date-picker/style/index.scss +18 -18
  70. package/lib/drawer/style/index.scss +44 -44
  71. package/lib/ellipsis/style/index.scss +35 -35
  72. package/lib/guide/__stories__/style.scss +13 -13
  73. package/lib/guide/style/index.scss +17 -17
  74. package/lib/icon/__stories__/style.scss +39 -39
  75. package/lib/icon/style/index.scss +6 -6
  76. package/lib/index.d.ts +1 -1
  77. package/lib/index.js +14 -2
  78. package/lib/input-number/style/index.scss +86 -86
  79. package/lib/lazy-image/__stories__/style.scss +9 -9
  80. package/lib/lazy-image/style/index.scss +24 -24
  81. package/lib/link-list/style/index.scss +125 -125
  82. package/lib/loading/style/index.scss +30 -30
  83. package/lib/loading-bar/style/index.scss +62 -62
  84. package/lib/loading-container/__stories__/style.scss +5 -5
  85. package/lib/loading-container/style/index.scss +27 -27
  86. package/lib/loading-icon/style/index.scss +23 -23
  87. package/lib/mask/style/index.scss +34 -34
  88. package/lib/message/style/index.scss +70 -70
  89. package/lib/modal/style/index.scss +112 -112
  90. package/lib/move/__stories__/style.scss +6 -6
  91. package/lib/move/style/index.scss +7 -7
  92. package/lib/popover/__stories__/style.scss +15 -15
  93. package/lib/popover/style/index.scss +59 -59
  94. package/lib/select/__stories__/style.scss +8 -8
  95. package/lib/select/style/index.scss +126 -126
  96. package/lib/show-more/style/index.scss +22 -22
  97. package/lib/skeleton/__stories__/style.scss +2 -2
  98. package/lib/skeleton/style/index.scss +26 -26
  99. package/lib/style.css +16 -16
  100. package/lib/table/__stories__/style.scss +33 -33
  101. package/lib/table/style/index.scss +51 -51
  102. package/lib/tabs/__stories__/style.scss +8 -8
  103. package/lib/tabs/style/index.scss +62 -62
  104. package/lib/tooltip/style/index.scss +61 -61
  105. package/lib/trigger/style/index.scss +79 -79
  106. package/package.json +2 -2
@@ -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,59 +1,59 @@
1
- $namespace: accordion-demo;
2
-
3
- .demo-accordion {
4
- margin: .5rem auto;
5
- width: 5rem;
6
- display: flex;
7
- justify-content: center;
8
- flex-direction: column;
9
- }
10
-
11
- .#{$namespace} {
12
- &-wrap {
13
- width: 3rem;
14
- }
15
-
16
- &-text {
17
- height: .3rem;
18
- }
19
-
20
- &-title {
21
- display: block;
22
- padding: .1rem 0;
23
- background-color: #b0b0b0;
24
- color: #f7f7f7;
25
- cursor: pointer;
26
- }
27
-
28
- &-a-content {
29
- > li {
30
- padding: .1rem 0;
31
- border-top: dotted 1px #808080;
32
-
33
- &:first-child {
34
- border: none;
35
- cursor: pointer;
36
- }
37
-
38
- > a {
39
- color: #333;
40
- }
41
- }
42
- }
43
-
44
- &-d-content {
45
- padding-left: .1rem;
46
-
47
- .ab-collapse {
48
- padding-left: .2rem;
49
- }
50
- }
51
-
52
- &-d-title {
53
- background-color: #808080;
54
- display: block;
55
- padding: .1rem 0;
56
- color: #f7f7f7;
57
- cursor: pointer;
58
- }
1
+ $namespace: accordion-demo;
2
+
3
+ .demo-accordion {
4
+ margin: .5rem auto;
5
+ width: 5rem;
6
+ display: flex;
7
+ justify-content: center;
8
+ flex-direction: column;
9
+ }
10
+
11
+ .#{$namespace} {
12
+ &-wrap {
13
+ width: 3rem;
14
+ }
15
+
16
+ &-text {
17
+ height: .3rem;
18
+ }
19
+
20
+ &-title {
21
+ display: block;
22
+ padding: .1rem 0;
23
+ background-color: #b0b0b0;
24
+ color: #f7f7f7;
25
+ cursor: pointer;
26
+ }
27
+
28
+ &-a-content {
29
+ > li {
30
+ padding: .1rem 0;
31
+ border-top: dotted 1px #808080;
32
+
33
+ &:first-child {
34
+ border: none;
35
+ cursor: pointer;
36
+ }
37
+
38
+ > a {
39
+ color: #333;
40
+ }
41
+ }
42
+ }
43
+
44
+ &-d-content {
45
+ padding-left: .1rem;
46
+
47
+ .ab-collapse {
48
+ padding-left: .2rem;
49
+ }
50
+ }
51
+
52
+ &-d-title {
53
+ background-color: #808080;
54
+ display: block;
55
+ padding: .1rem 0;
56
+ color: #f7f7f7;
57
+ cursor: pointer;
58
+ }
59
59
  }
@@ -1,13 +1,13 @@
1
- .affix-demo {
2
- height: 200vh;
3
- overflow: auto;
4
- width: 1000px;
5
- max-width: 100%;
6
- margin: auto;
7
-
8
- .affix-wrap {
9
- height: 500px;
10
- width: 100%;
11
- background-color: #D1D5DB;
12
- }
13
- }
1
+ .affix-demo {
2
+ height: 200vh;
3
+ overflow: auto;
4
+ width: 1000px;
5
+ max-width: 100%;
6
+ margin: auto;
7
+
8
+ .affix-wrap {
9
+ height: 500px;
10
+ width: 100%;
11
+ background-color: #D1D5DB;
12
+ }
13
+ }
@@ -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
+ }
@@ -1,41 +1,41 @@
1
- .demo-carousel {
2
- margin: auto;
3
- position: relative;
4
-
5
- p {
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- font-size: 32px;
10
- margin: 0;
11
- color: #F3F4F6;
12
- height: 225px;
13
- border-radius: 3px;
14
- }
15
- }
16
-
17
- .ab-carousel {
18
- position: relative;
19
- }
20
-
21
- .button-prev, .button-next {
22
- position: absolute;
23
- box-sizing: border-box;
24
- cursor: pointer;
25
- font-size: 32px;
26
- top: 50%;
27
- margin-top: -15px;
28
- width: 30px;
29
- height: 30px;
30
- color: #F3F4F6;
31
- }
32
-
33
- .button-prev {
34
- left: 5px;
35
- top: 50%;
36
- }
37
-
38
- .button-next {
39
- right: 5px;
40
- top: 50%;
41
- }
1
+ .demo-carousel {
2
+ margin: auto;
3
+ position: relative;
4
+
5
+ p {
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ font-size: 32px;
10
+ margin: 0;
11
+ color: #F3F4F6;
12
+ height: 225px;
13
+ border-radius: 3px;
14
+ }
15
+ }
16
+
17
+ .ab-carousel {
18
+ position: relative;
19
+ }
20
+
21
+ .button-prev, .button-next {
22
+ position: absolute;
23
+ box-sizing: border-box;
24
+ cursor: pointer;
25
+ font-size: 32px;
26
+ top: 50%;
27
+ margin-top: -15px;
28
+ width: 30px;
29
+ height: 30px;
30
+ color: #F3F4F6;
31
+ }
32
+
33
+ .button-prev {
34
+ left: 5px;
35
+ top: 50%;
36
+ }
37
+
38
+ .button-next {
39
+ right: 5px;
40
+ top: 50%;
41
+ }