carbon-react 112.0.3 → 112.0.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 (3) hide show
  1. package/esm/components/tabs/__internal__/tab-title/tab-title.style.js +96 -92
  2. package/lib/components/tabs/__internal__/tab-title/tab-title.style.js +96 -92
  3. package/package.json +1 -1
package/esm/components/tabs/__internal__/tab-title/tab-title.style.js CHANGED
@@ -237,136 +237,140 @@ const StyledTabTitle = styled.button`
237
237
  isInSidebar
238
238
  }) => css`
239
239
  height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
240
-
240
+
241
241
  ${position === "top" && css`
242
- ${borders && !(noRightBorder || noLeftBorder) && css`
243
- &:nth-of-type(n + 1) {
244
- margin-left: -1px;
245
- }
246
- &:first-child {
247
- margin-left: 0;
248
- }
249
- `}
242
+ ${borders && !(noRightBorder || noLeftBorder) && css`
243
+ &:nth-of-type(n + 1) {
244
+ margin-left: -1px;
245
+ }
246
+ &:first-child {
247
+ margin-left: 0;
248
+ }
250
249
  `}
250
+ `}
251
251
  ${position === "left" && css`
252
- ${borders && css`
253
- &:nth-of-type(n + 1) {
254
- margin-top: -1px;
255
- }
256
- &:first-child {
257
- margin-top: 0;
258
- }
259
- `}
252
+ ${borders && css`
253
+ &:nth-of-type(n + 1) {
254
+ margin-top: -1px;
255
+ }
256
+ &:first-child {
257
+ margin-top: 0;
258
+ }
260
259
  `}
260
+ `}
261
261
 
262
262
  ${!isTabSelected && css`
263
- color: var(--colorsActionMinorYin090);
263
+ color: var(--colorsActionMinorYin090);
264
264
 
265
- &:hover {
266
- background: var(--colorsActionMinor100);
267
- color: var(--colorsActionMinorYin090);
268
- outline: none;
269
- }
270
- &:focus {
271
- color: var(--colorsActionMinorYin090);
272
- outline: none;
273
- }
274
- `}
265
+ &:hover {
266
+ background: var(--colorsActionMinor100);
267
+ color: var(--colorsActionMinorYin090);
268
+ outline: none;
269
+ }
270
+ &:focus {
271
+ color: var(--colorsActionMinorYin090);
272
+ outline: none;
273
+ }
274
+ `}
275
275
 
276
276
  ${isTabSelected && css`
277
- color: var(--colorsActionMajorYin090);
278
- background-color: var(--colorsActionMajorYang100);
279
-
280
- ${(error || warning || info) && css`
281
- padding-bottom: 0px;
282
- `}
277
+ color: var(--colorsActionMajorYin090);
278
+ background-color: var(--colorsActionMajorYang100);
283
279
 
284
- &:hover {
285
- background-color: var(--colorsActionMajorYang100);
286
- border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
287
- color: var(--colorsActionMajorYin090);
288
- cursor: default;
289
- }
280
+ ${(error || warning || info) && css`
281
+ padding-bottom: 0px;
290
282
  `}
291
283
 
284
+ &:hover {
285
+ background-color: var(--colorsActionMajorYang100);
286
+ border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
287
+ color: var(--colorsActionMajorYin090);
288
+ cursor: default;
289
+ }
290
+ `}
291
+
292
292
  &:focus {
293
- outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
293
+ outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
294
294
  z-index: 2;
295
+
296
+ ${isInSidebar && css`
297
+ outline-offset: -3px;
298
+ `}
295
299
  }
296
300
 
297
301
  ${position === "left" && css`
298
- background-color: transparent;
299
- border-bottom: 0px;
302
+ background-color: transparent;
303
+ border-bottom: 0px;
300
304
 
301
- ${!isInSidebar && !error && css`
302
- border-right: ${alternateStyling ? "1px" : "2px"} solid
303
- var(--colorsActionMinor100);
304
- `}
305
+ ${!isInSidebar && !error && css`
306
+ border-right: ${alternateStyling ? "1px" : "2px"} solid
307
+ var(--colorsActionMinor100);
308
+ `}
305
309
 
306
- ${!borders && css`
307
- ${StyledTitleContent} {
308
- border-bottom: none;
309
- }
310
- `}
310
+ ${!borders && css`
311
+ ${StyledTitleContent} {
312
+ border-bottom: none;
313
+ }
314
+ `}
311
315
 
312
316
  display: flex;
313
- height: auto;
314
- margin-left: 0px;
317
+ height: auto;
318
+ margin-left: 0px;
315
319
 
316
- &:first-child {
317
- margin-top: 0;
318
- }
320
+ &:first-child {
321
+ margin-top: 0;
322
+ }
319
323
 
320
- &:hover {
321
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
322
- }
324
+ &:hover {
325
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
326
+ }
323
327
 
