bachir/grav-lecampus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix menu

Browse Source
This commit is contained in:
Kevin Tessier
2019-08-31 14:13:18 +02:00
parent c9a0c7c055
commit 45ba71266b
5 changed files with 126 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
user/themes/lecampus/css-compiled/theme.css
View File

File diff suppressed because one or more lines are too long

2
user/themes/lecampus/css-compiled/theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

60
user/themes/lecampus/scss/theme/_header.scss
View File

@@ -19,66 +19,6 @@ header{
margin: auto;
}
}
&.dropmenu{
a{
padding: 10px;
}
& > ul{
@include inlineflex();
flex-wrap: nowrap;
& > li{
text-align: center;
max-width: 241px;
&>a{
white-space: nowrap;
line-height: 6rem;
border-top: 1px solid $light-blue;
border-bottom: 3px solid $green;
}
padding: 0 20px;
& > ul{
display: none;
margin-top: -1.5rem;
li{
background-color: white;
text-align: center;
a{
display: block;
padding: 10px;
position: relative;
&:before{
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: $green;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
}
}
}
&:hover{
& > ul{
display: block;
li:hover{
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
}
}
}
}
}
.reso{
@include inlineflex;
flex-wrap: nowrap;

71
user/themes/lecampus/scss/theme/_menu.scss
View File

@@ -0,0 +1,71 @@
header{
nav{
&.dropmenu{
a{
padding: 10px;
}
& > ul{
@include inlineflex();
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
& > li{
text-align: center;
position: relative;
margin: 0 20px;
&>a{
border-top: 1px solid $light-blue;
border-bottom: 3px solid $green;
}
& > ul{
display: none;
width: 100%;
position: absolute;
margin-top: 12px;
z-index: 0;
li{
background-color: white;
a{
display: block;
padding: 10px;
position: relative;
&:before{
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: $green;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
}
}
}
&:hover{
& > ul{
display: block;
li:hover{
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
}
}
}
}
}
}
}

265
user/themes/lecampus/scss/theme/_mobile.scss
View File

@@ -27,11 +27,19 @@
width: auto!important;
height: auto;
&>ul{
-webkit-box-orient: vertical!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
&>li{
text-align: left;
padding: 0 20px;
&>ul{
margin: auto;
position: relative;
&>li{
text-align: left;
margin-left: 10px;
@@ -248,8 +256,9 @@
#item{
.content{
// width: 80%!important;
.icones{
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
}
}
@@ -260,6 +269,8 @@
width: 300px!important;
height: 110px!important;
a{
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
}
p:nth-of-type(2){
@@ -285,230 +296,6 @@
}
@media screen and (max-width: 960px) {
// header nav{
// position: relative;
// width: 90%;
// .dropmenu{
// background: white;
// display: none;
// position: absolute;
// left: -6%;
// top: 100px;
// width: auto!important;
// height: auto;
// &>ul{
// flex-direction: column!important;
// &>li{
// text-align: left;
// &>ul{
// margin: auto;
// &>li{
// text-align: left;
// margin-left: 10px;
// a{
// font-family: $Regular;
// }
// }
// }
// &> a{
// border: none;
// line-height: 2rem;
// }
// }
// }
// &.active{
// display: block;
//
// }
// }
// .logo{
// margin: auto;
// }
// .navTrigger {
// cursor: pointer;
// width: 30px;
// height: 25px;
// margin: auto 0;
// left: 0;
// top: 0;
// bottom: 0;
// }
// .navTrigger i {
// background-color: $light-blue;
// border-radius: 2px;
// content: '';
// display: block;
// width: 100%;
// height: 4px;
// }
// .navTrigger i:nth-child(1) {
// -webkit-animation: outT 0.8s backwards;
// animation: outT 0.8s backwards;
// -webkit-animation-direction: reverse;
// animation-direction: reverse;
// }
// .navTrigger i:nth-child(2) {
// margin: 5px 0;
// -webkit-animation: outM 0.8s backwards;
// animation: outM 0.8s backwards;
// -webkit-animation-direction: reverse;
// animation-direction: reverse;
// }
// .navTrigger i:nth-child(3) {
// -webkit-animation: outBtm 0.8s backwards;
// animation: outBtm 0.8s backwards;
// -webkit-animation-direction: reverse;
// animation-direction: reverse;
// }
// .navTrigger.active i:nth-child(1) {
// -webkit-animation: inT 0.8s forwards;
// animation: inT 0.8s forwards;
// }
// .navTrigger.active i:nth-child(2) {
// -webkit-animation: inM 0.8s forwards;
// animation: inM 0.8s forwards;
// }
// .navTrigger.active i:nth-child(3) {
// -webkit-animation: inBtm 0.8s forwards;
// animation: inBtm 0.8s forwards;
// }
// @-webkit-keyframes inM {
// 50% {
// -webkit-transform: rotate(0deg);
// }
// 100% {
// -webkit-transform: rotate(45deg);
// }
// }
// @keyframes inM {
// 50% {
// -webkit-transform: rotate(0deg);
// transform: rotate(0deg);
// }
// 100% {
// -webkit-transform: rotate(45deg);
// transform: rotate(45deg);
// }
// }
// @-webkit-keyframes outM {
// 50% {
// -webkit-transform: rotate(0deg);
// }
// 100% {
// -webkit-transform: rotate(45deg);
// }
// }
// @keyframes outM {
// 50% {
// -webkit-transform: rotate(0deg);
// transform: rotate(0deg);
// }
// 100% {
// -webkit-transform: rotate(45deg);
// transform: rotate(45deg);
// }
// }
// @-webkit-keyframes inT {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(9px) rotate(135deg);
// }
// }
// @keyframes inT {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(9px) rotate(0deg);
// transform: translateY(9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(9px) rotate(135deg);
// transform: translateY(9px) rotate(135deg);
// }
// }
// @-webkit-keyframes outT {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(9px) rotate(135deg);
// }
// }
// @keyframes outT {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(9px) rotate(0deg);
// transform: translateY(9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(9px) rotate(135deg);
// transform: translateY(9px) rotate(135deg);
// }
// }
// @-webkit-keyframes inBtm {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(-9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(-9px) rotate(135deg);
// }
// }
// @keyframes inBtm {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(-9px) rotate(0deg);
// transform: translateY(-9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(-9px) rotate(135deg);
// transform: translateY(-9px) rotate(135deg);
// }
// }
// @-webkit-keyframes outBtm {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(-9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(-9px) rotate(135deg);
// }
// }
// @keyframes outBtm {
// 0% {
// -webkit-transform: translateY(0px) rotate(0deg);
// transform: translateY(0px) rotate(0deg);
// }
// 50% {
// -webkit-transform: translateY(-9px) rotate(0deg);
// transform: translateY(-9px) rotate(0deg);
// }
// 100% {
// -webkit-transform: translateY(-9px) rotate(135deg);
// transform: translateY(-9px) rotate(135deg);
// }
// }
// }
.gal{
.title_gal{
max-width: 80%!important;
@@ -572,11 +359,6 @@
height: auto!important;
min-height: 200px!important;
}
.demander-votre-devis{
// -webkit-transform: translate(0, -50%)!important;
// transform: translate(0, -50%)!important;
}
}
#devis.item .title, #devis.sublog .title{
@@ -599,7 +381,11 @@
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
.header-salles{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
img{
display: block!important;
@@ -618,6 +404,8 @@
width: 300px!important;
height: 110px!important;
a{
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
}
p:nth-of-type(2){
@@ -632,6 +420,8 @@
width: 300px!important;
height: 110px!important;
a{
display: -webkit-inline-box!important;
display: -ms-inline-flexbox!important;
display: inline-flex!important;
}
p:nth-of-type(2){
@@ -665,8 +455,6 @@
content: '';
background-image: url(/user/themes/lecampus/images/Trame-bleu2.svg);
background-repeat: repeat;
// background-position: center;
// background-size: cover;
position: absolute;
top: 0;
margin-left: -27vw;
@@ -789,6 +577,7 @@
}
}
.demander-votre-devis{
-webkit-transform: translate(0%,-120%)!important;
transform: translate(0%,-120%)!important;
}
}
@@ -798,6 +587,9 @@
width: 280px!important;
padding: 0!important;
#mc_embed_signup_scroll{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
input{
width: 280px!important;
@@ -823,6 +615,9 @@
}
}
#footer .block{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
p{
margin-bottom: 10px;
@@ -875,10 +670,16 @@
width: 100%!important;
}
.start:not(#form) .body-wrapper .event .card-content{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
.reso{
width: 100%!important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.txt{