@douyinfe/semi-foundation 2.46.0 → 2.46.2

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 (25) hide show
  1. package/button/button.scss +88 -20
  2. package/button/variables.scss +13 -0
  3. package/lib/cjs/button/button.css +30 -2
  4. package/lib/cjs/button/button.scss +88 -20
  5. package/lib/cjs/button/variables.scss +13 -0
  6. package/lib/cjs/table/foundation.d.ts +1 -1
  7. package/lib/cjs/typography/typography.css +5 -0
  8. package/lib/cjs/typography/typography.scss +5 -0
  9. package/lib/cjs/typography/variables.scss +4 -0
  10. package/lib/cjs/utils/array.d.ts +2 -2
  11. package/lib/cjs/utils/array.js +2 -2
  12. package/lib/es/button/button.css +30 -2
  13. package/lib/es/button/button.scss +88 -20
  14. package/lib/es/button/variables.scss +13 -0
  15. package/lib/es/table/foundation.d.ts +1 -1
  16. package/lib/es/typography/typography.css +5 -0
  17. package/lib/es/typography/typography.scss +5 -0
  18. package/lib/es/typography/variables.scss +4 -0
  19. package/lib/es/utils/array.d.ts +2 -2
  20. package/lib/es/utils/array.js +2 -2
  21. package/package.json +3 -3
  22. package/table/foundation.ts +1 -1
  23. package/typography/typography.scss +5 -0
  24. package/typography/variables.scss +4 -0
  25. package/utils/array.ts +4 -4
package/button/button.scss CHANGED
@@ -39,74 +39,117 @@ $module: #{$prefix}-button;
39
39
  &-danger {
40
40
  background-color: $color-button_danger-bg-default;
41
41
  color: $color-button_danger-text-default;
42
- transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
43
- border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
44
- transform: scale($transform-scale-button_danger);
42
+ transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
43
+ border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
44
+ transform: scale($transform-scale-button_danger);
45
45
 
46
+ &-disabled {
47
+ background-color: $color-button_disabled_danger-bg-default;
48
+
49
+ &.#{$module}-light {
50
+ background-color: $color-button_disabled_light_danger-bg-default;
51
+ }
52
+ }
46
53
 
47
54
  &:hover {
48
55
  background-color: $color-button_danger-bg-hover;
49
56
  }
57
+
50
58
  &:active {
51
59
  background-color: $color-button_danger-bg-active;
52
60
  }
61
+
53
62
  &.#{$module}-light,
54
63
  &.#{$module}-borderless {
55
64
  color: $color-button_danger_borderless-text-default;
56
65
  }
66
+
57
67
  &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
58
68
  outline: $width-button-outline solid $color-button_danger-outline-focus;
59
69
  }
60
70
  }
71
+
61
72
  &-warning {
62
73
  background-color: $color-button_warning-bg-default;
63
74
  color: $color-button_warning-text-default;
64
- transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
65
- border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
66
- transform:scale($transform_scale-button_warning);
75
+ transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
76
+ border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
77
+ transform: scale($transform_scale-button_warning);
78
+
79
+ &-disabled {
80
+ background-color: $color-button_disabled_warning-bg-default;
81
+
82
+ &.#{$module}-light {
83
+ background-color: $color-button_disabled_light_warning-bg-default;
84
+ }
85
+ }
67
86
 
68
87
  &:hover {
69
88
  background-color: $color-button_warning-bg-hover;
70
89
  }
90
+
71
91
  &:active {
72
92
  background-color: $color-button_warning-bg-active;
73
93
  }
94
+
74
95
  &.#{$module}-light,
75
96
  &.#{$module}-borderless {
76
97
  color: $color-button_warning_borderless-text-default;
77
98
  }
99
+
78
100
  &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
79
101
  outline: $width-button-outline solid $color-button_warning-outline-focus;
80
102
  }
81
103
  }
104
+
82
105
  &-tertiary {
83
106
  background-color: $color-button_tertiary-bg-default;
84
107
  color: $color-button_tertiary-text-default;
85
- transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
86
- border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
87
- transform:scale($transform_scale_button_tertiary);
108
+ transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
109
+ border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
110
+ transform: scale($transform_scale_button_tertiary);
111
+
112
+ &-disabled {
113
+ background-color: $color-button_disabled_tertiary-bg-default;
114
+
115
+ &.#{$module}-light {
116
+ background-color: $color-button_disabled_light_tertiary-bg-default;
117
+ }
118
+ }
88
119
 
