playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551

data/app/pb_kits/playbook/pb_icon/docs/example.yml

@@ -20,3 +20,11 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+
+  swift:
+  - icon_default_swift: Icon Default
+  - icon_rotate_swift: Icon Rotate
+  - icon_flip_swift: Icon Flip
+  - icon_border_swift: Icon Border
+  - icon_sizes_swift: Icon Sizes
+  - icon_props_swift: Props

data/app/pb_kits/playbook/pb_image/docs/_image_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Image** | `Image` | Sets the Image |  |  |
+| **Place Holder** | `Image` | sets the placeholder Image | `nil` |  |
+| **Size** | `Size` | Changes the size of the Image | `nil` | `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **Rounded** | `ImageCornerRadius` | Adds rounded corners to the Image | `.sharp` | `.rounded` `.sharp` |

data/app/pb_kits/playbook/pb_image/docs/_rounded_image_swift.md

@@ -0,0 +1,47 @@
+![image-rounded](https://github.com/powerhome/playbook/assets/92755007/ee2cff73-2702-4a09-b654-f151bbdf90f2)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("xSmall").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xSmall,
+    rounded: .rounded
+  )
+
+  Text("small").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .small,
+    rounded: .rounded
+  )
+
+  Text("medium").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .medium,
+    rounded: .rounded
+  )
+
+  Text("large").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .large,
+    rounded: .rounded
+  )
+
+  Text("xLarge").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xLarge,
+    rounded: .rounded
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_image/docs/_size_image_swift.md

@@ -0,0 +1,47 @@
+![image-size](https://github.com/powerhome/playbook/assets/92755007/261600b9-b49c-4f5b-8c80-9ecc65dc424a)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("xSmall").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xSmall,
+    rounded: .sharp
+  )
+
+  Text("small").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .small,
+    rounded: .sharp
+  )
+
+  Text("medium").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .medium,
+    rounded: .sharp
+  )
+
+  Text("large").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .large,
+    rounded: .sharp
+  )
+
+  Text("xLarge").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .xLarge,
+    rounded: .sharp
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_image/docs/_size_none_image_swift.md

@@ -0,0 +1,15 @@
+![image-size-none](https://github.com/powerhome/playbook/assets/92755007/442ff028-028a-4ccb-9733-d408d32966d6)
+
+```swift
+
+VStack(alignment: .leading) {
+  Text("None").pbFont(.detail(true), color: .text(.default))
+  PBImage(
+    image: nil,
+    placeholder: Image("Forest", bundle: .module),
+    size: .none,
+    rounded: .sharp
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_image/docs/example.yml

@@ -9,3 +9,8 @@ examples:
   - rounded_image: Rounded
   - custom_error_image: Error Handling
   - transition_image: Transition
+  swift:
+  - size_image_swift: Size
+  - size_none_image_swift: Size None
+  - rounded_image_swift: Rounded
+  - image_props_swift: ""

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default_swift.md

@@ -0,0 +1,11 @@
+![label-value-default](https://github.com/powerhome/playbook/assets/92755007/7a515a30-f1a1-4b08-a73a-6b13e6cff125)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBLabelValue("Role", "Administrator, Moderator")
+  PBLabelValue("Email", "anna.black@powerhrg.com")
+  PBLabelValue("Bio", longText)
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_swift.md

@@ -0,0 +1,72 @@
+![label-value-examples](https://github.com/powerhome/playbook/assets/92755007/1810abee-c45a-45ac-bb12-eef88d6a254e)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Text("Patient Profile")
+  .pbFont(.title4)
+  .padding(.bottom, Spacing.xSmall)
+
+  PBLabelValue(
+    "Age",
+    variant: .details,
+    icon: FontAwesome.user,
+    title: "24 yrs old"
+  )
+
+  PBLabelValue(
+    "Blood",
+    variant: .details,
+    icon: FontAwesome.tint,
+    title: "A +"
+  )
+
+  PBLabelValue(
+    "Weight",
+    variant: .details,
+    icon: FontAwesome.weight,
+    title: "91 kg"
+  )
+
+  PBLabelValue(
+    "Height",
+    variant: .details,
+    icon: FontAwesome.arrowsAltV,
+    title: "187 cm"
+  )
+
+  Text("Workout Schedule")
+  .pbFont(.title4)
+  .padding(.top, Spacing.large)
+  .padding(.bottom, Spacing.xSmall)
+
+  PBLabelValue(
+    "Chest",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "6 sets • 8 reps • 40-100 kg",
+    title: "Bench Press",
+    active: true
+  )
+
+  PBLabelValue(
+    "Biceps",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "5 sets • 12 reps • 20-40 kg",
+    title: "Barbell Curl",
+    active: true
+  )
+
+  PBLabelValue(
+    "Back",
+    variant: .details,
+    icon: FontAwesome.dumbbell,
+    description: "8 sets • 8 reps • 40-120 kg",
+    title: "Back Squat",
+    active: true
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_swift.md

@@ -0,0 +1,41 @@
+![label-value-details](https://github.com/powerhome/playbook/assets/92755007/bc1628f8-8698-4ac2-a236-d93687e6f165)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBLabelValue(
+    "Installer",
+    variant: .details,
+    icon: FontAwesome.truck,
+    title: "JD Installations LLC"
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith"
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith",
+    date: Date()
+  )
+
+  PBLabelValue(
+    "Project",
+    variant: .details,
+    icon: FontAwesome.home,
+    description: "33-12345",
+    title: "Jefferson-Smith",
+    date: Date(),
+    active: true
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Label** | `String` | Sets the label text |  |  |
+| **Value** | `String` | Sets the value | `nil` |  |
+| **Variant** | `Variant` | Changes the style of the Label Value  | `.default` | `.default` `.details` |
+| **Icon** | `PlaybookGenericIcon` | Adds an icon next to the title | `nil` |  |
+| **Description** | `String` | Sets the description | `nil` |  |
+| **Title** | `String` | Sets the title | `nil` |  |
+| **Date** | `Date` | Adds a date | `nil` |  |
+| **Active** | `Bool` | Changes the style of the Label Value | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_label_value/docs/example.yml

@@ -11,3 +11,9 @@ examples:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
+
+  swift:
+  - label_value_default_swift: Default
+  - label_value_details_swift: Details
+  - label_value_details_examples_swift: Other Examples
+  - label_value_props_swift: ""

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -4,39 +4,38 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 
 type LineGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle?: string;
-  dark?: Boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  className?: string;
+  align?: "left" | "right" | "center",
+  axisTitle?: string,
+  dark?: Boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
   chartData: {
-    name: string;
-    data: number[];
-  }[];
-  gradient?: boolean;
-  id: string;
-  pointStart: number;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+    name: string,
+    data: number[],
+  }[],
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: string[],
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
 const LineGraph = ({
@@ -68,12 +67,6 @@ const LineGraph = ({
 }: LineGraphProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -126,12 +119,24 @@ const LineGraph = ({
   }
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
@@ -139,7 +144,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_message/docs/_message_default_swift.md

@@ -0,0 +1,57 @@
+![message-default](https://github.com/powerhome/playbook/assets/92755007/a50c7439-a429-4e8a-b8d4-ef8323199745)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBMessage(
+    avatar: AnyView(picAnna),
+    label: "Anna Black",
+    message: "How can we assist you today?",
+    timestamp: Date().addingTimeInterval(-20)
+  )
+
+  PBMessage(
+    avatar: AnyView(picPatric),
+    label: "Patrick Welch",
+    message: "We will escalate this issue to a Senior Support agent.",
+    timestamp: Date().addingTimeInterval(-540),
+    timestampAlignment: .leading
+  )
+
+  PBMessage(
+    avatar: AnyView(picLuccile),
+    label: "Lucille Sanchez",
+    message: "Application for Kate Smith is waiting for your approval",
+    timestamp: Date().addingTimeInterval(-200000)
+  )
+
+  PBMessage(
+    avatar: AnyView(PBAvatar(name: "Beverly Reyes", size: .xSmall)),
+    label: "Beverly Reyes",
+    message: "We are so sorry you had a bad experience!",
+    timestamp: Date().addingTimeInterval(-200000)
+  )
+
+  PBMessage(
+    label: "Keith Craig",
+    message: "Please hold for one moment, I will check with my manager.",
+    timestamp: Date().addingTimeInterval(-200000)
+  ) {}
+
+  PBMessage(
+    label: "Keith Craig",
+    timestamp: Date().addingTimeInterval(-200000)
+  ) {
+    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
+  }
+
+  PBMessage(
+    label: "Keith Craig",
+    message: "Please hold for one moment, I will check with my manager.",
+    timestamp: Date().addingTimeInterval(-200000)
+  ) {
+    Image("Forest", bundle: .module).resizable().frame(width: 240, height: 240)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_message/docs/_message_props_swift.md

@@ -0,0 +1,12 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Avatar** | `AnyView` | Sets avatar image | `nil` |  |
+| **Label** | `String` | Sets the name of the sender | `""` |  |
+| **Message** | `String` | Sets the message text | `nil` |  |
+| **Timestamp** | `Date` | Adds a date |  | `nil` |
+| **Timestamp Alignment** | `TimestampAlignment` | Changes the style of the timestamp | `.trailing` | `.leading` `.trailing` |
+| **Change TimeStamp On Hover** | `Bool` | Changes the timestamp hover functionality | `false` | `true` `false` |
+| **Vertical Padding** | `CGFloat` | Changes vertical padding | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Horizontal Padding** | `CGFloat` | Changes horizontal padding | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Timestamp Variant** | `PBTimestamp.Variant` | Changes the style of the Message | `.standard` | `.standard` `.hideUserElapsed` |

data/app/pb_kits/playbook/pb_message/docs/example.yml

@@ -11,3 +11,7 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+
+  swift:
+   - message_default_swift: Default
+   - message_props_swift: ""

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md

@@ -0,0 +1,14 @@
+
+![section-separator-children](https://github.com/powerhome/playbook/assets/92755007/acd6a8eb-d034-4efd-b2e6-afabe739e678)
+
+```swift
+
+PBSectionSeparator(variant: .dashed) {
+  PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
+    Text("Today")
+      .pbFont(.caption)
+      .frame(maxWidth: .infinity, alignment: .center)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md

@@ -0,0 +1,7 @@
+![section-separator-dashed](https://github.com/powerhome/playbook/assets/92755007/e4f01870-3d90-4655-9136-5c7565711e1f)
+
+```swift
+
+PBSectionSeparator(variant: .dashed)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md

@@ -0,0 +1,8 @@
+
+![section-separator-default](https://github.com/powerhome/playbook/assets/92755007/2560d5e2-f345-42d2-bad9-2a2e031b3e08)
+
+```swift
+
+PBSectionSeparator()
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Adds text to the Section Separator | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation | `.horizontal` | `.horizontal` `.vertical` |
+| **variant** | `Variant` | Changes the style of the Section Separator | `.card` | `.dashed` `.card` |
+| **dividerOpacity** | `CGFloat` | Adjusts the opacity of the divider | `1` |  |
+| **margin** | `CGFloat` | Adds margin between text and the divider | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md

@@ -0,0 +1,7 @@
+![section-separator-text](https://github.com/powerhome/playbook/assets/92755007/4b481a7d-d001-43b6-b779-cfdc6fffc15f)
+
+```swift
+
+PBSectionSeparator("Text separator")
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md

@@ -0,0 +1,18 @@
+![section-separator-verticle](https://github.com/powerhome/playbook/assets/92755007/21ca54a5-6b8a-459f-91ad-4e9b68258f68)
+
+```swift
+
+let loremIpsum: some View = Text(
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+)
+
+HStack(spacing: Spacing.none) {
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+  PBSectionSeparator(orientation: .vertical)
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+}
+.frame(maxWidth: .infinity)
+.frame(height: 120, alignment: .center)
+.listRowSeparator(.hidden)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -13,3 +13,11 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+
+  swift:
+  - section_separator_line_swift: Line Separator
+  - section_separator_dashed_swift: Dashed Separator
+  - section_separator_text_swift: Text Separator
+  - section_separator_vertical_swift: Vertical
+  - section_separator_children_swift: Children
+  - section_separator_props_swift: ""

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -39,10 +39,10 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -1,6 +1,7 @@
 @import "../../tokens/opacity";
 
 $transition-speed: 0.2s;
+$border_hover_color_dark: lighten($border_dark, 5%);
 
 [class^=pb_table] {
   &.table-sm,
@@ -15,9 +16,9 @@ $transition-speed: 0.2s;
           td {
             border-top-color: transparent;
             border-top-width: 0;
-            transition: all $transition-speed ease; 
+            transition: all $transition-speed ease;
           }
-          @media (hover:hover) { 
+          @media (hover:hover) {
             td {
               position: relative;
               &:after {
@@ -69,6 +70,29 @@ $transition-speed: 0.2s;
           }
         }
       }
+
+      &.dark  {
+        tbody {
+          tr {
+            @media (hover:hover) {
+              &:hover {
+                box-shadow: 0 2px 10px 0 $shadow_dark;
+                td {
+                  border-top-width: 0;
+                  border-top-color: transparent;
+                  border-color: $border_hover_color_dark !important;
+                  &:after {
+                    transition: background-color $transition-speed ease, height $transition-speed ease;
+                    background-color: $border_hover_color_dark !important;
+                    height: 1px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
     }
   }
 }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -1,6 +1,6 @@
 @import "../../tokens/screen_sizes";
 
-$table-dark-card-bg: $bg_dark;
+$table-dark-card-bg: $card_dark;
 
 [class^=pb_table] {
   &.table-sm,
@@ -24,7 +24,6 @@ $table-dark-card-bg: $bg_dark;
 
           td {
             border-color: $border_dark !important;
-            border-bottom-width: 0 !important;
             color: $white;
 
             &:before {
@@ -39,21 +38,6 @@ $table-dark-card-bg: $bg_dark;
         }
       }
 
-      &:not(.no-hover) {
-        tbody {
-          tr {
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-color: $border_dark !important;
-                  background: $bg_dark;
-                }
-              }
-            }
-          }
-        }
-      }
-
       &.table-card {
         background: $table-dark-card-bg !important;
       }