@workday/canvas-kit-css 14.0.0-alpha.1168-next.0 → 14.0.0-alpha.1171-next.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.
Files changed (32) hide show
  1. package/action-bar.css +32 -0
  2. package/avatar.css +186 -0
  3. package/badge.css +38 -0
  4. package/banner.css +95 -0
  5. package/breadcrumbs.css +98 -0
  6. package/button.css +757 -0
  7. package/card.css +34 -0
  8. package/checkbox.css +242 -0
  9. package/collection.css +25 -0
  10. package/color-picker.css +87 -0
  11. package/combobox.css +4 -0
  12. package/common.css +54 -0
  13. package/expandable.css +97 -0
  14. package/form-field.css +196 -0
  15. package/icon.css +165 -0
  16. package/loading-dots.css +47 -0
  17. package/menu.css +155 -0
  18. package/modal.css +108 -0
  19. package/package.json +2 -2
  20. package/pagination.css +143 -0
  21. package/popup.css +72 -0
  22. package/segmented-control.css +75 -0
  23. package/select.css +53 -0
  24. package/skeleton.css +73 -0
  25. package/switch.css +93 -0
  26. package/table.css +132 -0
  27. package/tabs.css +123 -0
  28. package/text-area.css +30 -0
  29. package/text-input.css +148 -0
  30. package/text.css +189 -0
  31. package/toast.css +42 -0
  32. package/tooltip.css +79 -0