89
120
  &:hover {
90
121
  background-color: $color-button_tertiary-bg-hover;
91
122
  }
123
+
92
124
  &:active {
93
125
  background-color: $color-button_tertiary-bg-active;
94
126
  }
127
+
95
128
  &.#{$module}-light,
96
129
  &.#{$module}-borderless {
97
130
  color: $color-button_tertiary_solid-text-default;
98
131
  }
99
132
  }
133
+
100
134
  &-primary {
101
135
  background-color: $color-button_primary-bg-default;
102
136
  color: $color-button_primary-text-default;
103
137
  transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
104
138
  border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
105
- transform:scale($transform_scale-button_primary);
139
+ transform: scale($transform_scale-button_primary);
140
+
141
+ &-disabled {
142
+ background-color: $color-button_disabled_primary-bg-default;
143
+
144
+ &.#{$module}-light {
145
+ background: $color-button_disabled_light_primary-bg-default;
146
+ }
147
+ }
106
148
 
107
149
  &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
108
150
  background-color: $color-button_primary-bg-hover;
109
151
  }
152
+
110
153
  &:not(.#{$module}-borderless):not(.#{$module}-light):active {
111
154
  background-color: $color-button_primary-bg-active;
112
155
  }
@@ -116,17 +159,27 @@ $module: #{$prefix}-button;
116
159
  color: $color-button_primary_borderless-text-default;
117
160
  }
118
161
  }
162
+
119
163
  &-secondary {
120
164
  background-color: $color-button_secondary-bg-default;
121
165
  outline-color: $color-button_secondary-border-default;
122
166
  color: $color-button_secondary-text-default;
123
- transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
124
- border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
125
- transform:scale($transform_scale-button_secondary);
167
+ transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
168
+ border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
169
+ transform: scale($transform_scale-button_secondary);
170
+
171
+ &-disabled {
172
+ background-color: $color-button_disabled_secondary-bg-default;
173
+
174
+ &.#{$module}-light {
175
+ background-color: $color-button_disabled_light_secondary-bg-default;
176
+ }
177
+ }
126
178
 
127
179
  &:hover {
128
180
  background-color: $color-button_secondary-bg-hover;
129
181
  }
182
+
130
183
  &:active {
131
184
  background-color: $color-button_secondary-bg-active;
132
185
  }
@@ -136,13 +189,14 @@ $module: #{$prefix}-button;
136
189
  color: $color-button_secondary_borderless-text-default;
137
190
  }
138
191
  }
192
+
139
193
  &-disabled {
140
194
  color: $color-button_disabled_solid-text-default;
141
- background-color: $color-button_disabled-bg-default;
195
+
142
196
  &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
143
197
  color: $color-button_disabled-text-hover;
144
- background-color: $color-button_disabled-bg-hover;
145
198
  }
199
+
146
200
  cursor: not-allowed;
147
201
 
148
202
  &.#{$module}-light,
@@ -150,16 +204,18 @@ $module: #{$prefix}-button;
150
204
  color: $color-button_disabled-text-default;
151
205
  }
152
206
  }
