Added ToggleGlyphButton

src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj

@@ -15,4 +15,11 @@
     <ProjectReference Include="..\Connected.Components.Showcase\Connected.Components.Showcase.csproj" />
   </ItemGroup>
 
+
+	<ItemGroup>
+		<Watch Include="..\..\src\**" />
+		<Watch Remove="..\..\src\**\obj\**" />
+		<Watch Remove="..\..\src\**\bin\**" />
+	</ItemGroup>
+
 </Project>

src/Connected.Components/Components/ToggleGlyphButton.razor

@@ -0,0 +1,21 @@
+@inherits Button
+
+<button type="button"
+        @onclick="@Clicked"
+        disabled=@Disabled
+        style="@StyleList"
+        class="@ClassList">
+    <div class="@ContentClassList">
+        <div style="align-items:center">
+            @if (GlyphPosition == Position.Top)
+            {
+                <Glyph SVG="@Glyph" Color="@GlyphColor" />
+            }
+            @ChildContent
+            @if (GlyphPosition == Position.Bottom)
+            {
+                <Glyph SVG="@Glyph" Color="@GlyphColor" />
+            }
+        </div>
+    </div>
+</button>

src/Connected.Components/Components/ToggleGlyphButton.razor.cs

@@ -0,0 +1,120 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.Components;
+public partial class ToggleGlyphButton: Button
+{
+	#region Parameters
+
+	/// <summary>
+	/// Outline type of the button.
+	/// Options: true, false
+	/// Default: false
+	/// </summary>
+	[Parameter]
+	public bool Toggled { get; set; } = false;
+
+	/// <summary>
+	/// Glyph (Icon) inside the button.
+	/// Options: SVG string --> Icons
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter, EditorRequired]
+	public string Glyph { get; set; } = string.Empty;
+
+	/// <summary>
+	/// Glyph (Icon) inside the button when tge .
+	/// Options: SVG string --> Icons
+	/// Default: string.Empty
+	/// </summary>
+	[Parameter, EditorRequired]
+	public string ToggledGlyph { get; set; } = string.Empty;
+
+	/// <summary>
+	/// Position of the glyph relative to button Text parameter. If Glyph parameter == string.Empty this parameter is ignored
+	/// Options: Position.[left,top,right,bottom]
+	/// Default: Position.left 
+	/// </summary>
+	[Parameter]
+	public Position GlyphPosition { get; set; } = Position.Left;
+
+	/// <summary>
+	/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
+	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
+	/// Default: Color.Dark
+	/// </summary>
+	[Parameter]
+	public Color GlyphColor { get; set; } = Color.Dark;
+
+	/// <summary>
+	/// Color for the glyph. If Glyph parameter is empty this parameter is ignored
+	/// Options: Color.[Core,Primary,Secondary,Success,Info,Warning,Danger,White,Light,Dark]
+	/// Default: Color.Dark
+	/// </summary>
+	[Parameter]
+	public Color ToggledGlyphColor { get; set; } = Color.Dark;
+
+	#endregion
+
+	#region Events
+
+	/// <summary>
+	/// Button click event.
+	/// Options: any MouseEventCallback event
+	/// Default: empty
+	[Parameter]
+	public EventCallback<bool> ToggledChanged { get; set; }
+
+	protected async Task Clicked(MouseEventArgs e)
+	{
+		Toggled = !Toggled;
+		await ToggledChanged.InvokeAsync(Toggled);
+	}
+	#endregion
+
+	#region Styling
+
+	public string StyleList
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle(base.Style)
+				.Build();
+		}
+	}
+
+
+	/// <summary>
+	/// Generated class list for button based on user parameters
+	/// </summary>
+	public string ClassList
+	{
+		get
+		{
+			return new CssBuilder("btn")
+				.AddClass("btn-" + Helper.GetEnumDescription<Size>(base.Size))
+				.AddClass("btn-" + Helper.GetEnumDescription<Color>(base.Color),!base.Outlined)
+				.AddClass("btn-outline-" + Helper.GetEnumDescription<Color>(base.Color), base.Outlined)
+				.AddClass(base.Class)
+				.Build();
+		}
+	}
+
+	/// <summary>
+	/// Generated class list for button based on user parameters
+	/// </summary>
+	public string ContentClassList
+	{
+		get
+		{
+			return new CssBuilder("")
+				.AddClass(base.ContentClass)
+				.Build();
+		}
+	}
+
+	#endregion
+
+}

src/Connected.Components/Styles/components/_chip.scss

