@salesforcedevs/dx-components 1.3.210-lnb20-alpha → 1.3.210-lnb22-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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.210-lnb20-alpha",
3
+ "version": "1.3.210-lnb22-alpha",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -86,10 +86,7 @@
86
86
  size="small"
87
87
  ></dx-empty-state>
88
88
  </div>
89
- <div
90
- class="sidebar-content sidebar-content-tree"
91
- onscroll={handleScroll}
92
- >
89
+ <div class={sidebarContentClass} onscroll={handleScroll}>
93
90
  <dx-tree
94
91
  for:each={trees}
95
92
  for:item="tree"
@@ -48,7 +48,7 @@
48
48
  </div>
49
49
  </div>
50
50
  <div
51
- class="sidebar-content sidebar-content-tree"
51
+ class={sidebarContentClass}
52
52
  if:true={anyResultMatch}
53
53
  onscroll={handleScroll}
54
54
  >
@@ -13,10 +13,7 @@ a {
13
13
  }
14
14
 
15
15
  .sidebar-item:focus-visible {
16
- padding-left: 0;
17
- margin-left: var(--dx-g-spacing-2xl);
18
- padding-right: 0;
19
- margin-right: var(--dx-g-spacing-lg);
16
+ margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
20
17
  outline: 2px solid var(--dx-g-blue-vibrant-40);
21
18
  border-radius: 2px;
22
19
  }
@@ -58,9 +55,4 @@ a > *:not(:last-child) {
58
55
  .sidebar-item {
59
56
  padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
60
57
  }
61
-
62
- .sidebar-item:focus-visible {
63
- padding-left: 0;
64
- margin-left: var(--dx-g-spacing-lg);
65
- }
66
58
  }
@@ -150,4 +150,11 @@ export class SidebarBase extends LightningElement {
150
150
  private get hasSidebarFooter(): boolean {
151
151
  return this.languages?.length > 1 || Boolean(this.bailHref);
152
152
  }
153
+
154
+ private get sidebarContentClass(): string {
155
+ const sidebarConterCss = "sidebar-content sidebar-content-tree";
156
+ return this.hasSidebarFooter || this.hasMobileSidebarFooter
157
+ ? sidebarConterCss + " sidebar-content-hasfooter"
158
+ : sidebarConterCss;
159
+ }
153
160
  }
@@ -28,7 +28,6 @@
28
28
 
29
29
  .padding-horizontal {
30
30
  padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
31
- border-bottom: 1px solid var(--dx-g-gray-90);
32
31
  }
33
32
 
34
33
  .padding-horizontal[show-shadow="true"] {
@@ -140,7 +139,10 @@
140
139
  border-right: 1px solid var(--dx-g-gray-90);
141
140
  height: var(--dx-g-spacing-2xl);
142
141
  align-items: center;
143
- margin-top: var(--dx-g-spacing-2xl);
142
+ }
143
+
144
+ .sidebar-content-hasfooter {
145
+ margin-bottom: var(--dx-g-spacing-2xl);
144
146
  }
145
147
 
146
148
  @media screen and (max-width: 1279px) {
@@ -31,20 +31,10 @@
31
31
  .sidebar-item {
32
32
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
33
33
  }
34
-
35
- .sidebar-item:focus-visible {
36
- padding-left: 0;
37
- margin-left: var(--dx-g-spacing-xl);
38
- }
39
34
  }
40
35
 
41
36
  @media (max-width: 767px) {
42
37
  .sidebar-item {
43
38
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
44
39
  }
45
-
46
- .sidebar-item:focus-visible {
47
- padding-left: 0;
48
- margin-left: var(--dx-g-spacing-lg);
49
- }
50
40
  }