Merge branch 'main' of https://github.com/coreui/coreui

Author: mrholek

docs/assets/scss/_component-examples.scss

@@ -382,7 +382,6 @@
   pre {
     padding: .25rem 0 .875rem;
     margin-top: .8125rem;
-    margin-right: 1.875rem;
     margin-bottom: 0;
     overflow: overlay;
     white-space: pre;
@@ -397,6 +396,10 @@
   }
 }
 
+.docs-example-snippet .highlight pre {
+  margin-right: 0;
+}
+
 .highlight-toolbar {
   background-color: var(--cd-pre-bg);
 

docs/assets/scss/_layout.scss

@@ -3,6 +3,10 @@
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
+
+  > .container-lg {
+    --cui-gutter-x: 3rem;
+  }
 }
 
 .docs-layout {

scss/_header.scss

@@ -1,6 +1,5 @@
 .header {
   // scss-docs-start header-css-vars
-  --#{$prefix}header-min-height: #{$header-min-height};
   --#{$prefix}header-padding-x: #{$header-padding-x};
   --#{$prefix}header-padding-y: #{$header-padding-y};
   --#{$prefix}header-bg: #{$header-bg};
@@ -33,7 +32,6 @@
   flex-wrap: wrap; // allow us to do the line break for collapsing content
   align-items: center;
   justify-content: space-between; // space out brand from logo
-  // min-height: var(--#{$prefix}header-min-height);
   padding: var(--#{$prefix}header-padding-y) var(--#{$prefix}header-padding-x);
   background: var(--#{$prefix}header-bg);
   border-bottom: var(--#{$prefix}header-border);

scss/_variables.scss

@@ -1939,9 +1939,8 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables
 
 
-// Header // TODO: check
+// Header
 // scss-docs-start header-variables
-$header-min-height:             4rem !default;
 $header-padding-y:              $spacer * .5 !default;
 $header-padding-x:              $spacer * .5 !default;
 $header-brand-font-size:        $font-size-lg !default;
@@ -2112,7 +2111,7 @@ $sidebar-nav-link-icon-bullet-border-width:   1px !default;
 $sidebar-nav-link-icon-bullet-border-color:   var(--#{$prefix}tertiary-color) !default;
 $sidebar-nav-link-icon-bullet-border-radius:  50rem !default;
 
-$sidebar-nav-link-hover-color:                        var(--#{$prefix}emphasis-color) !default;
+$sidebar-nav-link-hover-color:                        rgba(255, 255, 255, 1) !default;
 $sidebar-nav-link-hover-bg:                           var(--#{$prefix}tertiary-bg) !default;
 $sidebar-nav-link-hover-icon-color:                   var(--#{$prefix}body-color) !default;
 $sidebar-nav-link-hover-icon-bullet-bg:               transparent !default;
@@ -2152,8 +2151,9 @@ $sidebar-toggler-width:             .5rem !default;
 $sidebar-toggler-height:            .5rem !default;
 $sidebar-toggler-padding-x:         .25rem !default;
 $sidebar-toggler-padding-y:         .25rem !default;
+$sidebar-toggler-bg:                transparent !default;
 $sidebar-toggler-color:             var(--#{$prefix}tertiary-color) !default;
-$sidebar-toggler-bg:                url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
+$sidebar-toggler-icon:              url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
 $sidebar-toggler-focus-shadow:      $focus-ring-box-shadow !default;
 $sidebar-toggler-hover-color:       var(--#{$prefix}secondary-color) !default;
 $sidebar-toggler-focus-color:       var(--#{$prefix}secondary-color) !default;

scss/sidebar/_sidebar-nav.scss

@@ -51,9 +51,9 @@
   --#{$prefix}sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};
   --#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
   --#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
-  --#{$prefix}sidebar-nav-group-indicator-color: #{escape-svg($sidebar-nav-group-indicator-color)};
+  --#{$prefix}sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color};
   --#{$prefix}sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};
-  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{escape-svg($sidebar-nav-group-indicator-hover-color)};
+  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};
   --#{$prefix}sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
   --#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
   // scss-docs-end sidebar-nav-css-vars

scss/sidebar/_sidebar.scss

@@ -215,8 +215,9 @@
   // scss-docs-start sidebar-toggler-css-vars
   --#{$prefix}sidebar-toggler-width: #{$sidebar-toggler-width};
   --#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
+  --#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
   --#{$prefix}sidebar-toggler-color: #{$sidebar-toggler-color};
-  --#{$prefix}sidebar-toggler-bg: #{escape-svg($sidebar-toggler-bg)};
+  --#{$prefix}sidebar-toggler-icon: #{escape-svg($sidebar-toggler-icon)};
   --#{$prefix}sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color};
   --#{$prefix}sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow};
   --#{$prefix}sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color};
@@ -228,7 +229,7 @@
   width: var(--#{$prefix}sidebar-toggler-width);
   height: var(--#{$prefix}sidebar-toggler-height);
   padding: $sidebar-toggler-padding-y $sidebar-toggler-padding-x;
-  background-color: transparent;
+  background-color: var(--#{$prefix}sidebar-toggler-bg);
   border: 0;
   @include border-radius();
 
@@ -240,7 +241,7 @@
     height: 100%;
     content: "";
     background-color: var(--#{$prefix}sidebar-toggler-color);
-    mask: var(--#{$prefix}sidebar-toggler-bg) no-repeat center;
+    mask: var(--#{$prefix}sidebar-toggler-icon) no-repeat center;
     @include transition(var(--#{$prefix}sidebar-toggler-transition));
     @include rtl() {
       transform: rotate(-180deg);