@@ -0,0 +1,218 @@
+@use "../util" as *;
+@use "../globals" as *;
+
+/*CHIP*/
+/* scroll container */
+.horizontal-scroll-container {
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+    gap: .5rem;
+    overflow: auto;
+    scroll-snap-type: both mandatory;
+  }
+  
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .horizontal-scroll-container::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .horizontal-scroll-container {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  
+  
+
+  .chip-icon {
+    --height: 2.5rem;
+    height: var(--height);
+    aspect-ratio: 1 / 1;
+    display: flex;
+    flex: 1 0 auto;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--bg-core-primary-darken);
+    overflow: hidden;  
+    cursor: pointer;
+    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
+  }
+
+  .chip-icon:hover,
+  .chip-icon:active,
+  .chip-icon:active {
+    background-color: var(--bg-core-primary-dark);
+
+  }
+
+.chip-icon.float-left {
+   float: left; 
+   margin: .05rem .5rem .15rem 0;
+   margin-top: -.25rem;
+   clear: both;
+  }
+
+  .chip-group {
+    --height: 1.5rem;
+  
+    border: 1px solid var(--bg-core-primary);
+    padding: .15rem;
+    min-width: max-content;
+    color: var(--text-core); 
+    border-radius: $border-radius-pill;
+    background-color: var(--bg-core-primary-light);
+    display: inline-block;
+    position:relative;
+    scroll-snap-align: start;  
+  }
+  
+  .chip-group-content{
+    height: var(--height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .chip-leading-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    background-color: var(--bg-core-primary-light);
+    height: var(--height);
+    aspect-ratio: 1 / 1;
+    overflow: hidden;  
+  }
+  
+  .chip-leading-icon img{
+    object-fit: cover;
+    height: var(--height);
+    aspect-ratio: 1 / 1;  
+  }
+  
+  .chip-cta-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    background-color: transparent;
+    cursor: pointer;
+    height: var(--height);
+    aspect-ratio: 1 / 1; 
+    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
+  }
+  
+  .chip-label{
+    font-size: $font-size-sm;
+    margin:0 .85rem;
+  }
+  
+  .chip-cta-icon:hover{
+    background-color: var(--bg-core-primary-lighten);
+  }
+  
+  
+  /*filter*/
+  .chip-group.filter {
+    border: 1px solid var(--bg-core-primary);
+    background-color: var(--bg-core-primary-light);
+    cursor: pointer;
+    overflow: hidden;
+      &:hover{
+        background-color: var(--bg-core-primary-lighten);
+      }  
+      &:active,
+      &.active{
+        border: 1px solid var(--bg-core-primary);
+        background-color: var(--bg-core-primary);
+      }  
+  }
+  
+  .chip-group.filter .chip-leading-icon{
+    //display: none;
+    max-width: 0;
+    transform: translateX(calc(var(--height) * -1.25));
+    transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
+  }
+  
+  .chip-group.filter.active .chip-leading-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    background-color: var(--bg-core-primary-light);
+    height: var(--height);
+    aspect-ratio: 1 / 1; 
+    transform: translateX(0);
+    max-width: var(--height);
+  }
+  
+  .chip-group.select .chip-cta-icon{
+    display: none;
+  }
+  /*end select*/
+  
+  /*drop-down*/
+  /* The container must be positioned relative: */
+  .custom-select {
+    position: relative;
+    font-family: Arial;
+  }
+  
+  .custom-select select {
+    display: none; /*hide original SELECT element: */
+  }
+  
+  .select-selected {
+    background-color: DodgerBlue;
+  }
+  
+  /* Style the arrow inside the select element: */
+  .select-selected:after {
+    position: absolute;
+    content: "";
+    top: 14px;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-color: #fff transparent transparent transparent;
+  }
+  
+  /* Point the arrow upwards when the select box is open (active): */
+  .select-selected.select-arrow-active:after {
+    border-color: transparent transparent #fff transparent;
+    top: 7px;
+  }
+  
+  /* style the items (options), including the selected item: */
+  .select-items div,.select-selected {
+    color: #ffffff;
+    padding: 8px 16px;
+    border: 1px solid transparent;
+    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
+    cursor: pointer;
+  }
+  
+  /* Style items (options): */
+  .select-items {
+    position: absolute;
+    background-color: DodgerBlue;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 99;
+  }
+  
+  /* Hide the items when the select box is closed: */
+  .select-hide {
+    display: none;
+  }
+  
+  .select-items div:hover, .same-as-selected {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  /*end-down*/
+  
+  /*END CHIP*/

src/Connected.Components/Styles/components/_grid.scss

@@ -105,7 +105,7 @@ $colspan: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
   }
 }
 
