playbook_ui 12.38.0 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +6 -0
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -9
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  12. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  13. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  14. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +274 -17
  15. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +7 -1
  16. data/app/pb_kits/playbook/pb_nav/_item.tsx +232 -132
  17. data/app/pb_kits/playbook/pb_nav/_mixins.scss +14 -0
  18. data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
  19. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -7
  20. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  21. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
  22. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  23. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
  24. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  25. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  29. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  30. data/app/pb_kits/playbook/pb_nav/item.html.erb +20 -4
  31. data/app/pb_kits/playbook/pb_nav/item.rb +89 -3
  32. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
  33. data/app/pb_kits/playbook/pb_nav/nav.rb +13 -0
  34. data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
  35. data/app/pb_kits/playbook/pb_select/_select.scss +76 -0
  36. data/app/pb_kits/playbook/pb_select/_select.tsx +9 -5
  37. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
  38. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
  39. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +36 -0
  40. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx +50 -0
  41. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -0
  42. data/app/pb_kits/playbook/pb_select/docs/example.yml +3 -0
  43. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_select/select.html.erb +5 -9
  45. data/app/pb_kits/playbook/pb_select/select.rb +14 -0
  46. data/app/pb_kits/playbook/pb_select/select.test.js +17 -0
  47. data/dist/playbook-rails.js +2 -2
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +22 -8
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a7c4ddd52da1fe9859284946ec51d75106349052abe11a99bc4401bf730084e7
4
- data.tar.gz: 667ba4c62fbcbdb517e9bfdacdb6c3c28519e7bf987773e242598df435262da4
3
+ metadata.gz: bf4167e4358045e1ef6c706b26d0e1893336ef2e673212b907abf2e2bfd7d37f
4
+ data.tar.gz: f43205d27b1ceffd14ba706a9faf3285b650e220a71e889a78c0f55d41356737
5
5
  SHA512:
6
- metadata.gz: 30ccec62ad8d83690b6582e2505bb64f54a2fdc95e8fa910a455ed5fbb1158c10e89e1470ca9991dcc9d85b326f714ea4e01f5b89d940001bf71d11e59a07396
7
- data.tar.gz: 5e8e812054d8296686d593cd3626eafee70e76529285d61834132677e72462ed035582fe0ceb7706e23bda2ce4988716139c42bfeaa619d0ad9280d95d9658f9
6
+ metadata.gz: 2f2ecc613d9a31db4877c93101a664ddf9922ad0b46361971792336e51ee8f36f9b5aaa325893b26530a6ccf1b2dfb13af5f8f87309ad3e0c8bdc6501d8214da
7
+ data.tar.gz: c4b92e867f72479651eee9d82afa551fd717fd66d7ced9a4997dbcec133d6e3b1e2916f5197ccc5e9c6c9b8c8a16db1931f6aca42dd758427e5a2c076abfc7f1
@@ -20,6 +20,12 @@
20
20
  .icon_wrapper:hover {
21
21
  color: $primary
22
22
  }
23
+
24
+ .dark {
25
+ .pb_icon_kit {
26
+ color: $white;
27
+ }
28
+ }
23
29
  }
24
30
 
