Make local breadcrumb links look like Links. (#11058) (#11081)

This commit is contained in:
CJ Cenizal 2017-04-06 10:15:32 -07:00 committed by GitHub
parent 7604c5f8f6
commit bc3e8aa7a5
10 changed files with 63 additions and 75 deletions

View file

@ -1,11 +1,29 @@
<div class="kuiLocalBreadcrumbs" data-test-subj="breadcrumbs">
<div class="kuiLocalBreadcrumb" ng-if="useLinks && (!omitPages || !omitPages.includes(breadcrumb.path))" ng-repeat="breadcrumb in breadcrumbs">
<a class="kuiLocalBreadcrumb__link" href="{{breadcrumb.url}}">{{breadcrumb.title}}</a>
<div
class="kuiLocalBreadcrumb"
ng-if="useLinks && (!omitPages || !omitPages.includes(breadcrumb.path))"
ng-repeat="breadcrumb in breadcrumbs"
>
<a
class="kuiLocalBreadcrumb__link"
href="{{breadcrumb.url}}"
>
{{breadcrumb.title}}
</a>
</div>
<div class="kuiLocalBreadcrumb" ng-if="!useLinks && (!omitPages || !omitPages.includes(breadcrumb.path))" ng-repeat="breadcrumb in breadcrumbs">
<div
class="kuiLocalBreadcrumb"
ng-if="!useLinks && (!omitPages || !omitPages.includes(breadcrumb.path))"
ng-repeat="breadcrumb in breadcrumbs"
>
{{ breadcrumb.title }}
</div>
<div class="kuiLocalBreadcrumb" ng-if="pageTitle">
<div
class="kuiLocalBreadcrumb"
ng-if="pageTitle"
>
{{ pageTitle }}
</div>
</div>

View file

@ -1,4 +1,3 @@
/**
* 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
* a bit.
@ -10,52 +9,42 @@
padding-left: $localNavSideSpacing; /* 1 */
}
.kuiLocalBreadcrumb {
& + & {
margin-left: 6px;
.kuiLocalBreadcrumb {
& + & {
margin-left: 6px;
&:before {
content: '/';
user-select: none;
margin-right: 4px;
color: $localNavBreadcrumbDelimiterColor;
&:before {
content: '/';
user-select: none;
margin-right: 4px;
color: $localNavBreadcrumbDelimiterColor;
@include darkTheme {
color: $localNavBreadcrumbDelimiterColor--darkTheme;
}
}
}
&:last-child {
.kuiLocalBreadcrumb__link {
color: $localNavTextColor;
cursor: default;
&:hover {
text-decoration: none;
}
@include darkTheme {
color: $localNavTextColor--darkTheme;
}
@include darkTheme {
color: $localNavBreadcrumbDelimiterColor--darkTheme;
}
}
}
}
.kuiLocalBreadcrumb__link {
font-size: $localNavFontSizeNormal;
color: #5a5a5a;
text-decoration: none;
.kuiLocalBreadcrumb__link {
font-size: $localNavFontSizeNormal;
color: #328caa;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:hover {
color: #328caa;
text-decoration: underline;
}
@include darkTheme {
color: $localNavButtonTextColor--darkTheme;
}
@include darkTheme {
color: #b7e2ea;
&:hover {
color: #b7e2ea;
}
}
}
.kuiLocalBreadcrumb__emphasis {
font-weight: 700;
}
.kuiLocalBreadcrumb__emphasis {
font-weight: 700;
}

View file

@ -667,22 +667,17 @@ body {
.theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before {
color: #a5a5a5; }
.kuiLocalBreadcrumb:last-child .kuiLocalBreadcrumb__link {
color: #2d2d2d;
cursor: default; }
.kuiLocalBreadcrumb:last-child .kuiLocalBreadcrumb__link:hover {
text-decoration: none; }
.theme-dark .kuiLocalBreadcrumb:last-child .kuiLocalBreadcrumb__link {
color: #cecece; }
.kuiLocalBreadcrumb__link {
font-size: 14px;
color: #5a5a5a;
color: #328CAA;
text-decoration: none; }
.kuiLocalBreadcrumb__link:hover {
color: #328CAA;
text-decoration: underline; }
.theme-dark .kuiLocalBreadcrumb__link {
color: #dedede; }
color: #b7e2ea; }
.theme-dark .kuiLocalBreadcrumb__link:hover {
color: #def2f6; }
.kuiLocalBreadcrumb__emphasis {
font-weight: 700; }

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</div>
</div>

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</div>
</div>

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</div>
</div>

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</div>
</div>

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</div>
</div>

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</div>
</div>
</div>

View file

@ -9,9 +9,7 @@
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> <span>hits</span>
</a>
<span class="kuiLocalBreadcrumb__emphasis">0</span> <span>hits</span>
</div>
</div>
</div>