<button id="minifigs" class=" minifigs" onclick="helloWorld()">
<span class="buttonmask">
<img src="../../images/bricknav-thick-studs.png" alt="lego brick - {finder_pagename}s find">
<span class="button-label">Minifigs</span>
</span>
</button>
<button id="{{unique_id}}" class="{{variant_class}} {{btn_class}}" onclick="{{{onClick}}}">
<span class="buttonmask">
<img src="{{path '/images/bricknav-thick-studs.png'}}" alt="lego brick - {finder_pagename}s find">
<span class="button-label">{{btn_label}}</span>
</span>
</button>
{
"variant_name": "Minifigs",
"btn_class": "minifigs",
"btn_label": "Minifigs",
"title": "Minifigs",
"unique_id": "minifigs",
"onClick": "helloWorld()",
"variant_class": "",
"more_info": ""
}
Button as <button>
Buttons are organized into 2 sizes:
Buttons must be assigned a colour based on the location that will be assigned. They are:
If new navigaion items are created, a color must be assigned to it and have the color applied to the button.
button{
border: none;
background: transparent;
width: 101px;
cursor:pointer;
margin: 0;
padding: 0;
}
button .buttonmask img{
width: 99px;
height:40px;
}
.button-label{
font-family: Livvic;
position: absolute;
top: 12px;
z-index: 10;
left: 16px;
font-size: 1.2rem;
color: var(--text-color-common-light);
// text-shadow: -1px -1px 3px #333;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-weight: 600;
}
.navmask, .buttonmask, .navmask-flyout {
-webkit-mask-image: url( '../images/bricknav-thick-studs-mask.png');
mask-image: url('../images/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: fit-content;
position: relative;
display: block;
height: 55px;
}
span.navmask-flyout {
width: fit-content;
position: relative;
display: block;
left: 0px;
padding: 0;
margin: 0;
height: 55px;
top: 1px;
}
.button-holder {
list-style: none;
padding-inline-start: 0;
display: flex;
flex-direction: row;
justify-content: center;
width: fit-content;
}
button.topNav {
width: fit-content;
.buttonmask{
img {
width: 125px;
height: 51px;
}
.button-label {
top: 18px;
left: 25px;
}
}
}
@include buttonColors('sets');
@include buttonColors('parts');
@include buttonColors('colours');
@include buttonColors('minifigs');
function helloWorld(){
alert('Hello World!');
}