ajax
This commit is contained in:
@@ -1,193 +1,224 @@
|
||||
.mobile-container {
|
||||
position: absolute;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
top: 40%;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
svg, img {
|
||||
height: 42px;
|
||||
margin-top: .7rem;
|
||||
margin-left: 1.4rem;
|
||||
|
||||
path {
|
||||
fill: $light-color;
|
||||
@media screen and (max-width: 414px) {
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
font-size: $txt-figli-m;
|
||||
line-height: $Flhome-m;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger Menu
|
||||
.mobile-menu {
|
||||
|
||||
display: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
|
||||
.header-fixed & {
|
||||
position: fixed;
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-m!important;
|
||||
line-height: $Flhome-m!important;
|
||||
}
|
||||
}
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-m;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(md) {
|
||||
display: block;
|
||||
// mep
|
||||
header{
|
||||
width: calc( #{$Wi-m} - (#{$marg} * 2) );
|
||||
}
|
||||
|
||||
.button_container {
|
||||
position: absolute;
|
||||
top: 1.3rem;
|
||||
right: $horiz-padding;
|
||||
height: $mobile-button-height;
|
||||
width: $mobile-button-width;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
transition: opacity .25s ease, top 0.5s ease;
|
||||
|
||||
$bar-offset: $mobile-button-height / 3;
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
body{
|
||||
#start{
|
||||
width: calc( #{$Wi-m} - (#{$marg} * 2) );
|
||||
}
|
||||
|
||||
&.active {
|
||||
position: fixed;
|
||||
|
||||
.top {
|
||||
transform: translateY($bar-offset) translateX(0) rotate(45deg);
|
||||
background: $mobile-color-active;
|
||||
}
|
||||
.middle {
|
||||
opacity: 0;
|
||||
background: $mobile-color-active;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
transform: translateY(-($bar-offset)) translateX(0) rotate(-45deg);
|
||||
background: $mobile-color-active;
|
||||
&:not(.home){
|
||||
#start{
|
||||
margin-top: $Flhome;
|
||||
}
|
||||
}
|
||||
.sidebar-right{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
background: $mobile-color-main;
|
||||
border: none;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all .35s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
top: $bar-offset;
|
||||
#item_list{
|
||||
.card{
|
||||
width: calc( #{$Wi-m} );
|
||||
&:nth-child(odd){
|
||||
margin-right: 0;
|
||||
}
|
||||
.card-header{
|
||||
margin-bottom: $marg;
|
||||
& > * {
|
||||
margin-right: $marg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
top: $bar-offset * 2;
|
||||
.other_projets{
|
||||
margin-top: $margI;
|
||||
.card{
|
||||
width: $Wi-m;
|
||||
&:nth-child(-1n+3){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
background: #000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity .35s, visibility .35s, height .35s;
|
||||
|
||||
&.open {
|
||||
opacity: .95;
|
||||
visibility: visible;
|
||||
height: 100%;
|
||||
|
||||
@media screen and (max-width: 768px) and (orientation: portrait) {
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-t!important;
|
||||
line-height: $Flhome-t!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-menu {
|
||||
height: calc(100% - 90px);
|
||||
overflow-y: scroll;
|
||||
|
||||
& > .tree {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.treemenu {
|
||||
|
||||
&.treemenu-root {
|
||||
margin: 1rem;
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-t;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0 0 1px;
|
||||
padding: 5px 0;
|
||||
line-height: 1.2rem;
|
||||
|
||||
background: rgba($gray-color-dark,0.1);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-left: 1.2rem;
|
||||
font-size: 1rem;
|
||||
|
||||
&:hover, &:focus, &.active {
|
||||
color: $primary-color-light !important;
|
||||
text-decoration: none;
|
||||
body{
|
||||
&:not(.home){
|
||||
#start{
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
.toggler {
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1rem;
|
||||
padding-left: 5px;
|
||||
float: left;
|
||||
|
||||
&:before {
|
||||
display: inline-block; margin-right: 2pt;
|
||||
#item_list{
|
||||
.card{
|
||||
width: calc( #{$Wi-m} );
|
||||
&:nth-child(odd){
|
||||
margin-right: 0;
|
||||
}
|
||||
.card-header{
|
||||
margin-bottom: $marg;
|
||||
& > * {
|
||||
margin-right: $marg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.tree-empty > .toggler {
|
||||
opacity: 0.3; cursor: default;
|
||||
|
||||
&:before {
|
||||
content: "\2022";
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 812px) and (orientation: landscape) {
|
||||
// typographie
|
||||
header{
|
||||
a{
|
||||
font-size: $txt-figli-m;
|
||||
line-height: $Flhome-m;
|
||||
}
|
||||
}
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-m!important;
|
||||
line-height: $Flhome-m!important;
|
||||
}
|
||||
}
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-m;
|
||||
}
|
||||
}
|
||||
|
||||
li.tree-closed > .toggler:before {
|
||||
content: "+";
|
||||
// mep
|
||||
header{
|
||||
width: calc( #{$Wi-m} - (#{$marg} * 2) );
|
||||
}
|
||||
|
||||
li.tree-opened > .toggler:before {
|
||||
content: "\2212";
|
||||
body{
|
||||
#start{
|
||||
width: calc( #{$Wi-m} - (#{$marg} * 2) );
|
||||
}
|
||||
&:not(.home){
|
||||
#start{
|
||||
margin-top: $Flhome;
|
||||
}
|
||||
}
|
||||
.sidebar-right{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#item_list{
|
||||
.card{
|
||||
width: $Wi50;
|
||||
&:nth-child(odd){
|
||||
margin-right: $margI;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.other_projets{
|
||||
.card{
|
||||
width: $Wi33;
|
||||
&:nth-child(-1n+3){
|
||||
margin-right: $marg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-open {
|
||||
overflow-y: hidden;
|
||||
@media screen and (max-width: 910px) and (orientation: portrait) {
|
||||
header{
|
||||
a{
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-t!important;
|
||||
line-height: $Flhome-t!important;
|
||||
}
|
||||
}
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-t;
|
||||
}
|
||||
}
|
||||
body{
|
||||
&:not(.home){
|
||||
#start{
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 660px) {
|
||||
header{
|
||||
a{
|
||||
font-size: $txt-figli-m;
|
||||
line-height: $Flhome-m;
|
||||
}
|
||||
}
|
||||
.home{
|
||||
p{
|
||||
font-size: $txt-figli-m!important;
|
||||
line-height: $Flhome-m!important;
|
||||
}
|
||||
}
|
||||
.other_projets{
|
||||
h3{
|
||||
font-size: $txt-figli-m;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
&:not(.home){
|
||||
#start{
|
||||
margin-top: $Flhome;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user