207
+
153
208
  &-borderless {
154
209
  background-color: transparent;
155
210
  border: $width-button_borderless-border $color-button_borderless-border-default solid;
156
- transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
157
- transform:scale($transform_scale-button_borderless);
211
+ transition: background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
212
+ transform: scale($transform_scale-button_borderless);
158
213
 
159
214
  &:not(.#{$module}-disabled):hover {
160
215
  background-color: $color-button_borderless-bg-hover;
161
216
  border: $width-button_borderless-border $color-button_borderless-border-hover solid;
162
217
  }
218
+
163
219
  &:not(.#{$module}-disabled):active {
164
220
  background-color: $color-button_borderless-bg-active;
165
221
  border: $width-button_borderless-border $color-button_borderless-border-active solid;
@@ -169,19 +225,21 @@ $module: #{$prefix}-button;
169
225
  &-light {
170
226
  background-color: $color-button_light-bg-default;
171
227
  border: $width-button_light-border $color-button_light-border-default solid;
172
- transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
173
- border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
174
- transform:scale($transform_scale-button_light);
228
+ transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
229
+ border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
230
+ transform: scale($transform_scale-button_light);
175
231
 
176
232
  &:not(.#{$module}-disabled):hover {
177
233
  background-color: $color-button_light-bg-hover;
178
234
  border: $width-button_light-border $color-button_light-border-hover solid;
179
235
  }
236
+
180
237
  &:not(.#{$module}-disabled):active {
181
238
  background-color: $color-button_light-bg-active;
182
239
  border: $width-button_light-border $color-button_light-border-active solid;
183
240
  }
184
241
  }
242
+
185
243
  &-size-small {
186
244
  height: $height-button_small;
187
245
  padding-top: $spacing-button_small-paddingTop;
@@ -189,6 +247,7 @@ $module: #{$prefix}-button;
189
247
  padding-left: $spacing-button_small-paddingLeft;
190
248
  padding-right: $spacing-button_small-paddingRight;
191
249
  }
250
+
192
251
  &-size-large {
193
252
  height: $height-button_large;
194
253
  padding-top: $spacing-button_large-paddingTop;
@@ -196,6 +255,7 @@ $module: #{$prefix}-button;
196
255
  padding-left: $spacing-button_large-paddingLeft;
197
256
  padding-right: $spacing-button_large-paddingRight;
198
257
  }
258
+
199
259
  &-block {
200
260
  width: 100%;
201
261
  }
@@ -259,6 +319,7 @@ $module: #{$prefix}-button;
259
319
  border-top-left-radius: $radius-button_group;
260
320
  border-bottom-left-radius: $radius-button_group;
261
321
  }
322
+
262
323
  &:last-child {
263
324
  border-top-right-radius: $radius-button_group;
264
325
  border-bottom-right-radius: $radius-button_group;
@@ -273,24 +334,31 @@ $module: #{$prefix}-button;
273
334
  &-primary {
274
335
  background-color: $color-button_primary-bg-default;
275
336
  }
337
+
276
338
  &-secondary {
277
339
  background-color: $color-button_secondary-bg-default;
278
340
  }
341
+
279
342
  &-tertiary {
280
343
  background-color: $color-button_tertiary-bg-default;
281
344
  }
345
+
282
346
  &-warning {
283
347
  background-color: $color-button_warning-bg-default;
284
348
  }
349
+
285
350
  &-danger {
286
351
  background-color: $color-button_danger-bg-default;
287
352
  }
353
+
288
354
  &-disabled {
289
355
  background-color: $color-button_disabled-bg-default;
290
356
  }
357
+
291
358
  &-light {
292
359
  background-color: $color-button_light-bg-default;
293
360
  }
361
+
294
362
  &-borderless {
295
363
  background-color: transparent;
296
364
  }
package/button/variables.scss CHANGED
@@ -82,6 +82,13 @@ $color-button_disabled-text-default: var(--semi-color-disabled-text); // 禁用
82
82
  $color-button_disabled-bg-default: var(--semi-color-disabled-bg); // 禁用按钮背景颜色
83
83
  $color-button_disabled-text-hover: $color-button_disabled-text-default; // 禁用按钮文字颜色 - 悬浮
84
84
  $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮背景颜色 - 悬浮
85
+ $color-button_disabled_primary-bg-default: $color-button_disabled-bg-default; // 禁用 primary 按钮背景颜色
86
+ $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default; // 禁用 secondary 按钮背景颜色
87
+ $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
88
+ $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
89
+ $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
90
+
91
+
85
92
 
86
93
  // light
87
94
  $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
@@ -92,6 +99,12 @@ $color-button_light-border-hover: $color-button_light-border-default; // 浅色
92
99
  $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
93
100
  $width-button_light-border: 0; // 浅色按钮描边宽度
94
101
 
102
+ $color-button_disabled_light_primary-bg-default: $color-button_light-bg-default; // 禁用 light primary 按钮背景颜色
103
+ $color-button_disabled_light_secondary-bg-default: $color-button_light-bg-default; // 禁用 light secondary 按钮背景颜色
104
+ $color-button_disabled_light_danger-bg-default: $color-button_light-bg-default; // 禁用 light danger 按钮背景颜色
105
+ $color-button_disabled_light_warning-bg-default: $color-button_light-bg-default; // 禁用 light warning 按钮背景颜色
106
+ $color-button_disabled_light_tertiary-bg-default: $color-button_light-bg-default; // 禁用 light tertiary 按钮背景颜色
107
+
95
108
  // borderless
96
109
  $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
97
110
  $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
package/lib/cjs/button/button.css CHANGED
@@ -52,6 +52,12 @@
52
52
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
53
53
  transform: scale(var(--semi-transform_scale-none));
54
54
  }
55
+ .semi-button-danger-disabled {
56
+ background-color: var(--semi-color-disabled-bg);
57
+ }
58
+ .semi-button-danger-disabled.semi-button-light {
59
+ background-color: var(--semi-color-fill-0);
60
+ }
55
61
  .semi-button-danger:hover {
56
62
  background-color: var(--semi-color-danger-hover);
57
63
  }
@@ -70,6 +76,12 @@
70
76
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
71
77
  transform: scale(var(--semi-transform_scale-none));
72
78
  }
