playbook_ui 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375 → 13.20.0.pre.alpha.PLAY12572402

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +6 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +19 -21
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +3 -6
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +8 -12
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +9 -14
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +5 -9
  9. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +12 -14
  10. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +10 -12
  11. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +2 -3
  12. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +2 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +54 -2
  14. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +81 -82
  15. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  29. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
  30. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
  31. data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
  32. data/app/pb_kits/playbook/pb_table/_table.tsx +13 -0
  33. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +5 -5
  36. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
  37. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
  38. data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -3
  39. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
  40. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +64 -0
  41. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +66 -0
  42. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +64 -0
  43. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +66 -0
  44. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +74 -0
  45. data/app/pb_kits/playbook/pb_table/subcomponents/index.tsx +5 -0
  46. data/app/pb_kits/playbook/pb_table/table.test.js +142 -1
  47. data/app/pb_kits/playbook/utilities/_positioning.scss +48 -7
  48. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -1
  49. data/dist/playbook-rails.js +6 -6
  50. data/lib/playbook/bottom.rb +33 -0
  51. data/lib/playbook/classnames.rb +4 -0
  52. data/lib/playbook/kit_base.rb +8 -0
  53. data/lib/playbook/left.rb +33 -0
  54. data/lib/playbook/right.rb +33 -0
  55. data/lib/playbook/top.rb +33 -0
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +19 -8
  58. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +0 -13
  59. data/app/pb_kits/playbook/pb_table/_table_row.tsx +0 -47
  60. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_subcomponents.html.erb → _table_with_subcomponents_rails.html.erb} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e15b75aa8e734fcf7c1d4a4d6125f4bdb85d88513c1f0f8815c35220855b044e
4
- data.tar.gz: 9e7cee23ebd94a5a90bd9d35902b7bc671d9f284311048197e6e15c76ae65630
3
+ metadata.gz: bb6d3b38a06890fb4242896896403e642f363c6a220d7483b366c26289aab8cd
4
+ data.tar.gz: ce847f1594dc3eb1ba9e142bafc7cca62bb8ab750a80df5e07962eb7dd6f0c3a
5
5
  SHA512:
6
- metadata.gz: c16e3c834fd8dc73924855756f1b4baaa88c96904968fbe1233f673621018aa3bbb5812ec1b03c6e903c5f99d01e3e41442e07ecfda409a4f95724e37279b053
7
- data.tar.gz: 2bd9cfe1dc2a14974eb3f3c7cbffa5ff5493c26770ad8aaaa9fe5cb2bb5d0476b6e62abaa7e642967a45774b7af6fbd69fce21b3b32dfddafae68a1218beb8e9
6
+ metadata.gz: 00d36dc613747a14e0796cf9ea2d52ce59305ba50c509b28620766ba4b4e0060150bd45efa77a9ebe61cf220acb0d7501ce470a8ecbc42edf8a6cc47fab930f8
7
+ data.tar.gz: c1937c7a96b2f26b583798205223b98d1117236fa94ea764408e01896e5981700216e873fd466f76efc8cd842479d7afadc6c0a20deb10bae7235e74f3edc784
@@ -93,7 +93,7 @@ export { default as StarRating } from './pb_star_rating/_star_rating'
93
93
  export { default as StatChange } from './pb_stat_change/_stat_change'
94
94
  export { default as StatValue } from './pb_stat_value/_stat_value'
95
95
  export { default as Table } from './pb_table/_table'
96
- export { default as TableRow } from './pb_table/_table_row'
96
+ export { default as TableRow } from './pb_table/subcomponents/_table_row'
97
97
  export { default as TextInput } from './pb_text_input/_text_input'
98
98
  export { default as Textarea } from './pb_textarea/_textarea'
99
99
  export { default as Time } from './pb_time/_time'
@@ -11,7 +11,12 @@ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
11
11
  backgroundColor: "#E4E8F0",
12
12
  }
13
13
 
