diff --git a/app/views/admin/products_v3/product_preview.turbo_stream.haml b/app/views/admin/products_v3/product_preview.turbo_stream.haml index 060eb54386..61935d012c 100644 --- a/app/views/admin/products_v3/product_preview.turbo_stream.haml +++ b/app/views/admin/products_v3/product_preview.turbo_stream.haml @@ -3,7 +3,7 @@ #product-preview{ "data-controller": "tabs" } %h1 = t("admin.products_page.product_preview.product_preview") - %dl.tabs + %dl.admin-tabs %dd %a{ data: { "tabs-target": "tab", "action": "tabs#select" } } = t("admin.products_page.product_preview.shop_tab") diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss index 4ef5d5a06c..70ea3cf8b9 100644 --- a/app/webpacker/css/admin_v3/components/navigation.scss +++ b/app/webpacker/css/admin_v3/components/navigation.scss @@ -1,11 +1,60 @@ // Navigation //--------------------------------------------------- + +@mixin menu-display { + display: flex; + flex-wrap: wrap; +} + +@mixin menu-link { + a { + display: inline-block; + padding: 16px 20px; + color: $color-9 !important; + text-align: center; + position: relative; + font-size: 14px; + font-weight: 600; + + &:hover { + color: $red !important; + + &:after { + content: ""; + position: absolute; + bottom: 0; + left: 20px; + right: 20px; + height: 3px; + background: $red; + } + } + + &.active { + @extend :hover; + } + } +} + .inline-menu { margin: 0; -webkit-margin-before: 0; -webkit-padding-start: 0; } +// tabs +/// use the same styling as #admin-menu via menu-display and menu-link mixins +dl.admin-tabs { + box-shadow: $box-shadow; + @include menu-display; + + dd { + width: auto; + padding: 0; + @include menu-link; + } +} + nav.menu { ul { list-style: none; @@ -95,33 +144,10 @@ nav.menu { } ul { - display: flex; - flex-wrap: wrap; + @include menu-display; li { - a { - display: inline-block; - padding: 16px 20px; - color: $color-9 !important; - text-align: center; - position: relative; - font-size: 14px; - font-weight: 600; - - &:hover { - color: $red !important; - - &:after { - content: ""; - position: absolute; - bottom: 0; - left: 20px; - right: 20px; - height: 3px; - background: $red; - } - } - } + @include menu-link; &.selected a { @extend a, :hover; diff --git a/app/webpacker/css/admin_v3/pages/product_preview.scss b/app/webpacker/css/admin_v3/pages/product_preview.scss index fdf47f9095..4b7f7e3a6a 100644 --- a/app/webpacker/css/admin_v3/pages/product_preview.scss +++ b/app/webpacker/css/admin_v3/pages/product_preview.scss @@ -2,46 +2,6 @@ @import "../../darkswarm/mixins"; #product-preview { - // tabs - dl.tabs { - box-shadow: $box-shadow; - display: flex; - flex-wrap: wrap; - - dd { - width: auto; - padding: 0; - - a { - display: inline-block; - padding: 16px 20px; - color: $color-9 !important; - text-align: center; - position: relative; - font-size: 16px; - font-weight: 600; - - &:hover { - color: $red !important; - - &:after { - content: ""; - position: absolute; - bottom: 0; - left: 20px; - right: 20px; - height: 3px; - background: $red; - } - } - - &.active { - @extend a, :hover; - } - } - } - } - // The frontend css is base on foundation-sites https://github.com/foundation/foundation-sites // Below we copied the sections that are relevant to the product preview modal @@ -122,7 +82,8 @@ // from foundation-sites/scss/foundations/components/_grid.scss @media only screen and (min-width: 64.0625em) { - .column, .columns { + .column, + .columns { position: relative; padding-left: 0.9375rem; padding-right: 0.9375rem;