@mdsfe/mds-ui 0.4.0-rc.2 → 0.4.0-rc.4

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 (63) hide show
  1. package/dist/badge.js +2 -2
  2. package/dist/drawer.js +2 -2
  3. package/dist/mds-ui.min.js +2 -2
  4. package/dist/notification.js +2 -2
  5. package/dist/style/affix.css +1 -10
  6. package/dist/style/alert.css +1 -138
  7. package/dist/style/anchor.css +1 -58
  8. package/dist/style/avatar.css +1 -73
  9. package/dist/style/backtop.css +1 -34
  10. package/dist/style/badge.css +1 -141
  11. package/dist/style/bordershadow.css +1 -42
  12. package/dist/style/breadcrumb.css +1 -37
  13. package/dist/style/button.css +1 -2172
  14. package/dist/style/card.css +1 -156
  15. package/dist/style/carousel.css +1 -217
  16. package/dist/style/cascader.css +1 -214
  17. package/dist/style/cascaderpanel.css +1 -122
  18. package/dist/style/checkbox.css +1 -186
  19. package/dist/style/col.css +1 -2607
  20. package/dist/style/collapse.css +1 -79
  21. package/dist/style/color.css +1 -622
  22. package/dist/style/datepicker.css +1 -542
  23. package/dist/style/divider.css +1 -47
  24. package/dist/style/drawer.css +1 -2465
  25. package/dist/style/dropdown.css +1 -274
  26. package/dist/style/empty.css +1 -49
  27. package/dist/style/font.css +1 -45
  28. package/dist/style/form.css +1 -148
  29. package/dist/style/icon.css +1 -25
  30. package/dist/style/input.css +1 -760
  31. package/dist/style/inputnumber.css +1 -314
  32. package/dist/style/layout.css +1 -58
  33. package/dist/style/list.css +1 -141
  34. package/dist/style/loading.css +1 -2329
  35. package/dist/style/menu.css +1 -658
  36. package/dist/style/message.css +1 -191
  37. package/dist/style/modal.css +1 -123
  38. package/dist/style/notification.css +1 -192
  39. package/dist/style/pagination.css +1 -1190
  40. package/dist/style/popconfirm.css +1 -65
  41. package/dist/style/popover.css +1 -138
  42. package/dist/style/progress.css +1 -179
  43. package/dist/style/radio.css +1 -255
  44. package/dist/style/rate.css +1 -81
  45. package/dist/style/row.css +1 -2607
  46. package/dist/style/select.css +1 -221
  47. package/dist/style/slider.css +1 -80
  48. package/dist/style/slottable.css +1 -296
  49. package/dist/style/steps.css +1 -586
  50. package/dist/style/switch.css +1 -110
  51. package/dist/style/table.css +1 -2778
  52. package/dist/style/tabs.css +1 -518
  53. package/dist/style/tag.css +1 -421
  54. package/dist/style/text.css +1 -122
  55. package/dist/style/timeline.css +1 -88
  56. package/dist/style/timepicker.css +1 -393
  57. package/dist/style/tooltip.css +1 -161
  58. package/dist/style/transfer.css +1 -206
  59. package/dist/style/transition.css +1 -1413
  60. package/dist/style/tree.css +1 -84
  61. package/dist/style/typography.css +1 -126
  62. package/dist/style/upload.css +1 -320
  63. package/package.json +5 -1
