Skip to content
/ coreui-pro Public
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 1501e81

Browse files
mrholekmrholek
committedFeb 12, 2025
Merge branch 'dev' of https://github.com/coreui/coreui into dev
2 parents 965f3e3 + 77ad0f9 commit 1501e81

21 files changed

+278
-250
lines changed
 

‎docs/assets/scss/_ads.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
// stylelint-disable declaration-no-important, selector-max-id
2+
@use "../../../scss/mixins/border-radius" as *;
3+
@use "../../../scss/mixins/breakpoints" as *;
4+
@use "../../../scss/vendor/rfs" as *;
25

36
//
47
// Carbon ads

‎docs/assets/scss/_anchor.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/mixins/transition" as *;
2+
@use "../../../scss/variables" as *;
3+
14
.anchor-link {
25
padding: 0 .175rem;
36
font-weight: 400;

‎docs/assets/scss/_buttons.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/functions/color" as *;
2+
@use "variables" as *;
3+
14
// Buttons
25
//
36
// Custom buttons for the docs.

‎docs/assets/scss/_callouts.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/variables" as *;
2+
@use "variables" as *;
3+
14
//
25
// Callouts
36
//

‎docs/assets/scss/_clipboard-js.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/mixins/border-radius" as *;
2+
@use "../../../scss/mixins/breakpoints" as *;
3+
14
// clipboard.js
25
//
36
// JS-based `Copy` buttons for code snippets.

‎docs/assets/scss/_colors.scss

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1+
@use "sass:map";
2+
@use "sass:string";
3+
@use "../../../scss/functions/color-contrast" as *;
4+
@use "../../../scss/functions/color" as *;
5+
@use "../../../scss/variables" as *;
6+
17
//
28
// Docs color palette classes
39
//
410

5-
6-
@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
11+
@each $color, $value in map.merge($colors, ("gray-500": $gray-500)) {
712
.swatch-#{$color} {
813
color: color-contrast($value);
914
background-color: #{$value};
@@ -20,9 +25,9 @@
2025
line-height: 1.35;
2126
white-space: pre;
2227
content:
23-
str-slice($contrast-ratio, 1, 4) "\A"
24-
str-slice($against-white, 1, 4) "\A"
25-
str-slice($against-black, 1, 4);
28+
string.slice($contrast-ratio, 1, 4) "\A"
29+
string.slice($against-white, 1, 4) "\A"
30+
string.slice($against-black, 1, 4);
2631
background-color: $value;
2732
background-image:
2833
linear-gradient(

‎docs/assets/scss/_component-examples.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@use "../../../scss/mixins/border-radius" as *;
2+
@use "../../../scss/mixins/breakpoints" as *;
3+
@use "../../../scss/mixins/clearfix" as *;
4+
@use "../../../scss/mixins/container" as *;
5+
@use "../../../scss/mixins/grid" as *;
6+
@use "../../../scss/vendor/rfs" as *;
7+
@use "../../../scss/variables" as *;
8+
@use "variables" as *;
9+
110
//
211
// Docs examples
312
//

‎docs/assets/scss/_content.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@use "../../../scss/functions/to-rgb" as *;
2+
@use "../../../scss/mixins/breakpoints" as *;
3+
@use "../../../scss/vendor/rfs" as *;
4+
@use "../../../scss/variables" as *;
5+
16
//
27
// CoreUI docs content theming
38
//

‎docs/assets/scss/_footer.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/vendor/rfs" as *;
2+
@use "../../../scss/variables" as *;
3+
14
//
25
// Footer
36
//

‎docs/assets/scss/_header.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../../../scss/variables" as *;
2+
13
.docs-header {
24
--#{$prefix}header-bg: #{var(--cui-body-bg)};
35
}

‎docs/assets/scss/_layout.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
@use "../../../scss/mixins/breakpoints" as *;
2+
@use "../../../scss/mixins/transition" as *;
3+
@use "../../../scss/variables" as *;
4+
15
.wrapper {
26
width: 100%;
3-
@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
7+
padding-inline-start: var(--cui-sidebar-occupy-start, 0);
48
will-change: auto;
59
@include transition(padding .15s);
610

‎docs/assets/scss/_placeholder-img.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../../../scss/vendor/rfs" as *;
2+
13
//
24
// Placeholder svg used in the docs.
35
//

‎docs/assets/scss/_root.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use "../../../scss/functions/to-rgb" as *;
2+
@use "../../../scss/variables" as *;
3+
@use "variables" as *;
4+
5+
:root {
6+
--cd-purple: #{$cd-purple};
7+
--cd-violet: #{$cd-violet};
8+
--cd-accent: #{$cd-accent};
9+
--cd-violet-rgb: #{to-rgb($cd-violet)};
10+
--cd-accent-rgb: #{to-rgb($cd-accent)};
11+
--cd-pink-rgb: #{to-rgb($pink-500)};
12+
--cd-teal-rgb: #{to-rgb($teal-500)};
13+
--cd-violet-bg: var(--cd-violet);
14+
--cd-toc-color: var(--cd-violet);
15+
--cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
16+
--cd-callout-link: #{to-rgb($blue-600)};
17+
--cd-callout-code-color: #{$pink-600};
18+
--cd-pre-bg: var(--cui-tertiary-bg);
19+
}

‎docs/assets/scss/_search.scss

Lines changed: 0 additions & 153 deletions
This file was deleted.

‎docs/assets/scss/_sidebar.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../../../scss/mixins/color-mode" as *;
2+
13
.docs-sidebar {
24
--cui-sidebar-bg: var(--cui-tertiary-bg);
35
--cui-sidebar-brand-bg: transparent;
@@ -23,10 +25,8 @@
2325
}
2426
}
2527

26-
@if $enable-dark-mode {
27-
@include color-mode(dark) {
28-
.docs-sidebar {
29-
--cui-sidebar-bg: var(--cui-body-bg);
30-
}
28+
@include color-mode(dark) {
29+
.docs-sidebar {
30+
--cui-sidebar-bg: var(--cui-body-bg);
3131
}
3232
}

‎docs/assets/scss/_skippy.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/variables" as *;
2+
@use "variables" as *;
3+
14
.skippy {
25
background-color: $cd-purple;
36

‎docs/assets/scss/_syntax.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "../../../scss/mixins/color-mode" as *;
2+
@use "../../../scss/variables" as *;
3+
14
:root,
25
[data-coreui-theme="light"] {
36
// --base00: #fff;

‎docs/assets/scss/_toc.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
// stylelint-disable selector-max-type
22

3+
@use "../../../scss/functions/math" as *;
4+
@use "../../../scss/mixins/border-radius" as *;
5+
@use "../../../scss/mixins/breakpoints" as *;
6+
@use "../../../scss/vendor/rfs" as *;
7+
38
.docs-toc {
49
@include media-breakpoint-up(lg) {
510
position: sticky;

‎docs/assets/scss/_variables.scss

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
1+
@use "sass:color";
2+
@use "../../../scss/variables" as *;
13
// Local docs variables
2-
$cd-purple: #4c0bce;
3-
$cd-violet: lighten(saturate($cd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
4+
5+
$cd-purple: #4c0bce;
6+
$cd-violet: color.scale($cd-purple, $saturation: 10%, $lightness: 25%); // stylelint-disable-line scss/at-function-named-arguments
47
$cd-accent: #ffe484;
58

69
$cd-gutter-x: 3rem;
710
$cd-callout-variants: info, warning, danger !default;
8-
9-
:root {
10-
--cd-purple: #{$cd-purple};
11-
--cd-violet: #{$cd-violet};
12-
--cd-accent: #{$cd-accent};
13-
--cd-violet-rgb: #{to-rgb($cd-violet)};
14-
--cd-accent-rgb: #{to-rgb($cd-accent)};
15-
--cd-pink-rgb: #{to-rgb($pink-500)};
16-
--cd-teal-rgb: #{to-rgb($teal-500)};
17-
--cd-violet-bg: var(--cd-violet);
18-
--cd-toc-color: var(--cd-violet);
19-
--cd-sidebar-link-bg: rgba(var(--cd-violet-rgb), .1);
20-
--cd-callout-link: #{to-rgb($blue-600)};
21-
--cd-callout-code-color: #{$pink-600};
22-
--cd-pre-bg: var(--cui-tertiary-bg);
23-
}

‎docs/assets/scss/docs.scss

Lines changed: 28 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
/*!
2-
* CoreUI Docs (https://coreui.io/docs/)
3-
* Copyright 2022 creativeLabs Łukasz Holeczek
4-
* Copyright 2011-2022 The Bootstrap Authors
5-
* Copyright 2011-2022 Twitter, Inc.
2+
* CoreUI Docs (https://coreui.io/bootstrap/docs/)
3+
* Copyright 2025 creativeLabs Łukasz Holeczek
64
* Licensed under the Creative Commons Attribution 3.0 Unported License.
75
* For details, see https://creativecommons.org/licenses/by/3.0/.
86
*/
@@ -11,71 +9,41 @@
119
//
1210
// Background information on nomenclature and architecture decisions here.
1311
//
14-
// - Bootstrap functions, variables, and mixins are included for easy reuse.
15-
// Doing so gives us access to the same core utilities provided by Bootstrap.
16-
// For example, consistent media queries through those mixins.
17-
//
18-
// - Bootstrap's **docs variables** are prefixed with `$cd-`.
12+
// - CoreUI's **docs variables** are prefixed with `$cd-`.
1913
// These custom colors avoid collision with the components Bootstrap provides.
2014
//
2115
// - Classes are prefixed with `.docs-`.
2216
// These classes indicate custom-built or modified components for the design
23-
// and layout of the Bootstrap docs. They are not included in our builds.
17+
// and layout of the CoreUI docs. They are not included in our builds.
2418
//
2519
// Happy Bootstrapping!
2620

27-
// Load Bootstrap variables and mixins
28-
@import "../../../scss/functions";
29-
@import "../../../scss/variables";
30-
@import "../../../scss/mixins";
21+
@use "../../../scss/variables" with (
22+
$enable-cssgrid: true,
23+
$enable-container-queries: true,
24+
$enable-grid-classes: false
25+
);
3126

32-
// fusv-disable
33-
$enable-grid-classes: false;
34-
$enable-cssgrid: true;
35-
$enable-container-queries: true;
36-
// fusv-enable
37-
@import "../../../scss/grid";
27+
@use "../../../scss/grid";
3828

3929
// Load docs components
40-
@import "variables";
41-
@import "ads";
42-
@import "banner";
43-
@import "content";
44-
@import "skippy";
45-
@import "header";
46-
@import "sidebar";
47-
@import "layout";
48-
@import "toc";
49-
@import "footer";
50-
@import "component-examples";
51-
@import "buttons";
52-
@import "callouts";
53-
@import "colors";
54-
@import "clipboard-js";
55-
@import "placeholder-img";
56-
@import "scrolling";
30+
@forward "root";
31+
@forward "ads";
32+
@forward "content";
33+
@forward "skippy";
34+
@forward "header";
35+
@forward "sidebar";
36+
@forward "layout";
37+
@forward "toc";
38+
@forward "footer";
39+
@forward "component-examples";
40+
@forward "buttons";
41+
@forward "callouts";
42+
@forward "colors";
43+
@forward "clipboard-js";
44+
@forward "placeholder-img";
45+
@forward "scrolling";
5746

5847
// Load docs dependencies
59-
@import "syntax";
60-
@import "anchor";
61-
62-
/* stylelint-disable */
63-
div[dir="rtl"] .input-group > :not(:last-child),
64-
div[dir="rtl"] .input-group > .dropdown-toggle:nth-last-child(n+3) {
65-
border-right: 0 !important;
66-
@include border-end-radius($input-border-radius !important);
67-
}
68-
69-
div[dir="rtl"] .input-group > :not(:first-child) {
70-
@include border-start-radius($input-border-radius !important);
71-
@include border-end-radius(0 !important);
72-
}
73-
74-
div[dir="rtl"] .picker .input-group .form-control:first-child {
75-
border-right : $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color) !important;
76-
}
77-
78-
div[dir="rtl"] .picker .input-group > * + *:not(:last-child) {
79-
@include border-start-radius(0 !important);
80-
}
81-
/* stylelint-enable */
48+
@forward "syntax";
49+
@forward "anchor";

‎docs/assets/scss/search.scss

Lines changed: 159 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,165 @@
11
/*!
2-
* Bootstrap Docs (https://getbootstrap.com/)
3-
* Copyright 2025 The Bootstrap Authors
2+
* CoreUI Docs (https://coreui.io/bootstrap/docs/)
3+
* Copyright 2025 creativeLabs Łukasz Holeczek
44
* Licensed under the Creative Commons Attribution 3.0 Unported License.
55
* For details, see https://creativecommons.org/licenses/by/3.0/.
66
*/
77

8-
@import "../../../scss/functions";
9-
@import "../../../scss/variables";
10-
@import "../../../scss/mixins";
11-
@import "variables";
8+
@use "../../../scss/mixins/border-radius" as *;
9+
@use "../../../scss/mixins/box-shadow" as *;
10+
@use "../../../scss/mixins/breakpoints" as *;
11+
@use "../../../scss/mixins/color-mode" as *;
12+
@use "../../../scss/mixins/transition" as *;
13+
@use "../../../scss/vendor/rfs" as *;
14+
@use "../../../scss/variables" as *;
1215

13-
@import "@docsearch/css/dist/style";
14-
@import "search";
16+
@forward "@docsearch/css/dist/style";
17+
18+
19+
// stylelint-disable selector-class-pattern
20+
:root {
21+
--docsearch-primary-color: var(--cui-primary);
22+
--docsearch-logo-color: var(--cui-primary);
23+
}
24+
25+
@include color-mode(dark, true) {
26+
// From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
27+
// in html[data-theme="dark"] selector
28+
// and are slightly modified for formatting purpose
29+
--docsearch-text-color: #f5f6f7;
30+
--docsearch-container-background: rgba(9, 10, 17, .8);
31+
--docsearch-modal-background: #15172a;
32+
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
33+
--docsearch-searchbox-background: #090a11;
34+
--docsearch-searchbox-focus-background: #000;
35+
--docsearch-hit-color: #bec3c9;
36+
--docsearch-hit-shadow: none;
37+
--docsearch-hit-background: #090a11;
38+
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
39+
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
40+
--docsearch-footer-background: #1e2136;
41+
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
42+
--docsearch-muted-color: #7f8497;
43+
}
44+
45+
.DocSearch-Container {
46+
--docsearch-muted-color: var(--cui-secondary-color);
47+
--docsearch-hit-shadow: none;
48+
49+
position: fixed;
50+
z-index: 2000; // Make sure to be over all components showcased in the documentation
51+
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
52+
53+
@include media-breakpoint-up(lg) {
54+
padding-top: 4rem;
55+
}
56+
}
57+
58+
.DocSearch-Button {
59+
--docsearch-searchbox-background: #{rgba($black, .1)};
60+
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
61+
62+
min-width: 200px;
63+
min-height: 38px;
64+
font-family: $input-font-family;
65+
font-weight: $input-font-weight;
66+
line-height: $input-line-height;
67+
@include font-size($input-font-size);
68+
color: $input-color;
69+
background-color: $input-bg;
70+
background-clip: padding-box;
71+
border: $input-border-width solid $input-border-color;
72+
73+
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
74+
@include border-radius($btn-border-radius);
75+
@include box-shadow($input-box-shadow);
76+
@include transition($input-transition);
77+
78+
&:focus {
79+
color: $input-focus-color;
80+
background-color: $input-focus-bg;
81+
border-color: $input-focus-border-color;
82+
outline: 0;
83+
@if $enable-shadows {
84+
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
85+
} @else {
86+
// Avoid using mixin so we can pass custom focus shadow properly
87+
box-shadow: $input-focus-box-shadow;
88+
}
89+
}
90+
91+
&:hover:not(:disabled):not([readonly])::file-selector-button {
92+
background-color: $form-file-button-hover-bg;
93+
}
94+
95+
.DocSearch-Search-Icon {
96+
opacity: .65;
97+
}
98+
}
99+
100+
101+
.DocSearch-Button-Keys {
102+
min-width: 0;
103+
padding: 0 .25rem;
104+
background: rgba($black, .125);
105+
@include border-radius(.25rem);
106+
}
107+
108+
.DocSearch-Button-Key {
109+
top: 0;
110+
width: auto;
111+
height: 1.5rem;
112+
padding: 0 .125rem;
113+
margin-right: 0;
114+
font-size: .875rem;
115+
background: none;
116+
box-shadow: none;
117+
}
118+
119+
.DocSearch-Commands-Key {
120+
padding-left: 1px;
121+
font-size: .875rem;
122+
background-color: rgba($black, .1);
123+
background-image: none;
124+
box-shadow: none;
125+
}
126+
127+
.DocSearch-Form {
128+
@include border-radius(var(--cui-border-radius));
129+
}
130+
131+
.DocSearch-Hits {
132+
mark {
133+
padding: 0;
134+
}
135+
}
136+
137+
.DocSearch-Hit {
138+
padding-bottom: 0;
139+
@include border-radius(0);
140+
141+
a {
142+
@include border-radius(0);
143+
border: solid var(--cui-border-color);
144+
border-width: 0 1px 1px;
145+
}
146+
147+
&:first-child a {
148+
@include border-top-radius(var(--cui-border-radius));
149+
border-top-width: 1px;
150+
}
151+
&:last-child a {
152+
@include border-bottom-radius(var(--cui-border-radius));
153+
}
154+
}
155+
156+
.DocSearch-Hit-icon {
157+
display: flex;
158+
align-items: center;
159+
}
160+
161+
// Fix --docsearch-logo-color that doesn't do anything
162+
.DocSearch-Logo svg .cls-1,
163+
.DocSearch-Logo svg .cls-2 {
164+
fill: var(--docsearch-logo-color);
165+
}

0 commit comments

Comments
 (0)
Please sign in to comment.