324
- ${(warning || info) && css`
325
- border-right: none;
328
+ ${(warning || info) && css`
329
+ border-right: none;
330
+ `}
331
+
332
+ ${isTabSelected && css`
333
+ ${alternateStyling && css`
334
+ border-right-color: var(--colorsActionMinor100);
326
335
  `}
327
336
 
328
- ${isTabSelected && css`
329
- ${alternateStyling && css`
330
- border-right-color: var(--colorsActionMinor100);
331
- `}
337
+ ${!alternateStyling && css`
338
+ border-right: none;
339
+ padding-bottom: 0px;
332
340
 
333
- ${!alternateStyling && css`
341
+ ${StyledTitleContent} {
342
+ ${!(error || warning || info) && "margin-right: 2px;"}
334
343
  border-right: none;
335
- padding-bottom: 0px;
336
-
337
- ${StyledTitleContent} {
338
- ${!(error || warning || info) && "margin-right: 2px;"}
339
- border-right: none;
340
- }
341
- `}
344
+ }
345
+ `}
342
346
 
343
347
  background-color: var(--colorsActionMajorYang100);
344
348
 
345
- &:hover {
346
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
347
- background-color: var(--colorsActionMajorYang100);
348
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
349
- }
349
+ &:hover {
350
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
351
+ background-color: var(--colorsActionMajorYang100);
352
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
353
+ }
350
354
 
351
- &:focus {
352
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
353
- }
354
- `}
355
+ &:focus {
356
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
357
+ }
355
358
  `}
359
+ `}
356
360
 
357
361
  ${alternateStyling && css`
358
- &:focus {
359
- background-color: var(--colorsActionMinor200);
360
- }
362
+ &:focus {
363
+ background-color: var(--colorsActionMinor200);
364
+ }
361
365
 
362
- &:hover {
363
- background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
364
- }
366
+ &:hover {
367
+ background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
368
+ }
365
369
 
366
- ${isTabSelected && css`
367
- background-color: var(--colorsActionMinor200);
368
- `}
370
+ ${isTabSelected && css`
371
+ background-color: var(--colorsActionMinor200);
369
372
  `}
373
+ `}
370
374
  `}
371
375
  `;
372
376
  const StyledLayoutWrapper = styled.div`
package/lib/components/tabs/__internal__/tab-title/tab-title.style.js CHANGED
@@ -255,136 +255,140 @@ const StyledTabTitle = _styledComponents.default.button`
255
255
  isInSidebar
256
256
  }) => (0, _styledComponents.css)`
257
257
  height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
258
-
258
+
259
259
  ${position === "top" && (0, _styledComponents.css)`
260
- ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
261
- &:nth-of-type(n + 1) {
262
- margin-left: -1px;
263
- }
264
- &:first-child {
265
- margin-left: 0;
266
- }
267
- `}
260
+ ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
261
+ &:nth-of-type(n + 1) {
262
+ margin-left: -1px;
263
+ }
264
+ &:first-child {
265
+ margin-left: 0;
266
+ }
268
267
  `}
268
+ `}
269
269
  ${position === "left" && (0, _styledComponents.css)`
270
- ${borders && (0, _styledComponents.css)`
271
- &:nth-of-type(n + 1) {
272
- margin-top: -1px;
273
- }
274
- &:first-child {
275
- margin-top: 0;
276
- }
277
- `}
270
+ ${borders && (0, _styledComponents.css)`
271
+ &:nth-of-type(n + 1) {
272
+ margin-top: -1px;
273
+ }
274
+ &:first-child {
275
+ margin-top: 0;
276
+ }
278
277
  `}
278
+ `}
279
279
 
280
280
  ${!isTabSelected && (0, _styledComponents.css)`
281
- color: var(--colorsActionMinorYin090);
281
+ color: var(--colorsActionMinorYin090);
282
282
 
283
- &:hover {
284
- background: var(--colorsActionMinor100);
285
- color: var(--colorsActionMinorYin090);
286
- outline: none;
287
- }
288
- &:focus {
289
- color: var(--colorsActionMinorYin090);
290
- outline: none;
291
- }
292
- `}
283
+ &:hover {
284
+ background: var(--colorsActionMinor100);
285
+ color: var(--colorsActionMinorYin090);
286
+ outline: none;
287
+ }
288
+ &:focus {
289
+ color: var(--colorsActionMinorYin090);
290
+ outline: none;
291
+ }
292
+ `}
293
293
 
