Skip to content

Commit

Permalink
Merge pull request #260 from heorhi-deriv/breadcrumb-separator-fix
Browse files Browse the repository at this point in the history
[FIX] Separator visibility
  • Loading branch information
shayan-deriv authored Oct 4, 2024
2 parents 1b6334b + b709799 commit 5fa835d
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 15 deletions.
29 changes: 21 additions & 8 deletions src/components/Breadcrumbs/Breadcrumbs.scss
Original file line number Diff line number Diff line change
@@ -1,31 +1,40 @@
.deriv-breadcrumbs {
width: 100%;
margin: 0;
padding: 0;

&__item {
float: left;
list-style-type: none;
}

&__text {
color: var(--du-text-less-prominent, #999999);

&--active {
color: var(--du-text-prominent, #333333);
@include rtl {
float: right;
}

&:not(:last-child) {
cursor: pointer;

&:hover {
.deriv-breadcrumbs__text:hover {
color: var(--du-text-general, #333333);
}
}
}

&__text {
color: var(--du-text-less-prominent, #999999);

&--active {
color: var(--du-text-prominent, #333333);
}
}

&__separator-container {
cursor: default;
}

&__chevron-icon {
margin: 0 5px;
vertical-align: middle;
vertical-align: sub;

path {
fill: var(--du-text-less-prominent, #999999);
Expand All @@ -34,5 +43,9 @@
@include mobile {
margin: 0 2.5px;
}

@include rtl {
transform: rotate(180deg);
}
}
}
17 changes: 10 additions & 7 deletions src/components/Breadcrumbs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,16 @@ export const Breadcrumbs = ({
>
{item.text}
</Text>
{!isLastItem &&
(separator ?? (
<LegacyChevronRight1pxIcon
className="deriv-breadcrumbs__chevron-icon"
iconSize="xs"
/>
))}
{!isLastItem && (
<span className="deriv-breadcrumbs__separator-container">
{separator || (
<LegacyChevronRight1pxIcon
className="deriv-breadcrumbs__chevron-icon"
iconSize="xs"
/>
)}
</span>
)}
</li>
);
})}
Expand Down
7 changes: 7 additions & 0 deletions src/styles/abstracts/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*RTL Language Mixin*/

@mixin rtl {
[dir="rtl"] & {
@content;
}
}
1 change: 1 addition & 0 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "./base/reset";
@import "./abstracts/layout";
@import "./abstracts/variables";
@import "./abstracts/typography";
@import "./abstracts/devices";
Expand Down

0 comments on commit 5fa835d

Please sign in to comment.