Skip to content

Commit

Permalink
Update Breadcrumbs styling
Browse files Browse the repository at this point in the history
  • Loading branch information
kaxcode committed Apr 22, 2020
1 parent 6ffab72 commit 615f114
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 55 deletions.
22 changes: 5 additions & 17 deletions ui-v2/app/styles/base/components/breadcrumbs/index.scss
Original file line number Diff line number Diff line change
@@ -1,23 +1,11 @@
@import './skin';
@import './layout';
%breadcrumbs li > * {
@extend %breadcrumb;
}
%breadcrumbs strong {
@extend %breadcrumb-selected;
%breadcrumbs > li > a {
@extend %crumbs;
}
%breadcrumbs-milestone {
@extend %breadcrumbs;
%breadcrumbs > li:not(:first-child) > a {
@extend %breadcrumb;
}
%breadcrumbs-milestone li:first-child > * {
%breadcrumbs > li:first-child > a {
@extend %breadcrumb-milestone;
}
%breadcrumbs-filesystem {
@extend %breadcrumbs;
}
%breadcrumbs-filesystem li:not(:first-child) > * {
@extend %breadcrumb-path;
}
%breadcrumbs-filesystem li:first-child > * {
@extend %breadcrumb-folder;
}
19 changes: 12 additions & 7 deletions ui-v2/app/styles/base/components/breadcrumbs/layout.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
%breadcrumbs {
%breadcrumbs > li {
list-style-type: none;
display: inline-flex;
}
%breadcrumbs li > * {
display: inline-flex;
align-items: center;
%breadcrumb-milestone::before {
margin-right: 4px;
margin-top: 1px;
display: inline-block;
}
%breadcrumb {
margin-left: 8px;
}
%breadcrumbs li > *::before,
%breadcrumbs li {
margin-right: 0.5em;
%breadcrumb::before {
margin-right: 8px;
display: inline-block;
}
41 changes: 12 additions & 29 deletions ui-v2/app/styles/base/components/breadcrumbs/skin.scss
Original file line number Diff line number Diff line change
@@ -1,36 +1,19 @@
%breadcrumbs li {
list-style-type: none;
%crumbs {
color: $gray-500;
text-decoration: none;
}
%breadcrumb::before {
line-height: 1;
font-size: 0.7em;
margin-top: 0.2em;
%crumbs:hover {
color: $cobalt-500;
text-decoration: underline;
}
%breadcrumb::before {
content: '';
%crumbs::before {
text-decoration: none;
}
%breadcrumb-milestone::before {
content: '❮❮';
}
%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;
@extend %with-chevron-left-mask, %as-pseudo;
background-color: $gray-500;
}
%breadcrumb::before {
color: rgba($color-action, 0.5);
}
%breadcrumb-selected::before {
color: $gray-300;
content: '/';
color: $gray-500;
}
2 changes: 1 addition & 1 deletion ui-v2/app/styles/base/icons/base-variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="%23000"/></svg>');
$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" fill="%23000"/></svg>');
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.705 16.885l-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6 1.41-1.41z" fill="%23000"/></svg>');
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.705 16.885L11.125 12.295L15.705 7.705L14.295 6.295L8.295 12.295L14.295 18.295L15.705 16.885Z" fill="%23000"/></svg>');
$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.295 7.705l4.58 4.59-4.58 4.59 1.41 1.41 6-6-6-6-1.41 1.41z" fill="%23000"/></svg>');
$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.41 16L12 11.42 16.59 16 18 14.59l-6-6-6 6L7.41 16z" fill="%23000"/></svg>');
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 3.515L8.293.287a1.014 1.014 0 0 1 1.414 0 .967.967 0 0 1 0 1.386L5.71 5.595a1.014 1.014 0 0 1-1.414 0L.293 1.674a.967.967 0 0 1 0-1.387 1.014 1.014 0 0 1 1.414 0l3.294 3.228z" fill="%23000" fill-rule="nonzero"/></svg>');
Expand Down
1 change: 0 additions & 1 deletion ui-v2/app/templates/dc/services/instance.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<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.show'}}>Service ({{item.Service}})</a></li>
<li><strong>Instance</strong></li>
</ol>
</BlockSlot>
<BlockSlot @name="header">
Expand Down

0 comments on commit 615f114

Please sign in to comment.