@@ -1,65 +1 @@
1
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
- /* stylelint-disable declaration-bang-space-before */
3
- /* stylelint-disable declaration-bang-space-before */
4
- .mds-popover-firm {
5
- box-sizing: border-box;
6
- width: 270px;
7
- }
8
- .mds-popover-firm-content {
9
- position: relative;
10
- }
11
- .mds-popover-firm-icon {
12
- display: inline-block;
13
- margin-right: -8px;
14
- font-size: 16px !important;
15
- position: relative !important;
16
- }
17
- .mds-popover-firm-message-title {
18
- font-size: 16px;
19
- font-family: PingFangSC-Medium, PingFang SC;
20
- font-weight: 500;
21
- color: #333;
22
- display: inline-block;
23
- }
24
- .mds-popover-firm-icon + .mds-popover-firm-message-title {
25
- margin-left: 16px;
26
- }
27
- .mds-popover-firm-message-content {
28
- margin-top: 8px;
29
- font-size: 14px;
30
- font-family: PingFangSC-Regular, PingFang SC;
31
- font-weight: 400;
32
- color: #666666;
33
- }
34
- .mds-popover-firm-button {
35
- text-align: center;
36
- display: flex;
37
- flex-direction: row;
38
- }
39
- .mds-popover-firm-button .mds-btn {
40
- flex: 1;
41
- border-radius: 2px;
42
- height: 30px;
43
- line-height: 30px;
44
- text-align: center;
45
- padding: 0;
46
- font-size: 12px;
47
- font-weight: 400;
48
- margin: 0;
49
- }
50
- .mds-popover-firm-button .mds-btn + .mds-btn {
51
- margin-left: 16px;
52
- }
53
- .mds-popover-firm-button-cancel {
54
- border: 1px solid #d8dce6;
55
- }
56
- .mds-popover-firm-button-firm {
57
- background: #0364FF;
58
- font-size: 12px;
59
- font-family: PingFangSC-Regular, PingFang SC;
60
- font-weight: 400;
61
- color: #ffffff;
62
- }
63
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
64
- /* stylelint-disable declaration-bang-space-before */
65
- /* stylelint-disable declaration-bang-space-before */
1
+ .mds-popover-firm{box-sizing:border-box;width:270px}.mds-popover-firm-content{position:relative}.mds-popover-firm-icon{display:inline-block;margin-right:-8px;font-size:16px!important;position:relative!important}.mds-popover-firm-message-title{font-size:16px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:#333;display:inline-block}.mds-popover-firm-icon+.mds-popover-firm-message-title{margin-left:16px}.mds-popover-firm-message-content{margin-top:8px;font-size:14px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#666}.mds-popover-firm-button{text-align:center;display:flex;flex-direction:row}.mds-popover-firm-button .mds-btn{flex:1;border-radius:2px;height:30px;line-height:30px;text-align:center;padding:0;font-size:12px;font-weight:400;margin:0}.mds-popover-firm-button .mds-btn+.mds-btn{margin-left:16px}.mds-popover-firm-button-cancel{border:1px solid #d8dce6}.mds-popover-firm-button-firm{background:#0364ff;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#fff}
@@ -1,138 +1 @@
1
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
- /* stylelint-disable declaration-bang-space-before */
3
- /* stylelint-disable declaration-bang-space-before */
4
- .mds-popover-wrapper {
5
- display: inline-block;
6
- }
7
- .mds-popover {
8
- text-align: center;
9
- border-radius: 4px;
10
- padding: 10px;
11
- font-size: 12px;
12
- line-height: 1.5;
13
- min-width: 150px;
14
- word-wrap: break-word;
15
- font-size: 14px;
16
- background: #ffffff;
17
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
18
- }
19
- .mds-popover .popper__arrow,
20
- .mds-popover .popper__arrow::after {
21
- position: absolute;
22
- display: block;
23
- width: 0;
24
- height: 0;
25
- border-color: transparent;
26
- border-style: solid;
27
- }
28
- .mds-popover .popper__arrow::after {
29
- content: " ";
30
- border-width: 6px;
31
- }
32
- .mds-popover-hidden {
33
- display: none;
34
- }
35
- .mds-popover-placement-top,
36
- .mds-popover-placement-top-start,
37
- .mds-popover-placement-top-end {
38
- margin-bottom: 18px;
39
- }
40
- .mds-popover-placement-right,
41
- .mds-popover-placement-right-start,
42
- .mds-popover-placement-right-end {
43
- margin-left: 9px;
44
- }
45
- .mds-popover-placement-bottom,
46
- .mds-popover-placement-bottom-start,
47
- .mds-popover-placement-bottom-end {
48
- margin-top: 18px;
49
- }
50
- .mds-popover-placement-left,
51
- .mds-popover-placement-left-start,
52
- .mds-popover-placement-left-end {
53
- margin-right: 9px;
54
- }
55
- .mds-popover-placement-top .popper__arrow,
56
- .mds-popover-placement-top-start .popper__arrow,
57
- .mds-popover-placement-top-end .popper__arrow {
58
- bottom: -6px;
59
- border-width: 6px 6px 0;
60
- border-top-color: #ebeef5;
61
- }
62
- .mds-popover-placement-top .popper__arrow::after,
63
- .mds-popover-placement-top-start .popper__arrow::after,
64
- .mds-popover-placement-top-end .popper__arrow::after {
65
- bottom: 1px;
66
- border-top-color: #ebeef5;
67
- border-width: 5px 5px 0;
68
- margin-left: -5px;
69
- }
70
- .mds-popover-placement-top .popper__arrow::after,
71
- .mds-popover-placement-top-start .popper__arrow::after,
72
- .mds-popover-placement-top-end .popper__arrow::after {
73
- border-top-color: #fff;
74
- }
75
- .mds-popover-placement-right .popper__arrow,
76
- .mds-popover-placement-right-start .popper__arrow,
77
- .mds-popover-placement-right-end .popper__arrow {
78
- left: -6px;
79
- border-width: 6px 6px 6px 0;
80
- border-right-color: #ebeef5;
81
- }
82
- .mds-popover-placement-right .popper__arrow::after,
83
- .mds-popover-placement-right-start .popper__arrow::after,
84
- .mds-popover-placement-right-end .popper__arrow::after {
85
- left: 1px;
86
- border-right-color: #ebeef5;
87
- border-width: 5px 5px 5px 0;
88
- bottom: -5px;
89
- }
90
- .mds-popover-placement-right .popper__arrow::after,
91
- .mds-popover-placement-right-start .popper__arrow::after,
92
- .mds-popover-placement-right-end .popper__arrow::after {
93
- border-right-color: #fff;
94
- }
95
- .mds-popover-placement-left .popper__arrow,
96
- .mds-popover-placement-left-start .popper__arrow,
97
- .mds-popover-placement-left-end .popper__arrow {
98
- right: -6px;
99
- border-width: 6px 0 6px 6px;
100
- border-left-color: #ebeef5;
101
- }
102
- .mds-popover-placement-left .popper__arrow::after,
103
- .mds-popover-placement-left-start .popper__arrow::after,
104
- .mds-popover-placement-left-end .popper__arrow::after {
105
- right: 1px;
106
- border-left-color: #ebeef5;
107
- border-width: 5px 0 5px 5px;
108
- margin-left: -5px;
109
- bottom: -5px;
110
- }
111
- .mds-popover-placement-left .popper__arrow::after,
112
- .mds-popover-placement-left-start .popper__arrow::after,
113
- .mds-popover-placement-left-end .popper__arrow::after {
114
- border-left-color: #fff;
115
- }
116
- .mds-popover-placement-bottom .popper__arrow,
117
- .mds-popover-placement-bottom-start .popper__arrow,
118
- .mds-popover-placement-bottom-end .popper__arrow {
119
- top: -6px;
120
- border-width: 0 6px 6px;
121
- border-bottom-color: #ebeef5;
122
- }
123
- .mds-popover-placement-bottom .popper__arrow::after,
124
- .mds-popover-placement-bottom-start .popper__arrow::after,
125
- .mds-popover-placement-bottom-end .popper__arrow::after {
126
- top: 1px;
127
- border-top-color: #ebeef5;
128
- border-width: 0 5px 5px;
129
- margin-left: -5px;
130
- }
131
- .mds-popover-placement-bottom .popper__arrow::after,
132
- .mds-popover-placement-bottom-start .popper__arrow::after,
133
- .mds-popover-placement-bottom-end .popper__arrow::after {
134
- border-bottom-color: #fff;
135
- }
136
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
137
- /* stylelint-disable declaration-bang-space-before */
138
- /* stylelint-disable declaration-bang-space-before */
1
+ .mds-popover-wrapper{display:inline-block}.mds-popover{text-align:center;border-radius:4px;padding:10px;font-size:12px;line-height:1.5;min-width:150px;word-wrap:break-word;font-size:14px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.2)}.mds-popover .popper__arrow,.mds-popover .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.mds-popover .popper__arrow:after{content:" ";border-width:6px}.mds-popover-hidden{display:none}.mds-popover-placement-top,.mds-popover-placement-top-end,.mds-popover-placement-top-start{margin-bottom:18px}.mds-popover-placement-right,.mds-popover-placement-right-end,.mds-popover-placement-right-start{margin-left:9px}.mds-popover-placement-bottom,.mds-popover-placement-bottom-end,.mds-popover-placement-bottom-start{margin-top:18px}.mds-popover-placement-left,.mds-popover-placement-left-end,.mds-popover-placement-left-start{margin-right:9px}.mds-popover-placement-top-end .popper__arrow,.mds-popover-placement-top-start .popper__arrow,.mds-popover-placement-top .popper__arrow{bottom:-6px;border-width:6px 6px 0;border-top-color:#ebeef5}.mds-popover-placement-top-end .popper__arrow:after,.mds-popover-placement-top-start .popper__arrow:after,.mds-popover-placement-top .popper__arrow:after{bottom:1px;border-top-color:#ebeef5;border-width:5px 5px 0;margin-left:-5px;border-top-color:#fff}.mds-popover-placement-right-end .popper__arrow,.mds-popover-placement-right-start .popper__arrow,.mds-popover-placement-right .popper__arrow{left:-6px;border-width:6px 6px 6px 0;border-right-color:#ebeef5}.mds-popover-placement-right-end .popper__arrow:after,.mds-popover-placement-right-start .popper__arrow:after,.mds-popover-placement-right .popper__arrow:after{left:1px;border-right-color:#ebeef5;border-width:5px 5px 5px 0;bottom:-5px;border-right-color:#fff}.mds-popover-placement-left-end .popper__arrow,.mds-popover-placement-left-start .popper__arrow,.mds-popover-placement-left .popper__arrow{right:-6px;border-width:6px 0 6px 6px;border-left-color:#ebeef5}.mds-popover-placement-left-end .popper__arrow:after,.mds-popover-placement-left-start .popper__arrow:after,.mds-popover-placement-left .popper__arrow:after{right:1px;border-left-color:#ebeef5;border-width:5px 0 5px 5px;margin-left:-5px;bottom:-5px;border-left-color:#fff}.mds-popover-placement-bottom-end .popper__arrow,.mds-popover-placement-bottom-start .popper__arrow,.mds-popover-placement-bottom .popper__arrow{top:-6px;border-width:0 6px 6px;border-bottom-color:#ebeef5}.mds-popover-placement-bottom-end .popper__arrow:after,.mds-popover-placement-bottom-start .popper__arrow:after,.mds-popover-placement-bottom .popper__arrow:after{top:1px;border-top-color:#ebeef5;border-width:0 5px 5px;margin-left:-5px;border-bottom-color:#fff}
@@ -1,179 +1 @@
1
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
- /* stylelint-disable declaration-bang-space-before */
3
- /* stylelint-disable declaration-bang-space-before */
4
- .mds-progress {
5
- display: inline-block;
6
- }
7
- .mds-progress-line {
8
- width: 100%;
9
- font-size: 12px;
10
- position: relative;
11
- }
12
- .mds-progress-mini {
13
- width: 50%;
14
- }
15
- .mds-progress-step {
16
- width: 100%;
17
- font-size: 12px;
18
- position: relative;
19
- }
20
- .mds-progress-gradual {
21
- width: 100%;
22
- font-size: 12px;
23
- position: relative;
24
- }
25
- .mds-progress-step-warp {
26
- width: 100%;
27
- position: relative;
28
- height: 10px;
29
- }
30
- .mds-progress-step-item {
31
- display: inline-block;
32
- height: 10px;
33
- vertical-align: top;
34
- }
35
- .mds-progress-step-item:first-child {
36
- border-top-left-radius: 100px;
37
- border-bottom-left-radius: 100px;
38
- }
39
- .mds-progress-step-item:last-child {
40
- border-top-right-radius: 100px;
41
- border-bottom-right-radius: 100px;
42
- }
43
- .mds-progress-outer {
44
- display: inline-block;
45
- width: 100%;
46
- margin-right: 0;
47
- padding-right: 0;
48
- }
49
- .mds-progress-show-info > .mds-progress-outer {
50
- margin-right: calc(-4em);
51
- padding-right: calc(4em);
52
- }
53
- .mds-progress-inner {
54
- display: inline-block;
55
- position: relative;
56
- width: 100%;
57
- background-color: #f7f7f7;
58
- vertical-align: middle;
59
- overflow: hidden;
60
- border-radius: 100px;
61
- }
62
- .mds-progress-circle {
63
- position: relative;
64
- }
65
- .mds-progress-circle-trail {
66
- stroke: #f7f7f7;
67
- }
68
- .mds-progress-circle-path {
69
- stroke: #0364ff;
70
- animation: mds-progress-appear 0.3s;
71
- }
72
- .mds-progress-bg {
73
- background-color: #0364ff;
74
- border-radius: 100px;
75
- }
76
- .mds-progress-text {
77
- word-break: normal;
78
- width: 3em;
79
- text-align: left;
80
- font-size: 14px;
81
- vertical-align: middle;
82
- display: inline-block;
83
- font-family: PingFangSC-Regular;
84
- font-weight: 400;
85
- color: #7F8FA4;
86
- }
87
- .mds-progress-text .mdsicon {
88
- font-size: 12px;
89
- }
90
- .mds-progress-status-active .mds-progress-bg:before {
91
- content: "";
92
- opacity: 0;
93
- position: absolute;
94
- top: 0;
95
- left: 0;
96
- right: 0;
97
- bottom: 0;
98
- background: #fff;
99
- border-radius: 10px;
100
- animation: mds-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
101
- }
102
- .mds-progress-status-exception .mds-progress-bg {
103
- background-color: #EE3333;
104
- }
105
- .mds-progress-status-exception .mds-progress-text {
106
- color: #EE3333;
107
- }
108
- .mds-progress-status-exception .mds-progress-circle-path {
109
- stroke: #EE3333;
110
- }
111
- .mds-progress-status-success .mds-progress-bg {
112
- background-color: #00a854;
113
- }
114
- .mds-progress-status-success .mds-progress-text {
115
- color: #00a854;
116
- }
117
- .mds-progress-status-success .mds-progress-circle-path {
118
- stroke: #00a854;
119
- }
120
- .mds-progress-circle .mds-progress-inner {
121
- position: relative;
122
- line-height: 1;
123
- background-color: transparent;
124
- }
125
- .mds-progress-circle .mds-progress-text {
126
- display: block;
127
- position: absolute;
128
- width: 100%;
129
- text-align: center;
130
- line-height: 1;
131
- top: 50%;
132
- transform: translateY(-50%);
133
- left: 0;
134
- font-family: tahoma;
135
- margin: 0;
136
- }
137
- .mds-progress-circle .mds-progress-text .mdsicon {
138
- font-size: 1.16666667em;
139
- }
140
- .mds-progress-circle .mds-progress-status-exception .mds-progress-text {
141
- color: #EE3333;
142
- }
143
- .mds-progress-circle .mds-progress-status-success .mds-progress-text {
144
- color: #00a854;
145
- }
146
- .progress-wrap-ui-style > div {
147
- margin-bottom: 20px;
148
- }
149
- .progress-wrapper-circle-ui-style {
150
- display: flex;
151
- }
152
- .progress-wrapper-circle-ui-style > div {
153
- margin-right: 20px;
154
- }
155
- @keyframes mds-progress-appear {
156
- 0% {
157
- opacity: 0;
158
- }
159
- 100% {
160
- opacity: 1;
161
- }
162
- }
163
- @keyframes mds-progress-active {
164
- 0% {
165
- opacity: 0.1;
166
- width: 0;
167
- }
168
- 20% {
169
- opacity: 0.5;
170
- width: 0;
171
- }
172
- 100% {
173
- opacity: 0;
174
- width: 100%;
175
- }
176
- }
177
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
178
- /* stylelint-disable declaration-bang-space-before */
179
- /* stylelint-disable declaration-bang-space-before */
1
+ .mds-progress{display:inline-block}.mds-progress-line{width:100%;font-size:12px;position:relative}.mds-progress-mini{width:50%}.mds-progress-gradual,.mds-progress-step{width:100%;font-size:12px;position:relative}.mds-progress-step-warp{width:100%;position:relative;height:10px}.mds-progress-step-item{display:inline-block;height:10px;vertical-align:top}.mds-progress-step-item:first-child{border-top-left-radius:100px;border-bottom-left-radius:100px}.mds-progress-step-item:last-child{border-top-right-radius:100px;border-bottom-right-radius:100px}.mds-progress-outer{display:inline-block;width:100%;margin-right:0;padding-right:0}.mds-progress-show-info>.mds-progress-outer{margin-right:-4em;padding-right:4em}.mds-progress-inner{display:inline-block;position:relative;width:100%;background-color:#f7f7f7;vertical-align:middle;overflow:hidden;border-radius:100px}.mds-progress-circle{position:relative}.mds-progress-circle-trail{stroke:#f7f7f7}.mds-progress-circle-path{stroke:#0364ff;animation:mds-progress-appear .3s}.mds-progress-bg{background-color:#0364ff;border-radius:100px}.mds-progress-text{word-break:normal;width:3em;text-align:left;font-size:14px;vertical-align:middle;display:inline-block;font-family:PingFangSC-Regular;font-weight:400;color:#7f8fa4}.mds-progress-text .mdsicon{font-size:12px}.mds-progress-status-active .mds-progress-bg:before{content:"";opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border-radius:10px;animation:mds-progress-active 2.4s cubic-bezier(.23,1,.32,1) infinite}.mds-progress-status-exception .mds-progress-bg{background-color:#e33}.mds-progress-status-exception .mds-progress-text{color:#e33}.mds-progress-status-exception .mds-progress-circle-path{stroke:#e33}.mds-progress-status-success .mds-progress-bg{background-color:#00a854}.mds-progress-status-success .mds-progress-text{color:#00a854}.mds-progress-status-success .mds-progress-circle-path{stroke:#00a854}.mds-progress-circle .mds-progress-inner{position:relative;line-height:1;background-color:transparent}.mds-progress-circle .mds-progress-text{display:block;position:absolute;width:100%;text-align:center;line-height:1;top:50%;transform:translateY(-50%);left:0;font-family:tahoma;margin:0}.mds-progress-circle .mds-progress-text .mdsicon{font-size:1.16666667em}.mds-progress-circle .mds-progress-status-exception .mds-progress-text{color:#e33}.mds-progress-circle .mds-progress-status-success .mds-progress-text{color:#00a854}.progress-wrap-ui-style>div{margin-bottom:20px}.progress-wrapper-circle-ui-style{display:flex}.progress-wrapper-circle-ui-style>div{margin-right:20px}@keyframes mds-progress-appear{0%{opacity:0}to{opacity:1}}@keyframes mds-progress-active{0%{opacity:.1;width:0}20%{opacity:.5;width:0}to{opacity:0;width:100%}}
@@ -1,255 +1 @@
1
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
2
- /* stylelint-disable declaration-bang-space-before */
3
- /* stylelint-disable declaration-bang-space-before */
4
- .mds-radio-group {
5
- display: inline-block;
6
- font-size: 0;
7
- }
8
- .mds-radio-wrapper {
9
- font-size: 14px;
10
- color: #354052;
11
- display: inline-block;
12
- position: relative;
13
- white-space: nowrap;
14
- margin-right: 8px;
15
- cursor: pointer;
16
- }
17
- .mds-radio-wrapper-disabled {
18
- cursor: not-allowed;
19
- }
20
- .mds-radio-wrapper-disabled .mds-radio-wrapper {
21
- cursor: not-allowed;
22
- }
23
- .mds-radio {
24
- white-space: nowrap;
25
- outline: none;
26
- display: inline-block;
27
- position: relative;
28
- line-height: 1;
29
- vertical-align: text-bottom;
30
- cursor: pointer;
31
- }
32
- .mds-radio-wrapper:hover .mds-radio .mds-radio-inner,
33
- .mds-radio:hover .mds-radio-inner,
34
- .mds-radio-focused .mds-radio-inner {
35
- border-color: #0364ff;
36
- }
37
- .mds-radio-checked:after {
38
- position: absolute;
39
- top: 0;
40
- left: 0;
41
- width: 100%;
42
- height: 100%;
43
- border-radius: 50%;
44
- border: 1px solid #0364ff;
45
- content: '';
46
- animation: mdsRadioEffect 0.36s ease-in-out;
47
- animation-fill-mode: both;
48
- visibility: hidden;
49
- }
50
- .mds-radio:hover:after,
51
- .mds-radio-wrapper:hover .mds-radio:after {
52
- visibility: visible;
53
- }
54
- .mds-radio-inner {
55
- position: relative;
56
- top: 0;
57
- left: 0;
58
- display: block;
59
- width: 16px;
60
- height: 16px;
61
- border-width: 1px;
62
- border-style: solid;
63
- border-radius: 16px;
64
- border-color: #d9d9d9;
65
- background-color: #fff;
66
- transition: all 0.3s;
67
- }
68
- .mds-radio-inner:after {
69
- position: absolute;
70
- width: 6px;
71
- height: 6px;
72
- left: 4px;
73
- top: 4px;
74
- border-radius: 4px;
75
- display: block;
76
- border-top: 0;
77
- border-left: 0;
78
- content: ' ';
79
- background-color: #0364ff;
80
- opacity: 0;
81
- transform: scale(0);
82
- transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
83
- }
84
- .mds-radio-input {
85
- position: absolute;
86
- left: 0;
87
- z-index: 1;
88
- cursor: pointer;
89
- opacity: 0;
90
- top: 0;
91
- bottom: 0;
92
- right: 0;
93
- }
94
- .mds-radio-checked .mds-radio-inner {
95
- border-color: #0364ff;
96
- }
97
- .mds-radio-checked .mds-radio-inner:after {
98
- transform: scale(1);
99
- opacity: 1;
100
- transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
101
- }
102
- .mds-radio-disabled {
103
- cursor: not-allowed;
104
- }
105
- .mds-radio-disabled .mds-radio-inner {
106
- border-color: #D8DCE6 !important;
107
- background-color: #FAFAFD;
108
- }
109
- .mds-radio-disabled .mds-radio-inner:after {
110
- background-color: #D8DCE6;
111
- }
112
- .mds-radio-disabled .mds-radio-input {
113
- cursor: not-allowed;
114
- }
115
- .mds-radio-disabled + span {
116
- color: #aaaaaa;
117
- cursor: not-allowed;
118
- }
119
- span.mds-radio + * {
120
- padding-left: 8px;
121
- padding-right: 8px;
122
- }
123
- .mds-radio-button-wrapper {
124
- margin: 0;
125
- height: 32px;
126
- line-height: 30px;
127
- color: #666666;
128
- display: inline-block;
129
- transition: all 0.3s ease;
130
- cursor: pointer;
131
- border: 1px solid #D8DCE6;
132
- border-left: 0;
133
- background: #fff;
134
- padding: 0 16px;
135
- position: relative;
136
- font-size: 14px;
137
- color: #354052;
138
- }
139
- .mds-radio-button-wrapper a {
140
- color: #666666;
141
- }
142
- .mds-radio-button-wrapper > .mds-radio-button {
143
- margin-left: 0;
144
- display: block;
145
- width: 0;
146
- height: 0;
147
- }
148
- .mds-radio-group-large .mds-radio-button-wrapper {
149
- height: 40px;
150
- line-height: 38px;
151
- }
152
- .mds-radio-group-small .mds-radio-button-wrapper {
153
- height: 32px;
154
- line-height: 30px;
155
- padding: 0 12px;
156
- }
157
- .mds-radio-group-small .mds-radio-button-wrapper:first-child {
158
- border-radius: 2px 0 0 2px;
159
- }
160
- .mds-radio-group-small .mds-radio-button-wrapper:last-child {
161
- border-radius: 0 2px 2px 0;
162
- }
163
- .mds-radio-button-wrapper:not(:first-child)::before {
164
- content: "";
165
- display: block;
166
- top: 0;
167
- left: -1px;
168
- width: 1px;
169
- height: 100%;
170
- position: absolute;
171
- background-color: #d9d9d9;
172
- }
173
- .mds-radio-button-wrapper:first-child {
174
- border-radius: 4px 0 0 4px;
175
- border-left: 1px solid #d9d9d9;
176
- }
177
- .mds-radio-button-wrapper:last-child {
178
- border-radius: 0 4px 4px 0;
179
- }
180
- .mds-radio-button-wrapper:first-child:last-child {
181
- border-radius: 4px;
182
- }
183
- .mds-radio-button-wrapper:hover,
184
- .mds-radio-button-wrapper-focused {
185
- color: #0364FF;
186
- position: relative;
187
- background: rgba(23, 112, 255, 0.1);
188
- }
189
- .mds-radio-button-wrapper .mds-radio-inner,
190
- .mds-radio-button-wrapper input[type="checkbox"],
191
- .mds-radio-button-wrapper input[type="radio"] {
192
- opacity: 0;
193
- filter: alpha(opacity=0);
194
- width: 0;
195
- height: 0;
196
- }
197
- .mds-radio-button-wrapper-checked {
198
- background: #fff;
199
- border-color: #0364FF;
200
- color: #0364FF;
201
- box-shadow: -1px 0 0 0 #0364FF;
202
- z-index: 1;
203
- }
204
- .mds-radio-button-wrapper-checked::before {
205
- background-color: #0364FF !important;
206
- opacity: 0.1;
207
- }
208
- .mds-radio-button-wrapper-checked:first-child {
209
- border-color: #0364FF;
210
- box-shadow: none !important;
211
- }
212
- .mds-radio-button-wrapper-checked:hover {
213
- border-color: #0364FF;
214
- box-shadow: -1px 0 0 0 #0364FF;
215
- color: #0364FF;
216
- }
217
- .mds-radio-button-wrapper-checked:active {
218
- border-color: #0364FF;
219
- box-shadow: -1px 0 0 0 #0364FF;
220
- color: #0364FF;
221
- }
222
- .mds-radio-button-wrapper-disabled {
223
- border-color: #d9d9d9;
224
- background-color: #f7f7f7;
225
- cursor: not-allowed;
226
- color: rgba(0, 0, 0, 0.2);
227
- }
228
- .mds-radio-button-wrapper-disabled:first-child,
229
- .mds-radio-button-wrapper-disabled:hover {
230
- border-color: #d9d9d9;
231
- background-color: #f7f7f7;
232
- color: rgba(0, 0, 0, 0.2);
233
- }
234
- .mds-radio-button-wrapper-disabled:first-child {
235
- border-left-color: #d9d9d9;
236
- }
237
- .mds-radio-button-wrapper-disabled.mds-radio-button-wrapper-checked {
238
- color: #fff;
239
- background-color: #e6e6e6;
240
- border-color: #d9d9d9;
241
- box-shadow: none;
242
- }
243
- @keyframes mdsRadioEffect {
244
- 0% {
245
- transform: scale(1);
246
- opacity: 0.5;
247
- }
248
- 100% {
249
- transform: scale(1.6);
250
- opacity: 0;
251
- }
252
- }
253
- /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
254
- /* stylelint-disable declaration-bang-space-before */
255
- /* stylelint-disable declaration-bang-space-before */
1
+ .mds-radio-group{display:inline-block;font-size:0}.mds-radio-wrapper{font-size:14px;color:#354052;display:inline-block;position:relative;white-space:nowrap;margin-right:8px;cursor:pointer}.mds-radio-wrapper-disabled,.mds-radio-wrapper-disabled .mds-radio-wrapper{cursor:not-allowed}.mds-radio{white-space:nowrap;outline:none;display:inline-block;position:relative;line-height:1;vertical-align:text-bottom;cursor:pointer}.mds-radio-focused .mds-radio-inner,.mds-radio-wrapper:hover .mds-radio .mds-radio-inner,.mds-radio:hover .mds-radio-inner{border-color:#0364ff}.mds-radio-checked:after{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:1px solid #0364ff;content:"";animation:mdsRadioEffect .36s ease-in-out;animation-fill-mode:both;visibility:hidden}.mds-radio-wrapper:hover .mds-radio:after,.mds-radio:hover:after{visibility:visible}.mds-radio-inner{position:relative;top:0;left:0;display:block;width:16px;height:16px;border-radius:16px;border:1px solid #d9d9d9;background-color:#fff;transition:all .3s}.mds-radio-inner:after{position:absolute;width:6px;height:6px;left:4px;top:4px;border-radius:4px;display:block;border-top:0;border-left:0;content:" ";background-color:#0364ff;opacity:0;transform:scale(0);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.mds-radio-input{position:absolute;left:0;z-index:1;cursor:pointer;opacity:0;top:0;bottom:0;right:0}.mds-radio-checked .mds-radio-inner{border-color:#0364ff}.mds-radio-checked .mds-radio-inner:after{transform:scale(1);opacity:1;transition:all .3s cubic-bezier(.78,.14,.15,.86)}.mds-radio-disabled{cursor:not-allowed}.mds-radio-disabled .mds-radio-inner{border-color:#d8dce6!important;background-color:#fafafd}.mds-radio-disabled .mds-radio-inner:after{background-color:#d8dce6}.mds-radio-disabled .mds-radio-input{cursor:not-allowed}.mds-radio-disabled+span{color:#aaa;cursor:not-allowed}span.mds-radio+*{padding-left:8px;padding-right:8px}.mds-radio-button-wrapper{margin:0;height:32px;line-height:30px;color:#666;display:inline-block;transition:all .3s ease;cursor:pointer;border:1px solid #d8dce6;border-left:0;background:#fff;padding:0 16px;position:relative;font-size:14px;color:#354052}.mds-radio-button-wrapper a{color:#666}.mds-radio-button-wrapper>.mds-radio-button{margin-left:0;display:block;width:0;height:0}.mds-radio-group-large .mds-radio-button-wrapper{height:40px;line-height:38px}.mds-radio-group-small .mds-radio-button-wrapper{height:32px;line-height:30px;padding:0 12px}.mds-radio-group-small .mds-radio-button-wrapper:first-child{border-radius:2px 0 0 2px}.mds-radio-group-small .mds-radio-button-wrapper:last-child{border-radius:0 2px 2px 0}.mds-radio-button-wrapper:not(:first-child):before{content:"";display:block;top:0;left:-1px;width:1px;height:100%;position:absolute;background-color:#d9d9d9}.mds-radio-button-wrapper:first-child{border-radius:4px 0 0 4px;border-left:1px solid #d9d9d9}.mds-radio-button-wrapper:last-child{border-radius:0 4px 4px 0}.mds-radio-button-wrapper:first-child:last-child{border-radius:4px}.mds-radio-button-wrapper-focused,.mds-radio-button-wrapper:hover{color:#0364ff;position:relative;background:rgba(23,112,255,.1)}.mds-radio-button-wrapper .mds-radio-inner,.mds-radio-button-wrapper input[type=checkbox],.mds-radio-button-wrapper input[type=radio]{opacity:0;filter:alpha(opacity=0);width:0;height:0}.mds-radio-button-wrapper-checked{background:#fff;border-color:#0364ff;color:#0364ff;box-shadow:-1px 0 0 0 #0364ff;z-index:1}.mds-radio-button-wrapper-checked:before{background-color:#0364ff!important;opacity:.1}.mds-radio-button-wrapper-checked:first-child{border-color:#0364ff;box-shadow:none!important}.mds-radio-button-wrapper-checked:active,.mds-radio-button-wrapper-checked:hover{border-color:#0364ff;box-shadow:-1px 0 0 0 #0364ff;color:#0364ff}.mds-radio-button-wrapper-disabled{cursor:not-allowed}.mds-radio-button-wrapper-disabled,.mds-radio-button-wrapper-disabled:first-child,.mds-radio-button-wrapper-disabled:hover{border-color:#d9d9d9;background-color:#f7f7f7;color:rgba(0,0,0,.2)}.mds-radio-button-wrapper-disabled:first-child{border-left-color:#d9d9d9}.mds-radio-button-wrapper-disabled.mds-radio-button-wrapper-checked{color:#fff;background-color:#e6e6e6;border-color:#d9d9d9;box-shadow:none}@keyframes mdsRadioEffect{0%{transform:scale(1);opacity:.5}to{transform:scale(1.6);opacity:0}}