4572 lines
101 KiB
SCSS
Executable File
4572 lines
101 KiB
SCSS
Executable File
|
|
@media screen and (max-width:814px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
/* border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;*/
|
|
top: 1rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:800px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:764px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
*{font-size:1rem;}
|
|
#devise{display:none;}
|
|
#header-container{ grid-template-columns: 10% 20% 20% 20% 25%; height:10px;}
|
|
#imgTitre{ margin-top:18px; height:100%; line-height:30px; }
|
|
#eCol2{ margin:auto; height:100%; }
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
|
|
#rechInput{padding:0;font-size:1rem; margin:auto;}
|
|
#container-usrSiteMsg{grid-column:1 / span 4;}
|
|
#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
|
|
.itemBarrePromo{width:50%;}
|
|
#messCom{font-size:1rem;}
|
|
#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
|
|
#spinnerPopup, .spinnerPopup{ top: 10px; width:80%; }
|
|
}
|
|
|
|
@media screen and (max-width:731px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
*{font-size:1rem;}
|
|
#devise{display:none;}
|
|
#header-container{ grid-template-columns: 10% 20% 20% 20% 25%; height:10px;}
|
|
#imgTitre{ margin-top:18px; height:100%; line-height:30px; }
|
|
#eCol2{ margin:auto; height:100%; }
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
|
|
#rechInput{padding:0;font-size:1rem; margin:auto;}
|
|
#container-usrSiteMsg{grid-column:1 / span 4;}
|
|
#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
|
|
.itemBarrePromo{width:50%;}
|
|
#messCom{font-size:1rem;}
|
|
#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
|
|
#spinnerPopup, .spinnerPopup{ top: 10px; width:80%; }
|
|
}
|
|
|
|
@media screen and (max-width:720px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
*{font-size:1rem;}
|
|
#devise{display:none;}
|
|
#header-container{ grid-template-columns: 10% 20% 20% 20% 25%; height:10px;}
|
|
#imgTitre{ margin-top:18px; height:100%; line-height:30px; }
|
|
#eCol2{ margin:auto; height:100%; }
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
|
|
#rechInput{padding:0;font-size:1rem; margin:auto;}
|
|
#container-usrSiteMsg{grid-column:1 / span 4;}
|
|
#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
|
|
.itemBarrePromo{width:50%;}
|
|
#messCom{font-size:1rem;}
|
|
#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
|
|
#spinnerPopup, .spinnerPopup{ top: 10px; width:80%; }
|
|
}
|
|
|
|
@media screen and (max-width:667px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
*{font-size:1rem;}
|
|
#devise{display:none;}
|
|
#header-container{ grid-template-columns: 10% 20% 20% 20% 25%; height:10px;}
|
|
#imgTitre{ margin-top:18px; height:100%; line-height:30px; }
|
|
#eCol2{ margin:auto; height:100%; }
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
|
|
#rechInput{padding:0;font-size:1rem; margin:auto;}
|
|
#container-usrSiteMsg{grid-column:1 / span 4;}
|
|
#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
|
|
.itemBarrePromo{width:50%;}
|
|
#messCom{font-size:1rem;}
|
|
#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
|
|
#spinnerPopup, .spinnerPopup{ top: 10px; width:80%; }
|
|
}
|
|
|
|
@media screen and (max-width:653px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#itemMaint{width:85%}
|
|
#btnAdminText{max-width:250px; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;}
|
|
#btnAdminText::after{color:white; content:"Administration";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;}
|
|
.pageConnexion{padding:0px; margin:0px;}
|
|
.libConnCell{grid-column:1 / span 2; text-align:center;}
|
|
.champsConn{width:95%;}
|
|
.libClientsCell{margin:1px; padding:1px;}
|
|
#tableCli{grid-column:1 / span 4;}
|
|
#syntheseLignes{grid-column:1 / span 2; }
|
|
#blocSynthese{grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;}
|
|
.blocItemPanier{ margin:auto; width:100%;}
|
|
#recapContainer{grid-column:1 / span 2;}
|
|
#etapesContainer{display:flex; flex-direction:column;}
|
|
#hiddenColonne{display:none; visibility: hidden; width:0px;}
|
|
.hiddenColonne{display:none; visibility: hidden; width:0px;}
|
|
.c64{grid-column:4;}
|
|
.c75{grid-column:5;}
|
|
#c64{grid-column:4;}
|
|
#c75{grid-column:5;}
|
|
#tableMesCdes{grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;}
|
|
#detailResponsiv{grid-column:1 / span 4;}
|
|
#pdpBarre{display:flex; flex-direction:column;}
|
|
#etapesContainer{display:flex; flex-direction:column;}
|
|
#pub-container{flex-direction: row;}
|
|
#page-container{grid-column:1 / span 4;}
|
|
#tablePages{grid-column:1 / span 4;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
#familles-container{ width:65%; height:170px;}
|
|
.grid1to2{grid-column: 1 / span 2;}
|
|
.tablePanier {display:flex;flex-direction:column;}
|
|
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;}
|
|
}
|
|
|
|
@media screen and (max-width:640px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#itemMaint{width:85%}
|
|
#btnAdminText{max-width:50%; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;}
|
|
#btnAdminText::after{color:white; content:"Administration";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;}
|
|
.pageConnexion{padding:0px; margin:0px;}
|
|
.libConnCell{grid-column:1 / span 2; text-align:center;}
|
|
.champsConn{width:95%;}
|
|
.libClientsCell{margin:1px; padding:1px;}
|
|
#tableCli{grid-column:1 / span 4;}
|
|
#syntheseLignes{grid-column:1 / span 2; }
|
|
#blocSynthese{grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;}
|
|
.blocItemPanier{ margin:auto; width:100%;}
|
|
#recapContainer{grid-column:1 / span 2;}
|
|
#etapesContainer{display:flex; flex-direction:column;}
|
|
#hiddenColonne{display:none; visibility: hidden; width:0px;}
|
|
.hiddenColonne{display:none; visibility: hidden; width:0px;}
|
|
.c64{grid-column:4;}
|
|
.c75{grid-column:5;}
|
|
#c64{grid-column:4;}
|
|
#c75{grid-column:5;}
|
|
#tableMesCdes{grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;}
|
|
#detailResponsiv{grid-column:1 / span 4;}
|
|
#pdpBarre{display:flex; flex-direction:column;}
|
|
#etapesContainer{display:flex; flex-direction:column;}
|
|
#pub-container{flex-direction: row;}
|
|
#page-container{grid-column:1 / span 4;}
|
|
#tablePages{grid-column:1 / span 4;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
#familles-container{ width:65%; height:170px;}
|
|
.grid1to2{grid-column: 1 / span 2;}
|
|
.tablePanier {display:flex;flex-direction:column;}
|
|
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;}
|
|
}
|
|
|
|
@media screen and (max-width:568px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
#syntheseLignes{grid-column:1 / span 2; }
|
|
.flexToColumn{display:flex; flex-direction:column;}
|
|
.flexToRow{display:flex; flex-direction:row; grid-row-gap:0px; }
|
|
.notInResponsive{display: none;}
|
|
.onlyInResponsive{display: block; margin: 1px;}
|
|
.champsCli,listeDeroulanteCli{width:100%; grid-column: 1 / span 2;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
#tableMesCdes{display:flex; flex-direction:column; grid-column-gap:0px;}
|
|
.w100{width:100%;}
|
|
.m0{margin:0px;}
|
|
.champsMesCdesCell{text-align:left;}
|
|
#detailCdeLignes{display:flex; flex-direction:column; width:100%;margin:auto;}
|
|
#familles-container{ width:55%; height:350px; }
|
|
#logo{width: 100%; top:55px; left: 1%;z-index:0;}
|
|
.msgInfos>div>span>img{width: 60%; }
|
|
}
|
|
|
|
@media screen and (max-width:540px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
#syntheseLignes{grid-column:1 / span 2; }
|
|
|
|
|
|
|
|
.champsCli,listeDeroulanteCli{width:100%; grid-column: 1 / span 2;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
#tableMesCdes{display:flex; flex-direction:column; grid-column-gap:0px;}
|
|
.w100{width:100%;}
|
|
.m0{margin:0px;}
|
|
.champsMesCdesCell{text-align:left;}
|
|
#detailCdeLignes{display:flex; flex-direction:column; width:100%;margin:auto;}
|
|
#familles-container{ width:55%; height:350px; }
|
|
#logo{width: 100%; top:55px; left: 1%;z-index:0;}
|
|
.msgInfos>div>span>img{width: 60%; }
|
|
}
|
|
|
|
@media screen and (max-width:414px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#tablePages{display:block;}
|
|
.menuDeroulantItem{display:block;width:100%;}
|
|
#gallerie{display:block; padding-bottom:0px; margin-bottom:0px;}
|
|
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;}
|
|
.libClientsCell,.libClients {text-align:left;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
.itemBarrePromo{width:80%;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
tablePanier{grid-column:1;}
|
|
champsPanierCell{width:100%}
|
|
#etapesContainer{display:flex; flex-direction:column;padding:20px;}
|
|
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
|
|
#familles-container{
|
|
width:47%;
|
|
height:550px;
|
|
text-align:center;
|
|
|
|
}
|
|
.familles-boite{
|
|
text-align:center;
|
|
margin-bottom:1px;
|
|
padding:0px;
|
|
|
|
}
|
|
.familles-libelle {
|
|
font-size:1rem;
|
|
}
|
|
.logo{width: 120%; }
|
|
}
|
|
|
|
@media screen and (max-width:411px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#tablePages{display:block;}
|
|
.menuDeroulantItem{display:block;width:100%;}
|
|
#gallerie{display:block; padding-bottom:0px; margin-bottom:0px;}
|
|
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;}
|
|
.libClientsCell,.libClients {text-align:left;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
.itemBarrePromo{width:80%;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
tablePanier{grid-column:1;}
|
|
champsPanierCell{width:100%}
|
|
#etapesContainer{display:flex; flex-direction:column;padding:20px;}
|
|
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
|
|
#familles-container{
|
|
width:47%;
|
|
height:550px;
|
|
text-align:center;
|
|
|
|
}
|
|
.familles-boite{
|
|
text-align:center;
|
|
margin-bottom:1px;
|
|
padding:0px;
|
|
|
|
}
|
|
.familles-libelle {
|
|
font-size:1rem;
|
|
}
|
|
.logo{width: 120%; }
|
|
}
|
|
|
|
@media screen and (max-width:375px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#tablePages{display:block;}
|
|
.menuDeroulantItem{display:block;width:100%;}
|
|
#gallerie{display:block; padding-bottom:0px; margin-bottom:0px;}
|
|
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;}
|
|
.libClientsCell,.libClients {text-align:left;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
.itemBarrePromo{width:80%;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
tablePanier{grid-column:1;}
|
|
champsPanierCell{width:100%}
|
|
#etapesContainer{display:flex; flex-direction:column;padding:20px;}
|
|
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
|
|
#familles-container{
|
|
width:47%;
|
|
height:550px;
|
|
text-align:center;
|
|
|
|
}
|
|
.familles-boite{
|
|
text-align:center;
|
|
margin-bottom:1px;
|
|
padding:0px;
|
|
|
|
}
|
|
.familles-libelle {
|
|
font-size:1rem;
|
|
}
|
|
.logo{width: 120%; }
|
|
}
|
|
|
|
@media screen and (max-width:360px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#tablePages{display:block;}
|
|
.menuDeroulantItem{display:block;width:100%;}
|
|
#gallerie{display:block; padding-bottom:0px; margin-bottom:0px;}
|
|
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;}
|
|
.libClientsCell,.libClients {text-align:left;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
.itemBarrePromo{width:80%;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
tablePanier{grid-column:1;}
|
|
champsPanierCell{width:100%}
|
|
#etapesContainer{display:flex; flex-direction:column;padding:20px;}
|
|
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
|
|
#familles-container{
|
|
width:47%;
|
|
height:550px;
|
|
text-align:center;
|
|
|
|
}
|
|
.familles-boite{
|
|
text-align:center;
|
|
margin-bottom:1px;
|
|
padding:0px;
|
|
|
|
}
|
|
.familles-libelle {
|
|
font-size:1rem;
|
|
}
|
|
.logo{width: 120%; }
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
}
|
|
|
|
@media screen and (max-width:320px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#tablePages{display:block;}
|
|
.menuDeroulantItem{display:block;width:100%;}
|
|
#gallerie{display:block; padding-bottom:0px; margin-bottom:0px;}
|
|
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;}
|
|
.libClientsCell,.libClients {text-align:left;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
.itemBarrePromo{width:80%;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
tablePanier{grid-column:1;}
|
|
champsPanierCell{width:100%}
|
|
#etapesContainer{display:flex; flex-direction:column;padding:20px;}
|
|
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
|
|
#familles-container{
|
|
width:47%;
|
|
height:550px;
|
|
text-align:center;
|
|
|
|
}
|
|
.familles-boite{
|
|
text-align:center;
|
|
margin-bottom:1px;
|
|
padding:0px;
|
|
|
|
}
|
|
.familles-libelle {
|
|
font-size:1rem;
|
|
}
|
|
.logo{width: 120%; }
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
}
|
|
|
|
@media screen and (max-width:250px) {
|
|
#site-container{width: 100%; margin:auto; }
|
|
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
|
|
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
|
|
.itemBarrePromo{width:50%; margin:auto;}
|
|
.zoneAcheter{display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; }
|
|
.tableCatalogue{width:100%; margin:auto;}
|
|
.boutons{margin:auto; width:auto;}
|
|
.msgKo{display:block;margin:auto;}
|
|
#panierConteneurItem{ display:flex;flex-direction:column}
|
|
#menuIndep-container{display:none; width:0px; height:0px;}
|
|
#menuD-container{
|
|
/* background:brown; */
|
|
position:relative;
|
|
align-self:start;
|
|
display:block;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
z-index:90;
|
|
top:3px;
|
|
left:5px;
|
|
height:40px;
|
|
width:40px;
|
|
padding:1px;
|
|
margin:1px;
|
|
position:fixed;
|
|
border-radius:5px;}
|
|
// #top-nav-toggle{text-align:left;}
|
|
#menuD-container> .top-nav-label {
|
|
position: relative;
|
|
right: 0;
|
|
top: 0px;
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
border-radius: 0.1875rem;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
|
|
text-align:center;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu {
|
|
display: block;
|
|
margin:auto;
|
|
position: absolute;
|
|
z-index: 99999;
|
|
background: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0.1875rem;
|
|
right: 0.1875rem;
|
|
top: 1.125rem;
|
|
// /*top: 0;*/
|
|
transition: 0.25s ease-in-out 0s;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before,
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #6495ED;
|
|
border-radius: 0.1875rem;
|
|
height: 0.25rem;
|
|
left: 0;
|
|
width: 100%;
|
|
transition-duration: 0.3s, 0.3s;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::before {
|
|
top: -0.6875rem;
|
|
transform-origin: top;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> .top-nav-label .open-close-menu::after {
|
|
bottom: -0.6875rem;
|
|
transform-origin: bottom;
|
|
margin:auto;
|
|
}
|
|
|
|
#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
|
|
background: none;
|
|
transition-delay: 0s, 0.3s;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
left: 0.125rem;
|
|
transition-delay: 0s, 0.3s;
|
|
/*background: pink;*/
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
|
|
top: 0px;
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
/*background: pink;*/
|
|
text-align:center;margin:0;vertical-align:middle;
|
|
}
|
|
|
|
#menuDeroulantBarre{
|
|
display: none;
|
|
}
|
|
|
|
#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
|
|
display: block;
|
|
}
|
|
#menuDeroulantBarre{
|
|
position:fixed;
|
|
padding:0px;
|
|
margin:auto;
|
|
margin-top:10px;
|
|
top:160px;
|
|
text-align:left;
|
|
z-index:2;
|
|
border-radius:3px;
|
|
height:99%;
|
|
width:99%;
|
|
/*background:grey;*/
|
|
|
|
}
|
|
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
|
|
left:1px;
|
|
text-align:left;
|
|
width:auto;
|
|
border-radius:3px;
|
|
padding:10px;
|
|
padding-bottom:0px;
|
|
clear:both;
|
|
padding-bottom:20px;
|
|
margin-bottom:20px;
|
|
width:150px;
|
|
}
|
|
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
text-align:left;*/
|
|
/*width:70%;*/
|
|
|
|
}
|
|
.textePpauxMenuDeroulant {
|
|
z-index:2;
|
|
text-align:left;
|
|
padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;
|
|
/*width:100%;*/
|
|
}
|
|
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
|
|
position:relative;
|
|
display:table;
|
|
left:130px;
|
|
top:-30px;
|
|
height:100%;
|
|
/*width:80%;*/
|
|
margin:auto;
|
|
z-index:3;
|
|
margin-left:20px;
|
|
border-radius:3px;
|
|
}
|
|
.sousMenuBarre {
|
|
height:100%;
|
|
width:100%;
|
|
margin:auto;
|
|
z-index:3;
|
|
left:130px;
|
|
border-radius:3px;
|
|
padding-bottom:0px;
|
|
margin-left:20px;
|
|
position:absolute;
|
|
}
|
|
.sousMenuItem{
|
|
height:100%;
|
|
padding:1px;
|
|
margin:1px;
|
|
/*border-radius:3px;*/
|
|
}
|
|
sousMenuItem:hover, .sousMenuItem:hover > * {
|
|
/*height:100%;
|
|
padding:1px;
|
|
margin:1px;*/
|
|
}
|
|
.familles-img {
|
|
display:none;
|
|
width:2px;
|
|
}
|
|
#menuIndep-container{
|
|
/*float:left;*/
|
|
/*display:flex; flex-direction:rows;*/
|
|
/* background:lightgreen; */
|
|
}
|
|
#familles-container{
|
|
background:white;
|
|
left:0px;
|
|
display: flex;
|
|
justify-content:space-around;
|
|
position:absolute;
|
|
flex-wrap: wrap;
|
|
width:75%;
|
|
height:150px;
|
|
}
|
|
.familles-boite{
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
margin:0px;
|
|
max-height:37px;
|
|
}
|
|
.familles-libelle {
|
|
/*width:100%;*/
|
|
white-space:break-spaces;
|
|
padding:0px;
|
|
}
|
|
#sousCat-container{
|
|
border-radius:3px;
|
|
}
|
|
.categories-boite, .categoriesItems, .categoriesImages {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
border-radius:3px;*/
|
|
}
|
|
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
|
|
/*padding:0px;
|
|
margin:0px;
|
|
left:90px;
|
|
border-radius:3px;*/
|
|
}
|
|
.categoriesImages {
|
|
text-align:right;
|
|
}
|
|
#rechBarre-container{
|
|
left : 10%;
|
|
grid-column:1 / span 4;
|
|
grid-column-gap:3px;
|
|
grid-row:2 / span 3;
|
|
margin:0;
|
|
margin:1px;
|
|
padding-top:7px;
|
|
padding-left:28px;
|
|
justify-self:center;
|
|
}
|
|
#rechItem{
|
|
margin:0px;
|
|
padding:0px;
|
|
padding-left:30px;
|
|
left:10%;
|
|
}
|
|
#rechInput{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
#tablePages{display:block;}
|
|
.menuDeroulantItem{display:block;width:100%;}
|
|
#gallerie{display:block; padding-bottom:0px; margin-bottom:0px;}
|
|
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;}
|
|
.libClientsCell,.libClients {text-align:left;}
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
.itemBarrePromo{width:80%;}
|
|
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
|
|
tablePanier{grid-column:1;}
|
|
champsPanierCell{width:100%}
|
|
#etapesContainer{display:flex; flex-direction:column;padding:20px;}
|
|
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
|
|
#familles-container{
|
|
width:47%;
|
|
height:550px;
|
|
text-align:center;
|
|
|
|
}
|
|
.familles-boite{
|
|
text-align:center;
|
|
margin-bottom:1px;
|
|
padding:0px;
|
|
|
|
}
|
|
.familles-libelle {
|
|
font-size:1rem;
|
|
}
|
|
.logo{width: 120%; }
|
|
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
|
|
.boutons{width:auto;}
|
|
}
|
|
|