14
- return <div style={style} />
14
+ return (
15
+ <div
16
+ className="collapsible-trail"
17
+ style={style}
18
+ />
19
+ )
15
20
  }
16
21
 
17
22
  // Updated function to render multiple trails depending on depth
@@ -1,21 +1,19 @@
1
- import React, { useContext } from "react"
2
- import { Getter, Row } from "@tanstack/react-table"
1
+ import React, { useContext } from "react";
3
2
 
4
- import { GenericObject } from "../../types"
3
+ import Flex from "../../pb_flex/_flex";
4
+ import FlexItem from "../../pb_flex/_flex_item";
5
+ import Icon from "../../pb_icon/_icon";
6
+ import { GlobalProps } from "../../utilities/globalProps";
5
7
 
6
- import { GlobalProps } from "../../utilities/globalProps"
7
-
8
- import Flex from "../../pb_flex/_flex"
9
- import FlexItem from "../../pb_flex/_flex_item"
10
- import Icon from "../../pb_icon/_icon"
11
-
12
- import AdvancedTableContext from "../Context/AdvancedTableContext"
8
+ import { Getter, Row } from "@tanstack/react-table";
9
+ import { DataType } from "../Utilities/types";
10
+ import AdvancedTableContext from "../Context/AdvancedTableContext";
13
11
 
14
12
  interface CustomCellProps {
15
- getValue?: Getter<string>
16
- onRowToggleClick?: (arg: Row<GenericObject>) => void
17
- row: Row<GenericObject>
18
- value?: string
13
+ getValue?: Getter<string>;
14
+ onRowToggleClick?: (arg: Row<DataType>) => void;
15
+ row: Row<DataType>;
16
+ value?: string;
19
17
  }
20
18
 
