Skip to content

Commit 9d74c9c

Browse files
mrholekmrholek
committed
refactor: migrate to Sass modules
1 parent e53f0fe commit 9d74c9c

16 files changed

+116
-65
lines changed

‎packages/docs/gatsby-browser.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import '@docsearch/css'
33
import DefaultLayout from './src/templates/DefaultLayout'
44
import DocsLayout from './src/templates/DocsLayout'
55
import './src/styles/styles.scss'
6+
import './src/styles/search.scss'
67

78
export const wrapRootElement = ({ element }: { element: ReactNode }) => {
89
return <DefaultLayout>{element}</DefaultLayout>

‎packages/docs/gatsby-ssr.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import '@docsearch/css'
33
import DefaultLayout from './src/templates/DefaultLayout'
44
import DocsLayout from './src/templates/DocsLayout'
55
import './src/styles/styles.scss'
6+
import './src/styles/search.scss'
67

78
export const wrapRootElement = ({ element }: { element: ReactNode }) => {
89
return <DefaultLayout>{element}</DefaultLayout>

‎packages/docs/src/styles/_ads.scss

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
// stylelint-disable declaration-no-important, selector-max-id
2+
@use "@coreui/coreui/scss/mixins/border-radius" as *;
3+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
4+
@use "@coreui/coreui/scss/vendor/rfs" as *;
25

36
//
47
// Carbon ads
58
//
69

7-
.carbonads-wrapper {
8-
min-height: 130px;
9-
margin: 2rem 0;
10-
}
11-
1210
#carbonads {
1311
position: static;
1412
display: block;
1513
max-width: 400px;
1614
padding: 15px 15px 15px 160px;
15+
margin: 2rem 0;
1716
overflow: hidden;
1817
@include font-size(.8125rem);
1918
line-height: 1.4;

‎packages/docs/src/styles/_anchor.scss

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1+
@use "@coreui/coreui/scss/mixins/transition" as *;
2+
@use "@coreui/coreui/scss/variables" as *;
13

24
.anchor-link {
5+
padding: 0 .175rem;
36
font-weight: 400;
47
color: rgba($link-color, .5);
5-
padding-left: 0.375em;
68
text-decoration: none;
79
opacity: 0;
8-
@include transition(opacity 0.1s ease-in-out, color .15s ease-in-out);
10+
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
11+
12+
&::after {
13+
content: "#";
14+
}
915

1016
&:focus,
11-
&:hover {
17+
&:hover,
18+
:hover > &,
19+
:target > & {
1220
color: $link-color;
1321
text-decoration: none;
22+
opacity: 1;
1423
}
1524
}
16-
17-
h2, h3, h4, h5, h6, td {
18-
&:hover {
19-
.anchor-link {
20-
opacity: 1;
21-
}
22-
}
23-
}

‎packages/docs/src/styles/_callouts.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "@coreui/coreui/scss/variables" as *;
2+
@use "variables" as *;
3+
14
//
25
// Callouts
36
//

‎packages/docs/src/styles/_component-examples.scss

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

‎packages/docs/src/styles/_component-sub-nav.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "@coreui/coreui/scss/mixins/transition" as *;
2+
13
.component-sub-nav-wrapper {
24
@include transition(box-shadow 0.2s linear);
35
&:before {

‎packages/docs/src/styles/_footer.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "@coreui/coreui/scss/vendor/rfs" as *;
2+
@use "@coreui/coreui/scss/variables" as *;
3+
14
//
25
// Footer
36
//

‎packages/docs/src/styles/_layout.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
2+
@use "@coreui/coreui/scss/mixins/transition" as *;
3+
@use "@coreui/coreui/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
}

‎packages/docs/src/styles/_prism.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use "sass:color";
2+
@use "@coreui/coreui/scss/mixins/color-mode" as *;
3+
@use "@coreui/coreui/scss/variables" as *;
4+
15
/* PrismJS 1.24.1
26
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
37
/**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
1620
--base05: #333;
1721
--base06: #fff;
1822
--base07: #{$teal-700}; // #9a6700
19-
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
23+
--base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
2024
--base09: #{$cyan-700}; // #087990
2125
--base0A: #{$purple-500}; // #795da3
2226
--base0B: #{$blue-700}; // #183691

‎packages/docs/src/styles/_root.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use "@coreui/coreui/scss/functions/to-rgb" as *;
2+
@use "@coreui/coreui/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+
}

‎packages/docs/src/styles/_sidebar.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "@coreui/coreui/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
}

‎packages/docs/src/styles/_toc.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
// stylelint-disable selector-max-type
22

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

‎packages/docs/src/styles/_variables.scss

+5-20
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
// stylelint-disable scss/dollar-variable-default
2-
1+
@use "sass:color";
2+
@use "@coreui/coreui/scss/variables" as *;
33
// Local docs variables
4-
$cd-purple: #4c0bce;
5-
$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
67
$cd-accent: #ffe484;
78

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

‎packages/docs/src/styles/_search.scss ‎packages/docs/src/styles/search.scss

+19-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
1-
// stylelint-disable selector-class-pattern
1+
/*!
2+
* CoreUI Docs (https://coreui.io/bootstrap/docs/)
3+
* Copyright 2025 creativeLabs Łukasz Holeczek
4+
* Licensed under the Creative Commons Attribution 3.0 Unported License.
5+
* For details, see https://creativecommons.org/licenses/by/3.0/.
6+
*/
7+
8+
@use "@coreui/coreui/scss/mixins/border-radius" as *;
9+
@use "@coreui/coreui/scss/mixins/box-shadow" as *;
10+
@use "@coreui/coreui/scss/mixins/breakpoints" as *;
11+
@use "@coreui/coreui/scss/mixins/color-mode" as *;
12+
@use "@coreui/coreui/scss/mixins/transition" as *;
13+
@use "@coreui/coreui/scss/vendor/rfs" as *;
14+
@use "@coreui/coreui/scss/variables" as *;
15+
16+
@forward "@docsearch/css/dist/style";
17+
218

19+
// stylelint-disable selector-class-pattern
320
:root {
421
--docsearch-primary-color: var(--cui-primary);
522
--docsearch-logo-color: var(--cui-primary);
@@ -29,6 +46,7 @@
2946
--docsearch-muted-color: var(--cui-secondary-color);
3047
--docsearch-hit-shadow: none;
3148

49+
position: fixed;
3250
z-index: 2000; // Make sure to be over all components showcased in the documentation
3351
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
3452

@@ -39,11 +57,7 @@
3957

4058
.DocSearch-Button {
4159
--docsearch-searchbox-background: #{rgba($black, .1)};
42-
// --docsearch-searchbox-color: #{$white};
4360
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
44-
// --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
45-
// --docsearch-text-color: #{$white};
46-
// --docsearch-muted-color: #{rgba($white, .65)};
4761

4862
min-width: 200px;
4963
min-height: 38px;
@@ -58,7 +72,6 @@
5872

5973
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
6074
@include border-radius($btn-border-radius);
61-
6275
@include box-shadow($input-box-shadow);
6376
@include transition($input-transition);
6477

‎packages/docs/src/styles/styles.scss

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
@import "@coreui/coreui/scss/coreui";
1+
@use "@coreui/coreui/scss/coreui" with (
2+
$enable-deprecation-messages: false
3+
);
24

35
// Import Chart.js custom tooltips styles
4-
@import "@coreui/chartjs/scss/coreui-chartjs";
6+
@use "@coreui/chartjs/scss/coreui-chartjs";
57

6-
@import "variables";
7-
@import "ads";
8-
@import "anchor";
9-
@import "callouts";
10-
@import "component-examples";
11-
@import "component-sub-nav";
12-
@import "footer";
13-
@import "layout";
14-
@import "prism";
15-
@import "scrolling";
16-
@import "search";
17-
@import "sidebar";
18-
@import "table-api";
19-
@import "toc";
8+
// Load docs components
9+
@forward "root";
10+
@forward "ads";
11+
@forward "anchor";
12+
@forward "callouts";
13+
@forward "component-examples";
14+
@forward "component-sub-nav";
15+
@forward "footer";
16+
@forward "layout";
17+
@forward "prism";
18+
@forward "scrolling";
19+
@forward "sidebar";
20+
@forward "table-api";
21+
@forward "toc";

0 commit comments

Comments
 (0)