package/pagination.css ADDED
@@ -0,0 +1,143 @@
1
+ .cnvs-pagination-controls {
2
+ box-sizing: border-box;
3
+ display: flex;
4
+ gap: var(--cnvs-sys-space-x1);
5
+ align-items: center;
6
+ }
7
+
8
+
9
+ .cnvs-pagination-list {
10
+ box-sizing: border-box;
11
+ display: flex;
12
+ margin-block: var(--cnvs-sys-space-zero);
13
+ margin-inline: var(--cnvs-sys-space-zero);
14
+ padding: var(--cnvs-sys-space-zero);
15
+ list-style: none;
16
+ }
17
+
18
+
19
+ .cnvs-pagination-list-item {
20
+ box-sizing: border-box;
21
+ display: flex;
22
+ }
23
+
24
+
25
+ .cnvs-pagination-page-list {
26
+ box-sizing: border-box;
27
+ display: flex;
28
+ margin: var(--cnvs-sys-space-zero);
29
+ padding-inline-start: var(--cnvs-sys-space-zero);
30
+ padding-inline-end: var(--cnvs-sys-space-zero);
31
+ gap: var(--cnvs-sys-space-x1);
32
+ }
33
+
34
+
35
+ .cnvs-pagination-page-button {
36
+ box-sizing: border-box;
37
+ min-width: var(--cnvs-sys-space-x8);
38
+ padding: var(--cnvs-sys-space-zero);
39
+ font-weight: var(--cnvs-sys-font-weight-normal);
40
+ --cnvs-button-label: var(--cnvs-sys-color-fg-default);
41
+ }
42
+
43
+ .cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
44
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
45
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
46
+ }
47
+
48
+ .cnvs-pagination-page-button:active, .cnvs-pagination-page-button.active, .cnvs-pagination-page-button:focus-visible, .cnvs-pagination-page-button.focus {
49
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
50
+ }
51
+
52
+ .cnvs-pagination-page-button:disabled, .cnvs-pagination-page-button.disabled {
53
+ --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
54
+ }
55
+
56
+
57
+ .cnvs-pagination-page-button.toggled {
58
+ font-weight: var(--cnvs-sys-font-weight-bold);
59
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
60
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
61
+ }
62
+
63
+ .cnvs-pagination-page-button.toggled:hover, .cnvs-pagination-page-button.toggled.hover, .cnvs-pagination-page-button.toggled:active, .cnvs-pagination-page-button.toggled.active, .cnvs-pagination-page-button.toggled:focus-visible, .cnvs-pagination-page-button.toggled.focus {
64
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
65
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
66
+ }
67
+
68
+ .cnvs-pagination-page-button.toggled:disabled, .cnvs-pagination-page-button.toggled.disabled {
69
+ --cnvs-button-background: var(--cnvs-sys-color-fg-disabled);
70
+ }
71
+
72
+
73
+ .cnvs-pagination-additional-details {
74
+ box-sizing: border-box;
75
+ display: flex;
76
+ font-family: var(--cnvs-sys-font-family-default);
77
+ font-weight: var(--cnvs-sys-font-weight-normal);
78
+ line-height: var(--cnvs-sys-line-height-subtext-medium);
79
+ font-size: var(--cnvs-sys-font-size-subtext-medium);
80
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
81
+ color: var(--cnvs-sys-color-text-hint);
82
+ margin-block-start: var(--cnvs-sys-space-x3);
83
+ }
84
+
85
+
86
+ .cnvs-pagination-additional-details.should-hide-details {
87
+ clip: rect(1px, 1px, 1px, 1px);
88
+ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
89
+ position: absolute;
90
+ overflow: hidden;
91
+ white-space: nowrap;
92
+ height: 1px;
93
+ min-height: 1px;
94
+ width: 1px;
95
+ min-width: 1px;
96
+ margin: -1px;
97
+ padding: 0;
98
+ border: 0;
99
+ margin-block-start: var(--cnvs-sys-space-zero);
100
+ }
101
+
102
+
103
+ .cnvs-pagination-go-to-form {
104
+ box-sizing: border-box;
105
+ display: flex;
106
+ align-items: center;
107
+ gap: var(--cnvs-sys-space-x2);
108
+ }
109
+
110
+ .cnvs-pagination-go-to-form :dir(rtl) {
111
+ padding-inline-start: var(--cnvs-sys-space-x2);
112
+ padding-inline-end: var(--cnvs-sys-space-x2);
113
+ }
114
+
115
+
116
+ .cnvs-pagination-go-to-text-input {
117
+ box-sizing: border-box;
118
+ min-width: 3.4375rem;
119
+ width: 3.4375rem;
120
+ }
121
+
122
+
123
+ .cnvs-pagination-go-to-label {
124
+ box-sizing: border-box;
125
+ white-space: nowrap;
126
+ }
127
+
128
+
129
+ .cnvs-pagination {
130
+ box-sizing: border-box;
131
+ display: inline-flex;
132
+ flex-direction: column;
133
+ align-items: center;
134
+ }
135
+
136
+
137
+ .cnvs-pagination-nav {
138
+ box-sizing: border-box;
139
+ display: inline-flex;
140
+ flex-direction: column;
141
+ align-items: center;
142
+ }
143
+
package/popup.css ADDED
@@ -0,0 +1,72 @@
1
+ .cnvs-disable-body-scroll {
2
+ overflow: hidden!important;
3
+ }
4
+
5
+
6
+ @keyframes animation-284ori {
7
+ 0% {
8
+ opacity: 1;
9
+ transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
10
+ }
11
+
12
+ 100% {
13
+ opacity: 1;
14
+ transform: translate(0);
15
+ }
16
+
17
+ }
18
+
19
+ .cnvs-popup-card {
20
+ box-sizing: border-box;
21
+ font-family: var(--cnvs-sys-font-family-default);
22
+ font-weight: var(--cnvs-sys-font-weight-normal);
23
+ line-height: var(--cnvs-sys-line-height-subtext-large);
24
+ font-size: var(--cnvs-sys-font-size-subtext-large);
25
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
26
+ position: relative;
27
+ max-width: calc(100vw - var(--cnvs-sys-space-x8));
28
+ gap: var(--cnvs-sys-space-x2);
29
+ box-shadow: var(--cnvs-sys-depth-5);
30
+ min-height: var(--cnvs-sys-space-zero);
31
+ padding: var(--cnvs-sys-space-x6);
32
+ max-height: var(--cnvs-popup-card-max-height);
33
+ overflow-y: auto;
34
+ animation-name: animation-284ori;
35
+ animation-duration: 150ms;
36
+ animation-timing-function: ease-out;
37
+ transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
38
+ }
39
+
40
+ .wd-no-animation .cnvs-popup-card {
41
+ animation: none;
42
+ }
43
+
44
+ @media screen and (max-width: 768px) {
45
+ .cnvs-popup-card {
46
+ transform-origin: bottom center;
47
+ }
48
+
49
+
50
+ }
51
+
52
+
53
+ .cnvs-popup-heading {
54
+ box-sizing: border-box;
55
+ padding: var(--cnvs-sys-space-x2);
56
+ }
57
+
58
+
59
+ .cnvs-popup-close-icon {
60
+ box-sizing: border-box;
61
+ position: absolute;
62
+ inset-inline-end: var(--cnvs-sys-space-x1);
63
+ top: var(--cnvs-sys-space-x1);
64
+ }
65
+
66
+
67
+ .cnvs-popup-body {
68
+ box-sizing: border-box;
69
+ overflow-y: auto;
70
+ padding: var(--cnvs-sys-space-x2);
71
+ }
72
+
package/segmented-control.css ADDED
@@ -0,0 +1,75 @@
1
+ .cnvs-segmented-control-button {
2
+ box-sizing: border-box;
3
+ border-inline-start: none;
4
+ min-width: auto;
5
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
6
+ --cnvs-button-border: var(--cnvs-sys-color-border-container);
7
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-zero);
8
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
9
+ }
10
+
11
+ .cnvs-segmented-control-button:hover, .cnvs-segmented-control-button.hover {
12
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
13
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
14
+ }
15
+
16
+ .cnvs-segmented-control-button:active, .cnvs-segmented-control-button.active {
17
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
18
+ }
19
+
20
+ .cnvs-segmented-control-button:disabled, .cnvs-segmented-control-button.disabled {
21
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
22
+ --cnvs-button-border: var(--cnvs-sys-color-border-container);
23
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
24
+ }
25
+
26
+ .cnvs-segmented-control-button:first-of-type {
27
+ border-radius: var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);
28
+ border-inline-start: 0.0625rem solid var(--cnvs-sys-color-border-container);
29
+ }
30
+
31
+ .cnvs-segmented-control-button:last-of-type {
32
+ border-radius: 0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;
33
+ }
34
+
35
+ .cnvs-segmented-control-button[aria-pressed="true"] {
36
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
37
+ --cnvs-button-border: var(--cnvs-brand-primary-base);
38
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
39
+ }
40
+
41
+ .cnvs-segmented-control-button[aria-pressed="true"]:first-of-type {
42
+ border-inline-start-color: var(--cnvs-brand-primary-base);
43
+ }
44
+
45
+ .cnvs-segmented-control-button[aria-pressed="true"]:disabled, .cnvs-segmented-control-button[aria-pressed="true"].disabled {
46
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
47
+ --cnvs-button-border: var(--cnvs-sys-color-border-container);
48
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
49
+ }
50
+
51
+ .cnvs-segmented-control-button:focus-visible, .cnvs-segmented-control-button.focus {
52
+ border-radius: var(--cnvs-sys-shape-x1);
53
+ z-index: 1;
54
+ animation: none;
55
+ transition: all 120ms border-radius 1ms;
56
+ }
57
+
58
+
59
+ .cnvs-segmented-control-button.segmented-control-button-size-small {
60
+ width: var(--cnvs-sys-space-x8);
61
+ height: var(--cnvs-sys-space-x8);
62
+ }
63
+
64
+
65
+ .cnvs-segmented-control-button.segmented-control-button-size-medium {
66
+ width: var(--cnvs-sys-space-x10);
67
+ height: var(--cnvs-sys-space-x10);
68
+ }
69
+
70
+
71
+ .cnvs-segmented-control-button.segmented-control-button-size-large {
72
+ width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
73
+ height: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
74
+ }
75
+
package/select.css ADDED
@@ -0,0 +1,53 @@
1
+ .cnvs-select-input {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ .cnvs-select-input [data-part="select-hidden-input"] {
6
+ position: absolute;
7
+ top: var(--cnvs-sys-space-zero);
8
+ bottom: var(--cnvs-sys-space-zero);
9
+ left: var(--cnvs-sys-space-zero);
10
+ right: var(--cnvs-sys-space-zero);
11
+ opacity: var(--cnvs-sys-opacity-zero);
12
+ cursor: default;
13
+ pointer-events: none;
14
+ min-width: 100%;
15
+ width: 100%;
16
+ }
17
+
18
+ .cnvs-select-input [data-part="select-start-icon"], .cnvs-select-input [data-part="select-end-icon"], .cnvs-select-input [data-part="select-caret-container"], .cnvs-select-input [data-part="select-start-icon-container"] {
19
+ position: absolute;
20
+ pointer-events: none;
21
+ }
22
+
23
+ .cnvs-select-input [data-part="select-visual-input"] {
24
+ caret-color: transparent;
25
+ background-color: var(--cnvs-sys-color-bg-default);
26
+ color: var(--cnvs-sys-color-text-default);
27
+ cursor: default;
28
+ }
29
+
30
+ .cnvs-select-input [data-part="select-visual-input"]::placeholder {
31
+ color: var(--cnvs-sys-color-text-default);
32
+ }
33
+
34
+ .cnvs-select-input [data-part="select-visual-input"]::selection {
35
+ background-color: transparent;
36
+ }
37
+
38
+
39
+ .cnvs-select-input.error-error [data-part="select-visual-input"] {
40
+ background-color: var(--cnvs-brand-error-lightest);
41
+ }
42
+
43
+
44
+ .cnvs-select-input.error-alert [data-part="select-visual-input"] {
45
+ background-color: var(--cnvs-brand-alert-lightest);
46
+ }
47
+
48
+
49
+ .cnvs-select-card {
50
+ box-sizing: border-box;
51
+ --cnvs-menu-card-max-height: 18.75rem;
52
+ }
53
+
package/skeleton.css ADDED
@@ -0,0 +1,73 @@
1
+ .cnvs-skeleton-shape {
2
+ box-sizing: border-box;
3
+ background-color: var(--cnvs-skeleton-shape-background-color, var(--cnvs-sys-color-bg-alt-strong));
4
+ border-radius: var(--cnvs-skeleton-shape-border-radius, var(--cnvs-sys-space-zero));
5
+ height: var(--cnvs-skeleton-shape-height, 100%);
6
+ width: var(--cnvs-skeleton-shape-width);
7
+ margin-bottom: var(--cnvs-sys-space-x4);
8
+ }
9
+
10
+
11
+ .cnvs-skeleton-header {
12
+ box-sizing: border-box;
13
+ background-color: var(--cnvs-skeleton-header-background-color, var(--cnvs-sys-color-bg-alt-strong));
14
+ border-radius: 0;
15
+ height: var(--cnvs-skeleton-header-height, calc(var(--cnvs-sys-space-x1) * 7));
16
+ width: var(--cnvs-skeleton-header-width);
17
+ margin-bottom: var(--cnvs-sys-space-x4);
18
+ }
19
+
20
+
21
+ .cnvs-skeleton-text {
22
+ box-sizing: border-box;
23
+ margin-bottom: var(--cnvs-sys-space-x6);
24
+ }
25
+
26
+ .cnvs-skeleton-text [data-part="skeleton-text-lines"] {
27
+ background-color: var(--cnvs-skeleton-text-background-color, var(--cnvs-sys-color-bg-alt-strong));
28
+ height: 1.3125rem;
29
+ margin-block-end: var(--cnvs-sys-space-x3);
30
+ border-radius: var(--cnvs-sys-shape-half);
31
+ width: 100%;
32
+ }
33
+
34
+ .cnvs-skeleton-text [data-part="skeleton-text-lines"]:last-child {
35
+ width: 60%;
36
+ }
37
+
38
+
39
+ @keyframes animation-t0ia0 {
40
+ from {
41
+ opacity: 0.4;
42
+ }
43
+
44
+ to {
45
+ opacity: 1;
46
+ }
47
+
48
+ }
49
+
50
+ .cnvs-skeleton {
51
+ box-sizing: border-box;
52
+ animation: animation-t0ia0 0.8s linear infinite alternate;
53
+ position: relative;
54
+ overflow: hidden;
55
+ height: 100%;
56
+ width: 100%;
57
+ }
58
+
59
+ .cnvs-skeleton [data-part="skeleton-accessible-hide"] {
60
+ clip: rect(1px, 1px, 1px, 1px);
61
+ clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
62
+ position: absolute;
63
+ overflow: hidden;
64
+ white-space: nowrap;
65
+ height: 1px;
66
+ min-height: 1px;
67
+ width: 1px;
68
+ min-width: 1px;
69
+ margin: -1px;
70
+ padding: 0;
71
+ border: 0;
72
+ }
73
+
package/switch.css ADDED
@@ -0,0 +1,93 @@
1
+ .cnvs-switch-container {
2
+ box-sizing: border-box;
3
+ position: relative;
4
+ height: var(--cnvs-sys-space-x6);
5
+ width: var(--cnvs-sys-space-x8);
6
+ }
7
+
8
+
9
+ .cnvs-switch-input {
10
+ box-sizing: border-box;
11
+ display: flex;
12
+ position: absolute;
13
+ height: var(--cnvs-sys-space-x6);
14
+ width: var(--cnvs-sys-space-x8);
15
+ margin: var(--cnvs-sys-space-zero);
16
+ margin-left: var(--cnvs-sys-space-x1);
17
+ border-radius: var(--cnvs-sys-shape-round);
18
+ opacity: 0;
19
+ cursor: pointer;
20
+ }
21
+
22
+ .cnvs-switch-input:checked~div:first-of-type, .cnvs-switch-input.checked~div:first-of-type {
23
+ background-color: var(--cnvs-brand-primary-base);
24
+ }
25
+
26
+ .cnvs-switch-input:checked:disabled~div:first-of-type, .cnvs-switch-input.checked:disabled~div:first-of-type, .cnvs-switch-input:checked.disabled~div:first-of-type, .cnvs-switch-input.checked.disabled~div:first-of-type {
27
+ opacity: var(--cnvs-sys-opacity-disabled);
28
+ }
29
+
30
+ .cnvs-switch-input:disabled, .cnvs-switch-input.disabled {
31
+ cursor: not-allowed;
32
+ }
33
+
34
+ .cnvs-switch-input:disabled~div:first-of-type, .cnvs-switch-input.disabled~div:first-of-type {
35
+ opacity: var(--cnvs-sys-opacity-disabled);
36
+ }
37
+
38
+ .cnvs-switch-input:focus-visible, .cnvs-switch-input:focus, .cnvs-switch-input.focus {
39
+ outline: none;
40
+ }
41
+
42
+ .cnvs-switch-input:focus-visible~div:first-of-type, .cnvs-switch-input:focus~div:first-of-type, .cnvs-switch-input.focus~div:first-of-type {
43
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
44
+ }
45
+
46
+
47
+ .cnvs-switch-input.error-error~div:first-of-type {
48
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-error-inner),0 0 0 0.3125rem transparent;
49
+ }
50
+
51
+
52
+ .cnvs-switch-input.error-alert~div:first-of-type {
53
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-alert-inner),0 0 0 0.3125rem var(--cnvs-brand-common-alert-outer);
54
+ }
55
+
56
+
57
+ .cnvs-switch-background {
58
+ box-sizing: border-box;
59
+ position: absolute;
60
+ display: flex;
61
+ align-items: center;
62
+ pointer-events: none;
63
+ margin-top: var(--cnvs-sys-space-x1);
64
+ width: var(--cnvs-sys-space-x8);
65
+ height: var(--cnvs-sys-space-x4);
66
+ border-radius: var(--cnvs-sys-shape-round);
67
+ padding: var(--cnvs-sys-space-zero) 0.125rem;
68
+ transition: background-color 200ms ease;
69
+ background-color: var(--cnvs-sys-color-bg-muted-soft);
70
+ }
71
+
72
+
73
+ .cnvs-switch-circle {
74
+ box-sizing: border-box;
75
+ width: var(--cnvs-sys-space-x3);
76
+ height: var(--cnvs-sys-space-x3);
77
+ border-radius: var(--cnvs-sys-shape-round);
78
+ box-shadow: var(--cnvs-sys-depth-1);
79
+ transition: transform 150ms ease;
80
+ pointer-events: none;
81
+ background-color: var(--cnvs-brand-primary-accent);
82
+ transform: translateX(var(--cnvs-sys-space-zero));
83
+ }
84
+
85
+
86
+ .cnvs-switch-circle.checked {
87
+ transform: translateX(var(--cnvs-sys-space-x4));
88
+ }
89
+
90
+ .cnvs-switch-circle.checked :dir(rtl) {
91
+ transform: translateX(calc(var(--cnvs-sys-space-x4) * -1));
92
+ }
93
+
package/table.css ADDED
@@ -0,0 +1,132 @@
1
+ .cnvs-base-table-head {
2
+ box-sizing: border-box;
3
+ background-color: var(--cnvs-sys-color-bg-alt-softer);
4
+ min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));
5
+ }
6
+
7
+ .cnvs-base-table-head th:first-of-type {
8
+ border-inline-start: none;
9
+ }
10
+
11
+ .cnvs-base-table-head th:last-of-type {
12
+ border-inline-end: none;
13
+ }
14
+
15
+
16
+ .cnvs-base-table-body {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ .cnvs-base-table-body tr:last-of-type td, .cnvs-base-table-body tr:last-of-type th {
21
+ border-bottom: none;
22
+ }
23
+
24
+ .cnvs-base-table-body tr:first-of-type td, .cnvs-base-table-body tr:first-of-type th {
25
+ border-top: none;
26
+ }
27
+
28
+ .cnvs-base-table-body td:last-of-type {
29
+ border-inline-end: none;
30
+ }
31
+
32
+ .cnvs-base-table-body td:first-of-type {
33
+ border-inline-start: none;
34
+ }
35
+
36
+
37
+ .cnvs-base-table-header {
38
+ box-sizing: border-box;
39
+ background-color: var(--cnvs-sys-color-bg-default);
40
+ border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
41
+ justify-content: start;
42
+ min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));
43
+ padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
44
+ word-break: break-word;
45
+ font-weight: var(--cnvs-sys-font-weight-medium);
46
+ }
47
+
48
+
49
+ .cnvs-base-table-cell {
50
+ box-sizing: border-box;
51
+ align-items: center;
52
+ background-color: var(--cnvs-sys-color-bg-default);
53
+ border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
54
+ grid-template-columns: 1fr;
55
+ justify-content: start;
56
+ min-height: 3.5rem;
57
+ padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
58
+ word-break: break-word;
59
+ }
60
+
61
+
62
+ .cnvs-base-table-caption {
63
+ box-sizing: border-box;
64
+ padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
65
+ }
66
+
67
+
68
+ .cnvs-base-table {
69
+ box-sizing: border-box;
70
+ font-family: var(--cnvs-sys-font-family-default);
71
+ font-weight: var(--cnvs-sys-font-weight-normal);
72
+ line-height: var(--cnvs-sys-line-height-subtext-large);
73
+ font-size: var(--cnvs-sys-font-size-subtext-large);
74
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
75
+ border: 0.0625rem solid var(--cnvs-sys-color-border-container);
76
+ border-radius: var(--cnvs-sys-shape-x2);
77
+ overflow: auto;
78
+ color: var(--cnvs-sys-color-text-default);
79
+ }
80
+
81
+
82
+ .cnvs-table-row {
83
+ box-sizing: border-box;
84
+ display: grid;
85
+ grid-auto-flow: column;
86
+ grid-template-columns: repeat(var(--cnvs-table-row-children-cell-number), minmax(10rem, 1fr));
87
+ }
88
+
89
+
90
+ .cnvs-table {
91
+ box-sizing: border-box;
92
+ display: grid;
93
+ }
94
+
95
+
96
+ .cnvs-table-body {
97
+ box-sizing: border-box;
98
+ display: grid;
99
+ }
100
+
101
+
102
+ .cnvs-table-caption {
103
+ box-sizing: border-box;
104
+ display: flex;
105
+ border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-container);
106
+ }
107
+
108
+
109
+ .cnvs-table-cell {
110
+ box-sizing: border-box;
111
+ display: grid;
112
+ }
113
+
114
+
115
+ .cnvs-table-footer {
116
+ box-sizing: border-box;
117
+ display: grid;
118
+ }
119
+
120
+
121
+ .cnvs-table-head {
122
+ box-sizing: border-box;
123
+ display: grid;
124
+ }
125
+
126
+
127
+ .cnvs-table-header {
128
+ box-sizing: border-box;
129
+ display: grid;
130
+ align-items: center;
131
+ }
132
+