@salesforcedevs/dx-components 1.3.228-version-picker2 → 1.3.229-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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/modules/dx/headerNav/headerNav.css +9 -0
  3. package/src/modules/dx/sidebar/sidebar.html +2 -1
  4. package/src/modules/dx/sidebarOld/sidebarOld.html +2 -1
  5. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css +27 -5
  6. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html +16 -10
  7. package/src/modules/dx/tab/tab.css +38 -4
  8. package/src/modules/dx/treeTile/treeTile.css +1 -1
  9. package/src/modules/dxHelpers/commonHeader/commonHeader.css +5 -2
  10. package/src/modules/dxHelpers/commonSidebar/commonSidebar.css +0 -1
  11. package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css +26 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.228-version-picker2",
3
+ "version": "1.3.229-dh1-alpha",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/dx/headerNav/headerNav.css CHANGED
@@ -10,17 +10,26 @@ nav {
10
10
 
11
11
  .nav-list {
12
12
  display: flex;
13
+ margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
13
14
  }
14
15
 
15
16
  .nav-list li {
16
17
  position: relative;
17
18
  }
18
19
 
20
+ .nav-list li:not(:last-child) {
21
+ margin-right: var(--dx-g-spacing-md);
22
+ }
23
+
19
24
  .nav-list-item-nav-menu {
20
25
  display: none;
21
26
  }
22
27
 
23
28
  @media (max-width: 768px) {
29
+ .nav-list {
30
+ margin-top: 0;
31
+ }
32
+
24
33
  .nav-list-item-nav-menu {
25
34
  display: flex;
26
35
  }
package/src/modules/dx/sidebar/sidebar.html CHANGED
@@ -16,7 +16,8 @@
16
16
  <dx-icon
17
17
  sprite="utility"
18
18
  symbol={menuSymbol}
19
- color="blue-vibrant-20"
19
+ color="blue-vibrant-50"
20
+ size="medium"
20
21
  ></dx-icon>
21
22
  </dx-button>
22
23
  </div>
package/src/modules/dx/sidebarOld/sidebarOld.html CHANGED
@@ -16,7 +16,8 @@
16
16
  <dx-icon
17
17
  sprite="utility"
18
18
  symbol={menuSymbol}
19
- color="blue-vibrant-20"
19
+ color="blue-vibrant-50"
20
+ size="medium"
20
21
  ></dx-icon>
21
22
  </dx-button>
22
23
  </div>
package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css CHANGED
@@ -12,10 +12,22 @@ a {
12
12
  var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
13
13
  }
14
14
 
15
- .sidebar-item:focus-visible {
16
- margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
17
- outline: 2px solid var(--dx-g-blue-vibrant-40);
18
- border-radius: 2px;
15
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
16
+ padding: var(--dx-g-spacing-smd) 0;
17
+ margin: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
18
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
19
+ border-radius: var(--dx-g-spacing-2xs);
20
+ }
21
+
22
+ .sidebar-item-selected:focus-visible {
23
+ padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
24
+ outline: none;
25
+
26
+ .search-result {
27
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
28
+ border-radius: var(--dx-g-spacing-2xs);
29
+ padding: var(--dx-g-spacing-smd) 0;
30
+ }
19
31
  }
20
32
 
21
33
  .search-text {
@@ -33,6 +45,7 @@ a {
33
45
  --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
34
46
 
35
47
  font-weight: var(--dx-g-font-normal);
48
+ display: block;
36
49
  }
37
50
 
38
51
  .title {
@@ -50,9 +63,18 @@ a {
50
63
  a > *:not(:last-child) {
51
64
  margin-bottom: var(--dx-g-spacing-xs);
52
65
  }
66
+ @media (max-width: 1279px) {
67
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
68
+ margin-left: var(--dx-g-spacing-xl);
69
+ }
70
+ }
53
71
 
54
- @media (max-width: 768px) {
72
+ @media (max-width: 767px) {
55
73
  .sidebar-item {
56
74
  padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
57
75
  }
76
+
77
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
78
+ margin-left: var(--dx-g-spacing-lg);
79
+ }
58
80
  }
package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html CHANGED
@@ -1,14 +1,20 @@
1
1
  <template>
2
2
  <a class={className} href={href} onclick={onClick}>
3
- <span class="title search-text">
4
- <template for:each={titleChunks} for:item="chunk">
5
- <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
6
- </template>
7
- </span>
8
- <span class="description dx-text-body-3 sidebar-item-truncate-text">
9
- <template for:each={descriptionChunks} for:item="chunk">
10
- <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
11
- </template>
12
- </span>
3
+ <div class="search-result">
4
+ <span class="title search-text">
5
+ <template for:each={titleChunks} for:item="chunk">
6
+ <span class={chunk.class} key={chunk.id}>
7
+ {chunk.value}
8
+ </span>
9
+ </template>
10
+ </span>
11
+ <span class="description dx-text-body-3 sidebar-item-truncate-text">
12
+ <template for:each={descriptionChunks} for:item="chunk">
13
+ <span class={chunk.class} key={chunk.id}>
14
+ {chunk.value}
15
+ </span>
16
+ </template>
17
+ </span>
18
+ </div>
13
19
  </a>
14
20
  </template>
package/src/modules/dx/tab/tab.css CHANGED
@@ -11,13 +11,31 @@ a {
11
11
  );
12
12
 
13
13
  position: relative;
14
- height: calc(var(--dx-g-spacing-3xl) - 4px);
14
+ height: var(--dx-g-spacing-3xl);
15
+ border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
15
16
  }
16
17
 
17
18
  .nav-list-item_default {
18
- padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
19
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
19
20
  justify-content: center;
20
21
  display: flex;
22
+ font-family: var(--dx-g-font-sans);
23
+ font-size: var(--dx-g-text-base);
24
+ line-height: var(--dx-g-spacing-lg);
25
+ font-weight: var(--dx-g-font-normal);
26
+ }
27
+
28
+ .nav-list-item_default:hover {
29
+ border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
30
+ background: var(--dx-g-cloud-blue-vibrant-95);
31
+ color: var(--dx-g-blue-vibrant-20);
32
+ }
33
+
34
+ .nav-list-item_default:focus-visible {
35
+ border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
36
+ background: var(--dx-g-cloud-blue-vibrant-95);
37
+ color: var(--dx-g-blue-vibrant-20);
38
+ outline: 2px solid var(--dx-g-blue-vibrant-60);
21
39
  }
22
40
 
23
41
  .nav-list-item_small {
@@ -66,11 +84,27 @@ button.nav-list-item:active > dx-icon,
66
84
 
67
85
  .nav-list-item_default.state-active {
68
86
  color: var(--dx-g-blue-vibrant-50);
69
- font-family: var(--dx-g-font-sans);
70
- font-size: var(--dx-g-text-base);
87
+ font-weight: var(--dx-g-font-bold);
88
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
89
+ var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
71
90
  border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
72
91
  }
73
92
 
93
+ .nav-list-item_default.state-active:hover {
94
+ border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
95
+ background: var(--dx-g-cloud-blue-vibrant-95);
96
+ border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
97
+ color: var(--dx-g-blue-vibrant-20);
98
+ }
99
+
100
+ .nav-list-item_default.state-active:focus-visible {
101
+ border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
102
+ background: var(--dx-g-cloud-blue-vibrant-95);
103
+ border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
104
+ outline: 2px solid var(--dx-g-blue-vibrant-60);
105
+ color: var(--dx-g-blue-vibrant-20);
106
+ }
107
+
74
108
  @media (max-width: 1160px) {
75
109
  .nav-list-item_small {
76
110
  --horizontal-spacing: var(
package/src/modules/dx/treeTile/treeTile.css CHANGED
@@ -39,7 +39,7 @@
39
39
  .tile-icon {
40
40
  align-items: center;
41
41
  height: var(--tile-height);
42
- padding-right: calc(var(--dx-g-spacing-xs) + 2px);
42
+ padding: 0 calc(var(--dx-g-spacing-xs) + 2px) 0 var(--dx-g-spacing-sm);
43
43
  }
44
44
 
45
45
  .tile-label {
package/src/modules/dxHelpers/commonHeader/commonHeader.css CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  :host {
5
5
  z-index: var(--dx-g-z-index-500);
6
+
7
+ --dx-g-doc-header-main-nav-height: 51px;
6
8
  }
7
9
 
8
10
  .header_l2_group-nav_overflow {
@@ -59,7 +61,8 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
59
61
 
60
62
  .header_l2 {
61
63
  background: white;
62
- padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
64
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
65
+ var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
63
66
  }
64
67
 
65
68
  .header_l2_group {
@@ -70,7 +73,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
70
73
 
71
74
  .header_l2_group-title {
72
75
  flex-shrink: 0;
73
- padding-right: var(--dx-g-spacing-xl);
76
+ padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
74
77
  }
75
78
 
76
79
  .header_l2_group-title
package/src/modules/dxHelpers/commonSidebar/commonSidebar.css CHANGED
@@ -66,7 +66,6 @@
66
66
  var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
67
67
  );
68
68
 
69
- border-right: 1px solid var(--dx-g-gray-90);
70
69
  box-shadow: 2px 0 0 0 var(--border-color);
71
70
  min-height: var(--dx-c-sidebar-min-height);
72
71
  padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css CHANGED
@@ -17,10 +17,24 @@
17
17
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-2xl);
18
18
  }
19
19
 
20
- .sidebar-item:focus-visible {
21
- margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
22
- outline: 2px solid var(--dx-g-blue-vibrant-40);
23
- border-radius: 2px;
20
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
21
+ padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
22
+ margin: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
23
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
24
+ border-radius: var(--dx-g-spacing-2xs);
25
+ }
26
+
27
+ .sidebar-item-selected:focus-visible {
28
+ padding-top: 0;
29
+ padding-bottom: 0;
30
+ outline: none;
31
+
32
+ .indentation {
33
+ outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
34
+ border-radius: var(--dx-g-spacing-2xs);
35
+ padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
36
+ padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
37
+ }
24
38
  }
25
39
 
26
40
  .sidebar-item:not(.sidebar-item-selected):hover {
@@ -31,10 +45,18 @@
31
45
  .sidebar-item {
32
46
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
33
47
  }
48
+
49
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
50
+ margin-left: var(--dx-g-spacing-xl);
51
+ }
34
52
  }
35
53
 
36
54
  @media (max-width: 767px) {
37
55
  .sidebar-item {
38
56
  padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
39
57
  }
58
+
59
+ .sidebar-item:not(.sidebar-item-selected):focus-visible {
60
+ margin-left: var(--dx-g-spacing-lg);
61
+ }
40
62
  }