diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss index ebf1af8eb5..014f32d18f 100644 --- a/ui-v2/app/styles/base/components/breadcrumbs/index.scss +++ b/ui-v2/app/styles/base/components/breadcrumbs/index.scss @@ -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; -} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/layout.scss b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss index 1b3faf25cf..4ffda16d91 100644 --- a/ui-v2/app/styles/base/components/breadcrumbs/layout.scss +++ b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss @@ -1,11 +1,15 @@ -%breadcrumbs { +%breadcrumbs > li { + list-style-type: none; display: inline-flex; } -%breadcrumbs li > * { - display: inline-flex; - align-items: center; +%breadcrumb-milestone::before { + margin-right: 4px; + display: inline-block; +} +%breadcrumb { + margin-left: 8px; } -%breadcrumbs li > *::before, -%breadcrumbs li { - margin-right: 0.5em; +%breadcrumb::before { + margin-right: 8px; + display: inline-block; } diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss index d2f9acf6e3..f7764062ed 100644 --- a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss +++ b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss @@ -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: $blue-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; } diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs index f2b03daacd..e27ffdc114 100644 --- a/ui-v2/app/templates/dc/services/instance.hbs +++ b/ui-v2/app/templates/dc/services/instance.hbs @@ -7,7 +7,6 @@