status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-25 21:19:12 +00:00
Code Issues Projects Releases Wiki Activity

ui: Update Breadcrumbs styling (#7687)

Browse Source
This commit is contained in:
Kenia 2020-04-23 11:29:44 -04:00 committed by John Cowen
parent 7f3b9d04ba
commit 893ee7c237
4 changed files with 28 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui-v2/app/styles/base/components/breadcrumbs/index.scss
View File

@ -1,23 +1,11 @@
@import './skin'; @import './skin';
@import './layout'; @import './layout';
%breadcrumbs li > * { %breadcrumbs li a {
@extend %crumbs;
}
%breadcrumbs li:not(:first-child) a {
@extend %breadcrumb; @extend %breadcrumb;
} }
%breadcrumbs strong { %breadcrumbs li:first-child a {
@extend %breadcrumb-selected;
}
%breadcrumbs-milestone {
@extend %breadcrumbs;
}
%breadcrumbs-milestone li:first-child > * {
@extend %breadcrumb-milestone; @extend %breadcrumb-milestone;
} }
%breadcrumbs-filesystem {
@extend %breadcrumbs;
}
%breadcrumbs-filesystem li:not(:first-child) > * {
@extend %breadcrumb-path;
}
%breadcrumbs-filesystem li:first-child > * {
@extend %breadcrumb-folder;
}

18
ui-v2/app/styles/base/components/breadcrumbs/layout.scss
View File

@ -1,11 +1,15 @@
%breadcrumbs { %breadcrumbs > li {
list-style-type: none;
display: inline-flex; display: inline-flex;
} }
%breadcrumbs li > * { %breadcrumb-milestone::before {
display: inline-flex; margin-right: 4px;
align-items: center; display: inline-block;
} }
%breadcrumbs li > *::before, %breadcrumb {
%breadcrumbs li { margin-left: 8px;
margin-right: 0.5em; }
%breadcrumb::before {
margin-right: 8px;
display: inline-block;
} }

41
ui-v2/app/styles/base/components/breadcrumbs/skin.scss
View File

@ -1,36 +1,19 @@
%breadcrumbs li { %crumbs {
list-style-type: none; color: $gray-500;
text-decoration: none;
} }
%breadcrumb::before { %crumbs:hover {
line-height: 1; color: $blue-500;
font-size: 0.7em; text-decoration: underline;
margin-top: 0.2em;
} }
%breadcrumb::before { %crumbs::before {
content: '❮'; text-decoration: none;
} }
%breadcrumb-milestone::before { %breadcrumb-milestone::before {
content: '❮❮'; @extend %with-chevron-left-mask, %as-pseudo;
} background-color: $gray-500;
%breadcrumb-path::before {
content: '/';
}
%breadcrumb-folder::before {
position: relative;
top: 2px;
margin-top: -4px;
@extend %with-folder-outline-color-icon;
@extend %as-pseudo;
}
%breadcrumb {
color: $color-action;
}
%breadcrumb-selected {
color: $gray-400;
} }
%breadcrumb::before { %breadcrumb::before {
color: rgba($color-action, 0.5); content: '/';
} color: $gray-500;
%breadcrumb-selected::before {
color: $gray-300;
} }

1
ui-v2/app/templates/dc/services/instance.hbs
View File

@ -7,7 +7,6 @@
<ol> <ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li> <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
<li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service}})</a></li> <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service}})</a></li>
<li><strong>Instance</strong></li>
</ol> </ol>
</BlockSlot> </BlockSlot>
<BlockSlot @name="header"> <BlockSlot @name="header">