@workday/canvas-kit-css 16.0.0-alpha.0492-next.0 → 16.0.0-alpha.0494-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 (2) hide show
  1. package/package.json +2 -2
  2. package/side-panel.css +25 -70
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "16.0.0-alpha.0492-next.0",
3
+ "version": "16.0.0-alpha.0494-next.0",
4
4
  "type": "module",
5
5
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
6
6
  "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
26
26
  "components",
27
27
  "workday"
28
28
  ],
29
- "gitHead": "27691d763b93d270f78808ca298848d405c888e1"
29
+ "gitHead": "7bde57a5a6d4e41fd4a2e08f9f035c609ff4a8f0"
30
30
  }
package/side-panel.css CHANGED
@@ -1,6 +1,15 @@
1
1
  .cnvs-side-panel-heading {
2
2
  box-sizing: border-box;
3
- padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
3
+ display: flex;
4
+ align-items: center;
5
+ padding: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
6
+ padding-inline-start: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
7
+ min-height: var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));
8
+ margin: 0;
9
+ }
10
+
11
+ .cnvs-side-panel-heading:where([hidden]) {
12
+ display: none;
4
13
  }
5
14
 
6
15
 
@@ -13,103 +22,44 @@
13
22
  .cnvs-side-panel-toggle-button {
14
23
  box-sizing: border-box;
15
24
  position: absolute;
16
- top: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
17
- width: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
18
- inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
25
+ top: 0.75rem;
26
+ width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
27
+ }
28
+
29
+ .cnvs-side-panel-toggle-button :dir(rtl) {
30
+ transform: scaleX(-1);
19
31
  }
20
32
 
21
33
 
22
34
  .cnvs-side-panel-toggle-button.state-collapsing {
23
35
  margin: 0;
24
- transform: scaleX(1);
25
- }
26
-
27
- .cnvs-side-panel-toggle-button.state-collapsing :dir(rtl) {
28
- transform: scaleX(-1);
29
36
  }
30
37
 
31
38
 
32
39
  .cnvs-side-panel-toggle-button.state-collapsed {
33
40
  margin: auto;
34
- transform: scaleX(1);
35
- }
36
-
37
- .cnvs-side-panel-toggle-button.state-collapsed :dir(rtl) {
38
- transform: scaleX(-1);
39
41
  }
40
42
 
41
43
 
42
44
  .cnvs-side-panel-toggle-button.state-expanded {
43
45
  margin: 0;
44
- transform: scaleX(-1);
45
- }
46
-
47
- .cnvs-side-panel-toggle-button.state-expanded :dir(rtl) {
48
- transform: scaleX(1);
49
46
  }
50
47
 
51
48
 
52
49
  .cnvs-side-panel-toggle-button.state-expanding {
53
50
  margin: 0;
54
- transform: scaleX(-1);
55
- }
56
-
57
- .cnvs-side-panel-toggle-button.state-expanding :dir(rtl) {
58
- transform: scaleX(1);
59
- }
60
-
61
-
62
-
63
- .cnvs-side-panel-toggle-button.origin-end {
64
- transform: scaleX(1);
65
- }
66
-
67
- .cnvs-side-panel-toggle-button.origin-end :dir(rtl) {
68
- transform: scaleX(-1);
69
51
  }
70
52
 
71
53
 
72
- .cnvs-side-panel-toggle-button.state-collapsed.origin-end {
73
- transform: scaleX(-1);
74
- }
75
-
76
- .cnvs-side-panel-toggle-button.state-collapsed.origin-end :dir(rtl) {
77
- transform: scaleX(1);
78
- }
79
-
80
-
81
- .cnvs-side-panel-toggle-button.state-collapsing.origin-end {
82
- transform: scaleX(-1);
83
- inset-inline-start: var(--cnvs-base-size-150, 0.75rem);
84
- }
85
-
86
- .cnvs-side-panel-toggle-button.state-collapsing.origin-end :dir(rtl) {
87
- transform: scaleX(1);
88
- inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
89
- }
90
-
91
-
92
- .cnvs-side-panel-toggle-button.state-expanded.origin-end {
93
- transform: scaleX(1);
94
- inset-inline-start: var(--cnvs-base-size-150, 0.75rem);
95
- }
96
-
97
- .cnvs-side-panel-toggle-button.state-expanded.origin-end :dir(rtl) {
98
- transform: scaleX(-1);
54
+ .cnvs-side-panel-toggle-button.origin-start {
99
55
  inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
100
56
  }
101
57
 
102
58
 
103
- .cnvs-side-panel-toggle-button.state-expanding.origin-end {
104
- transform: scaleX(1);
59
+ .cnvs-side-panel-toggle-button.origin-end {
105
60
  inset-inline-start: var(--cnvs-base-size-150, 0.75rem);
106
61
  }
107
62
 
108
- .cnvs-side-panel-toggle-button.state-expanding.origin-end :dir(rtl) {
109
- transform: scaleX(-1);
110
- inset-inline-end: var(--cnvs-base-size-150, 0.75rem);
111
- }
112
-
113
63
 
114
64
  .cnvs-panel {
115
65
  box-sizing: border-box;
@@ -121,9 +71,14 @@
121
71
  }
122
72
 
123
73
 
124
- .cnvs-panel.variant-alternate {
74
+ .cnvs-panel.variant-overlay {
125
75
  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
126
- box-shadow: var(--cnvs-sys-depth-3);
76
+ box-shadow: var(--cnvs-sys-depth-6);
77
+ }
78
+
79
+
80
+ .cnvs-panel.variant-alternative {
81
+ background-color: var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));
127
82
  }
128
83
 
129
84