-/*grid-css*/
+/*DATA GRID*/
 $columns: 12;
 
 @mixin create-selectors($breakpoint: null) {
@@ -128,11 +128,10 @@ $columns: 12;
     }
 }
 
-
-
-.row {
+.row{
     display: grid;
     grid-template-columns: repeat($columns, 1fr);
+    position: relative;
 }
 
 @include create-selectors;
@@ -143,20 +142,212 @@ $columns: 12;
     }
 }
 
-.collapse{
+
+
+.data-grid-row-content{
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+}
+
+.data-grid:not(.data-grid.dense) .data-grid-row-content {
+  background-color: var(--element-bg-core);
+  border: 1px solid var(--border-core);
+  border-radius: $border-radius-lg;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  position: relative;
+  overflow: hidden;
+    &:last-child{
+      margin-bottom: 0;
+    }
+}
+
+/*ACTIVE*/
+.data-grid:not(.data-grid.dense) .data-grid-row-content:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  inset:0;
+  background: var(--bg-core-primary-lighten);
+  transition: width 300ms ease-in-out;
+}
+
+.data-grid:not(.data-grid.dense) .data-grid-row-content.active:before {
+  width: calc(100% + 1.25rem * 2);
+}
+/*END ACTIVE*/
+
+.data-grid.dense  {
+  background-color: var(--element-bg-core);
+  border: 1px solid var(--border-core);
+  border-radius: $border-radius-lg;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  overflow: hidden;
+    &:last-child{
+      margin-bottom: 0;
+    }
+}
+
+/*DENSE*/
+.data-grid.dense .data-grid-row-content  {  
+  border-bottom: 1px solid var(--border-core);
+  padding-bottom: .5rem;
+  margin-bottom: .5rem;
+  position: relative;
+    &:last-child{
+      border-bottom: 0;
+      padding-bottom: 0;
+      margin-bottom: 0
+    }
+}
+/*END DENSE*/
+
+/*DENSE ACTIVE*/
+.data-grid.dense .data-grid-row-content:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  inset: -.55rem -1.25rem -1px;
+  background: var(--bg-core-primary-lighten);
+  transition: width 300ms ease-in-out;
+}
+
+.data-grid.dense .data-grid-row-content.active:before {
+  width: calc(100% + 1.25rem * 2);
+}
+
+.data-grid.dense .data-grid-row-content:first-child:before {
+  top: -1rem;
+  bottom: -1px;
+}
+
+.data-grid.dense .data-grid-row-content:last-child:before {
+  top: -10px;
+  bottom: -1rem;
+}
+
+.data-grid.dense .data-grid-row-content:only-child:before {
+  inset: -1rem -1.25rem ;
+}
+/*END DENSE ACTIVE*/
+
+.data-grid.select .data-grid-select {
+  display: block; 
+  margin-top: .5rem;
+  margin-right: .5rem;
+}
+
+.data-grid .data-grid-select,
+.data-grid .data-grid-collapse-cta{
+  display: none;
+}
+
+.data-grid label {
+  font-size: $font-size-sm;
+  color: $text-core-lc;
+}
+
+/*COLLAPSE*/
+.data-grid.collapse .data-grid-collapse-cta {
+  display: block; 
+  margin-top: .5rem;
+  margin-left: .5rem;
+  cursor: pointer;
+}
+
+.collapsed{
   max-height: 0;
   overflow: hidden;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0!important;
+  padding-bottom: 0!important;
+  border-top: 0px solid transparent;
   //opacity: 0;
   transition: all 0.5s ease-out;
 }
 
