@carbon/styles 1.60.1 → 1.61.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.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.61.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@carbon/colors": "^11.23.
|
|
43
|
+
"@carbon/colors": "^11.23.0",
|
|
44
44
|
"@carbon/feature-flags": "^0.20.0",
|
|
45
|
-
"@carbon/grid": "^11.24.
|
|
46
|
-
"@carbon/layout": "^11.23.
|
|
47
|
-
"@carbon/motion": "^11.19.
|
|
48
|
-
"@carbon/themes": "^11.37.
|
|
49
|
-
"@carbon/type": "^11.28.
|
|
45
|
+
"@carbon/grid": "^11.24.0",
|
|
46
|
+
"@carbon/layout": "^11.23.0",
|
|
47
|
+
"@carbon/motion": "^11.19.0",
|
|
48
|
+
"@carbon/themes": "^11.37.0",
|
|
49
|
+
"@carbon/type": "^11.28.0",
|
|
50
50
|
"@ibm/plex": "6.0.0-next.6",
|
|
51
51
|
"@ibm/telemetry-js": "^1.5.0"
|
|
52
52
|
},
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"scss/**/*.css",
|
|
69
69
|
"css/**/*.css"
|
|
70
70
|
],
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "4e8fc6f3f11f2946d6a4b7f3462be833a63115dc"
|
|
72
72
|
}
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
@use '../../utilities/component-reset';
|
|
18
18
|
@use '../../utilities/focus-outline' as *;
|
|
19
19
|
@use '../../utilities/high-contrast-mode' as *;
|
|
20
|
+
@use '../../utilities/update_fields_on_layer' as *;
|
|
20
21
|
@use '../../utilities/z-index' as *;
|
|
21
22
|
|
|
22
23
|
/// Modal styles
|
|
@@ -51,98 +52,7 @@
|
|
|
51
52
|
}
|
|
52
53
|
}
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
.#{$prefix}--pagination,
|
|
56
|
-
.#{$prefix}--pagination__control-buttons,
|
|
57
|
-
.#{$prefix}--text-input,
|
|
58
|
-
.#{$prefix}--text-area,
|
|
59
|
-
.#{$prefix}--search-input,
|
|
60
|
-
.#{$prefix}--select-input,
|
|
61
|
-
.#{$prefix}--dropdown,
|
|
62
|
-
.#{$prefix}--dropdown-list,
|
|
63
|
-
.#{$prefix}--number input[type='number'],
|
|
64
|
-
.#{$prefix}--date-picker__input,
|
|
65
|
-
.#{$prefix}--multi-select,
|
|
66
|
-
.#{$prefix}--number__control-btn::before,
|
|
67
|
-
.#{$prefix}--number__control-btn::after,
|
|
68
|
-
.#{$prefix}--list-box input[role='combobox'] {
|
|
69
|
-
background-color: $field-02;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// Override to align layer token with field
|
|
73
|
-
.#{$prefix}--list-box__menu {
|
|
74
|
-
background-color: $layer-02;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.#{$prefix}--number__rule-divider {
|
|
78
|
-
background-color: $border-subtle-02;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.#{$prefix}--list-box__menu-item__option {
|
|
82
|
-
border-block-start-color: $border-subtle-02;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.#{$prefix}--list-box__menu-item:hover
|
|
86
|
-
.#{$prefix}--list-box__menu-item__option {
|
|
87
|
-
border-block-start-color: $layer-hover-02;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.#{$prefix}--list-box__menu-item--active:hover
|
|
91
|
-
.#{$prefix}--list-box__menu-item__option {
|
|
92
|
-
border-block-start-color: $layer-selected-hover-02;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// Fluid inputs
|
|
96
|
-
.#{$prefix}--text-input--fluid .#{$prefix}--text-input,
|
|
97
|
-
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
|
|
98
|
-
.#{$prefix}--text-area--fluid .#{$prefix}--text-area,
|
|
99
|
-
.#{$prefix}--search--fluid .#{$prefix}--search-input,
|
|
100
|
-
.#{$prefix}--select--fluid .#{$prefix}--select-input,
|
|
101
|
-
.#{$prefix}--text-area--fluid
|
|
102
|
-
.#{$prefix}--text-area__wrapper[data-invalid]
|
|
103
|
-
.#{$prefix}--text-area__divider
|
|
104
|
-
+ .#{$prefix}--form-requirement,
|
|
105
|
-
.#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
|
|
106
|
-
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
|
|
107
|
-
.#{$prefix}--number-input--fluid input[type='number'],
|
|
108
|
-
.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
|
|
109
|
-
.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
|
|
110
|
-
.#{$prefix}--date-picker--fluid
|
|
111
|
-
.c#{$prefix}ds--date-picker-input__wrapper
|
|
112
|
-
.#{$prefix}--date-picker__input {
|
|
113
|
-
background-color: $field-01;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// Override to align layer token with field
|
|
117
|
-
.#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
|
|
118
|
-
background-color: $layer-01;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.#{$prefix}--list-box__menu-item:hover {
|
|
122
|
-
background-color: $layer-hover-02;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.#{$prefix}--list-box__menu-item--active {
|
|
126
|
-
background-color: $layer-selected-02;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.#{$prefix}--list-box__menu-item--active:hover {
|
|
130
|
-
background-color: $layer-selected-hover-02;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.#{$prefix}--number-input--fluid
|
|
134
|
-
.#{$prefix}--number__control-btn:hover::before,
|
|
135
|
-
.#{$prefix}--number-input--fluid
|
|
136
|
-
.#{$prefix}--number__control-btn:hover::after {
|
|
137
|
-
background-color: $field-hover;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.#{$prefix}--number-input--fluid
|
|
141
|
-
.#{$prefix}--number__control-btn:focus::before,
|
|
142
|
-
.#{$prefix}--number-input--fluid
|
|
143
|
-
.#{$prefix}--number__control-btn:focus::after {
|
|
144
|
-
border-inline-start: 2px solid $focus;
|
|
145
|
-
}
|
|
55
|
+
@include update_fields_on_layer;
|
|
146
56
|
}
|
|
147
57
|
|
|
148
58
|
.#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
|
|
@@ -361,6 +271,11 @@
|
|
|
361
271
|
linear-gradient(to top, $layer 0, 2px, transparent 2px);
|
|
362
272
|
}
|
|
363
273
|
|
|
274
|
+
//removing mask image in case we have dropdown in modal
|
|
275
|
+
.#{$prefix}--modal-scroll-content:has(.#{$prefix}--dropdown--autoalign) {
|
|
276
|
+
mask-image: none;
|
|
277
|
+
}
|
|
278
|
+
|
|
364
279
|
// Required so overflow-indicator disappears at end of content
|
|
365
280
|
.#{$prefix}--modal-scroll-content > *:last-child {
|
|
366
281
|
margin-block-end: $spacing-06;
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
@use '../../spacing' as *;
|
|
21
21
|
@use '../../motion' as *;
|
|
22
22
|
@use '../../layer' as *;
|
|
23
|
+
@use '../../layer/layer-tokens';
|
|
23
24
|
@use '../../utilities/focus-outline' as *;
|
|
24
25
|
@use '../../utilities/rotate' as *;
|
|
25
26
|
@use '../../utilities/box-shadow' as *;
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
@use '../../utilities/high-contrast-mode' as *;
|
|
33
34
|
@use '../../utilities/convert';
|
|
34
35
|
@use '../../utilities/layout';
|
|
36
|
+
@use '../../utilities/update_fields_on_layer' as *;
|
|
35
37
|
|
|
36
38
|
/// Tabs styles
|
|
37
39
|
/// @access public
|
|
@@ -59,6 +61,7 @@
|
|
|
59
61
|
inline-size: 100%;
|
|
60
62
|
max-block-size: custom-property.get-var('layout-size-height-xl');
|
|
61
63
|
min-block-size: layout.size('height');
|
|
64
|
+
overflow-x: hidden;
|
|
62
65
|
|
|
63
66
|
&.#{$prefix}--tabs--contained {
|
|
64
67
|
@include layout.use('size', $min: 'sm', $max: 'xl', $default: 'lg');
|
|
@@ -77,6 +80,42 @@
|
|
|
77
80
|
}
|
|
78
81
|
}
|
|
79
82
|
|
|
83
|
+
&.#{$prefix}--tabs--vertical {
|
|
84
|
+
background: $layer;
|
|
85
|
+
box-shadow: inset -1px 0 $border-subtle;
|
|
86
|
+
grid-column: span 2;
|
|
87
|
+
max-block-size: none;
|
|
88
|
+
|
|
89
|
+
@include breakpoint(lg) {
|
|
90
|
+
grid-column: span 4;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.#{$prefix}--tab--list {
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
inline-size: 100%;
|
|
96
|
+
overflow-x: visible;
|
|
97
|
+
overflow-y: auto;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.#{$prefix}--tab--list-gradient_bottom {
|
|
101
|
+
position: absolute;
|
|
102
|
+
background: linear-gradient(to bottom, transparent, $layer);
|
|
103
|
+
block-size: $spacing-10;
|
|
104
|
+
inset-block-end: 0;
|
|
105
|
+
inset-inline: 0;
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.#{$prefix}--tab--list-gradient_top {
|
|
110
|
+
position: absolute;
|
|
111
|
+
background: linear-gradient(to top, transparent, $layer);
|
|
112
|
+
block-size: $spacing-10;
|
|
113
|
+
inset-block-start: 0;
|
|
114
|
+
inset-inline: 0;
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
80
119
|
.#{$prefix}--tabs__nav {
|
|
81
120
|
@include component-reset.reset;
|
|
82
121
|
|
|
@@ -283,7 +322,18 @@
|
|
|
283
322
|
margin-inline-start: 0;
|
|
284
323
|
}
|
|
285
324
|
|
|
286
|
-
&.#{$prefix}--tabs--
|
|
325
|
+
&.#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item {
|
|
326
|
+
flex: none;
|
|
327
|
+
background-color: $layer-01;
|
|
328
|
+
block-size: $spacing-10;
|
|
329
|
+
border-block-end: 1px solid $border-subtle;
|
|
330
|
+
border-inline-end: 1px solid $border-subtle;
|
|
331
|
+
box-shadow: inset 3px 0 0 0 $border-subtle;
|
|
332
|
+
inline-size: 100%;
|
|
333
|
+
margin-inline-start: 0;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
&.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
|
|
287
337
|
.#{$prefix}--tabs__nav-item--selected
|
|
288
338
|
+ div
|
|
289
339
|
+ .#{$prefix}--tabs__nav-item {
|
|
@@ -432,7 +482,8 @@
|
|
|
432
482
|
}
|
|
433
483
|
}
|
|
434
484
|
|
|
435
|
-
&.#{$prefix}--tabs--contained
|
|
485
|
+
&.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
|
|
486
|
+
.#{$prefix}--tabs__nav-link {
|
|
436
487
|
border-block-end: 0;
|
|
437
488
|
padding-inline: layout.density('padding-inline');
|
|
438
489
|
}
|
|
@@ -449,6 +500,11 @@
|
|
|
449
500
|
min-block-size: convert.to-rem(16px);
|
|
450
501
|
}
|
|
451
502
|
|
|
503
|
+
&.#{$prefix}--tabs--vertical:not(.#{$prefix}--tabs--tall)
|
|
504
|
+
.#{$prefix}--tabs__nav-item-label {
|
|
505
|
+
line-height: var(--cds-body-compact-01-line-height);
|
|
506
|
+
}
|
|
507
|
+
|
|
452
508
|
//-----------------------------
|
|
453
509
|
// Icon Item
|
|
454
510
|
//-----------------------------
|
|
@@ -492,6 +548,16 @@
|
|
|
492
548
|
color: $text-primary;
|
|
493
549
|
}
|
|
494
550
|
|
|
551
|
+
&.#{$prefix}--tabs--vertical
|
|
552
|
+
.#{$prefix}--tabs__nav-item:not(
|
|
553
|
+
.#{$prefix}--tabs__nav-item--selected
|
|
554
|
+
):not(.#{$prefix}--tabs__nav-item--disabled):not(
|
|
555
|
+
.#{$prefix}--tabs__nav-item--hover-off
|
|
556
|
+
):hover {
|
|
557
|
+
background-color: $layer-hover;
|
|
558
|
+
box-shadow: inset 3px 0 0 0 $border-strong;
|
|
559
|
+
}
|
|
560
|
+
|
|
495
561
|
//-----------------------------
|
|
496
562
|
// Item Selected
|
|
497
563
|
//-----------------------------
|
|
@@ -512,6 +578,13 @@
|
|
|
512
578
|
box-shadow: inset 0 2px 0 0 $border-interactive;
|
|
513
579
|
}
|
|
514
580
|
|
|
581
|
+
&.#{$prefix}--tabs--vertical
|
|
582
|
+
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected {
|
|
583
|
+
border-inline: none;
|
|
584
|
+
// Draws the border without affecting the inner-content
|
|
585
|
+
box-shadow: inset 3px 0 0 0 $border-interactive;
|
|
586
|
+
}
|
|
587
|
+
|
|
515
588
|
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
|
|
516
589
|
.#{$prefix}--tabs__nav-item--selected,
|
|
517
590
|
.#{$prefix}--tabs__nav-item--selected:focus
|
|
@@ -572,6 +645,14 @@
|
|
|
572
645
|
background-color: button.$button-disabled;
|
|
573
646
|
}
|
|
574
647
|
|
|
648
|
+
&.#{$prefix}--tabs--vertical
|
|
649
|
+
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
|
|
650
|
+
&.#{$prefix}--tabs--vertical
|
|
651
|
+
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
|
|
652
|
+
background-color: $layer;
|
|
653
|
+
border-block-end: 1px solid $border-subtle;
|
|
654
|
+
}
|
|
655
|
+
|
|
575
656
|
.#{$prefix}--tabs__nav-item--disabled:focus,
|
|
576
657
|
.#{$prefix}--tabs__nav-item--disabled:active {
|
|
577
658
|
border-block-end: $tab-underline-disabled;
|
|
@@ -600,7 +681,8 @@
|
|
|
600
681
|
border-block-end-color: $border-subtle;
|
|
601
682
|
}
|
|
602
683
|
|
|
603
|
-
&.#{$prefix}--tabs--contained
|
|
684
|
+
&.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
|
|
685
|
+
.#{$prefix}--tabs__nav-item--disabled {
|
|
604
686
|
border-block-end: none;
|
|
605
687
|
color: $text-on-color-disabled;
|
|
606
688
|
}
|
|
@@ -618,6 +700,21 @@
|
|
|
618
700
|
|
|
619
701
|
.#{$prefix}--tabs--contained ~ .#{$prefix}--tab-content {
|
|
620
702
|
background: $layer;
|
|
703
|
+
|
|
704
|
+
> * {
|
|
705
|
+
@include layer-tokens.emit-layer-tokens(2);
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
.#{$prefix}--tabs--vertical ~ .#{$prefix}--tab-content {
|
|
710
|
+
@include update_fields_on_layer;
|
|
711
|
+
|
|
712
|
+
grid-column: 3/-1;
|
|
713
|
+
overflow-y: auto;
|
|
714
|
+
|
|
715
|
+
@include breakpoint(lg) {
|
|
716
|
+
grid-column: 5/-1;
|
|
717
|
+
}
|
|
621
718
|
}
|
|
622
719
|
|
|
623
720
|
.#{$prefix}--tab-content--interactive {
|
|
@@ -690,3 +787,16 @@
|
|
|
690
787
|
}
|
|
691
788
|
}
|
|
692
789
|
}
|
|
790
|
+
|
|
791
|
+
.#{$prefix}--tabs.#{$prefix}--tabs--vertical {
|
|
792
|
+
.#{$prefix}--tabs__nav-link {
|
|
793
|
+
.#{$prefix}--tabs__nav-item-label {
|
|
794
|
+
display: -webkit-box;
|
|
795
|
+
overflow: hidden;
|
|
796
|
+
-webkit-box-orient: vertical;
|
|
797
|
+
-webkit-line-clamp: 2;
|
|
798
|
+
text-overflow: ellipsis;
|
|
799
|
+
white-space: normal;
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2021
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use '../config' as *;
|
|
9
|
+
@use '../theme' as *;
|
|
10
|
+
|
|
11
|
+
/// Update tokens when fields are placed on `layer`
|
|
12
|
+
/// @access public
|
|
13
|
+
/// @group utilities
|
|
14
|
+
@mixin update_fields_on_layer {
|
|
15
|
+
// Fluid inputs
|
|
16
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--text-input,
|
|
17
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
|
|
18
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area,
|
|
19
|
+
.#{$prefix}--search--fluid .#{$prefix}--search-input,
|
|
20
|
+
.#{$prefix}--select--fluid .#{$prefix}--select-input,
|
|
21
|
+
.#{$prefix}--text-area--fluid
|
|
22
|
+
.#{$prefix}--text-area__wrapper[data-invalid]
|
|
23
|
+
.#{$prefix}--text-area__divider
|
|
24
|
+
+ .#{$prefix}--form-requirement,
|
|
25
|
+
.#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
|
|
26
|
+
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
|
|
27
|
+
.#{$prefix}--number-input--fluid input[type='number'],
|
|
28
|
+
.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
|
|
29
|
+
.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
|
|
30
|
+
.#{$prefix}--date-picker--fluid
|
|
31
|
+
.c#{$prefix}ds--date-picker-input__wrapper
|
|
32
|
+
.#{$prefix}--date-picker__input {
|
|
33
|
+
background-color: $field-01;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Override to align layer token with field
|
|
37
|
+
.#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
|
|
38
|
+
background-color: $layer-01;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.#{$prefix}--list-box__menu-item:hover {
|
|
42
|
+
background-color: $layer-hover-02;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.#{$prefix}--list-box__menu-item--active {
|
|
46
|
+
background-color: $layer-selected-02;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.#{$prefix}--list-box__menu-item--active:hover {
|
|
50
|
+
background-color: $layer-selected-hover-02;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.#{$prefix}--number-input--fluid
|
|
54
|
+
.#{$prefix}--number__control-btn:hover::before,
|
|
55
|
+
.#{$prefix}--number-input--fluid
|
|
56
|
+
.#{$prefix}--number__control-btn:hover::after {
|
|
57
|
+
background-color: $field-hover;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.#{$prefix}--number-input--fluid
|
|
61
|
+
.#{$prefix}--number__control-btn:focus::before,
|
|
62
|
+
.#{$prefix}--number-input--fluid
|
|
63
|
+
.#{$prefix}--number__control-btn:focus::after {
|
|
64
|
+
border-inline-start: 2px solid $focus;
|
|
65
|
+
}
|
|
66
|
+
}
|