25
31
  [class^=pb_collapsible_main_kit] {
@@ -20,7 +20,7 @@ type CollapsibleProps = {
20
20
  icon?: string | string[],
21
21
  iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
22
22
  iconSize?: IconSizes,
23
- iconClick?: ()=> void,
23
+ onIconClick?: ()=> void,
24
24
  onClick?: ()=> void,
25
25
  id?: string,
26
26
  }
@@ -36,7 +36,7 @@ const Collapsible = ({
36
36
  icon,
37
37
  iconColor = 'default',
38
38
  iconSize,
39
- iconClick,
39
+ onIconClick,
40
40
  onClick,
41
41
  id,
42
42
  ...props
@@ -66,7 +66,7 @@ const Collapsible = ({
66
66
  className
67
67
  )
68
68
  return (
69
- <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, iconClick, onClick }}>
69
+ <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
70
70
  <div
71
71
  {...ariaProps}
72
72
  {...dataProps}
@@ -33,6 +33,7 @@ type CollapsibleMainProps = {
33
33
  children: React.ReactNode[] | React.ReactNode,
34
34
  className?: string,
35
35
  cursor?: string,
36
+ dark?: boolean,
36
37
  onClick?: ()=> void
37
38
  }
38
39
  type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success"
@@ -42,10 +43,10 @@ type IconProps = {
42
43
  icon?: string[] | string
43
44
  iconColor?: IconColors
44
45
  iconSize?: IconSizes
45
- iconClick?: ()=> void
46
+ onIconClick?: ()=> void
46
47
  }
47
48
 
48
- const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconProps) => {
49
+ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
49
50
  const color = colorMap[iconColor]
50
51
 
51
52
  const showIcon = (icon: string |string[]) => {
@@ -56,9 +57,9 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconPro
56
57
  }
57
58
 
58
59
  const handleIconClick = (e:any) => {
59
- if (iconClick) {
60
+ if (onIconClick) {
60
61
  e.stopPropagation();
61
- iconClick()
62
+ onIconClick()
62
63
  }
63
64
  }
64
65
 
@@ -93,18 +94,18 @@ const CollapsibleMain = ({
93
94
  cursor = 'pointer',
94
95
  ...props
95
96
  }: CollapsibleMainProps): React.ReactElement=> {
96
- const {collapsed, toggle, icon, iconSize, iconColor, iconClick, onClick}: any = useContext(CollapsibleContext)
97
+ const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
97
98
  const mainCSS = buildCss('pb_collapsible_main_kit')
98
99
  const mainSpacing = globalProps(props, { cursor })
99
100
 
100
- const handleCollapsibleClick = (e:any) => {
101
+ const handleCollapsibleClick = () => {
101
102
  toggle();
102
- onClick && onClick(e)
103
+ onClick && onClick()
103
104
  }
104
105
 
105
106
  return (
106
107
  <div className={classnames(mainCSS, className, mainSpacing)}>
107
- <div onClick={(e)=>handleCollapsibleClick(e)}>
108
+ <div onClick={handleCollapsibleClick}>
108
109
  <Flex
109
110
  spacing="between"
110
111
  vertical="center"
@@ -116,7 +117,7 @@ const CollapsibleMain = ({
116
117
  iconColor={iconColor as IconColors}
117
118
  iconSize={iconSize as IconSizes}
118
119
  icon={icon as string[] | string}
119
- iconClick={iconClick}
120
+ onIconClick={onIconClick}
120
121
  />
121
122
  </FlexItem>
122
123
  </Flex>
@@ -1,13 +1,13 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleColor = () => (
4
+ const CollapsibleColor = (props) => (
5
5
  <div>
6
6
  <Collapsible
7
7
  iconColor='default'
8
8
  marginBottom="xs"
9
9
  >
10
- <Collapsible.Main>
10
+ <Collapsible.Main {...props}>
11
11
  <div>{'Default Section'}</div>
12
12
  </Collapsible.Main>
13
13
  <Collapsible.Content>
@@ -1,9 +1,9 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleDefault = () => (
4
+ const CollapsibleDefault = (props) => (
5
5
  <Collapsible >
6
- <Collapsible.Main>
6
+ <Collapsible.Main {...props}>
7
7
  <div>{'Main Section'}</div>
8
8
  </Collapsible.Main>
9
9
  <Collapsible.Content>
@@ -1,18 +1,14 @@
1
1
  import React from 'react'
2
- import { Collapsible, useCollapsible, Button } from '../..'
2
+ import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleIcons = () => {
5
- const [isCollapsed, setIsCollapsed] = useCollapsible(true)
4
+ const CollapsibleIcons = (props) => {
6
5
 
7
6
  return (
8
7
  <>
9
- <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
10
- {isCollapsed ? "Expand" : "Collapse"}
11
- </Button>
12
- <Collapsible collapsed={isCollapsed}
8
+ <Collapsible
13
9
  icon={['plus','minus']}
14
10
  >
15
- <Collapsible.Main>
11
+ <Collapsible.Main {...props}>
16
12
  <div>{'Main Section'}</div>
17
13
  </Collapsible.Main>
18
14
  <Collapsible.Content>
@@ -1,2 +1,2 @@
1
1
  ##### Prop
2
- This kit uses 'chevron-up' and 'chevron-down' icons as default for the toggle icons. To customize these icons, use the `icon` prop to pass in an array of two icons, the first will render when the collapisble is closed and the second will render when the collapsible is open. In this example, we are using `icon: ['plus','minus']`
2
+ The `icon` prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). `icon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.
@@ -1,13 +1,13 @@
1
1
  import React from 'react'
2
2
  import { Collapsible } from '../..'
3
3
 
4
- const CollapsibleSize = () => (
4
+ const CollapsibleSize = (props) => (
5
5
  <div>
6
6
  <Collapsible
7
7
  iconSize="xs"
8
8
  marginBottom="xs"
9
9
  >
10
- <Collapsible.Main>
10
+ <Collapsible.Main {...props}>
11
11
  <div>{'Extra Small Section'}</div>
12
12
  </Collapsible.Main>
13
13
  <Collapsible.Content>
@@ -22,7 +22,7 @@ const CollapsibleSize = () => (
22
22
  iconSize="sm"
23
23
  marginBottom="xs"
24
24
  >
25
- <Collapsible.Main>
25
+ <Collapsible.Main {...props}>
26
26
  <div>{'Small Section'}</div>
27
27
  </Collapsible.Main>
28
28
  <Collapsible.Content>
@@ -36,7 +36,7 @@ const CollapsibleSize = () => (
36
36
  <Collapsible
37
37
  marginBottom="xs"
38
38
  >
39
- <Collapsible.Main>
39
+ <Collapsible.Main {...props}>
40
40
  <div>{'Default Section'}</div>
41
41
  </Collapsible.Main>
42
42
  <Collapsible.Content>
@@ -51,7 +51,7 @@ const CollapsibleSize = () => (
51
51
  iconSize="lg"
52
52
  marginBottom="xs"
53
53
  >
54
- <Collapsible.Main>
54
+ <Collapsible.Main {...props}>
55
55
  <div>{'Large Section'}</div>
56
56
  </Collapsible.Main>
57
57
  <Collapsible.Content>
@@ -0,0 +1,75 @@
1
+ import React from 'react'
2
+ import { Collapsible, useCollapsible, Button } from '../..'
3
+
4
+ const CollapsibleState = (props) => {
5
+ const [isCollapsed, setIsCollapsed] = useCollapsible(true)
6
+
7
+ return (
8
+ <>
9
+ <Button
10
+ onClick={() => setIsCollapsed(!isCollapsed)}
11
+ padding="none"
12
+ variant="link"
13
+ >
14
+ {isCollapsed ? "Expand All" : "Collapse All"}
15
+ </Button>
16
+
17
+ <Collapsible
18
+ collapsed={isCollapsed}
19
+ icon={["plus", "minus"]}
20
+ padding="none"
21
+ >
22
+ <Collapsible.Main padding="sm"
23
+ {...props}
24
+ >
25
+ <div>{"Main Section"}</div>
26
+ </Collapsible.Main>
27
+ <Collapsible.Content>
28
+ <div>
29
+ {
30
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
31
+ }
32
+ </div>
33
+ </Collapsible.Content>
34
+ </Collapsible>
35
+ <Collapsible
36
+ collapsed={isCollapsed}
37
+ icon={["plus", "minus"]}
38
+ padding="none"
39
+ >
40
+ <Collapsible.Main padding="sm"
41
+ {...props}
42
+ >
43
+ <div>{"Main Section"}</div>
44
+ </Collapsible.Main>
45
+ <Collapsible.Content>
46
+ <div>
47
+ {
48
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
49
+ }
50
+ </div>
51
+ </Collapsible.Content>
52
+ </Collapsible>
53
+ <Collapsible
54
+ collapsed={isCollapsed}
55
+ icon={["plus", "minus"]}
56
+ padding="none"
57
+ >
58
+ <Collapsible.Main padding="sm"
59
+ {...props}
60
+ >
61
+ <div>{"Main Section"}</div>
62
+ </Collapsible.Main>
63
+ <Collapsible.Content>
64
+ <div>
65
+ {
66
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
67
+ }
68
+ </div>
69
+ </Collapsible.Content>
70
+ </Collapsible>
71
+ </>
72
+ )
73
+ }
74
+
75
+ export default CollapsibleState
@@ -0,0 +1,3 @@
1
+ The `collapsed` prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our `useCollapsible` hook.
2
+
3
+ NOTE: you must import and declare the `useCollapsible` hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.
@@ -2,12 +2,13 @@ examples:
2
2
 
3
3
  rails:
4
4
  - collapsible_default: Default
5
- - collapsible_size: Size
6
- - collapsible_color: Color
7
- # - collapsible_icons: Custom Icons
5
+ - collapsible_size: Icon Size
6
+ - collapsible_color: Icon Color
7
+ - collapsible_icons: Custom Icons
8
8
 
9
9
  react:
10
10
  - collapsible_default: Default
11
- - collapsible_size: Size
12
- - collapsible_color: Color
13
- # - collapsible_icons: Custom Icons
11
+ - collapsible_size: Icon Size
12
+ - collapsible_color: Icon Color
13
+ - collapsible_icons: Custom Icons
14
+ - collapsible_state: useCollapsible Hook
@@ -1,4 +1,5 @@
1
1
  export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
2
  export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
3
  export { default as CollapsibleColor } from './_collapsible_color.jsx'
4
- export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
4
+ export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
5
+ export {default as CollapsibleState } from './_collapsible_state.jsx'
@@ -1,27 +1,284 @@
1
1
  @import "../tokens/spacing";
2
2
  @import "../tokens/colors";
3
3
  @import "../tokens/border_radius";
4
+ @import "../tokens/titles";
5
+ @import "../tokens/typography";
6
+ @import "./mixins";
4
7
 
5
8
  [class^="pb_nav_list"] {
6
- .pb_collapsible_nav_item {
7
- .pb_collapsible_main_kit,
8
- .pb_collapsible_content_kit,
9
- .pb_collapsible_kit {
10
- padding: 0 !important;
11
- }
12
-
13
- .icon_wrapper {
14
- border-radius: $border_radius_rounded;
15
- width: 19px;
16
- height: 19px;
17
- display:flex;
18
- align-items: center;
19
- justify-content: center;
20
- margin-right: $space_xs;
9
+ .font_size_small {
10
+ .pb_nav_list_item_text,
11
+ .pb_nav_list_item_text_collapsible {
12
+ font-size: $font_small !important;
13
+ }
14
+ }
15
+
16
+ .font_bolder {
17
+ .pb_nav_list_item_text {
18
+ @include pb_title_4;
19
+ }
20
+ .pb_collapsible_main_kit {
21
+ .pb_nav_list_item_text_collapsible {
22
+ @include pb_title_4;
23
+ font-weight: $bolder !important;
24
+ }
25
+ }
26
+ }
27
+
28
+ .font_bold {
29
+ .pb_nav_list_item_text {
30
+ font-weight: $bold;
31
+ }
32
+ .pb_collapsible_main_kit {
33
+ .pb_nav_list_item_text_collapsible {
34
+ font-weight: $bold !important;
35
+ }
36
+ }
37
+ }
38
+
39
+ .font_regular {
40
+ .pb_nav_list_item_text {
41
+ font-weight: $regular;
42
+ }
43
+ .pb_collapsible_main_kit {
44
+ .pb_nav_list_item_text_collapsible {
45
+ font-weight: $regular !important;
46
+ }
47
+ }
48
+ }
49
+
50
+ //styling for default variant with collapsible
51
+ &[class*="_normal"] {
52
+ [class*="pb_collapsible_nav_item"] {
53
+ .pb_collapsible_content_kit {
54
+ margin-left: $space_lg + 3;
55
+ }
56
+ .pb_collapsible_main_kit {
57
+ border-radius: unset;
58
+ }
59
+ &[class*="_active"] {
60
+ .pb_collapsible_main_kit {
61
+ background-color: $active_light;
62
+ }
63
+ .pb_nav_list_item_link {
64
+ border-color: transparent !important;
65
+ .pb_nav_list_item_text {
66
+ color: unset !important;
67
+ font-weight: $regular !important;
68
+ }
69
+ }
70
+ }
71
+
72
+ &.dark {
73
+ border-color: $border_dark;
74
+ .pb_collapsible_main_kit:hover {
75
+ .pb_nav_list_item_text_collapsible {
76
+ color: $white !important;
77
+ }
78
+ }
79
+ &[class*="_active"] {
80
+ .pb_collapsible_main_kit {
81
+ background-color: mix($white, $card_dark, 20%);
82
+ .pb_nav_list_item_text_collapsible,
83
+ svg {
84
+ color: $white !important;
85
+ }
86
+ }
87
+ }
88
+ }
89
+ }
90
+ }
91
+
92
+ //styling bold variant to work with collapsible
93
+ &[class*="_bold"] {
94
+ [class*="pb_collapsible_nav_item"] {
95
+ &[class*="_active"] {
96
+ .pb_collapsible_main_kit {
97
+ background-color: $primary !important;
98
+ border-radius: $border_rad_heavier;
99
+ .pb_nav_list_item_text_collapsible,
100
+ .pb_nav_list_item_icon_collapsible,
101
+ .icon_wrapper,
102
+ .pb_icon_kit {
103
+ color: $white !important;
104
+ }
105
+ }
106
+ .pb_nav_list_item_link {
107
+ background-color: unset !important;
108
+ box-shadow: unset !important;
109
+ &:hover {
110
+ background-color: rgba($primary, 0.03) !important;
111
+ .pb_nav_list_item_text {
112
+ color: $primary !important;
113
+ }
114
+ }
115
+ .pb_nav_list_item_text {
116
+ font-weight: $regular !important;
117
+ }
118
+ }
119
+ .icon_wrapper:hover {
120
+ background-color: mix($primary, $card_light, 40%);
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+ //styling for subtle variant with collapsible
127
+ &[class*="_subtle"] {
128
+ [class*="pb_collapsible_nav_item"] {
129
+ &[class*="_active"] {
130
+ .pb_collapsible_main_kit {
131
+ background-color: $active_light;
132
+ border-radius: $border_rad_heavier;
133
+ .pb_nav_list_item_text_collapsible,
134
+ .pb_nav_list_item_icon_collapsible
135
+ {
136
+ color: $primary;
137
+ }
138
+ }
139
+ &:hover {
140
+ background-color: unset;
141
+ }
142
+ }
143
+ &.dark {
144
+ &[class*="_active"] {
145
+ .pb_collapsible_main_kit {
146
+ background-color: mix($white, $card_dark, 20%);
147
+ .pb_nav_list_item_text_collapsible,
148
+ svg {
149
+ color: $white !important;
150
+ }
151
+ }
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ [class*="pb_collapsible_nav_item"] {
158
+ .pb_nav_list_kit_item {
159
+ margin-right: 0px !important;
160
+ }
161
+
162
+ &[class*="_active"] {
163
+ background-color: unset !important;
164
+ .pb_nav_list_item_link {
165
+ color: unset !important;
166
+ }
167
+ }
168
+
169
+ .pb_nav_list_item_link_collapsible {
170
+ &:focus-visible {
171
+ outline: none;
172
+ }
173
+ }
174
+
175
+ .pb_collapsible_main_kit {
176
+ &:focus-visible {
177
+ box-shadow: 0px 0px 0px 2px $primary_action;
178
+ border-radius: $border_rad_heavier;
179
+ }
180
+ }
181
+
182
+ //Make sure link is entire width of navitem when in collapsible
183
+ .pb_collapsible_main_kit {
184
+ .pb_flex_item_kit:first-child {
185
+ width: 100%;
186
+ }
187
+ }
188
+
21
189
  &:hover {
22
- background-color: rgba($primary_action, $opacity_3);
190
+ .pb_nav_list_item_link_collapsible {
191
+ background-color: unset !important;
192
+ }
193
+ }
194
+
195
+ // vertical line on left of collapsible content
196
+ .pb_collapsible_content_kit {
197
+ margin-left: $space_sm + 2;
198
+ }
23
199
 
200
+ .pb_collapsible_main_kit {
201
+ transition-property: color, border-color, background-color;
202
+ transition-duration: 0.15s;
203
+ transition-timing-function: $bezier;
204
+ border-radius: $border_rad_heavier;
205
+ &:hover {
206
+ background-color: mix($primary, $card_light, 10%);
207
+ .pb_nav_list_item_text_collapsible,
208
+ svg {
209
+ color: $primary !important;
210
+ }
211
+ }
212
+ }
213
+
214
+ .pb_collapsible_main_kit,
215
+ .pb_collapsible_content_kit,
216
+ .pb_collapsible_kit {
217
+ padding: 0 !important;
218
+ }
219
+
220
+ &[class*="_collapsible_trail"] {
221
+ @include collapsible_trail_class;
222
+ }
223
+
224
+ .icon_wrapper {
225
+ border-radius: $border_radius_rounded;
226
+ width: $space_sm + 3;
227
+ height: $space_sm + 3;
228
+ display: flex;
229
+ align-items: center;
230
+ justify-content: center;
231
+ margin-right: $space_xs;
232
+ &:hover {
233
+ background-color: mix($primary, $card_light, 40%);
234
+ }
235
+ }
236
+
237
+ &.dark {
238
+ .pb_nav_list_kit_item {
239
+ border-color: $border_dark;
240
+ .pb_nav_list_item_text {
241
+ color: $text_dk_light !important;
242
+ }
243
+ }
244
+ &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
245
+ .pb_nav_list_item_text {
246
+ color: $white !important;
247
+ }
248
+ }
249
+
250
+ .pb_nav_list_item_text_collapsible {
251
+ color: $white !important;
252
+ }
253
+ .pb_nav_list_item_text {
254
+ color: $text_dk_light;
255
+ }
256
+ .pb_nav_list_kit_item:hover {
257
+ background-color: #ffffff33;
258
+ color: $white;
259
+ }
260
+ .pb_icon_kit {
261
+ color: $text_dk_light;
262
+ }
263
+
264
+ .pb_collapsible_main_kit:hover {
265
+ background-color: mix($white, $card_dark, 20%);
266
+ .pb_nav_list_item_text_collapsible,
267
+ svg {
268
+ color: $white !important;
269
+ }
270
+ }
271
+ .icon_wrapper:hover {
272
+ background-color: mix($white, $card_dark, 40%);
273
+ }
274
+
275
+ &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
276
+ .pb_collapsible_content_kit {
277
+ &::after {
278
+ background-color: $border_dark;
279
+ }
280
+ }
281
+ }
24
282
  }
25
283
  }
26
284
  }
27
- }
@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
44
44
 
45
45
  [class*=_text] {
46
46
  font-size: $font_base;
47
- font-weight: $bold;
47
+ // font-weight: $bold;
48
48
  color: $text_lt_default;
49
49
  }
50
50
 
@@ -81,6 +81,9 @@ $selector: ".pb_nav_list";
81
81
  // Horizontal Overrides
82
82
  [class*=pb_nav_list_kit_item] {
83
83
  margin: 0;
84
+ [class*=_item_text]{
85
+ font-weight: $regular;
86
+ }
84
87
  }
85
88
  [class*=_active] {
86
89
  background-color: $active_light;
@@ -101,6 +104,9 @@ $selector: ".pb_nav_list";
101
104
  // Horizontal Overrides
102
105
  [class*=pb_nav_list_kit_item] {
103
106
  margin: 0;
107
+ [class*=_item_text]{
108
+ font-weight: $regular;
109
+ }
104
110
  }
105
111
  [class*=_active] {
106
112
  [class*=_text] {