Add styling for tabs

This commit is contained in:
Gaetan Craig-Riou
2024-09-03 14:58:06 +10:00
parent d56ab9257b
commit 2b74bbd45d
2 changed files with 43 additions and 0 deletions

View File

@@ -132,3 +132,5 @@
@import "app/webpacker/css/admin/trix.scss";
@import "terms_of_service_banner"; // admin_v3
@import "pages/product_preview"; // admin_v3

View File

@@ -0,0 +1,41 @@
#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;
}
}
}
}
}