@autobest-ui/components 1.1.1 → 1.2.0

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 (146) 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/input-number/style/index.scss +86 -86
  26. package/esm/lazy-image/__stories__/style.scss +9 -9
  27. package/esm/lazy-image/style/index.scss +24 -24
  28. package/esm/link-list/style/index.scss +125 -125
  29. package/esm/loading/style/index.scss +30 -30
  30. package/esm/loading-bar/style/index.scss +62 -62
  31. package/esm/loading-container/__stories__/style.scss +5 -5
  32. package/esm/loading-container/style/index.scss +27 -27
  33. package/esm/loading-icon/style/index.scss +23 -23
  34. package/esm/mask/style/index.scss +34 -34
  35. package/esm/message/style/index.scss +70 -70
  36. package/esm/modal/style/index.scss +112 -112
  37. package/esm/move/__stories__/style.scss +6 -6
  38. package/esm/move/style/index.scss +7 -7
  39. package/esm/popover/__stories__/style.scss +15 -15
  40. package/esm/popover/style/index.scss +59 -59
  41. package/esm/select/__stories__/style.scss +8 -8
  42. package/esm/select/style/index.scss +126 -126
  43. package/esm/show-more/style/index.scss +22 -22
  44. package/esm/skeleton/__stories__/style.scss +2 -2
  45. package/esm/skeleton/style/index.scss +26 -26
  46. package/esm/style.css +15 -15
  47. package/esm/table/__stories__/style.css +1 -1
  48. package/esm/table/__stories__/style.scss +33 -2
  49. package/esm/table/body/BodyRow.d.ts +13 -0
  50. package/esm/table/body/BodyRow.js +94 -0
  51. package/esm/table/body/CheckIcon.d.ts +16 -0
  52. package/esm/table/body/CheckIcon.js +35 -0
  53. package/esm/table/body/index.d.ts +24 -0
  54. package/esm/table/body/index.js +61 -0
  55. package/esm/table/header/CheckIcon.d.ts +13 -0
  56. package/esm/table/header/CheckIcon.js +37 -0
  57. package/esm/table/header/HeaderCell.d.ts +18 -0
  58. package/esm/table/{HeaderCell.js → header/HeaderCell.js} +11 -4
  59. package/esm/table/header/HeaderRow.d.ts +16 -0
  60. package/esm/table/header/HeaderRow.js +76 -0
  61. package/esm/table/index.d.ts +52 -27
  62. package/esm/table/index.js +178 -155
  63. package/esm/table/interface.d.ts +16 -3
  64. package/esm/table/style/index.css +1 -1
  65. package/esm/table/style/index.scss +51 -70
  66. package/esm/tabs/__stories__/style.scss +8 -8
  67. package/esm/tabs/style/index.css +1 -1
  68. package/esm/tabs/style/index.scss +62 -62
  69. package/esm/tooltip/style/index.scss +61 -61
  70. package/esm/trigger/style/index.scss +79 -79
  71. package/lib/accordion/__stories__/style.scss +58 -58
  72. package/lib/affix/__stories__/style.scss +13 -13
  73. package/lib/affix/style/index.scss +34 -34
  74. package/lib/base.scss +42 -42
  75. package/lib/carousel/__stories__/style.scss +41 -41
  76. package/lib/carousel/index.d.ts +21 -13
  77. package/lib/carousel/index.js +80 -45
  78. package/lib/carousel/style/index.css +1 -1
  79. package/lib/carousel/style/index.scss +43 -37
  80. package/lib/checkbox/style/index.scss +117 -117
  81. package/lib/collapse/__stories__/style.scss +18 -18
  82. package/lib/collapse/style/index.scss +42 -42
  83. package/lib/confirm/style/index.scss +44 -44
  84. package/lib/date-picker/calendar/grid/index.scss +85 -85
  85. package/lib/date-picker/calendar/index.scss +57 -57
  86. package/lib/date-picker/style/index.scss +18 -18
  87. package/lib/drawer/style/index.scss +44 -44
  88. package/lib/ellipsis/style/index.scss +35 -35
  89. package/lib/guide/__stories__/style.scss +13 -13
  90. package/lib/guide/style/index.scss +17 -17
  91. package/lib/icon/__stories__/style.scss +39 -39
  92. package/lib/icon/style/index.scss +6 -6
  93. package/lib/index.d.ts +1 -1
  94. package/lib/input-number/style/index.scss +86 -86
  95. package/lib/lazy-image/__stories__/style.scss +9 -9
  96. package/lib/lazy-image/style/index.scss +24 -24
  97. package/lib/link-list/style/index.scss +125 -125
  98. package/lib/loading/style/index.scss +30 -30
  99. package/lib/loading-bar/style/index.scss +62 -62
  100. package/lib/loading-container/__stories__/style.scss +5 -5
  101. package/lib/loading-container/style/index.scss +27 -27
  102. package/lib/loading-icon/style/index.scss +23 -23
  103. package/lib/mask/style/index.scss +34 -34
  104. package/lib/message/style/index.scss +70 -70
  105. package/lib/modal/style/index.scss +112 -112
  106. package/lib/move/__stories__/style.scss +6 -6
  107. package/lib/move/style/index.scss +7 -7
  108. package/lib/popover/__stories__/style.scss +15 -15
  109. package/lib/popover/style/index.scss +59 -59
  110. package/lib/select/__stories__/style.scss +8 -8
  111. package/lib/select/style/index.scss +126 -126
  112. package/lib/show-more/style/index.scss +22 -22
  113. package/lib/skeleton/__stories__/style.scss +2 -2
  114. package/lib/skeleton/style/index.scss +26 -26
  115. package/lib/style.css +15 -15
  116. package/lib/table/__stories__/style.css +1 -1
  117. package/lib/table/__stories__/style.scss +33 -2
  118. package/lib/table/body/BodyRow.d.ts +13 -0
  119. package/lib/table/body/BodyRow.js +108 -0
  120. package/lib/table/body/CheckIcon.d.ts +16 -0
  121. package/lib/table/body/CheckIcon.js +47 -0
  122. package/lib/table/body/index.d.ts +24 -0
  123. package/lib/table/body/index.js +73 -0
  124. package/lib/table/header/CheckIcon.d.ts +13 -0
  125. package/lib/table/header/CheckIcon.js +49 -0
  126. package/lib/table/header/HeaderCell.d.ts +18 -0
  127. package/lib/table/{HeaderCell.js → header/HeaderCell.js} +11 -4
  128. package/lib/table/header/HeaderRow.d.ts +16 -0
  129. package/lib/table/header/HeaderRow.js +89 -0
  130. package/lib/table/index.d.ts +52 -27
  131. package/lib/table/index.js +177 -155
  132. package/lib/table/interface.d.ts +16 -3
  133. package/lib/table/style/index.css +1 -1
  134. package/lib/table/style/index.scss +51 -70
  135. package/lib/tabs/__stories__/style.scss +8 -8
  136. package/lib/tabs/style/index.css +1 -1
  137. package/lib/tabs/style/index.scss +62 -62
  138. package/lib/tooltip/style/index.scss +61 -61
  139. package/lib/trigger/style/index.scss +79 -79
  140. package/package.json +2 -2
  141. package/esm/table/BodyCell.d.ts +0 -6
  142. package/esm/table/BodyCell.js +0 -12
  143. package/esm/table/HeaderCell.d.ts +0 -13
  144. package/lib/table/BodyCell.d.ts +0 -6
  145. package/lib/table/BodyCell.js +0 -22
  146. package/lib/table/HeaderCell.d.ts +0 -13