294
294
  ${isTabSelected && (0, _styledComponents.css)`
295
- color: var(--colorsActionMajorYin090);
296
- background-color: var(--colorsActionMajorYang100);
297
-
298
- ${(error || warning || info) && (0, _styledComponents.css)`
299
- padding-bottom: 0px;
300
- `}
295
+ color: var(--colorsActionMajorYin090);
296
+ background-color: var(--colorsActionMajorYang100);
301
297
 
302
- &:hover {
303
- background-color: var(--colorsActionMajorYang100);
304
- border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
305
- color: var(--colorsActionMajorYin090);
306
- cursor: default;
307
- }
298
+ ${(error || warning || info) && (0, _styledComponents.css)`
299
+ padding-bottom: 0px;
308
300
  `}
309
301
 
302
+ &:hover {
303
+ background-color: var(--colorsActionMajorYang100);
304
+ border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
305
+ color: var(--colorsActionMajorYin090);
306
+ cursor: default;
307
+ }
308
+ `}
309
+
310
310
  &:focus {
311
- outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
311
+ outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
312
312
  z-index: 2;
313
+
314
+ ${isInSidebar && (0, _styledComponents.css)`
315
+ outline-offset: -3px;
316
+ `}
313
317
  }
314
318
 
315
319
  ${position === "left" && (0, _styledComponents.css)`
316
- background-color: transparent;
317
- border-bottom: 0px;
320
+ background-color: transparent;
321
+ border-bottom: 0px;
318
322
 
319
- ${!isInSidebar && !error && (0, _styledComponents.css)`
320
- border-right: ${alternateStyling ? "1px" : "2px"} solid
321
- var(--colorsActionMinor100);
322
- `}
323
+ ${!isInSidebar && !error && (0, _styledComponents.css)`
324
+ border-right: ${alternateStyling ? "1px" : "2px"} solid
325
+ var(--colorsActionMinor100);
326
+ `}
323
327
 
324
- ${!borders && (0, _styledComponents.css)`
325
- ${StyledTitleContent} {
326
- border-bottom: none;
327
- }
328
- `}
328
+ ${!borders && (0, _styledComponents.css)`
329
+ ${StyledTitleContent} {
330
+ border-bottom: none;
331
+ }
332
+ `}
329
333
 
330
334
  display: flex;
331
- height: auto;
332
- margin-left: 0px;
335
+ height: auto;
336
+ margin-left: 0px;
333
337
 
334
- &:first-child {
335
- margin-top: 0;
336
- }
338
+ &:first-child {
339
+ margin-top: 0;
340
+ }
337
341
 
338
- &:hover {
339
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
340
- }
342
+ &:hover {
343
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
344
+ }
341
345
 
342
- ${(warning || info) && (0, _styledComponents.css)`
343
- border-right: none;
346
+ ${(warning || info) && (0, _styledComponents.css)`
347
+ border-right: none;
348
+ `}
349
+
350
+ ${isTabSelected && (0, _styledComponents.css)`
351
+ ${alternateStyling && (0, _styledComponents.css)`
352
+ border-right-color: var(--colorsActionMinor100);
344
353
  `}
345
354
 
346
- ${isTabSelected && (0, _styledComponents.css)`
347
- ${alternateStyling && (0, _styledComponents.css)`
348
- border-right-color: var(--colorsActionMinor100);
349
- `}
355
+ ${!alternateStyling && (0, _styledComponents.css)`
356
+ border-right: none;
357
+ padding-bottom: 0px;
350
358
 
351
- ${!alternateStyling && (0, _styledComponents.css)`
359
+ ${StyledTitleContent} {
360
+ ${!(error || warning || info) && "margin-right: 2px;"}
352
361
  border-right: none;
353
- padding-bottom: 0px;
354
-
355
- ${StyledTitleContent} {
356
- ${!(error || warning || info) && "margin-right: 2px;"}
357
- border-right: none;
358
- }
359
- `}
362
+ }
363
+ `}
360
364
 
361
365
  background-color: var(--colorsActionMajorYang100);
362
366
 
363
- &:hover {
364
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
365
- background-color: var(--colorsActionMajorYang100);
366
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
367
- }
367
+ &:hover {
368
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
369
+ background-color: var(--colorsActionMajorYang100);
370
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
371
+ }
368
372
 
369
- &:focus {
370
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
371
- }
372
- `}
373
+ &:focus {
374
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
375
+ }
373
376
  `}
377
+ `}
374
378
 
375
379
  ${alternateStyling && (0, _styledComponents.css)`
376
- &:focus {
377
- background-color: var(--colorsActionMinor200);
378
- }
380
+ &:focus {
381
+ background-color: var(--colorsActionMinor200);
382
+ }
379
383
 
380
- &:hover {
381
- background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
382
- }
384
+ &:hover {
385
+ background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
386
+ }
383
387
 
384
- ${isTabSelected && (0, _styledComponents.css)`
385
- background-color: var(--colorsActionMinor200);
386
- `}
388
+ ${isTabSelected && (0, _styledComponents.css)`
389
+ background-color: var(--colorsActionMinor200);
387
390
  `}
391
+ `}
388
392
  `}
389
393
  `;
390
394
  exports.StyledTabTitle = StyledTabTitle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "112.0.3",
3
+ "version": "112.0.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",