-.collapse.show{
+.collapsed.show {
   max-height: 25vh;
   overflow: auto;
   padding-top: initial;
   padding-bottom: initial;
+  border-top: 1px solid var(--bg-core-primary-light);
   //opacity: 1;
   transition: all 0.5s ease-in;
 } 
+
+.data-grid .data-grid-collapse-cta i  {
+  transform: rotate(0);
+  transition: all 0.5s ease-in;
+}
+.data-grid.show .data-grid-collapse-cta i {
+  transform: rotate(180deg);
+}
+
+
+/*form-wizard*/
+
+.form-wizard {
+  background-color: var(--element-bg-core);
+  border: 1px solid var(--border-core);
+  border-radius: 0.6rem;
+  padding: 1rem 1.25rem;
+  position: relative;
+
+} 
+
+.form-outer {
+display: flex;
+flex-wrap: nowrap;
+overflow: hidden;
+}
+
+.form-step {
+  width: 100%;
+  flex: 1 0 auto;
+  transition: all 0.5s ease-out;
+  transform: translateX(0);
+  }
+
+  .form-step.next{
+    transform: translateX(-100%);
+   }
+
+    .form-step.previous{
+      transform: translateX(100%);
+    }
+
+
+.dots {
+  --width: .75rem;
+  --height: var(--width);  
+
+  position: absolute;
+  bottom: calc(var(--width) / -2);
+  left: 50%;
+  transform: translateX(-50%);
+
+
+  .dot {
+      width: var(--width);
+      height: var(--height);
+      border-radius: 50%;
+      background-color: var(--bg-core-primary-lighten);
+      display: inline-block;
+      outline: 1px solid #fff;
+      transition: all 300ms ease-in-out;
+  }
+
+  .dot.active,
+  .dot.next {
+    background-color: var(--bg-core-primary);
+    outline: 2px solid var(--bg-core-primary);
+    outline-offset: 2px;
+  }
+
+  .dot.completed {
+    background-color: $success; 
+  }
+}
+
+/*end form-wizard*/

src/Connected.Components/Styles/components/_index.scss

@@ -5,3 +5,5 @@
 @forward "inputs";
 @forward "checkbox";
 @forward "toggle"; 
+@forward "chip"; 
+@forward "modal"; 

src/Connected.Components/Styles/components/_modal.scss

@@ -0,0 +1,229 @@
+@use "../util" as *;
+@use "../globals" as *;
+
+// stylelint-disable function-disallowed-list
+
+// .modal-open      - body class for killing the scroll
+.scroll-disabled{
+    overflow: hidden;
+    padding-right: 0;
+    }
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and stuff
+
+
+// Container that the modal scrolls within
+
+
+.modal {  
+    --modal-zindex: #{$modal-zindex};
+    --modal-width: 60vw;
+    --modal-height: 50vh;
+    --modal-padding: 1.5rem;
+    --modal-margin: 1.5rem;
+    --modal-color: var(--text-core);
+    --modal-bg: var(--bg-core-primary-light);
+    --modal-border-color: var(--bg-core-primary-light);
+    --modal-border-width: 1px;
+    --modal-border-radius: 1rem;
+    --modal-box-shadow: 0 0.5rem 1rem rgba(var(--bg-core-primary), 0.15);
+
+    --modal-header-padding-x: 1.5rem; //close button
+    --modal-header-padding-y: 1.5rem; //close button
+    --modal-header-bg: var(--modal-bg);
+    --modal-header-padding: 1.5rem;  
+    --modal-header-border-color: var(--bg-core-primary-light);
+    --modal-header-border-width: 1px;
+    
+    --modal-footer-bg: var(--modal-bg);
+    --modal-footer-padding: 1.5rem;  
+    --modal-footer-border-color: var(--bg-core-primary-light);
+    --modal-footer-border-width: 1px; 
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0,0,0,.65);
+    z-index: var(--modal-zindex);
+    display: none;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    transition: opacity .15s linear;
+    // Prevent Chrome on Windows from adding a focus outline. For details, see
+    // https://github.com/twbs/bootstrap/pull/10951.
+    outline: 0;
+    // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+    // See also https://github.com/twbs/bootstrap/issues/17695
+  }
+  
+
+
+    // When fading in the modal, animate it to slide down
+    .modal.fade {
+        opacity: 1;
+        transition: opacity .15s linear;
+    }
+    .modal.show{
+      display: block;
+      
+    }
+  
+    // When trying to close, animate focus to scale
+    .modal.modal-static {
+      transform:scale(1.1);
+    }
+
+
+  // Shell div to position the modal with bottom padding
+  .modal-dialog {
+    position: relative;
+    width: auto;
+    margin: var(--modal-margin);
+    // allow clicks to pass through for custom click handling to close modal
+    pointer-events: none;
+  }
+  
+  .modal-dialog-scrollable {
+    height: calc(100% - var(--modal-margin) * 2);
+  
+
+    .modal-content {
+      max-height: 100%;
+      overflow: hidden;
+    }
+  
+    .modal-body {
+      overflow-y: auto;
+    }
+  }
+  
+  .modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - var(--modal-margin) * 2);
+
+  }
+  
+  // Actual modal
+  .modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+    // counteract the pointer-events: none; in the .modal-dialog
+    color: var(--modal-color);
+    pointer-events: auto;
+    background-color: var(--modal-bg);
+    background-clip: padding-box;
+    border: var(--modal-border-width) solid var(--modal-border-color);
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--modal-box-shadow);
+    // Remove focus outline from opened modal
+    outline: 0;
+  }
+  
+
+  
+  // Modal header
+  // Top section of the modal w/ title and dismiss 
+  .modal-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+    padding: var(--modal-header-padding);
+    background-color: var(--modal-header-bg);
+    border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
+   
+  
+    .btn-close {
+      padding: calc(var(--modal-header-padding-y) * .5) calc(var(--modal-header-padding-x) * .5);
+      margin: calc(-.5 * var(--modal-header-padding-y)) calc(-.5 * var(--modal-header-padding-x)) calc(-.5 * var(--modal-header-padding-y)) auto;
+    }
+  }
+  
+  // Title text within header
+  .modal-title {
+    margin-bottom: 0;
+
+  }
+  
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    position: relative;
+    // Enable `flex-grow: 1` so that the body take up as much space as possible
+    // when there should be a fixed height on `.modal-dialog`.
+    flex: 1 1 auto;
+    padding: var(--modal-padding);
+  }
+  
+  // Footer (for actions)
+  .modal-footer {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center; // vertically center
+    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+    padding: var(--modal-footer-padding);
+    background-color: var(--modal-footer-bg);
+    border-radius: var(--modal-border-radius);
+    gap: .5rem;
+  
+}
+    // Automatically set modal's width for larger viewports
+    
+    
+    
+    .modal-dialog {
+      max-width: 100%;
+      max-height: 100%;
+      padding: 0;
+     
+
+      @include breakpoint(sm) {
+        max-width: 75vw;
+        margin-right: auto;
+        margin-left: auto;
+        padding: var(--modal-padding);
+       
+        }  
+      
+      @include breakpoint(lg) {
+        max-width: var(--modal-width);
+        margin-right: auto;
+        margin-left: auto;
+        }
+    }
+    
+  
+    // // Modal background
+    // .modal-backdrop {
+    //     opacity: 0;
+    //     display: none;
+    //     position: fixed;
+    //     top: 0;
+    //     left: 0;
+    //     z-index: #{$backdrop-zindex};
+    //     width: 100vw;
+    //     height: 100vh;
+    //     background-color: #000;
+    //     transition: opacity .15s linear;
+    // }
+
+    // .modal-backdrop.fade {
+    //     opacity: .5;
+    //     transition: opacity .15s linear;
+    // }
+    
+    //   .modal-backdrop.show {
+    //     display: block;
+    // }
+    