@@ -1 +1 @@
1
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table thead{background-color:#2b5797;color:#fff}.ab-table tbody tr:nth-child(2n){background-color:#f7f6f3}.ab-table-header{background-color:#2b5797;color:#fff;overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table tr td,.ab-table tr th{padding:.16rem}.ab-table tr td.ab-table-checkbox,.ab-table tr th.ab-table-checkbox{width:.32rem;text-align:center;padding-left:.08rem;padding-right:.08rem}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
1
+ .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
@@ -1,71 +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
- thead {
13
- background-color: #2b5797;
14
- color: #fff;
15
- }
16
-
17
- tbody tr {
18
- &:nth-child(2n) {
19
- background-color: #f7f6f3;
20
- }
21
- }
22
-
23
- &-header {
24
- background-color: #2b5797;
25
- color: #fff;
26
- overflow: hidden;
27
-
28
- table {
29
- width: calc(100% - .17rem);
30
- }
31
- }
32
-
33
- &-body {
34
- overflow: auto scroll;
35
- }
36
-
37
- tr th, tr td {
38
- padding: .16rem;
39
-
40
- &.#{$namespace}-checkbox {
41
- width: .32rem;
42
- text-align: center;
43
- padding-left: .08rem;
44
- padding-right: .08rem;
45
- }
46
- }
47
-
48
- &-title {
49
- display: flex;
50
- align-items: center;
51
- text-align: left;
52
-
53
- &.#{$namespace}-point {
54
- cursor: pointer;
55
- }
56
- }
57
-
58
- &-arrow {
59
- padding: 0 .05rem;
60
- }
61
- }
62
-
63
- @media only screen and (max-width: 767px) {
64
- .#{$namespace} {
65
- &-header {
66
- table {
67
- width: 100%;
68
- }
69
- }
70
- }
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
+ }
71
52
  }
@@ -1,8 +1,8 @@
1
- .tabs-demo {
2
- width: 500px;
3
- margin: 20px auto;
4
-
5
- .ab-tabs-item {
6
- padding: 2px 6px;
7
- }
8
- }
1
+ .tabs-demo {
2
+ width: 500px;
3
+ margin: 20px auto;
4
+
5
+ .ab-tabs-item {
6
+ padding: 2px 6px;
7
+ }
8
+ }
@@ -1 +1 @@
1
- .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
1
+ .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
@@ -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
- > &-bar {
35
- left: 0;
36
- }
37
- }
38
-
39
- &-left, &-right {
40
- flex-direction: column;
41
-
42
- > &-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,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
  }