79
+ .semi-button-warning-disabled {
80
+ background-color: var(--semi-color-disabled-bg);
81
+ }
82
+ .semi-button-warning-disabled.semi-button-light {
83
+ background-color: var(--semi-color-fill-0);
84
+ }
73
85
  .semi-button-warning:hover {
74
86
  background-color: var(--semi-color-warning-hover);
75
87
  }
@@ -88,6 +100,12 @@
88
100
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
89
101
  transform: scale(var(--semi-transform_scale-none));
90
102
  }
103
+ .semi-button-tertiary-disabled {
104
+ background-color: var(--semi-color-disabled-bg);
105
+ }
106
+ .semi-button-tertiary-disabled.semi-button-light {
107
+ background-color: var(--semi-color-fill-0);
108
+ }
91
109
  .semi-button-tertiary:hover {
92
110
  background-color: var(--semi-color-tertiary-hover);
93
111
  }
@@ -103,6 +121,12 @@
103
121
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
104
122
  transform: scale(var(--semi-transform_scale-none));
105
123
  }
124
+ .semi-button-primary-disabled {
125
+ background-color: var(--semi-color-disabled-bg);
126
+ }
127
+ .semi-button-primary-disabled.semi-button-light {
128
+ background: var(--semi-color-fill-0);
129
+ }
106
130
  .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
107
131
  background-color: var(--semi-color-primary-hover);
108
132
  }
@@ -119,6 +143,12 @@
119
143
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
120
144
  transform: scale(var(--semi-transform_scale-none));
121
145
  }
146
+ .semi-button-secondary-disabled {
147
+ background-color: var(--semi-color-disabled-bg);
148
+ }
149
+ .semi-button-secondary-disabled.semi-button-light {
150
+ background-color: var(--semi-color-fill-0);
151
+ }
122
152
  .semi-button-secondary:hover {
123
153
  background-color: var(--semi-color-secondary-hover);
124
154
  }
@@ -130,12 +160,10 @@
130
160
  }
131
161
  .semi-button-disabled {
132
162
  color: var(--semi-color-disabled-text);
133
- background-color: var(--semi-color-disabled-bg);
134
163
  cursor: not-allowed;
135
164
  }
136
165
  .semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
137
166
  color: var(--semi-color-disabled-text);
138
- background-color: var(--semi-color-disabled-bg);
139
167
  }
140
168
  .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
141
169
  color: var(--semi-color-disabled-text);
package/lib/cjs/button/button.scss CHANGED
@@ -39,74 +39,117 @@ $module: #{$prefix}-button;
39
39
  &-danger {
40
40
  background-color: $color-button_danger-bg-default;
41
41
  color: $color-button_danger-text-default;
42
- transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
43
- border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
44
- transform: scale($transform-scale-button_danger);
42
+ transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
43
+ border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
44
+ transform: scale($transform-scale-button_danger);
45
45
 
46
+ &-disabled {
47
+ background-color: $color-button_disabled_danger-bg-default;
48
+
49
+ &.#{$module}-light {
50
+ background-color: $color-button_disabled_light_danger-bg-default;
51
+ }
52
+ }
46
53
 
47
54
  &:hover {
48
55
  background-color: $color-button_danger-bg-hover;
49
56
  }
57
+
50
58
  &:active {
51
59
  background-color: $color-button_danger-bg-active;
52
60
  }
61
+
53
62
  &.#{$module}-light,
54
63
  &.#{$module}-borderless {
55
64
  color: $color-button_danger_borderless-text-default;
56
65
  }
66
+
57
67
  &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