src/Connected.Components/Styles/components/_sidebar.scss

@@ -16,7 +16,7 @@ $sidebar-right-width-closed:0px;
     background: var(--bg-core-primary-light);
     border-right: 1px solid rgba(0,0,0,.025);
     border-radius: $border-radius-lg 0 0 $border-radius-lg;
-    z-index: 100;    
+    z-index: $sidebar-zindex;  
     transition: all 0.3s ease;
        
         @include breakpoint(sm) {
@@ -315,7 +315,7 @@ $sidebar-right-width-closed:0px;
         color: $text-core;
         background: var(--bg-core-primary-light);
         border-radius: 0;
-        z-index: 100;    
+        z-index: $sidebar-zindex;     
     
     }
     .sidebar.bottombar .profile-description,
@@ -382,7 +382,7 @@ $sidebar-right-width-closed:0px;
     background: var(--bg-core-primary-lighten);
     border-right: 1px solid rgba(0,0,0,.025);
     border-radius: 0 $border-radius-lg $border-radius-lg 0;
-    z-index: 99;    
+    z-index: $sidebar-right-zindex;
     transition: all 0.3s ease;
        
         @include breakpoint(sm) {

src/Connected.Components/Styles/globals/_variables.scss

@@ -197,3 +197,9 @@ $base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default;
 
 // transition
 $transition: all 0.15s ease-in-out;
+
+//z-index
+$sidebar-zindex: 899;
+$sidebar-right-zindex: 898;
+$backdrop-zindex: 999;
+$modal-zindex: 10000; 

src/Connected.Components/Styles/layout/_css_documentation.scss

@@ -69,11 +69,4 @@
 }
 
 
-.simple-grid-wraper{
-  background-color: var(--element-bg-core);
-  border: 1px solid var(--border-core);
-  border-radius: $border-radius-lg;
-  padding: calc($base-padding * 4);
-  line-height: 1.4;
-}