21
19
  export const CustomCell = ({
@@ -24,12 +22,12 @@ export const CustomCell = ({
24
22
  row,
25
23
  value,
26
24
  }: CustomCellProps & GlobalProps) => {
27
- const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
25
+ const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
28
26
 
29
- const handleOnExpand = (row: Row<GenericObject>) => {
30
- onRowToggleClick && onRowToggleClick(row)
31
- setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
32
- }
27
+ const handleOnExpand = (row: Row<DataType>) => {
28
+ onRowToggleClick && onRowToggleClick(row);
29
+ setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
30
+ };
33
31
  const RowHasChildren = row.original.children ? true : false
34
32
  const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
35
33
 
@@ -61,5 +59,5 @@ export const CustomCell = ({
61
59
  </FlexItem>
62
60
  </Flex>
63
61
  </div>
64
- )
65
- }
62
+ );
63
+ };
@@ -1,14 +1,11 @@
1
1
  import React from "react"
2
- import { Header } from "@tanstack/react-table"
3
-
4
- import { GenericObject } from "../../types"
5
-
6
2
  import Icon from "../../pb_icon/_icon"
7
-
3
+ import { Header } from "@tanstack/react-table"
4
+ import { DataType } from "../Utilities/types"
8
5
  import { displayIcon } from "../Utilities/IconHelpers"
9
6
 
10
7
  type SortIconButtonProps = {
11
- header: Header<GenericObject, unknown>
8
+ header: Header<DataType, unknown>
12
9
  sortIcon?: string | string[]
13
10
  }
14
11
  export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
@@ -1,27 +1,23 @@
1
1
  import React, { useContext } from "react"
2
- import { Row, Table } from "@tanstack/react-table"
3
-
4
- import { GenericObject } from "../../types"
5
-
6
- import { GlobalProps } from "../../utilities/globalProps"
7
-
8
2
  import Flex from "../../pb_flex/_flex"
9
3
  import Caption from "../../pb_caption/_caption"
4
+ import { Row, Table } from "@tanstack/react-table"
10
5
 
6
+ import AdvancedTableContext from "../Context/AdvancedTableContext";
11
7
  import { ToggleIconButton } from "./ToggleIconButton"
12
8
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
13
9
 
14
10
  import { isChrome } from "../Utilities/BrowserCheck"
15
-
16
- import AdvancedTableContext from "../Context/AdvancedTableContext"
11
+ import { DataType } from "../Utilities/types"
12
+ import { GlobalProps } from "../../utilities/globalProps"
17
13
 
18
14
  interface SubRowHeaderRowProps {
19
15
  collapsibleTrail?: boolean
20
16
  enableToggleExpansion?: "all" | "header" | "none"
21
- onClick: (row: Row<GenericObject>) => void
22
- row: Row<GenericObject>
17
+ onClick: (row: Row<DataType>) => void
18
+ row: Row<DataType>
23
19
  subRowHeaders?: string[]
24
- table: Table<GenericObject>
20
+ table: Table<DataType>
25
21
  }
26
22
 
27
23
  export const SubRowHeaderRow = ({
@@ -32,7 +28,7 @@ export const SubRowHeaderRow = ({
32
28
  subRowHeaders,
33
29
  table,
34
30
  }: SubRowHeaderRowProps & GlobalProps) => {
35
- const { inlineRowLoading } = useContext(AdvancedTableContext)
31
+ const { inlineRowLoading } = useContext(AdvancedTableContext);
36
32
 
37
33
  const numberOfColumns = table.getAllFlatColumns().length
38
34
  const rowHasChildren = row.original.children ? true : false
@@ -1,25 +1,20 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames"
3
- import { flexRender, Header } from "@tanstack/react-table"
4
-
5
- import { GenericObject } from "../../types"
6
-
7
- import { GlobalProps } from "../../utilities/globalProps"
8
-
2
+ import classnames from "classnames";
9
3
  import Flex from "../../pb_flex/_flex"
4
+ import { flexRender, Header } from "@tanstack/react-table"
10
5
 
11
6
  import { SortIconButton } from "./SortIconButton"
12
7
  import { ToggleIconButton } from "./ToggleIconButton"
13
-
14
8
  import { isChrome } from "../Utilities/BrowserCheck"
15
-
9
+ import { DataType } from "../Utilities/types"
16
10
  import AdvancedTableContext from "../Context/AdvancedTableContext"
11
+ import { GlobalProps } from "../../utilities/globalProps"
17
12
 
18
13
  type TableHeaderCellProps = {
19
14
  enableSorting?: boolean
20
15
  enableToggleExpansion?: "all" | "header" | "none"
21
16
  handleExpandOrCollapse?: () => void
22
- header?: Header<GenericObject, unknown>
17
+ header?: Header<DataType, unknown>
23
18
  headerChildren?: React.ReactNode | React.ReactNode[]
24
19
  loading?: boolean
25
20
  sortIcon?: string | string[]
@@ -50,24 +45,24 @@ export const TableHeaderCell = ({
50
45
  const cellClassName = classnames("table-header-cells",
51
46
  `${isChrome() ? "chrome-styles" : ""}`,
52
47
  `${enableSorting ? "table-header-cells-active" : ""}`
53
- )
48
+ );
54
49
 
55
50
  const cellId = `${loading ?
56
51
  `loading-${header.id}`
57
52
  : `${header.id}`
58
- }`
53
+ }`;
59
54
 
60
55
  const isToggleExpansionEnabledLoading =
61
56
  header.index === 0 &&
62
57
  loading &&
63
58
  (enableToggleExpansion === "all" || "header") &&
64
- enableToggleExpansion !== "none"
59
+ enableToggleExpansion !== "none";
65
60
 
66
61
  const isToggleExpansionEnabled =
67
62
  header.index === 0 &&
68
63
  !loading &&
69
64
  (enableToggleExpansion === "all" || "header") &&
70
- enableToggleExpansion !== "none"
65
+ enableToggleExpansion !== "none";
71
66
 
72
67
  return (
73
68
  <th
@@ -1,17 +1,13 @@
1
1
  import React, { useContext } from "react"
2
- import { Row } from "@tanstack/react-table"
3
-
4
- import { GenericObject } from "../../types"
5
-
6
2
  import Icon from "../../pb_icon/_icon"
7
-
8
- import { displayIcon } from "../Utilities/IconHelpers"
9
-
3
+ import { Row } from "@tanstack/react-table"
10
4
  import AdvancedTableContext from "../Context/AdvancedTableContext"
5
+ import { DataType } from "../Utilities/types"
6
+ import { displayIcon } from "../Utilities/IconHelpers"
11
7
 
12
8
  interface ToggleIconButtonProps {
13
- onClick: (row: Row<GenericObject>) => void
14
- row?: Row<GenericObject>
9
+ onClick: (row: Row<DataType>) => void
10
+ row?: Row<DataType>
15
11
  }
16
12
 
17
13
  export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
@@ -1,31 +1,29 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames"
3
- import { flexRender, Row } from "@tanstack/react-table"
4
-
5
- import { GenericObject } from "../../types"
6
-
7
- import { buildCss } from "../../utilities/props"
8
- import { globalProps } from "../../utilities/globalProps"
9
- import { isChrome } from "../Utilities/BrowserCheck"
10
-
2
+ import classnames from "classnames";
3
+ import { buildCss } from "../../utilities/props";
4
+ import { globalProps } from "../../utilities/globalProps";
11
5
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
6
+ import { flexRender, Row } from "@tanstack/react-table"
12
7
 
13
8
  import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
14
9
  import { LoadingCell } from "../Components/LoadingCell"
15
10
  import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
16
-
17
11
  import AdvancedTableContext from "../Context/AdvancedTableContext"
12
+ import { isChrome } from "../Utilities/BrowserCheck"
13
+ import { DataType } from "../Utilities/types"
18
14
 
19
15
  type TableBodyProps = {
20
- className?: string
16
+ className?: string;
21
17
  collapsibleTrail?: boolean
22
- id?: string
18
+ dark?: boolean,
19
+ id?: string;
23
20
  subRowHeaders?: string[]
24
21
  }
25
22
 
26
23
  export const TableBody = ({
27
24
  className,
28
25
  collapsibleTrail = true,
26
+ dark = false,
29
27
  id,
30
28
  subRowHeaders,
31
29
  ...props
@@ -44,14 +42,14 @@ export const TableBody = ({
44
42
  buildCss("pb_advanced_table_body"),
45
43
  globalProps(props),
46
44
  className
47
- )
45
+ );
48
46
 
49
47
  return (
50
48
  <>
51
49
  <tbody className={classes}
52
50
  id={id}
53
51
  >
54
- {table.getRowModel().rows.map((row: Row<GenericObject>) => {
52
+ {table.getRowModel().rows.map((row: Row<DataType>) => {
55
53
  const isExpandable = row.getIsExpanded()
56
54
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
57
55
  const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
@@ -1,27 +1,25 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames"
2
+ import classnames from "classnames";
3
+ import { buildCss } from "../../utilities/props";
4
+ import { globalProps } from "../../utilities/globalProps";
3
5
  import { HeaderGroup } from "@tanstack/react-table"
4
-
5
- import { GenericObject } from "../../types"
6
-
7
- import { buildCss } from "../../utilities/props"
8
- import { globalProps } from "../../utilities/globalProps"
9
-
10
- import { TableHeaderCell } from "../Components/TableHeaderCell"
11
-
12
6
  import AdvancedTableContext from "../Context/AdvancedTableContext"
7
+ import { TableHeaderCell } from "../Components/TableHeaderCell"
8
+ import { DataType } from "../Utilities/types"
13
9
 
14
10
  type TableHeaderProps = {
15
11
  children?: React.ReactNode | React.ReactNode[]
16
12
  className?: string
13
+ dark?: boolean,
17
14
  enableSorting?: boolean
18
- id?: string
15
+ id?: string;
19
16
  sortIcon?: string | string[]
20
17
  }
21
18
 
22
19
  export const TableHeader = ({
23
20
  children,
24
21
  className,
22
+ dark = false,
25
23
  enableSorting = false,
26
24
  id,
27
25
  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
@@ -38,7 +36,7 @@ export const TableHeader = ({
38
36
  buildCss("pb_advanced_table_header"),
39
37
  globalProps(props),
40
38
  className
41
- )
39
+ );
42
40
 
43
41
 
44
42
  return (
@@ -47,7 +45,7 @@ export const TableHeader = ({
47
45
  id={id}
48
46
  >
49
47
  {/* Get the header groups (only one in this example) */}
50
- {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
48
+ {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
51
49
  <tr key={`${headerGroup.id}-headerGroup`}>
52
50
  {headerGroup.headers.map(header => (
53
51
  <TableHeaderCell
@@ -1,6 +1,5 @@
1
1
  import { RowModel } from "@tanstack/react-table"
2
- import { ExpandedStateObject } from "./types"
3
- import { GenericObject } from "../../types"
2
+ import { DataType, ExpandedStateObject } from "./types"
4
3
 
5
4
  const filterExpandableRows = (expandedState: Record<string, boolean>) => {
6
5
  for (const expandedRow in expandedState) {
@@ -12,7 +11,7 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
12
11
  }
13
12
 
14
13
  export const updateExpandAndCollapseState = (
15
- tableRows: RowModel<GenericObject>,
14
+ tableRows: RowModel<DataType>,
16
15
  expanded: Record<string, boolean>,
17
16
  targetParent: string
18
17
  ) => {
@@ -4,3 +4,5 @@ export type ExpandedStateObject = Extract<
4
4
  ExpandedState,
5
5
  Record<string, boolean>
6
6
  >
7
+
8
+ export type DataType = { [key: string]: any }
@@ -4,7 +4,6 @@
4
4
  @import "../tokens/spacing";
5
5
  @import "./scss_partials/loading";
6
6
  @import "./scss_partials/pseudo_states";
7
- @import "./scss_partials/chrome_styles";
8
7
 
9
8
  .pb_advanced_table {
10
9
  $border-color: 1px solid $border_light !important;
@@ -87,5 +86,58 @@
87
86
  box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
88
87
  }
89
88
 
90
- @include chrome_styles($border-color);
89
+ .chrome-styles:first-child {
90
+ border-right: $border-color;
91
+ }
92
+
93
+ .table-card {
94
+ .chrome-styles:first-child {
95
+ border-right: $transparent !important;
96
+ }
97
+ }
98
+
99
+ &.dark {
100
+ .bg-white {
101
+ background: $bg_dark_card;
102
+ }
103
+
104
+ .bg-silver {
105
+ background: $bg_dark;
106
+ }
107
+
108
+ .table-header-cells:first-child, td:first-child {
109
+ box-shadow: 1px 0px 0px 0px $border_dark !important;
110
+ }
111
+
112
+ .collapsible-trail {
113
+ background-color: $border_dark !important;
114
+ }
115
+
116
+ .sort-button-icon, .header-sort-button > div {
117
+ color: $white !important;
118
+ }
119
+
120
+ .gray-icon {
121
+ color: $text_dk_light !important;
122
+ }
123
+
124
+ .sticky-header {
125
+ background-color: $bg_dark_card;
126
+ }
127
+
128
+ .loading-toggle-icon,
129
+ .loading-cell {
130
+ &::after {
131
+ background-color: $bg_dark !important;
132
+ background-image: linear-gradient(
133
+ to left,
134
+ $bg_dark 0%,
135
+ lighten($bg_dark, 1%) 50%,
136
+ lighten($bg_dark, 2%) 60%,
137
+ $bg_dark 80%,
138
+ $bg_dark 100%
139
+ ) !important;
140
+ }
141
+ }
142
+ }
91
143
  }