@jetbrains/ring-ui 7.0.102 → 7.0.103

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 (3) hide show
  1. package/components/button/button.css +12 -3
  2. package/components/button-group/button-group.css +28 -26
  3. package/package.json +1 -1
package/components/button/button.css CHANGED
@@ -11,6 +11,8 @@
11
11
  --ring-button-loader-components: var(--ring-main-components);
12
12
  --ring-button-white-text-disabled-color: var(--ring-white-text-color);
13
13
  --ring-button-icon-line-height: calc(var(--ring-unit) * 2);
14
+ --ring-button-border-radius-left: var(--ring-border-radius);
15
+ --ring-button-border-radius-right: var(--ring-border-radius);
14
16
  }
15
17
 
16
18
  :global(.ring-ui-theme-dark) {
@@ -66,7 +68,8 @@
66
68
  color: var(--ring-button-text-color);
67
69
 
68
70
  border: 0;
69
- border-radius: var(--ring-border-radius);
71
+ border-radius: var(--ring-button-border-radius-left) var(--ring-button-border-radius-right)
72
+ var(--ring-button-border-radius-right) var(--ring-button-border-radius-left);
70
73
  outline: 0;
71
74
 
72
75
  background-color: var(--ring-button-background-color);
@@ -386,7 +389,10 @@
386
389
 
387
390
  overflow: hidden;
388
391
 
389
- border-radius: calc(var(--ring-border-radius) - 1px);
392
+ border-top-left-radius: max(0px, calc(var(--ring-button-border-radius-left) - 1px));
393
+ border-top-right-radius: max(0px, calc(var(--ring-button-border-radius-right) - 1px));
394
+ border-bottom-right-radius: max(0px, calc(var(--ring-button-border-radius-right) - 1px));
395
+ border-bottom-left-radius: max(0px, calc(var(--ring-button-border-radius-left) - 1px));
390
396
  background-color: var(--ring-button-default-background-color);
391
397
 
392
398
  &::before {
@@ -414,7 +420,10 @@
414
420
  bottom: 0;
415
421
  left: 0;
416
422
 
417
- border-radius: var(--ring-border-radius);
423
+ border-top-left-radius: var(--ring-button-border-radius-left);
424
+ border-top-right-radius: var(--ring-button-border-radius-right);
425
+ border-bottom-right-radius: var(--ring-button-border-radius-right);
426
+ border-bottom-left-radius: var(--ring-button-border-radius-left);
418
427
  }
419
428
 
420
429
  .delayed::after {
package/components/button-group/button-group.css CHANGED
@@ -118,24 +118,32 @@
118
118
  /* stylelint-disable selector-max-specificity */
119
119
  .buttonGroup .button.button:hover:not(:disabled),
120
120
  .buttonGroup .button.button:active:not(:disabled) {
121
- border-radius: var(--ring-border-radius);
121
+ --ring-button-border-radius-left: var(--ring-border-radius);
122
+ --ring-button-border-radius-right: var(--ring-border-radius);
123
+
122
124
  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
123
125
  }
124
126
 
125
127
  .buttonGroup .button.button:focus-visible {
126
- border-radius: var(--ring-border-radius);
128
+ --ring-button-border-radius-left: var(--ring-border-radius);
129
+ --ring-button-border-radius-right: var(--ring-border-radius);
130
+
127
131
  box-shadow:
128
132
  var(--ring-button-shadow) var(--ring-border-hover-color),
129
133
  0 0 0 1px var(--ring-border-hover-color);
130
134
  }
131
135
 
132
136
  .buttonGroup .button.button.active {
133
- border-radius: var(--ring-border-radius);
137
+ --ring-button-border-radius-left: var(--ring-border-radius);
138
+ --ring-button-border-radius-right: var(--ring-border-radius);
139
+
134
140
  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
135
141
  }
136
142
 
137
143
  .buttonGroup .button:focus-visible.active {
138
- border-radius: var(--ring-border-radius);
144
+ --ring-button-border-radius-left: var(--ring-border-radius);
145
+ --ring-button-border-radius-right: var(--ring-border-radius);
146
+
139
147
  box-shadow:
140
148
  var(--ring-button-shadow) var(--ring-button-border-color),
141
149
  0 0 0 1px var(--ring-border-hover-color);
@@ -151,11 +159,15 @@
151
159
  composes: buttonGroup from '../button-toolbar/button-toolbar.css';
152
160
  }
153
161
 
154
- .common button,
155
- .common .button {
162
+ .common button {
156
163
  border-radius: 0;
157
164
  }
158
165
 
166
+ .common .button {
167
+ --ring-button-border-radius-left: 0;
168
+ --ring-button-border-radius-right: 0;
169
+ }
170
+
159
171
  .split button,
160
172
  .split .button {
161
173
  margin: 0 0 0 -1px;
@@ -173,39 +185,29 @@
173
185
  }
174
186
  }
175
187
 
176
- .common > button:first-child,
177
- .common > .button:first-child,
178
- .common > :first-child .button {
188
+ .common > button:first-child {
179
189
  margin: 0;
180
190
 
181
191
  border-top-left-radius: var(--ring-border-radius);
182
192
  border-bottom-left-radius: var(--ring-border-radius);
183
193
  }
184
194
 
185
- /* stylelint-disable selector-max-specificity */
186
- .common > button:first-child > div:first-child,
187
- .common > .button:first-child > div:first-child,
188
- .common > :first-child .button > div:first-child {
189
- border-top-right-radius: 0;
190
- border-bottom-right-radius: 0;
195
+ .common > .button:first-child,
196
+ .common > :first-child .button {
197
+ --ring-button-border-radius-left: var(--ring-border-radius);
198
+
199
+ margin: 0;
191
200
  }
192
- /* stylelint-enable */
193
201
 
194
- .common > .button:last-child,
195
- .common > button:last-child,
196
- .common > :last-child .button {
202
+ .common > button:last-child {
197
203
  border-top-right-radius: var(--ring-border-radius);
198
204
  border-bottom-right-radius: var(--ring-border-radius);
199
205
  }
200
206
 
201
- /* stylelint-disable selector-max-specificity */
202
- .common > .button:last-child > div:first-child,
203
- .common > button:last-child > div:first-child,
204
- .common > :last-child .button > div:first-child {
205
- border-top-left-radius: 0;
206
- border-bottom-left-radius: 0;
207
+ .common > .button:last-child,
208
+ .common > :last-child .button {
209
+ --ring-button-border-radius-right: var(--ring-border-radius);
207
210
  }
208
- /* stylelint-enable */
209
211
 
210
212
  .split .flat:not(:last-child) {
211
213
  margin-right: 1px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jetbrains/ring-ui",
3
- "version": "7.0.102",
3
+ "version": "7.0.103",
4
4
  "description": "JetBrains UI library",
5
5
  "author": {
6
6
  "name": "JetBrains"