<ul class="flex-nav">
<li class="top-brick">
<button id="sets" class=" topNav sets" onclick="">
<span class="buttonmask">
<img src="../../images/bricknav-thick-studs.png" alt="lego brick - {finder_pagename}s find">
<span class="button-label">Sets</span>
</span>
</button>
<ul class="flex-nav-sub-nav do-hide">
<li>
<button id="sets" class=" topNav sets" onclick="">
<span class="buttonmask">
<img src="../../images/bricknav-thick-studs.png" alt="lego brick - {finder_pagename}s find">
<span class="button-label">Find</span>
</span>
</button>
<ul class="flex-nav-sub-nav-owner ">
<li>
<a href="" onclick="" class="sets" role="button">
<span class="navmask-flyout">
<img src="../../images/bricknav-thick-studs.png" alt="">
<span class="button-label">Lego's</span>
</span>
</a>
</li>
<li>
<a href="" onclick="" class="sets" role="button">
<span class="navmask-flyout">
<img src="../../images/bricknav-thick-studs.png" alt="">
<span class="button-label">My</span>
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="" onclick="" class="sets" role="button">
<span class="navmask">
<img src="../../images/bricknav-thick-studs.png" alt="">
<span class="button-label">Add</span>
</span>
</a>
</li>
<li>
<a href="" onclick="" class="sets" role="button">
<span class="navmask">
<img src="../../images/bricknav-thick-studs.png" alt="">
<span class="button-label">Update</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
<ul class="flex-nav">
<li class="top-brick">
{{#> container}}
{{> @buttons--top-navigation unique_id=unique_id btn_class=btn_class btn_label=btn_label }}
{{/container}}
<ul class="flex-nav-sub-nav do-hide">
<li>
{{#> container}}
{{> @buttons--top-navigation btn_class=btn_class btn_label="Find" }}
{{/container}}
<ul class="flex-nav-sub-nav-owner ">
<li>
{{#> container}}
{{> @anchors--level2 anchor_class=anchor_class anchor_label="Lego's" navclass="navmask-flyout" }}
{{/container}}
</li>
<li>
{{#> container}}
{{> @anchors--level2 anchor_class=anchor_class anchor_label="My" navclass="navmask-flyout" }}
{{/container}}
</li>
</ul>
</li>
<li>
{{#> container}}
{{> @anchors--level1 anchor_class=anchor_class anchor_label="Add" navclass="navmask" }}
{{/container}}
</li>
<li>
{{#> container}}
{{> @anchors--level1 anchor_class=anchor_class anchor_label="Update" navclass="navmask" }}
{{/container}}
</li>
</ul>
</li>
</ul>
{
"variant_name": "sets",
"unique_id": "sets",
"anchor_class": "sets",
"btn_class": "topNav sets",
"btn_label": "Sets",
"more_info": ""
}
No notes defined.
/***** Navigation Buttons *****/
// .navmask, .buttonmask {
// -webkit-mask-image: url(/bricknav-thick-studs-mask.png);
// mask-image: url(/bricknav-thick-studs-mask.png);
// -webkit-mask-repeat: no-repeat;
// mask-repeat: no-repeat;
// -webkit-mask-size: 100%;
// mask-size: 100%;
// -webkit-mask-position: unset;
// mask-position: unset;
// }
span.navmask, span.buttonmask {
width: 125px;
position: relative;
display: block;
}
.flex-nav {
list-style: none;
padding-inline-start: 0;
display: flex;
flex-direction: row;
justify-content: center;
width: fit-content;
flex: 0 1 auto;
}
// .flex-nav > li.top-brick:first-child .navmask{
// background-color: var(--brick-color-sets-normal);
// }
// .flex-nav > li.top-brick:first-child:hover .navmask{
// background-color: var(--brick-color-sets-highlight);
// }
// .flex-nav > li:nth-child(2) .navmask{
// background-color: var(--brick-color-green);
// }
// .flex-nav > li:nth-child(2):hover .navmask{
// background-color: var(--brick-color-green);
// }
// .flex-nav > li:nth-child(3) .navmask{
// background-color: var(--brick-color-blue);
// }
// .flex-nav > li:nth-child(4) .navmask{
// background-color:var(--brick-color-purple);
// }
// .flex-nav > li:nth-child(5) .navmask{
// background-color:var(--brick-color-lightpurple);
// }
.flex-nav-sub-nav{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
align-items: flex-start;
list-style: none;
padding-inline-start: 0;
}
.flex-nav-sub-nav-owner {
position: absolute;
list-style: none;
// display: none;
left: 85px;
top: 20px;
}
li {
padding: 0;
margin: 0;
flex: 1 0 auto;
position: relative;
}
ul.flex-nav > li{
top:0;
}
// ul.flex-nav > li a{
// position: relative;
// z-index: 500;
// }
ul.flex-nav > li.top-brick:first-child button {
position: relative;
z-index: 500;
}
ul.flex-nav > li > ul.flex-nav-sub-nav > li:nth-child(1) {
position: relative;
z-index: 400;
}
ul.flex-nav > li > ul.flex-nav-sub-nav > li:nth-child(2) {
position: relative;
z-index: 300;
}
ul.flex-nav > li > ul.flex-nav-sub-nav > li:nth-child(3) {
position: relative;
z-index: 200;
}
ul.flex-nav > li > ul.flex-nav-sub-nav > li > ul.flex-nav-sub-nav-owner li:first-child a {
position: relative;
z-index: 500;
}
/* ul.flex-nav > li a:hover + ul {
display: flex;
} */
.flex-nav ul.flex-nav-sub-nav {
/* display: initial; */
position: relative;
top: -4px;
height: 106px;
}
.flex-nav ul.flex-nav-sub-nav span:hover .button-label{
color:#333
}
.flex-nav ul.flex-nav-sub-nav li:nth-child(1){
top: 0px;
animation-timing-function: linear;
animation-name: move-brick1-up;
animation-duration: .3s;
animation-fill-mode: forwards;
.flex-nav-sub-nav-owner {
display: initial;
}
}
/*
#sets .flex-nav ul.flex-nav-sub-nav li:nth-child(1) {
.navmask{
// background-color: var(--brick-color-red);
}
}
#sets+ul.flex-nav-sub-nav li:nth-child(1) .flex-nav-sub-nav-owner {
position: fixed;
left: 92px;
top: 126px;
}
#sets + ul.flex-nav-sub-nav li:nth-child(1):hover{
& .flex-nav-sub-nav-owner {
position: fixed;
left: 92px;
top: 126px;
display: block;
}
// & .navmask {
// background-color:rgb(250, 135, 135);
// }
}
element.style {
position: fixed;
left: 93px;
top: 126px;
}
*/
// #sets + ul.flex-nav-sub-nav li:nth-child(1){
// .flex-nav-sub-nav-owner{
// position: fixed;
// left: 105px;
// top: 89px;
// &:hover{
// .navmask{
// // background-color:rgb(250, 135, 135);
// }
// }
// }
// }
// #sets + ul.flex-nav-sub-nav li:nth-child(1):hover{
// .flex-nav-sub-nav-owner{
// display: block;
// .navmask{
// // background-color: var(--brick-color-red);
// }
// }
// .navmask{
// // background-color:rgb(250, 135, 135);
// }
// }
// #parts .flex-nav ul.flex-nav-sub-nav li:nth-child(1) .navmask{
// background-color: var(--brick-color-green);
// }
// #parts + ul.flex-nav-sub-nav li:nth-child(1):hover .navmask{
// background-color:yellowgreen;
// }
// #colours .flex-nav ul.flex-nav-sub-nav li:nth-child(1) .navmask{
// background-color: var(--brick-color-blue);
// }
// #colours + ul.flex-nav-sub-nav li:nth-child(1):hover .navmask{
// background-color:lightskyblue;
// }
// #minifigs .flex-nav ul.flex-nav-sub-nav li:nth-child(1) .navmask{
// background-color: var(--brick-color-purple);
// }
// #minifigs + ul.flex-nav-sub-nav li:nth-child(1):hover .navmask{
// background-color: var(--brick-color-lightpurple);
// }
/* #minifigs + ul.flex-nav-sub-nav li:nth-child(1):hover .navmask .button-label{
color: #333;
} */
@keyframes move-brick1-up {
from {top:0px}
to {top:-20px}
}
// .flex-nav ul.flex-nav-sub-nav li:nth-child(1) a{
// position: relative;
// z-index: 400;
// }
.flex-nav ul.flex-nav-sub-nav li:nth-child(2){
top: 0px;
animation-timing-function: linear;
animation-name: move-brick2-up;
animation-duration: .3s;
animation-fill-mode: forwards;
.flex-nav-sub-nav-owner{
display: none;
}
}
// #sets .flex-nav ul.flex-nav-sub-nav li:nth-child(2){
// .navmask{
// background-color: var(--brick-color-red);
// }
// }
#sets + ul.flex-nav-sub-nav li:nth-child(2):hover{
.flex-nav-sub-nav-owner{
top: 162px;
left: 92px;
display: block;
// .navmask{
// background-color: var(--brick-color-red);
// }
}
// .navmask{
// background-color:rgb(250, 135, 135);
// }
}
#parts .flex-nav ul.flex-nav-sub-nav li:nth-child(2) {
.navmask{
background-color: var(--brick-color-green);
}
}
#parts + ul.flex-nav-sub-nav li:nth-child(2):hover {
.flex-nav-sub-nav-owner{
top: 162px;
left: 218px;
display: block;
.navmask{
background-color: var(--brick-color-green);
}
}
.navmask{
background-color:yellowgreen;
}
}
#colours .flex-nav ul.flex-nav-sub-nav li:nth-child(2) .navmask{
background-color: var(--brick-color-blue);
}
#colours + ul.flex-nav-sub-nav li:nth-child(2):hover .navmask{
background-color:lightskyblue;
}
#minifigs .flex-nav ul.flex-nav-sub-nav li:nth-child(2) .navmask{
background-color: var(--brick-color-purple);
}
#minifigs + ul.flex-nav-sub-nav li:nth-child(2):hover .navmask{
background-color:var(--brick-color-minifigs-highlight);
}
@keyframes move-brick2-up {
from {top:0px}
to {top: -44px;}
}
// .flex-nav ul.flex-nav-sub-nav li:nth-child(2) a{
// position: relative;
// z-index: 300;
// }
.flex-nav ul.flex-nav-sub-nav li:nth-child(3){
top: 0px;
animation-timing-function: linear;
animation-name: move-brick3-up;
animation-duration: .3s;
animation-fill-mode: forwards;
}
#sets .flex-nav ul.flex-nav-sub-nav li:nth-child(3) .navmask{
// background-color: var(--brick-color-red);
}
#sets + ul.flex-nav-sub-nav li:nth-child(3):hover .navmask{
// background-color:rgb(250, 135, 135);;
}
#parts .flex-nav ul.flex-nav-sub-nav li:nth-child(3) .navmask{
background-color: var(--brick-color-green);
}
#parts + ul.flex-nav-sub-nav li:nth-child(3):hover .navmask{
background-color:yellowgreen;
}
#colours .flex-nav ul.flex-nav-sub-nav li:nth-child(3) .navmask{
background-color: var(--brick-color-blue);
}
#colours + ul.flex-nav-sub-nav li:nth-child(3):hover .navmask{
background-color:lightskyblue;
}
#minifigs .flex-nav ul.flex-nav-sub-nav li:nth-child(3) .navmask{
background-color: var(--brick-color-purple);
}
#minifigs + ul.flex-nav-sub-nav li:nth-child(3):hover .navmask{
background-color:var(--brick-color-minifigs-highlight);
}
@keyframes move-brick3-up {
from {top:0px}
to {top:-67px}
}
// .flex-nav ul.flex-nav-sub-nav li:nth-child(3) a{
// position: relative;
// z-index: 200;
// }
.flex-nav li a img{
width: 125px;height: 51px;;padding: 0;margin: 0;
}