diff --git a/wherehows-web/app/styles/abstracts/_mixins.scss b/wherehows-web/app/styles/abstracts/_mixins.scss index a2626d80de..e3bbc69c10 100644 --- a/wherehows-web/app/styles/abstracts/_mixins.scss +++ b/wherehows-web/app/styles/abstracts/_mixins.scss @@ -82,7 +82,7 @@ /// Proxy for AD container styles @mixin nacho-container { - border: 1px solid set-color(grey, light); + border: 1px solid get-color(black, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); padding: item-spacing(4); background-color: get-color(white); diff --git a/wherehows-web/app/styles/base/_base.scss b/wherehows-web/app/styles/base/_base.scss index 779207dc6d..c025eb601f 100644 --- a/wherehows-web/app/styles/base/_base.scss +++ b/wherehows-web/app/styles/base/_base.scss @@ -13,7 +13,7 @@ html { * Apply padding to top and bottom to account for navigation and footer */ body { - background-color: set-color(white, base); + background-color: get-color(slate0); overflow-y: scroll; overflow-x: hidden; } diff --git a/wherehows-web/app/styles/components/_all.scss b/wherehows-web/app/styles/components/_all.scss index d9e918ca3c..5492dab293 100644 --- a/wherehows-web/app/styles/components/_all.scss +++ b/wherehows-web/app/styles/components/_all.scss @@ -22,6 +22,7 @@ @import 'upstream-owners/all'; @import 'dataset-schema/all'; @import 'tooltips/all'; +@import 'entity-header/all'; @import 'nacho/nacho-button'; @import 'nacho/nacho-global-search'; diff --git a/wherehows-web/app/styles/components/entity-header/_all.scss b/wherehows-web/app/styles/components/entity-header/_all.scss new file mode 100644 index 0000000000..b4099e17b1 --- /dev/null +++ b/wherehows-web/app/styles/components/entity-header/_all.scss @@ -0,0 +1 @@ +@import 'entity-header'; diff --git a/wherehows-web/app/styles/components/entity-header/_entity-header.scss b/wherehows-web/app/styles/components/entity-header/_entity-header.scss new file mode 100644 index 0000000000..ccf587d279 --- /dev/null +++ b/wherehows-web/app/styles/components/entity-header/_entity-header.scss @@ -0,0 +1,13 @@ +.dataset-entity-header { + background-color: white; + padding-top: item-spacing(5); +} + +.dataset-entity-tabs { + background-color: white; + + ///overrides library styles to match design spec + .ivy-tabs-tablist { + margin-bottom: 0; + } +} diff --git a/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss b/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss index 96b9672b56..04c4ab23d2 100644 --- a/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss +++ b/wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss @@ -1,7 +1,7 @@ @import 'restyle'; $primary-border-color: get-color(gray3, 0.8); -$secondary-border-color: set-color(white, base); +$secondary-border-color: get-color(slate0); /// Defines styles for the breadcrumb container @include restyle-define( @@ -67,6 +67,16 @@ $secondary-border-color: set-color(white, base); .nacho-breadcrumbs { @include restyle(breadcrumbs); + &--white-surface { + $secondary-border-color: get-color(white); + + .nacho-breadcrumbs__crumb__grain { + &::after { + border-left: 30px solid $secondary-border-color; + } + } + } + &__crumb { float: left; diff --git a/wherehows-web/app/styles/layout/_page.scss b/wherehows-web/app/styles/layout/_page.scss index d63d53bc2a..47e6835b9e 100644 --- a/wherehows-web/app/styles/layout/_page.scss +++ b/wherehows-web/app/styles/layout/_page.scss @@ -3,6 +3,7 @@ } /// Styles that apply to the layout for a page with two columns sidebar and content style -.wh-sidebar, .wh-main-content { - margin: 30px 0; +.wh-sidebar, +.wh-main-content { + margin-top: item-spacing(5); } diff --git a/wherehows-web/app/templates/browse/entity.hbs b/wherehows-web/app/templates/browse/entity.hbs index 48e2ff7f0f..53a20ecf87 100644 --- a/wherehows-web/app/templates/browse/entity.hbs +++ b/wherehows-web/app/templates/browse/entity.hbs @@ -1,37 +1,35 @@ {{#if shouldShowBrowserRevamp}}