@workday/canvas-kit-css 14.0.0-alpha.1165-next.0 → 14.0.0-alpha.1167-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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "14.0.0-alpha.1165-next.0",
3
+ "version": "14.0.0-alpha.1167-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "24a44ff42a9e4424420a61c971515b923e470426"
28
+ "gitHead": "25670463a46bad451356d0550adac0de8b5209b0"
29
29
  }
package/action-bar.css DELETED
@@ -1,32 +0,0 @@
1
- .cnvs-action-bar-list {
2
- box-sizing: border-box;
3
- display: flex;
4
- box-shadow: var(--cnvs-sys-depth-1);
5
- gap: var(--cnvs-sys-space-x4);
6
- background: var(--cnvs-sys-color-bg-default);
7
- border-block-start: solid 1px var(--cnvs-sys-color-border-divider);
8
- padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10);
9
- position: fixed;
10
- inset-block-end: 0;
11
- inset-inline-start: 0;
12
- inset-inline-end: 0;
13
- }
14
-
15
- @media (max-width: 767.5px) {
16
- .cnvs-action-bar-list {
17
- padding: var(--cnvs-sys-space-x4);
18
- }
19
-
20
- .cnvs-action-bar-list >* {
21
- flex: 1;
22
- }
23
-
24
-
25
- }
26
-
27
-
28
- .cnvs-action-bar-overflow-button {
29
- box-sizing: border-box;
30
- flex: 0;
31
- }
32
-
package/avatar.css DELETED
@@ -1,186 +0,0 @@
1
- .cnvs-avatar {
2
- box-sizing: border-box;
3
- background: var(--cnvs-sys-color-bg-caution-default);
4
- position: relative;
5
- display: flex;
6
- align-items: center;
7
- justify-content: center;
8
- padding: 0;
9
- border: 0;
10
- overflow: hidden;
11
- cursor: default;
12
- pointer-events: none;
13
- border-radius: var(--cnvs-sys-shape-round);
14
- width: var(--cnvs-avatar-size);
15
- height: var(--cnvs-avatar-size);
16
- }
17
-
18
- .cnvs-avatar:focus-visible, .cnvs-avatar.focus {
19
- outline: none;
20
- 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));
21
- }
22
-
23
- .cnvs-avatar :is(button) {
24
- cursor: pointer;
25
- pointer-events: auto;
26
- }
27
-
28
- .cnvs-avatar:disabled, .cnvs-avatar.disabled {
29
- opacity: var(--cnvs-sys-opacity-disabled);
30
- }
31
-
32
- .cnvs-avatar [data-part="avatar-icon"] {
33
- transition: opacity 150ms linear;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
38
- opacity: 1;
39
- }
40
-
41
- .cnvs-avatar [data-part="avatar-image"] {
42
- position: absolute;
43
- width: 100%;
44
- height: 100%;
45
- border-radius: 999px;
46
- transition: opacity 150ms linear;
47
- opacity: 0;
48
- }
49
-
50
-
51
- .cnvs-avatar.variant-light {
52
- background-color: var(--cnvs-sys-color-bg-alt-default);
53
- }
54
-
55
- .cnvs-avatar.variant-light [data-part="avatar-icon"] {
56
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
57
- }
58
-
59
-
60
- .cnvs-avatar.variant-dark {
61
- background-color: var(--cnvs-sys-color-bg-primary-default);
62
- }
63
-
64
- .cnvs-avatar.variant-dark [data-part="avatar-icon"] {
65
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
66
- }
67
-
68
-
69
- .cnvs-avatar.size-extra-small {
70
- width: var(--cnvs-sys-space-x4);
71
- height: var(--cnvs-sys-space-x4);
72
- }
73
-
74
- .cnvs-avatar.size-extra-small [data-part="avatar-icon"] {
75
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x4) * 0.625);
76
- }
77
-
78
-
79
- .cnvs-avatar.size-small {
80
- width: var(--cnvs-sys-space-x6);
81
- height: var(--cnvs-sys-space-x6);
82
- }
83
-
84
- .cnvs-avatar.size-small [data-part="avatar-icon"] {
85
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x6) * 0.625);
86
- }
87
-
88
-
89
- .cnvs-avatar.size-medium {
90
- width: var(--cnvs-sys-space-x8);
91
- height: var(--cnvs-sys-space-x8);
92
- }
93
-
94
- .cnvs-avatar.size-medium [data-part="avatar-icon"] {
95
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x8) * 0.625);
96
- }
97
-
98
-
99
- .cnvs-avatar.size-large {
100
- width: var(--cnvs-sys-space-x10);
101
- height: var(--cnvs-sys-space-x10);
102
- }
103
-
104
- .cnvs-avatar.size-large [data-part="avatar-icon"] {
105
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x10) * 0.625);
106
- }
107
-
108
-
109
- .cnvs-avatar.size-extra-large {
110
- width: var(--cnvs-sys-space-x16);
111
- height: var(--cnvs-sys-space-x16);
112
- }
113
-
114
- .cnvs-avatar.size-extra-large [data-part="avatar-icon"] {
115
- --cnvs-svg-size: calc(var(--cnvs-sys-space-x16) * 0.625);
116
- }
117
-
118
-
119
- .cnvs-avatar.size-extra-extra-large {
120
- width: calc(var(--cnvs-sys-space-x10) * 3);
121
- height: calc(var(--cnvs-sys-space-x10) * 3);
122
- }
123
-
124
- .cnvs-avatar.size-extra-extra-large [data-part="avatar-icon"] {
125
- --cnvs-svg-size: calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);
126
- }
127
-
128
-
129
- .cnvs-avatar.object-fit-contain [data-part="avatar-image"] {
130
- object-fit: contain;
131
- }
132
-
133
-
134
- .cnvs-avatar.object-fit-fill [data-part="avatar-image"] {
135
- object-fit: fill;
136
- }
137
-
138
-
139
- .cnvs-avatar.object-fit-cover [data-part="avatar-image"] {
140
- object-fit: cover;
141
- }
142
-
143
-
144
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
145
- object-fit: scale-down;
146
- }
147
-
148
-
149
- .cnvs-avatar.object-fit-none [data-part="avatar-image"] {
150
- object-fit: none;
151
- }
152
-
153
-
154
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
155
- object-fit: -moz-initial;
156
- }
157
-
158
-
159
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
160
- object-fit: initial;
161
- }
162
-
163
-
164
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
165
- object-fit: inherit;
166
- }
167
-
168
-
169
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
170
- object-fit: revert;
171
- }
172
-
173
-
174
- .cnvs-avatar.object-fit [data-part="avatar-image"] {
175
- object-fit: unset;
176
- }
177
-
178
-
179
- .cnvs-avatar.is-image-loaded [data-part="avatar-icon"] {
180
- opacity: 0;
181
- }
182
-
183
- .cnvs-avatar.is-image-loaded [data-part="avatar-image"] {
184
- opacity: 1;
185
- }
186
-
package/badge.css DELETED
@@ -1,38 +0,0 @@
1
- @keyframes animation-l9pl3s {
2
- from {
3
- transform: scale(0.85);
4
- }
5
-
6
- to {
7
- transform: scale(1.0);
8
- }
9
-
10
- }
11
-
12
- .cnvs-count-badge {
13
- box-sizing: border-box;
14
- align-items: center;
15
- animation: animation-l9pl3s 0.2s ease;
16
- background: var(--cnvs-sys-color-static-red-default);
17
- border-radius: var(--cnvs-sys-shape-round);
18
- color: var(--cnvs-sys-color-text-inverse);
19
- display: inline-flex;
20
- font-family: var(--cnvs-sys-font-family-default);
21
- font-size: var(--cnvs-sys-font-size-subtext-medium);
22
- font-weight: var(--cnvs-sys-font-weight-bold);
23
- height: 1.25rem;
24
- justify-content: center;
25
- line-height: 1.25rem;
26
- min-width: 1.25rem;
27
- padding: 0 0.40625rem;
28
- text-shadow: 0 0 0.0625rem rgba(0,0,0, 0.35);
29
- }
30
-
31
-
32
- .cnvs-count-badge.variant-inverse {
33
- background: var(--cnvs-sys-color-bg-default);
34
- box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0, 0.25);
35
- color: var(--cnvs-sys-color-text-primary-default);
36
- text-shadow: none;
37
- }
38
-
package/banner.css DELETED
@@ -1,95 +0,0 @@
1
- .cnvs-banner-icon {
2
- box-sizing: border-box;
3
- margin-inline-end: var(--cnvs-sys-space-x3);
4
- }
5
-
6
-
7
- .cnvs-banner-label {
8
- box-sizing: border-box;
9
- display: flex;
10
- flex: 1 1 0%;
11
- }
12
-
13
-
14
- .cnvs-action-bar-text {
15
- box-sizing: border-box;
16
- text-decoration: underline;
17
- display: inline;
18
- }
19
-
20
-
21
- .cnvs-action-bar-text.is-sticky {
22
- display: none;
23
- }
24
-
25
-
26
- .cnvs-banner {
27
- box-sizing: border-box;
28
- font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
29
- font-weight: var(--cnvs-sys-font-weight-medium);
30
- line-height: var(--cnvs-sys-line-height-subtext-large);
31
- font-size: var(--cnvs-sys-font-size-subtext-large);
32
- letter-spacing: var(--cnvs-base-letter-spacing-150);
33
- padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
34
- border: 0;
35
- display: flex;
36
- align-items: center;
37
- text-align: left;
38
- border-start-start-radius: var(--cnvs-sys-shape-x1);
39
- border-start-end-radius: var(--cnvs-sys-shape-x1);
40
- border-end-start-radius: var(--cnvs-sys-shape-x1);
41
- border-end-end-radius: var(--cnvs-sys-shape-x1);
42
- cursor: pointer;
43
- transition: background-color 120ms;
44
- outline: var(--cnvs-sys-space-x1) solid transparent;
45
- }
46
-
47
- .cnvs-banner:focus-visible, .cnvs-banner.focus {
48
- outline: var(--cnvs-sys-shape-x1) double transparent;
49
- 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));
50
- }
51
-
52
-
53
- .cnvs-banner.has-errors {
54
- background-color: var(--cnvs-brand-error-base);
55
- color: var(--cnvs-brand-error-accent);
56
- }
57
-
58
- .cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
59
- background: var(--cnvs-brand-error-dark);
60
- }
61
-
62
- .cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
63
- --cnvs-system-icon-accent-color: var(--cnvs-brand-error-accent);
64
- --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
65
- --cnvs-system-icon-background-color: none;
66
- }
67
-
68
-
69
- .cnvs-banner.has-errors-false {
70
- background-color: var(--cnvs-brand-alert-base);
71
- color: var(--cnvs-sys-color-fg-contrast-default);
72
- }
73
-
74
- .cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
75
- background: var(--cnvs-brand-alert-dark);
76
- }
77
-
78
- .cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
79
- --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
80
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
81
- --cnvs-system-icon-background-color: none;
82
- }
83
-
84
-
85
- .cnvs-banner.is-sticky {
86
- width: 13.875rem;
87
- border-start-end-radius: 0;
88
- border-end-end-radius: 0;
89
- }
90
-
91
-
92
- .cnvs-banner.is-sticky-false {
93
- width: 20.5rem;
94
- }
95
-
package/breadcrumbs.css DELETED
@@ -1,98 +0,0 @@
1
- .cnvs-breadcrumbs-list {
2
- box-sizing: border-box;
3
- padding: 0;
4
- margin: 0;
5
- display: inline-flex;
6
- align-items: center;
7
- min-height: var(--cnvs-sys-space-x10);
8
- list-style: none;
9
- width: 100%;
10
- }
11
-
12
-
13
- .cnvs-breadcrumbs-overflow-button {
14
- box-sizing: border-box;
15
- align-items: center;
16
- display: flex;
17
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
18
- --cnvs-svg-size: 1.25rem;
19
- }
20
-
21
- .cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] {
22
- height: var(--cnvs-sys-space-x8);
23
- width: var(--cnvs-sys-space-x8);
24
- justify-content: center;
25
- align-items: center;
26
- display: inline-flex;
27
- }
28
-
29
- .cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] :dir(rtl) {
30
- transform: scaleX(-1);
31
- }
32
-
33
-
34
- .cnvs-breadcrumbs-link {
35
- box-sizing: border-box;
36
- font-family: var(--cnvs-sys-font-family-default);
37
- font-weight: var(--cnvs-sys-font-weight-normal);
38
- line-height: var(--cnvs-sys-line-height-subtext-large);
39
- font-size: var(--cnvs-sys-font-size-subtext-large);
40
- letter-spacing: var(--cnvs-base-letter-spacing-150);
41
- text-overflow: ellipsis;
42
- overflow: hidden;
43
- white-space: nowrap;
44
- max-width: var(--cnvs-breadcrumbs-link-max-width);
45
- }
46
-
47
-
48
- .cnvs-breadcrumbs-item {
49
- box-sizing: border-box;
50
- align-items: center;
51
- display: inline-flex;
52
- white-space: nowrap;
53
- --cnvs-svg-size: 1.25rem;
54
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
55
- }
56
-
57
- .cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] {
58
- height: var(--cnvs-sys-space-x8);
59
- width: var(--cnvs-sys-space-x8);
60
- justify-content: center;
61
- align-items: center;
62
- display: inline-flex;
63
- }
64
-
65
- .cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] :dir(rtl) {
66
- transform: scaleX(-1);
67
- }
68
-
69
-
70
- .cnvs-breadcrumbs-current-item {
71
- box-sizing: border-box;
72
- font-family: var(--cnvs-sys-font-family-default);
73
- font-weight: var(--cnvs-sys-font-weight-medium);
74
- line-height: var(--cnvs-sys-line-height-subtext-large);
75
- font-size: var(--cnvs-sys-font-size-subtext-large);
76
- letter-spacing: var(--cnvs-base-letter-spacing-150);
77
- color: var(--cnvs-sys-color-text-default);
78
- display: inline-block;
79
- white-space: nowrap;
80
- text-overflow: ellipsis;
81
- overflow: hidden;
82
- max-width: var(--cnvs-breadcrumbs-current-item-max-width);
83
- }
84
-
85
-
86
- .cnvs-breadcrumbs-menu-item {
87
- box-sizing: border-box;
88
- text-decoration: none;
89
- }
90
-
91
-
92
- .cnvs-breadcrumbs-menu-card {
93
- box-sizing: border-box;
94
- width: 17.5rem;
95
- max-width: 17.5rem;
96
- max-height: 18.5rem;
97
- }
98
-