@salesforcedevs/dx-components 1.3.237 → 1.3.241-dh1-alpha

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 (30) hide show
  1. package/lwc.config.json +1 -0
  2. package/package.json +1 -1
  3. package/src/modules/dx/button/button.html +2 -2
  4. package/src/modules/dx/button/button.ts +1 -1
  5. package/src/modules/dx/coveoRecommendations/coveoRecommendations.ts +3 -0
  6. package/src/modules/dx/dropdownOption/dropdownOption.css +5 -3
  7. package/src/modules/dx/headerNav/headerNav.css +9 -0
  8. package/src/modules/dx/popover/popover.css +2 -2
  9. package/src/modules/dx/searchResults/coveo.css +1 -1
  10. package/src/modules/dx/searchResults/searchResults.ts +2 -2
  11. package/src/modules/dx/sidebar/sidebar.css +9 -5
  12. package/src/modules/dx/sidebar/sidebar.html +30 -12
  13. package/src/modules/dx/sidebar/sidebar.ts +2 -42
  14. package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css +52 -0
  15. package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.html +55 -0
  16. package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.ts +106 -0
  17. package/src/modules/dx/sidebarOld/sidebarOld.css +1 -0
  18. package/src/modules/dx/sidebarOld/sidebarOld.html +27 -10
  19. package/src/modules/dx/sidebarOld/sidebarOld.ts +0 -38
  20. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css +35 -4
  21. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html +16 -10
  22. package/src/modules/dx/tab/tab.css +48 -19
  23. package/src/modules/dx/treeItem/treeItem.css +2 -2
  24. package/src/modules/dx/treeTile/treeTile.css +37 -28
  25. package/src/modules/dx/treeTile/treeTile.html +6 -6
  26. package/src/modules/dx/treeTile/treeTile.ts +2 -1
  27. package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts +96 -1
  28. package/src/modules/dxHelpers/commonHeader/commonHeader.css +6 -2
  29. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +38 -16
  30. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +26 -3
package/src/modules/dxHelpers/commonSidebar/commonSidebar.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @import "dxHelpers/text";
3
3
 
4
4
  :host {
5
- --dx-c-sidebar-width: 275px;
5
+ --dx-c-sidebar-width: 337px;
6
6
  --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
7
7
  --dx-c-sidebar-button-background: white;
8
8
  --dx-c-sidebar-button-border: white;
@@ -11,10 +11,7 @@
11
11
  --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
12
12
  --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
13
13
  --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
14
- }
15
-
16
- dx-tree:not(:last-child) {
17
- margin-bottom: var(--dx-g-spacing-sm);
14
+ --doc-version-picker-width: 296px;
18
15
  }
19
16
 
20
17
  .header {
@@ -31,12 +28,18 @@ dx-tree:not(:last-child) {
31
28
  }
32
29
 
33
30
  .padding-horizontal {
34
- padding-left: var(--dx-g-spacing-md);
35
- padding-right: var(--dx-g-spacing-md);
31
+ padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
32
+ }
33
+
34
+ .sidebar-header[show-shadow="true"] {
35
+ box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
36
36
  }
37
37
 
38
38
  .header-title {
39
- line-height: inherit;
39
+ line-height: 28px;
40
+ letter-spacing: -0.08px;
41
+ font-size: var(--dx-g-text-lg);
42
+ font-weight: var(--dx-g-font-demi);
40
43
  }
41
44
 
42
45
  .header-toggle-icon {
@@ -53,7 +56,7 @@ dx-tree:not(:last-child) {
53
56
  }
54
57
 
55
58
  .container {
56
- background-color: var(--dx-g-gray-95);
59
+ background-color: white;
57
60
  display: flex;
58
61
  flex-direction: column;
59
62
  height: var(--dx-c-sidebar-height);
@@ -68,8 +71,7 @@ dx-tree:not(:last-child) {
68
71
 
69
72
  box-shadow: 2px 0 0 0 var(--border-color);
70
73
  min-height: var(--dx-c-sidebar-min-height);
71
- padding: var(--dx-c-sidebar-vertical-padding) 0
72
- var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
74
+ padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
73
75
  position: relative;
74
76
  }
75
77
 
@@ -102,7 +104,7 @@ dx-tree:not(:last-child) {
102
104
 
103
105
  .container.container-mobile.collapsed {
104
106
  height: unset;
105
- padding-bottom: 0;
107
+ padding: 4px 0;
106
108
  }
107
109
 
108
110
  .container.container-mobile.collapsed .header {
@@ -127,9 +129,29 @@ dx-tree:not(:last-child) {
127
129
  white-space: nowrap;
128
130
  }
129
131
 
130
- @media screen and (max-width: 768px) {
131
- .padding-horizontal {
132
- padding-left: var(--dx-g-spacing-lg);
133
- padding-right: var(--dx-g-spacing-md);
132
+ .footer-nav {
133
+ display: flex;
134
+ padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm)
135
+ var(--dx-g-spacing-xs) var(--dx-g-spacing-xl);
136
+ position: fixed;
137
+ bottom: 0;
138
+ left: 0;
139
+ width: inherit;
140
+ background: white;
141
+ border-top: 1px solid var(--dx-g-gray-90);
142
+ border-right: 1px solid var(--dx-g-gray-90);
143
+ height: var(--dx-g-spacing-2xl);
144
+ align-items: center;
145
+ }
146
+
147
+ .sidebar-content-hasfooter {
148
+ margin-bottom: var(--dx-g-spacing-2xl);
149
+ }
150
+
151
+ @media screen and (max-width: 767px) {
152
+ :host {
153
+ --doc-version-picker-width: calc(
154
+ 100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
155
+ );
134
156
  }
135
157
  }
package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css CHANGED
@@ -8,14 +8,37 @@
8
8
 
9
9
  .sidebar-item-selected {
10
10
  background: var(--dx-g-cloud-blue-vibrant-95);
11
- box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
11
+ box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
12
12
  border-radius: 0;
13
+ color: var(--dx-g-blue-vibrant-40) !important;
13
14
  }
14
15
 
15
16
  .sidebar-item {
16
- padding: 6px var(--dx-g-spacing-md);
17
+ padding: 6px var(--dx-g-spacing-lg) 6px
18
+ var(--dx-g-global-header-padding-horizontal);
19
+ }
20
+
21
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
22
+ padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
23
+ margin: 0 var(--dx-g-spacing-lg) 0
24
+ var(--dx-g-global-header-padding-horizontal);
25
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
26
+ border-radius: var(--dx-g-spacing-2xs);
27
+ }
28
+
29
+ .sidebar-item-selected:focus-visible {
30
+ padding-top: 0;
31
+ padding-bottom: 0;
32
+ outline: none;
33
+
34
+ .indentation {
35
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
36
+ border-radius: var(--dx-g-spacing-2xs);
37
+ padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
38
+ padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
39
+ }
17
40
  }
18
41
 
19
42
  .sidebar-item:not(.sidebar-item-selected):hover {
20
- background-color: var(--dx-g-gray-90);
43
+ color: var(--dx-g-blue-vibrant-50);
21
44
  }