Skip to content

Commit d8493bf

Browse files
mdomdo
committed
Scope docs CSS to custom layer
1 parent 5ce4097 commit d8493bf

21 files changed

+1023
-981
lines changed

‎site/src/components/shortcodes/JsDocs.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@ try {
5555
<Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
5656
<div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
5757
<a
58-
class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
58+
class="text-decoration-none color-body"
5959
href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
60+
target="_blank"
61+
rel="noopener noreferrer"
6062
>
6163
{file}
6264
</a>

‎site/src/components/shortcodes/ScssDocs.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,10 @@ try {
5757
<Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
5858
<div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
5959
<a
60-
class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
60+
class="text-decoration-none color-body"
6161
href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
62+
target="_blank"
63+
rel="noopener noreferrer"
6264
>
6365
{file}
6466
</a>

‎site/src/scss/_ads.scss‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,59 +8,61 @@
88
// Carbon ads
99
//
1010

11-
#carbonads {
12-
position: static;
13-
max-width: 400px;
14-
padding: 15px 15px 15px 160px;
15-
margin: 1rem 0;
16-
overflow: hidden;
17-
@include font-size(.8125rem);
18-
line-height: 1.4;
19-
text-align: left;
20-
background-color: var(--bs-bg-1);
11+
@layer custom {
12+
#carbonads {
13+
position: static;
14+
max-width: 400px;
15+
padding: 15px 15px 15px 160px;
16+
margin: 1rem 0;
17+
overflow: hidden;
18+
@include font-size(.8125rem);
19+
line-height: 1.4;
20+
text-align: left;
21+
background-color: var(--bs-bg-1);
22+
23+
a {
24+
color: var(--bs-body-color);
25+
text-decoration: none;
26+
}
2127

22-
a {
23-
color: var(--bs-body-color);
24-
text-decoration: none;
28+
@include media-breakpoint-up(sm) {
29+
@include border-radius(.5rem);
30+
}
2531
}
2632

27-
@include media-breakpoint-up(sm) {
28-
@include border-radius(.5rem);
33+
.carbon-img {
34+
float: left;
35+
margin-left: -145px;
2936
}
30-
}
3137

32-
.carbon-img {
33-
float: left;
34-
margin-left: -145px;
35-
}
38+
@container (max-width: 240px) {
39+
#carbonads {
40+
padding-left: 15px;
41+
}
3642

37-
@container (max-width: 240px) {
38-
#carbonads {
39-
padding-left: 15px;
40-
}
43+
.carbon-img {
44+
display: block;
45+
float: none;
46+
margin-left: 0;
47+
}
4148

42-
.carbon-img {
43-
display: block;
44-
float: none;
45-
margin-left: 0;
46-
}
49+
.carbon-wrap {
50+
display: flex;
51+
flex-direction: column;
52+
gap: .5rem;
53+
}
4754

48-
.carbon-wrap {
49-
display: flex;
50-
flex-direction: column;
51-
gap: .5rem;
55+
.carbon-img > img {
56+
width: 100%;
57+
max-width: 100% !important;
58+
height: auto;
59+
@include border-radius(var(--bs-border-radius-sm));
60+
}
5261
}
5362

54-
.carbon-img > img {
55-
width: 100%;
56-
max-width: 100% !important;
57-
height: auto;
58-
@include border-radius(var(--bs-border-radius-sm));
63+
.carbon-poweredby {
64+
display: block;
65+
margin-top: .75rem;
66+
color: var(--bs-fg-3) !important;
5967
}
6068
}
61-
62-
.carbon-poweredby {
63-
display: block;
64-
margin-top: .75rem;
65-
color: var(--bs-fg-3) !important;
66-
}

‎site/src/scss/_anchor.scss‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,40 @@
22
@use "../../../scss/variables" as *;
33
@use "../../../scss/mixins/transition" as *;
44

5-
.anchor-link {
6-
padding: 0 .175rem;
7-
font-weight: 400;
8-
color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
9-
text-decoration: none;
10-
opacity: 0;
11-
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
5+
@layer custom {
6+
.anchor-link {
7+
padding: 0 .175rem;
8+
font-weight: 400;
9+
color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
10+
text-decoration: none;
11+
opacity: 0;
12+
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
1213

13-
&::after {
14-
content: "#";
15-
}
14+
&::after {
15+
content: "#";
16+
}
1617

17-
&:focus,
18-
&:hover,
19-
:hover > &,
20-
:target > & {
21-
color: var(--#{$prefix}link-color);
22-
text-decoration: none;
23-
opacity: 1;
18+
&:focus,
19+
&:hover,
20+
:hover > &,
21+
:target > & {
22+
color: var(--#{$prefix}link-color);
23+
text-decoration: none;
24+
opacity: 0;
25+
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
26+
27+
&::after {
28+
content: "#";
29+
}
30+
31+
&:focus,
32+
&:hover,
33+
:hover > &,
34+
:target > & {
35+
color: var(--#{$prefix}link-color);
36+
text-decoration: none;
37+
opacity: 1;
38+
}
39+
}
2440
}
2541
}

‎site/src/scss/_brand.scss‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,59 +7,61 @@
77
// Brand guidelines
88
//
99

10-
// Logo series wrapper
11-
.bd-brand-logos {
12-
color: $bd-violet;
10+
@layer custom {
11+
// Logo series wrapper
12+
.bd-brand-logos {
13+
color: $bd-violet;
1314

14-
.inverse {
15-
color: $white;
16-
background-color: $bd-violet;
17-
}
18-
}
19-
20-
// Individual items
21-
.bd-brand-item {
22-
+ .bd-brand-item {
23-
border-top: 1px solid var(--bs-border-color);
15+
.inverse {
16+
color: $white;
17+
background-color: $bd-violet;
18+
}
2419
}
2520

26-
@include media-breakpoint-up(md) {
21+
// Individual items
22+
.bd-brand-item {
2723
+ .bd-brand-item {
28-
border-top: 0;
29-
border-left: 1px solid var(--bs-border-color);
24+
border-top: 1px solid var(--bs-border-color);
25+
}
26+
27+
@include media-breakpoint-up(md) {
28+
+ .bd-brand-item {
29+
border-top: 0;
30+
border-left: 1px solid var(--bs-border-color);
31+
}
3032
}
3133
}
32-
}
3334

3435

35-
//
36-
// Color swatches
37-
//
36+
//
37+
// Color swatches
38+
//
3839

39-
.color-swatches {
40-
margin: 0 -5px;
40+
.color-swatches {
41+
margin: 0 -5px;
4142

42-
// Docs colors
43-
.bd-purple {
44-
background-color: $bd-purple;
45-
}
46-
.bd-purple-light {
47-
background-color: $bd-purple-light;
48-
}
49-
.bd-purple-lighter {
50-
background-color: #e5e1ea;
51-
}
52-
.bd-gray {
53-
background-color: #f9f9f9;
43+
// Docs colors
44+
.bd-purple {
45+
background-color: $bd-purple;
46+
}
47+
.bd-purple-light {
48+
background-color: $bd-purple-light;
49+
}
50+
.bd-purple-lighter {
51+
background-color: #e5e1ea;
52+
}
53+
.bd-gray {
54+
background-color: #f9f9f9;
55+
}
5456
}
55-
}
5657

57-
.color-swatch {
58-
width: 4rem;
59-
height: 4rem;
58+
.color-swatch {
59+
width: 4rem;
60+
height: 4rem;
6061

61-
@include media-breakpoint-up(md) {
62-
width: 6rem;
63-
height: 6rem;
62+
@include media-breakpoint-up(md) {
63+
width: 6rem;
64+
height: 6rem;
65+
}
6466
}
6567
}

‎site/src/scss/_buttons.scss‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,53 @@
33
@use "../../../scss/colors" as *;
44
@use "variables" as *;
55

6-
// Buttons
7-
//
8-
// Custom buttons for the docs.
6+
@layer custom {
7+
// scss-docs-start btn-css-vars-example
8+
.btn-bd-primary {
9+
--bs-btn-font-weight: 600;
10+
--bs-btn-color: var(--bs-white);
11+
--bs-btn-bg: var(--bd-violet-bg);
12+
--bs-btn-border-color: var(--bd-violet-bg);
13+
--bs-btn-hover-color: var(--bs-white);
14+
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
15+
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
16+
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
17+
--bs-btn-active-color: var(--bs-btn-hover-color);
18+
--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
19+
--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
20+
}
21+
// scss-docs-end btn-css-vars-example
922

10-
// scss-docs-start btn-css-vars-example
11-
.btn-bd-primary {
12-
--bs-btn-font-weight: 600;
13-
--bs-btn-color: var(--bs-white);
14-
--bs-btn-bg: var(--bd-violet-bg);
15-
--bs-btn-border-color: var(--bd-violet-bg);
16-
--bs-btn-hover-color: var(--bs-white);
17-
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
18-
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
19-
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
20-
--bs-btn-active-color: var(--bs-btn-hover-color);
21-
--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
22-
--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
23-
}
24-
// scss-docs-end btn-css-vars-example
25-
26-
.btn-bd-accent {
27-
--bs-btn-font-weight: 600;
28-
--bs-btn-color: var(--bd-accent);
29-
--bs-btn-border-color: var(--bd-accent);
30-
--bs-btn-hover-color: var(--bd-dark);
31-
--bs-btn-hover-bg: var(--bd-accent);
32-
--bs-btn-hover-border-color: var(--bd-accent);
33-
--bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
34-
--bs-btn-active-color: var(--bs-btn-hover-color);
35-
--bs-btn-active-bg: var(--bs-btn-hover-bg);
36-
--bs-btn-active-border-color: var(--bs-btn-hover-border-color);
37-
}
23+
.btn-bd-accent {
24+
--bs-btn-font-weight: 600;
25+
--bs-btn-color: var(--bd-accent);
26+
--bs-btn-border-color: var(--bd-accent);
27+
--bs-btn-hover-color: var(--bd-dark);
28+
--bs-btn-hover-bg: var(--bd-accent);
29+
--bs-btn-hover-border-color: var(--bd-accent);
30+
--bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
31+
--bs-btn-active-color: var(--bs-btn-hover-color);
32+
--bs-btn-active-bg: var(--bs-btn-hover-bg);
33+
--bs-btn-active-border-color: var(--bs-btn-hover-border-color);
34+
}
3835

39-
.btn-bd-light {
40-
--btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
36+
.btn-bd-light {
37+
--btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
4138

42-
--bs-btn-color: var(--bs-gray-600);
43-
--bs-btn-border-color: var(--bs-border-color);
44-
--bs-btn-hover-color: var(--btn-custom-color);
45-
--bs-btn-hover-border-color: var(--btn-custom-color);
46-
--bs-btn-active-color: var(--btn-custom-color);
47-
--bs-btn-active-bg: var(--bs-white);
48-
--bs-btn-active-border-color: var(--btn-custom-color);
49-
--bs-btn-focus-border-color: var(--btn-custom-color);
50-
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
51-
}
39+
--bs-btn-color: var(--bs-gray-600);
40+
--bs-btn-border-color: var(--bs-border-color);
41+
--bs-btn-hover-color: var(--btn-custom-color);
42+
--bs-btn-hover-border-color: var(--btn-custom-color);
43+
--bs-btn-active-color: var(--btn-custom-color);
44+
--bs-btn-active-bg: var(--bs-white);
45+
--bs-btn-active-border-color: var(--btn-custom-color);
46+
--bs-btn-focus-border-color: var(--btn-custom-color);
47+
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
48+
}
5249

53-
.bd-btn-lg {
54-
--bs-btn-border-radius: .5rem;
50+
.bd-btn-lg {
51+
--bs-btn-border-radius: .5rem;
5552

56-
padding: .8125rem 2rem;
53+
padding: .8125rem 2rem;
54+
}
5755
}

0 commit comments

Comments
 (0)