58
68
  outline: $width-button-outline solid $color-button_danger-outline-focus;
59
69
  }
60
70
  }
71
+
61
72
  &-warning {
62
73
  background-color: $color-button_warning-bg-default;
63
74
  color: $color-button_warning-text-default;
64
- transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
65
- border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
66
- transform:scale($transform_scale-button_warning);
75
+ transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
76
+ border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
77
+ transform: scale($transform_scale-button_warning);
78
+
79
+ &-disabled {
80
+ background-color: $color-button_disabled_warning-bg-default;
81
+
82
+ &.#{$module}-light {
83
+ background-color: $color-button_disabled_light_warning-bg-default;
84
+ }
85
+ }
67
86
 
68
87
  &:hover {
69
88
  background-color: $color-button_warning-bg-hover;
70
89
  }
90
+
71
91
  &:active {
72
92
  background-color: $color-button_warning-bg-active;
73
93
  }
94
+
74
95
  &.#{$module}-light,
75
96
  &.#{$module}-borderless {
76
97
  color: $color-button_warning_borderless-text-default;
77
98
  }
99
+
78
100
  &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
79
101
  outline: $width-button-outline solid $color-button_warning-outline-focus;
80
102
  }
81
103
  }
104
+
82
105
  &-tertiary {
83
106
  background-color: $color-button_tertiary-bg-default;
84
107
  color: $color-button_tertiary-text-default;
85
- transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
86
- border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
87
- transform:scale($transform_scale_button_tertiary);
108
+ transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
109
+ border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
110
+ transform: scale($transform_scale_button_tertiary);
111
+
112
+ &-disabled {
113
+ background-color: $color-button_disabled_tertiary-bg-default;
114
+
115
+ &.#{$module}-light {
116
+ background-color: $color-button_disabled_light_tertiary-bg-default;
117
+ }
118
+ }
88
119
 
89
120
  &:hover {
90
121
  background-color: $color-button_tertiary-bg-hover;
91
122
  }
123
+
92
124
  &:active {
93
125
  background-color: $color-button_tertiary-bg-active;
94
126
  }
127
+
95
128
  &.#{$module}-light,
96
129
  &.#{$module}-borderless {
97
130
  color: $color-button_tertiary_solid-text-default;
98
131
  }
99
132
  }
133
+
100
134
  &-primary {
101
135
  background-color: $color-button_primary-bg-default;
102
136
  color: $color-button_primary-text-default;
103
137
  transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
104
138
  border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
105
- transform:scale($transform_scale-button_primary);
139
+ transform: scale($transform_scale-button_primary);
140
+
141
+ &-disabled {
142
+ background-color: $color-button_disabled_primary-bg-default;
143
+
144
+ &.#{$module}-light {
145
+ background: $color-button_disabled_light_primary-bg-default;
146
+ }
147
+ }
106
148
 
107
149
  &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
108
150
  background-color: $color-button_primary-bg-hover;
109
151
  }
152
+
110
153
  &:not(.#{$module}-borderless):not(.#{$module}-light):active {
111
154
  background-color: $color-button_primary-bg-active;
112
155
  }
@@ -116,17 +159,27 @@ $module: #{$prefix}-button;
116
159
  color: $color-button_primary_borderless-text-default;
117
160
  }
118
161
  }
162
+
119
163
  &-secondary {
120
164
  background-color: $color-button_secondary-bg-default;
121
165
  outline-color: $color-button_secondary-border-default;
122
166
  color: $color-button_secondary-text-default;
123
- transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
124
- border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
125
- transform:scale($transform_scale-button_secondary);
167
+ transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
168
+ border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
169
+ transform: scale($transform_scale-button_secondary);
170
+
171
+ &-disabled {
172
+ background-color: $color-button_disabled_secondary-bg-default;
173
+
174
+ &.#{$module}-light {
175
+ background-color: $color-button_disabled_light_secondary-bg-default;
176
+ }
177
+ }
126
178
 
127
179
  &:hover {
128
180
  background-color: $color-button_secondary-bg-hover;
129
181
  }
182
+
130
183
  &:active {
131
184
  background-color: $color-button_secondary-bg-active;
132
185
  }
@@ -136,13 +189,14 @@ $module: #{$prefix}-button;
136
189
  color: $color-button_secondary_borderless-text-default;
137
190
  }
138
191
  }
