playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31078 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -6
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +9 -10
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +8 -4
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -7
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +17 -280
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +0 -6
- data/app/pb_kits/playbook/pb_nav/_item.tsx +22 -35
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +7 -6
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +58 -85
- data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx} +5 -14
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -5
- data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -5
- data/app/pb_kits/playbook/pb_nav/item.rb +3 -29
- data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb +24 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -11
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -75
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +0 -3
- data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +0 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +0 -58
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +0 -1
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1c4ed389de4d3d4fb6707f7b6d320cb5fab04f242dd3a85dd13d36fd27bed1bb
|
4
|
+
data.tar.gz: 730de6094c4243b515b6c07950896fff797c699b65214d691ba5cfe116137e59
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 999f9f2a0a7b74a1db4a819b61dceef4a283fb3c2965185475cca1c73c0fdc071013bde30b9dd0b6df7a1cee7824b1085a822969ada3d299a8a130b8317d545c
|
7
|
+
data.tar.gz: 318dbf4af0bea085d7ca027bb6c5da323d73655f33d2704f3479c92a5694a61723bfabc57262bb68b4fb4ae0975a5d492ceee6d63c9f9151862dd1ab2e0c7de4
|
@@ -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
|
-
|
23
|
+
iconClick?: ()=> 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
|
-
|
39
|
+
iconClick,
|
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,
|
69
|
+
<CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, iconClick, onClick }}>
|
70
70
|
<div
|
71
71
|
{...ariaProps}
|
72
72
|
{...dataProps}
|
@@ -33,7 +33,6 @@ type CollapsibleMainProps = {
|
|
33
33
|
children: React.ReactNode[] | React.ReactNode,
|
34
34
|
className?: string,
|
35
35
|
cursor?: string,
|
36
|
-
dark?: boolean,
|
37
36
|
onClick?: ()=> void
|
38
37
|
}
|
39
38
|
type IconColors = "default" | "light" | "lighter" | "link" | "error" | "success"
|
@@ -43,10 +42,10 @@ type IconProps = {
|
|
43
42
|
icon?: string[] | string
|
44
43
|
iconColor?: IconColors
|
45
44
|
iconSize?: IconSizes
|
46
|
-
|
45
|
+
iconClick?: ()=> void
|
47
46
|
}
|
48
47
|
|
49
|
-
const ToggleIcon = ({ collapsed, icon, iconSize, iconColor,
|
48
|
+
const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, iconClick }: IconProps) => {
|
50
49
|
const color = colorMap[iconColor]
|
51
50
|
|
52
51
|
const showIcon = (icon: string |string[]) => {
|
@@ -57,9 +56,9 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
|
|
57
56
|
}
|
58
57
|
|
59
58
|
const handleIconClick = (e:any) => {
|
60
|
-
if (
|
59
|
+
if (iconClick) {
|
61
60
|
e.stopPropagation();
|
62
|
-
|
61
|
+
iconClick()
|
63
62
|
}
|
64
63
|
}
|
65
64
|
|
@@ -94,18 +93,18 @@ const CollapsibleMain = ({
|
|
94
93
|
cursor = 'pointer',
|
95
94
|
...props
|
96
95
|
}: CollapsibleMainProps): React.ReactElement=> {
|
97
|
-
const {collapsed, toggle, icon, iconSize, iconColor,
|
96
|
+
const {collapsed, toggle, icon, iconSize, iconColor, iconClick, onClick}: any = useContext(CollapsibleContext)
|
98
97
|
const mainCSS = buildCss('pb_collapsible_main_kit')
|
99
98
|
const mainSpacing = globalProps(props, { cursor })
|
100
99
|
|
101
|
-
const handleCollapsibleClick = () => {
|
100
|
+
const handleCollapsibleClick = (e:any) => {
|
102
101
|
toggle();
|
103
|
-
onClick && onClick()
|
102
|
+
onClick && onClick(e)
|
104
103
|
}
|
105
104
|
|
106
105
|
return (
|
107
106
|
<div className={classnames(mainCSS, className, mainSpacing)}>
|
108
|
-
<div onClick={handleCollapsibleClick}>
|
107
|
+
<div onClick={(e)=>handleCollapsibleClick(e)}>
|
109
108
|
<Flex
|
110
109
|
spacing="between"
|
111
110
|
vertical="center"
|
@@ -117,7 +116,7 @@ const CollapsibleMain = ({
|
|
117
116
|
iconColor={iconColor as IconColors}
|
118
117
|
iconSize={iconSize as IconSizes}
|
119
118
|
icon={icon as string[] | string}
|
120
|
-
|
119
|
+
iconClick={iconClick}
|
121
120
|
/>
|
122
121
|
</FlexItem>
|
123
122
|
</Flex>
|
@@ -1,13 +1,13 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Collapsible } from '../..'
|
3
3
|
|
4
|
-
const CollapsibleColor = (
|
4
|
+
const CollapsibleColor = () => (
|
5
5
|
<div>
|
6
6
|
<Collapsible
|
7
7
|
iconColor='default'
|
8
8
|
marginBottom="xs"
|
9
9
|
>
|
10
|
-
<Collapsible.Main
|
10
|
+
<Collapsible.Main>
|
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 = () => (
|
5
5
|
<Collapsible >
|
6
|
-
<Collapsible.Main
|
6
|
+
<Collapsible.Main>
|
7
7
|
<div>{'Main Section'}</div>
|
8
8
|
</Collapsible.Main>
|
9
9
|
<Collapsible.Content>
|
@@ -1,14 +1,18 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { Collapsible } from '../..'
|
2
|
+
import { Collapsible, useCollapsible, Button } from '../..'
|
3
3
|
|
4
|
-
const CollapsibleIcons = (
|
4
|
+
const CollapsibleIcons = () => {
|
5
|
+
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
|
5
6
|
|
6
7
|
return (
|
7
8
|
<>
|
8
|
-
<
|
9
|
+
<Button onClick={()=> setIsCollapsed(!isCollapsed)}>
|
10
|
+
{isCollapsed ? "Expand" : "Collapse"}
|
11
|
+
</Button>
|
12
|
+
<Collapsible collapsed={isCollapsed}
|
9
13
|
icon={['plus','minus']}
|
10
14
|
>
|
11
|
-
<Collapsible.Main
|
15
|
+
<Collapsible.Main>
|
12
16
|
<div>{'Main Section'}</div>
|
13
17
|
</Collapsible.Main>
|
14
18
|
<Collapsible.Content>
|
@@ -1,2 +1,2 @@
|
|
1
1
|
##### Prop
|
2
|
-
|
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']`
|
@@ -1,13 +1,13 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Collapsible } from '../..'
|
3
3
|
|
4
|
-
const CollapsibleSize = (
|
4
|
+
const CollapsibleSize = () => (
|
5
5
|
<div>
|
6
6
|
<Collapsible
|
7
7
|
iconSize="xs"
|
8
8
|
marginBottom="xs"
|
9
9
|
>
|
10
|
-
<Collapsible.Main
|
10
|
+
<Collapsible.Main>
|
11
11
|
<div>{'Extra Small Section'}</div>
|
12
12
|
</Collapsible.Main>
|
13
13
|
<Collapsible.Content>
|
@@ -22,7 +22,7 @@ const CollapsibleSize = (props) => (
|
|
22
22
|
iconSize="sm"
|
23
23
|
marginBottom="xs"
|
24
24
|
>
|
25
|
-
<Collapsible.Main
|
25
|
+
<Collapsible.Main>
|
26
26
|
<div>{'Small Section'}</div>
|
27
27
|
</Collapsible.Main>
|
28
28
|
<Collapsible.Content>
|
@@ -36,7 +36,7 @@ const CollapsibleSize = (props) => (
|
|
36
36
|
<Collapsible
|
37
37
|
marginBottom="xs"
|
38
38
|
>
|
39
|
-
<Collapsible.Main
|
39
|
+
<Collapsible.Main>
|
40
40
|
<div>{'Default Section'}</div>
|
41
41
|
</Collapsible.Main>
|
42
42
|
<Collapsible.Content>
|
@@ -51,7 +51,7 @@ const CollapsibleSize = (props) => (
|
|
51
51
|
iconSize="lg"
|
52
52
|
marginBottom="xs"
|
53
53
|
>
|
54
|
-
<Collapsible.Main
|
54
|
+
<Collapsible.Main>
|
55
55
|
<div>{'Large Section'}</div>
|
56
56
|
</Collapsible.Main>
|
57
57
|
<Collapsible.Content>
|
@@ -2,13 +2,12 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- collapsible_default: Default
|
5
|
-
- collapsible_size:
|
6
|
-
- collapsible_color:
|
7
|
-
- collapsible_icons: Custom Icons
|
5
|
+
- collapsible_size: Size
|
6
|
+
- collapsible_color: Color
|
7
|
+
# - collapsible_icons: Custom Icons
|
8
8
|
|
9
9
|
react:
|
10
10
|
- collapsible_default: Default
|
11
|
-
- collapsible_size:
|
12
|
-
- collapsible_color:
|
13
|
-
- collapsible_icons: Custom Icons
|
14
|
-
- collapsible_state: useCollapsible Hook
|
11
|
+
- collapsible_size: Size
|
12
|
+
- collapsible_color: Color
|
13
|
+
# - collapsible_icons: Custom Icons
|
@@ -1,5 +1,4 @@
|
|
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'
|
5
|
-
export {default as CollapsibleState } from './_collapsible_state.jsx'
|
4
|
+
export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
|
@@ -1,290 +1,27 @@
|
|
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";
|
7
4
|
|
8
5
|
[class^="pb_nav_list"] {
|
9
|
-
.
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
}
|
15
|
-
|
16
|
-
.
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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
|
-
}
|
120
|
-
}
|
121
|
-
}
|
122
|
-
|
123
|
-
//styling for subtle variant with collapsible
|
124
|
-
&[class*="_subtle"] {
|
125
|
-
[class*="pb_collapsible_nav_item"] {
|
126
|
-
&[class*="_active"] {
|
127
|
-
.pb_collapsible_main_kit {
|
128
|
-
background-color: $primary !important;
|
129
|
-
border-radius: $border_rad_heavier;
|
130
|
-
.pb_nav_list_item_text_collapsible,
|
131
|
-
.pb_nav_list_item_icon_collapsible,
|
132
|
-
.icon_wrapper,
|
133
|
-
.pb_icon_kit {
|
134
|
-
color: $white !important;
|
135
|
-
}
|
136
|
-
}
|
137
|
-
|
138
|
-
&:hover {
|
139
|
-
background-color: unset;
|
140
|
-
}
|
141
|
-
.pb_collapsible_main_kit:hover {
|
142
|
-
.pb_nav_list_item_text_collapsible {
|
143
|
-
color: $white !important;
|
144
|
-
}
|
145
|
-
}
|
146
|
-
|
147
|
-
.icon_wrapper {
|
148
|
-
&:hover {
|
149
|
-
background-color: mix($primary, $card_light, 40%);
|
150
|
-
.pb_icon_kit {
|
151
|
-
color: $primary !important;
|
152
|
-
}
|
153
|
-
}
|
154
|
-
}
|
155
|
-
}
|
156
|
-
}
|
157
|
-
}
|
158
|
-
|
159
|
-
[class*="pb_collapsible_nav_item"] {
|
160
|
-
.pb_nav_list_kit_item {
|
161
|
-
margin-right: 0px !important;
|
162
|
-
}
|
163
|
-
|
164
|
-
&[class*="_active"] {
|
165
|
-
background-color: unset !important;
|
166
|
-
.pb_nav_list_item_link {
|
167
|
-
color: unset !important;
|
168
|
-
}
|
169
|
-
}
|
170
|
-
|
171
|
-
.pb_nav_list_item_link_collapsible {
|
172
|
-
&:focus-visible {
|
173
|
-
outline: none;
|
174
|
-
}
|
175
|
-
}
|
176
|
-
|
177
|
-
.pb_collapsible_main_kit {
|
178
|
-
&:focus-visible {
|
179
|
-
box-shadow: 0px 0px 0px 2px $primary_action;
|
180
|
-
border-radius: $border_rad_heavier;
|
181
|
-
}
|
182
|
-
}
|
183
|
-
|
184
|
-
//Make sure link is entire width of navitem when in collapsible
|
185
|
-
.pb_collapsible_main_kit {
|
186
|
-
.pb_flex_item_kit:first-child {
|
187
|
-
width: 100%;
|
188
|
-
}
|
189
|
-
}
|
190
|
-
|
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;
|
191
21
|
&:hover {
|
192
|
-
|
193
|
-
background-color: unset !important;
|
194
|
-
}
|
195
|
-
}
|
196
|
-
|
197
|
-
// vertical line on left of collapsible content
|
198
|
-
.pb_collapsible_content_kit {
|
199
|
-
margin-left: $space_sm + 2;
|
200
|
-
border-left: 1px solid transparent;
|
201
|
-
}
|
202
|
-
|
203
|
-
.pb_collapsible_main_kit {
|
204
|
-
transition-property: color, border-color, background-color;
|
205
|
-
transition-duration: 0.15s;
|
206
|
-
transition-timing-function: $bezier;
|
207
|
-
border-radius: $border_rad_heavier;
|
208
|
-
&:hover {
|
209
|
-
background-color: mix($primary, $card_light, 10%);
|
210
|
-
.pb_nav_list_item_text_collapsible,
|
211
|
-
svg {
|
212
|
-
color: $primary !important;
|
213
|
-
}
|
214
|
-
}
|
215
|
-
}
|
216
|
-
|
217
|
-
.pb_collapsible_main_kit,
|
218
|
-
.pb_collapsible_content_kit,
|
219
|
-
.pb_collapsible_kit {
|
220
|
-
padding: 0 !important;
|
221
|
-
}
|
222
|
-
|
223
|
-
&[class*="_collapsible_trail"] {
|
224
|
-
@include collapsible_trail_class;
|
225
|
-
}
|
22
|
+
background-color: rgba($primary_action, $opacity_3);
|
226
23
|
|
227
|
-
.icon_wrapper {
|
228
|
-
border-radius: $border_radius_rounded;
|
229
|
-
width: $space_sm + 3;
|
230
|
-
height: $space_sm + 3;
|
231
|
-
display: flex;
|
232
|
-
align-items: center;
|
233
|
-
justify-content: center;
|
234
|
-
margin-right: $space_xs;
|
235
|
-
&:hover {
|
236
|
-
background-color: mix($primary, $card_light, 40%);
|
237
|
-
}
|
238
|
-
}
|
239
|
-
|
240
|
-
&.dark {
|
241
|
-
.pb_nav_list_kit_item {
|
242
|
-
border-color: $border_dark;
|
243
|
-
.pb_nav_list_item_text {
|
244
|
-
color: $text_dk_light !important;
|
245
|
-
}
|
246
|
-
}
|
247
|
-
&[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
|
248
|
-
.pb_nav_list_item_text {
|
249
|
-
color: $white !important;
|
250
|
-
}
|
251
|
-
}
|
252
|
-
|
253
|
-
.pb_nav_list_item_text_collapsible {
|
254
|
-
color: $white !important;
|
255
|
-
}
|
256
|
-
.pb_nav_list_item_text {
|
257
|
-
color: $text_dk_light;
|
258
|
-
}
|
259
|
-
.pb_nav_list_kit_item:hover {
|
260
|
-
background-color: #ffffff33;
|
261
|
-
color: $white;
|
262
|
-
}
|
263
|
-
.pb_icon_kit {
|
264
|
-
color: $text_dk_light;
|
265
|
-
}
|
266
|
-
|
267
|
-
.pb_collapsible_main_kit:hover {
|
268
|
-
background-color: mix($white, $card_dark, 20%);
|
269
|
-
.pb_nav_list_item_text_collapsible,
|
270
|
-
svg {
|
271
|
-
color: $white !important;
|
272
|
-
}
|
273
|
-
}
|
274
|
-
.icon_wrapper:hover {
|
275
|
-
background-color: mix($white, $card_dark, 40%);
|
276
|
-
}
|
277
|
-
&[class*="_active"] {
|
278
|
-
.icon_wrapper:hover {
|
279
|
-
background-color: mix($primary, $card_light, 40%);
|
280
|
-
}
|
281
|
-
}
|
282
|
-
|
283
|
-
&[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
|
284
|
-
.pb_collapsible_content_kit {
|
285
|
-
border-color: $border_dark;
|
286
|
-
}
|
287
|
-
}
|
288
24
|
}
|
289
25
|
}
|
290
26
|
}
|
27
|
+
}
|
@@ -81,9 +81,6 @@ $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
|
-
}
|
87
84
|
}
|
88
85
|
[class*=_active] {
|
89
86
|
background-color: $active_light;
|
@@ -104,9 +101,6 @@ $selector: ".pb_nav_list";
|
|
104
101
|
// Horizontal Overrides
|
105
102
|
[class*=pb_nav_list_kit_item] {
|
106
103
|
margin: 0;
|
107
|
-
[class*=_item_text]{
|
108
|
-
font-weight: $regular;
|
109
|
-
}
|
110
104
|
}
|
111
105
|
[class*=_active] {
|
112
106
|
[class*=_text] {
|