Skip to content

Commit cc7f48f

Browse files
committed
Rework breadcrumb styling
1 parent f369876 commit cc7f48f

File tree

6 files changed

+79
-47
lines changed

6 files changed

+79
-47
lines changed

src/app/components/elements/Accordion.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
172172
aria-expanded={isOpen ? "true" : "false"}
173173
>
174174
{isConceptPage && audienceString && <span className={
175-
classNames("stage-label d-flex align-items-center p-2 justify-content-center ", {[audienceStyle(audienceString)]: isAda, "text-bg-theme": isPhy})
175+
classNames("stage-label d-flex align-items-center p-2 justify-content-center ", {[audienceStyle(audienceString)]: isAda, "bg-theme text-white": isPhy})
176176
}>
177177
{siteSpecific(
178178
audienceString,

src/scss/common/breadcrumbs.scss

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,18 @@
33
// NOMENSA breadcrumbs.scss
44
.bread {
55
background-color: $white;
6-
margin-left: -1 * math.div($grid-gutter-width, 2);
7-
margin-right: -1 * math.div($grid-gutter-width, 2);
86
box-shadow: 0 2px 30px 0 $shadow-08;
97
@include respond-above(xs) {
108
background-color: transparent;
119
box-shadow: none;
1210
}
13-
@include respond-above(sm) {
14-
margin: 0;
15-
}
1611

1712
.breadcrumb {
1813
display: flex;
1914
flex-wrap: wrap;
20-
padding: 0.75rem 1rem;
2115
list-style: none;
2216
border-radius: 0.25rem;
2317
background-color: transparent;
2418
margin: 0;
25-
padding-left: 1rem;
26-
padding-right: 0;
27-
@include respond-above(sm) {
28-
padding-left: 0;
29-
}
30-
31-
.breadcrumb-item {
32-
font-family: $secondary-font-medium;
33-
34-
&.active {
35-
color: $gray-blue;
36-
}
37-
}
38-
}
39-
40-
.breadcrumb-item + .breadcrumb-item::before {
41-
background-image: url('/assets/common/icons/chevron_right.svg');
42-
background-repeat: no-repeat;
43-
background-size: contain;
44-
content: '';
45-
height: 14px;
46-
left: 20px;
47-
margin-bottom: -2px;
48-
margin-left: 2px;
49-
margin-right: 10px;
50-
margin-top: 7px;
51-
width: 9px;
5219
}
5320
}

src/scss/cs/breadcrumbs.scss

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,36 @@
11
@import "../common/breadcrumbs";
22

3-
.breadcrumb-item + .breadcrumb-item::before {
4-
position: relative;
5-
height: 0.888rem !important;
6-
left: 3px !important;
7-
top: 4px !important;
8-
margin: 0 !important;
9-
width: 21px !important;
10-
}
3+
.bread {
4+
margin-left: -1 * math.div($grid-gutter-width, 2);
5+
margin-right: -1 * math.div($grid-gutter-width, 2);
6+
@include respond-above(sm) {
7+
margin: 0;
8+
}
9+
10+
.breadcrumb {
11+
padding: 0.75rem 0 0.75rem 1rem;
12+
@include respond-above(sm) {
13+
padding-left: 0;
14+
}
15+
}
16+
17+
.breadcrumb-item {
18+
font-family: $secondary-font-medium;
19+
&.active {
20+
color: $gray-blue;
21+
}
22+
}
23+
24+
.breadcrumb-item + .breadcrumb-item::before {
25+
position: relative;
26+
background-image: url('/assets/common/icons/chevron_right.svg');
27+
background-repeat: no-repeat;
28+
background-size: contain;
29+
content: '';
30+
height: 0.888rem;
31+
left: 3px;
32+
top: 4px;
33+
margin: 0;
34+
width: 21px;
35+
}
36+
}

src/scss/phy/breadcrumbs.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import "../common/breadcrumbs";
2+
3+
.bread {
4+
position: relative;
5+
6+
background-color: color-mix(in srgb, var(--subject-color-900) 50%, transparent 50%);
7+
border-bottom: 1px solid color-mix(in srgb, white 20%, transparent 80%);
8+
9+
.breadcrumb-item {
10+
display: flex;
11+
color: white;
12+
}
13+
14+
.breadcrumb-item a {
15+
text-decoration: none;
16+
color: white;
17+
&:hover {
18+
text-decoration: underline;
19+
}
20+
}
21+
22+
.breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item:last-child::after {
23+
display: block;
24+
background-image: url('/assets/common/icons/chevron_up_white.svg');
25+
background-repeat: no-repeat;
26+
background-position: center;
27+
background-size: contain;
28+
rotate: 90deg;
29+
opacity: 0.8;
30+
content: '';
31+
height: 14px;
32+
left: 20px;
33+
margin-bottom: -2px;
34+
margin-left: 2px;
35+
margin-right: 10px;
36+
margin-top: 7px;
37+
width: 9px;
38+
}
39+
40+
.breadcrumb-item:last-child::after {
41+
margin-left: 9px;
42+
}
43+
}

src/scss/phy/color-theme.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,6 @@
125125
@include svg-color(url("/assets/phy/icons/redesign/hexagon.svg"), var(--subject-color-200), 60px, 60px, 60px);
126126
position: absolute;
127127
}
128-
129-
.text-bg-theme {
130-
@extend .text-bg-#{$palette};
131-
}
132128

133129
.alert-secondary {
134130
@extend .alert-#{$palette};

src/scss/phy/isaac.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
360360
@import "../common/modals";
361361
@import "forms";
362362
@import "../common/elements";
363-
@import "../common/breadcrumbs";
363+
@import "breadcrumbs";
364364
@import "../common/media";
365365
@import "../common/cookies";
366366
@import "../common/tabs";

0 commit comments

Comments
 (0)