185 lines
3.6 KiB
SCSS
Executable File
185 lines
3.6 KiB
SCSS
Executable File
/* ------------------------------- */
|
|
/* Remove default bullets */
|
|
/* ------------------------------- */
|
|
ul, #myArbo {
|
|
list-style-type: none;
|
|
width:100%;
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
/* ------------------------------- */
|
|
/* Remove margins and padding from the parent ul */
|
|
/* ------------------------------- */
|
|
#myArbo {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
width:100%;
|
|
color:orange;
|
|
font-size:1rem;
|
|
}
|
|
/* #myArbo > li{ */
|
|
/* border-bottom:1px solid lightgrey;padding-bottom:10px; */
|
|
/* } */
|
|
|
|
/* ------------------------------- */
|
|
/* Style the caret/arrow */
|
|
/* ------------------------------- */
|
|
.caret {
|
|
display: inline;
|
|
width:250px;
|
|
/*Prevent text selection*/
|
|
user-select: none;
|
|
padding:0px;
|
|
margin: 0px;
|
|
border-bottom:1px solid lightgrey;
|
|
text-align:left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ------------------------------- */
|
|
/* Create the caret/arrow with a unicode, and style it */
|
|
/* ------------------------------- */
|
|
.caret::before {
|
|
content: "\25B6";
|
|
color:#E3680C;
|
|
display: inline-block;
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
/* ------------------------------- */
|
|
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
|
|
/* ------------------------------- */
|
|
.caret-down::before { transform: rotate(90deg);margin:0px;
|
|
padding:0px;}
|
|
|
|
.famItem{
|
|
display: inline-block;
|
|
margin:7px;
|
|
padding-left:7px;
|
|
color:black;
|
|
font-weight:bold;
|
|
font-size:1.2rem;
|
|
font-family:merienda,cursive;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.imgFamTV{
|
|
top:10px;
|
|
right:-2px;
|
|
margin:0px;
|
|
margin-left:10px;
|
|
right:0px;
|
|
width:50px;
|
|
height:50px;
|
|
padding:1px;
|
|
}
|
|
|
|
/* ------------------------------- */
|
|
/* Categories
|
|
/* ------------------------------- */
|
|
.puceCategorie {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
/*Prevent text selection*/
|
|
user-select: none;
|
|
padding:0px;
|
|
padding-left:3px;
|
|
margin: 0px;
|
|
margin-left:5%;
|
|
border-bottom:1px solid lightgrey;
|
|
vertical-align:middle;
|
|
text-align:left;
|
|
}
|
|
|
|
.catItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
color:black;
|
|
font-size:1.1rem;
|
|
}
|
|
|
|
.imgCatTV{
|
|
display:inline-block;
|
|
position:relative;
|
|
height:35px;
|
|
height:35px;
|
|
top:5px;
|
|
margin:0px;
|
|
padding:0px;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
/* Create the caret/arrow with a unicode, and style it */
|
|
.puceCategorie::before {
|
|
content: "\25B6";
|
|
color:grey;
|
|
display: inline-block;
|
|
margin:0px;
|
|
padding:0px;
|
|
margin-right: 6px;
|
|
|
|
}
|
|
|
|
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
|
|
.puceCategorie-down::before { transform: rotate(90deg);}
|
|
|
|
/* ------------------------------- */
|
|
/* Produits
|
|
/* ------------------------------- */
|
|
/* Create the caret/arrow with a unicode, and style it */
|
|
.pucePrd {
|
|
display: inline-block;
|
|
position:relative;
|
|
margin:10px;
|
|
top:17px;
|
|
left:0px;
|
|
padding:4px;
|
|
white-space: nowrap;
|
|
vertical-align:middle;
|
|
color:green;
|
|
border:1px solid lightgrey;
|
|
padding-bottom:10px;
|
|
/* border-bottom:1px solid lightgrey; */
|
|
padding-bottom:10px;
|
|
min-width:20%;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.prdItem{
|
|
vertical-align: middle;
|
|
padding-top:10px;
|
|
margin:auto;
|
|
font-size:0.9rem;
|
|
color:green;
|
|
}
|
|
|
|
.roundedImageTV{
|
|
border-radius:50%;
|
|
text-align:center;
|
|
padding-bottom:10px;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
height:20px;
|
|
margin:2px;
|
|
width:20px;
|
|
display:inline-block;
|
|
box-shadow: 5px 5px lightgrey;
|
|
}
|
|
|
|
.prdImgTV{
|
|
display:inline-block;
|
|
float:left;
|
|
width:10px;
|
|
height:10px;
|
|
margin:3px;
|
|
|
|
}
|
|
/* Hide the nested list */
|
|
.nested {display: none;margin:0px;}
|
|
|
|
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
|
|
.active {display: inline-block;}
|
|
|