192
+
139
193
  &-disabled {
140
194
  color: $color-button_disabled_solid-text-default;
141
- background-color: $color-button_disabled-bg-default;
195
+
142
196
  &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
143
197
  color: $color-button_disabled-text-hover;
144
- background-color: $color-button_disabled-bg-hover;
145
198
  }
199
+
146
200
  cursor: not-allowed;
147
201
 
148
202
  &.#{$module}-light,
@@ -150,16 +204,18 @@ $module: #{$prefix}-button;
150
204
  color: $color-button_disabled-text-default;
151
205
  }
152
206
  }
207
+
153
208
  &-borderless {
154
209
  background-color: transparent;
155
210
  border: $width-button_borderless-border $color-button_borderless-border-default solid;
156
- transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
157
- transform:scale($transform_scale-button_borderless);
211
+ transition: background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
212
+ transform: scale($transform_scale-button_borderless);
158
213
 
159
214
  &:not(.#{$module}-disabled):hover {
160
215
  background-color: $color-button_borderless-bg-hover;
161
216
  border: $width-button_borderless-border $color-button_borderless-border-hover solid;
162
217
  }
218
+
163
219
  &:not(.#{$module}-disabled):active {
164
220
  background-color: $color-button_borderless-bg-active;
165
221
  border: $width-button_borderless-border $color-button_borderless-border-active solid;
@@ -169,19 +225,21 @@ $module: #{$prefix}-button;
169
225
  &-light {
170
226
  background-color: $color-button_light-bg-default;
171
227
  border: $width-button_light-border $color-button_light-border-default solid;
172
- transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
173
- border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
174
- transform:scale($transform_scale-button_light);
228
+ transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg,
229
+ border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
230
+ transform: scale($transform_scale-button_light);
175
231
 
176
232
  &:not(.#{$module}-disabled):hover {
177
233
  background-color: $color-button_light-bg-hover;
178
234
  border: $width-button_light-border $color-button_light-border-hover solid;
179
235
  }
236
+
180
237
  &:not(.#{$module}-disabled):active {
181
238
  background-color: $color-button_light-bg-active;
182
239
  border: $width-button_light-border $color-button_light-border-active solid;
183
240
  }
184
241
  }
242
+
185
243
  &-size-small {
186
244
  height: $height-button_small;
187
245
  padding-top: $spacing-button_small-paddingTop;
@@ -189,6 +247,7 @@ $module: #{$prefix}-button;
189
247
  padding-left: $spacing-button_small-paddingLeft;
190
248
  padding-right: $spacing-button_small-paddingRight;
191
249
  }
250
+
192
251
  &-size-large {
193
252
  height: $height-button_large;
194
253
  padding-top: $spacing-button_large-paddingTop;
@@ -196,6 +255,7 @@ $module: #{$prefix}-button;
196
255
  padding-left: $spacing-button_large-paddingLeft;
197
256
  padding-right: $spacing-button_large-paddingRight;
198
257
  }
258
+
199
259
  &-block {
200
260
  width: 100%;
201
261
  }
@@ -259,6 +319,7 @@ $module: #{$prefix}-button;
259
319
  border-top-left-radius: $radius-button_group;
260
320
  border-bottom-left-radius: $radius-button_group;
261
321
  }
322
+
262
323
  &:last-child {
263
324
  border-top-right-radius: $radius-button_group;
264
325
  border-bottom-right-radius: $radius-button_group;
@@ -273,24 +334,31 @@ $module: #{$prefix}-button;
273
334
  &-primary {
274
335
  background-color: $color-button_primary-bg-default;
275
336
  }
337
+
276
338
  &-secondary {
277
339
  background-color: $color-button_secondary-bg-default;
278
340
  }
341
+
279
342
  &-tertiary {
280
343
  background-color: $color-button_tertiary-bg-default;
281
344
  }
345
+
282
346
  &-warning {
283
347
  background-color: $color-button_warning-bg-default;
284
348
  }
349
+
285
350
  &-danger {
286
351
  background-color: $color-button_danger-bg-default;
287
352
  }
353
+
288
354
  &-disabled {
289
355
  background-color: $color-button_disabled-bg-default;
290
356
  }
357
+
291
358
  &-light {
292
359
  background-color: $color-button_light-bg-default;
293
360
  }
361
+
294
362
  &-borderless {
295
363
  background-color: transparent;
296
364
  }