loader ajax
This commit is contained in:
@@ -115,3 +115,31 @@ $file-italic: "playfairdisplay-regularitalic";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$moche: "Moche-Regular";
|
||||
$family-regular2: "moche";
|
||||
$file-regular2: "Moche-Regular";
|
||||
|
||||
@mixin font-face($moche, $file-regular2, $family-regular2, $category:"") {
|
||||
$filepath: "../fonts/" + $family-regular2 + "/" + $file-regular2;
|
||||
@font-face {
|
||||
font-family: "#{$moche}";
|
||||
src: url($filepath + ".eot");
|
||||
src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
|
||||
url($filepath + ".woff") format('woff'),
|
||||
url($filepath + ".ttf") format('truetype'),
|
||||
url($filepath + ".svg#" + $moche + "") format('svg');
|
||||
}
|
||||
|
||||
%#{$moche} {
|
||||
font: {
|
||||
@if $category != "" {
|
||||
family: "#{$moche}", #{$category};
|
||||
}
|
||||
@else {
|
||||
family: "#{$moche}";
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
@include font-face($avara, $file-bold-italic, $family-bold-italic, $category);//2
|
||||
@include font-face($playfair, $file-italic, $family-italic, $category);//2
|
||||
|
||||
@include font-face($moche, $file-regular2, $family-regular2, $category);//2
|
||||
|
||||
// font-size
|
||||
$txt-figli: 2.5rem;
|
||||
|
||||
@@ -14,6 +16,7 @@ $margI: 1rem;
|
||||
$Wi: 80%;
|
||||
|
||||
$Wi50: calc(( 100% / 2 ) - (#{$margI} / 2));
|
||||
$Wi80: calc(( 100% / 1.5 ) - (#{$margI} / 2));
|
||||
$Wi33: calc(( 100% / 3 ) - (#{$margI} / 3));
|
||||
|
||||
// mobile
|
||||
@@ -25,7 +28,6 @@ $Wi-m: calc( 100% - 0.5rem);
|
||||
$Wi80-m: 80%;
|
||||
$Wi33-m: calc(( 100% / 3 ) - 0.5rem);
|
||||
|
||||
|
||||
// tablette
|
||||
$txt-figli-t: 2.5rem;
|
||||
|
||||
@@ -33,6 +35,6 @@ $txt-figli-t: 2.5rem;
|
||||
$Flhome-t: 3rem;
|
||||
|
||||
// color
|
||||
$color_publique: lightyellow;
|
||||
$color_publique: #fef86f;
|
||||
$color_sociale: lightgreen;
|
||||
$color_culturelle: lightblue;
|
||||
$color_culturelle: #82f8ee;
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
@import 'theme/animation';
|
||||
@import 'theme/header';
|
||||
@import 'theme/start';
|
||||
@import 'theme/footer';
|
||||
@import 'theme/sidebar';
|
||||
@import 'theme/blog';
|
||||
@import 'theme/item';
|
||||
|
||||
@@ -36,6 +36,38 @@ $animate: all 0.2s ease-in-out;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
#icone_list{
|
||||
transition: 1s 0.5s margin-left,0.8s 0.3s opacity;
|
||||
.hamburger{
|
||||
&.hamburger--slider{
|
||||
.hamburger-inner{
|
||||
transform: translate3d(0,5px,0) rotate(0deg);
|
||||
transition: 0s 0.2s transform;
|
||||
&:after{
|
||||
transform: translate3d(0,-10px,0) rotate(0deg);
|
||||
transition: 0.2s 0.2s transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.open{
|
||||
#icone_list{
|
||||
transition: 0.5s margin-left, 0.5s opacity;
|
||||
.hamburger{
|
||||
&.hamburger--slider{
|
||||
.hamburger-inner{
|
||||
transform: translate3d(0,5px,0) rotate(45deg);
|
||||
transition: 0.8s 0.2s transform;
|
||||
&:after{
|
||||
transform: translate3d(0,-10px,0) rotate(90deg);
|
||||
transition: 1s 0.2s transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -44,8 +76,6 @@ $animate: all 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: $color_culturelle;
|
||||
border-radius: 500px;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
transition: height .2s, width .2s;
|
||||
@@ -55,12 +85,17 @@ $animate: all 0.2s ease-in-out;
|
||||
transition: height .5s, width .5s;
|
||||
}
|
||||
&.publique{
|
||||
background: $color_publique;
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/forme2.svg") center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
&.sociale{
|
||||
background: $color_sociale;
|
||||
border-radius: 100px;
|
||||
}
|
||||
&.culturelle{
|
||||
background: $color_culturelle;
|
||||
background:
|
||||
url("/user/themes/figureslibres/images/forme3.svg") center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,8 +10,21 @@ body.sticky-footer {
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
color: #acb3c2;
|
||||
padding: 1rem $horiz-padding 0;
|
||||
text-align: center;
|
||||
}
|
||||
.home{
|
||||
footer{
|
||||
color: #acb3c2;
|
||||
p{
|
||||
font-size: 1rem!important;
|
||||
line-height: 1rem!important;
|
||||
display: inline-flex;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
a{
|
||||
img{
|
||||
width: 20px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0 0 0 $marg;
|
||||
padding: $marg 0;
|
||||
width: calc( #{$Wi} - #{$marg} );
|
||||
border-bottom: 1px solid black;
|
||||
.home{
|
||||
header{
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,80 @@
|
||||
.sidebar-right{
|
||||
position: fixed;
|
||||
width: 15%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
right: calc( -20% + 0.5rem);
|
||||
top: 0;
|
||||
display: inline-flex;
|
||||
transition: 0.3s right ease;
|
||||
#icone_list{
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.list-projets{
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.container{
|
||||
margin: auto;
|
||||
ul{
|
||||
&:nth-child(1){
|
||||
margin-top: 0;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
span.cat{
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
font-weight: bold;
|
||||
padding-left: 23px;
|
||||
}
|
||||
margin: $marg $marg 0px 0;
|
||||
text-align: right;
|
||||
li{
|
||||
&:hover{
|
||||
a{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: grey;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
margin-top: -6px;
|
||||
position: relative;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
min-width: 10px;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
&#culturelle{
|
||||
&.culturelle{
|
||||
&::before{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
}
|
||||
&#sociale{
|
||||
&.sociale{
|
||||
&::before{
|
||||
background: $color_sociale;
|
||||
background: $color_sociale;
|
||||
}
|
||||
}
|
||||
&#publique{
|
||||
&.publique{
|
||||
&::before{
|
||||
background: $color_publique;
|
||||
background: $color_publique;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
&::before{
|
||||
min-width: 100%;
|
||||
transition: 0.6s min-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
color: black;
|
||||
display: block;
|
||||
padding-left: 1rem;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
&.active{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-active{
|
||||
right: 0;
|
||||
transition: 0.3s right ease;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,28 +2,95 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, header{
|
||||
background: #f9f9f9fe;
|
||||
.loader{
|
||||
display: none;
|
||||
background-image: url('/user/themes/figureslibres/images/ajax-loader.gif');
|
||||
background-size: 10px 10px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.card{
|
||||
.loader{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
z-index: 999;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html, body{
|
||||
background: #f9f9f9fe;
|
||||
}
|
||||
img.lazy{
|
||||
display: block;
|
||||
}
|
||||
body{
|
||||
#start{
|
||||
width: $Wi50;
|
||||
width: $Wi80;
|
||||
margin: $marg auto auto $marg;
|
||||
#text_figli{
|
||||
p {
|
||||
a{
|
||||
// position: relative;
|
||||
#icone_list{
|
||||
opacity: 0;
|
||||
margin-left: -30px;
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.hamburger{
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
.hamburger-box{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.marg{
|
||||
margin-right: $marg;
|
||||
}
|
||||
&.open{
|
||||
#icone_list{
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 0px;
|
||||
opacity: 1;
|
||||
transition: 0.5s margin-left, 0.5s opacity;
|
||||
.hamburger{
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
&.hamburger--slider{
|
||||
.hamburger-inner{
|
||||
transform: translate3d(0,5px,0) rotate(45deg);
|
||||
transition: 0.8s 0.2s transform;
|
||||
&:after{
|
||||
transform: translate3d(0,-10px,0) rotate(90deg);
|
||||
transition: 1s 0.2s transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hamburger-box{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#item_list{
|
||||
width: 80vw;
|
||||
margin-top: 0.5rem;
|
||||
position: relative;
|
||||
.card{
|
||||
width: calc((100% / 5) - ( #{$marg} * 2) );
|
||||
min-width: 250px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
@@ -84,6 +151,7 @@ body{
|
||||
padding: 2rem;
|
||||
margin-top: $marg;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
.content-title{
|
||||
margin: 0 auto 0 auto;
|
||||
display: flex;
|
||||
@@ -112,6 +180,12 @@ body{
|
||||
&.culturelle{
|
||||
background: $color_culturelle;
|
||||
}
|
||||
#icone_list{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.publique{
|
||||
@@ -141,6 +215,17 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
&.commanditaires{
|
||||
columns: 4 150px;
|
||||
-webkit-column-gap: 2em;
|
||||
-moz-column-gap: 2em;
|
||||
column-gap: 2em;
|
||||
display: block;
|
||||
p{
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -150,3 +235,35 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#icone_list{
|
||||
.hamburger{
|
||||
padding: 0.8rem;
|
||||
.hamburger-box{
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
.hamburger-inner{
|
||||
height: 2px;
|
||||
width: 18px;
|
||||
&::before{
|
||||
width: 15px;
|
||||
height: inherit;
|
||||
top: 5px;
|
||||
}
|
||||
&::after{
|
||||
top: 10px;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hamburger--slider.is-active{
|
||||
.hamburger-inner{
|
||||
transform: translate3d(0, 5px, 0) rotate(45deg);
|
||||
&::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,8 +30,6 @@ header{
|
||||
}
|
||||
a{
|
||||
position: relative;
|
||||
&:nth-child(1){
|
||||
}
|
||||
&#publique{
|
||||
font-family: $playfair;
|
||||
}
|
||||
@@ -41,6 +39,9 @@ header{
|
||||
&#culturelle{
|
||||
font-family: $avara;
|
||||
}
|
||||
&#commanditaires{
|
||||
font-family: $moche;
|
||||
}
|
||||
}
|
||||
#item{
|
||||
.e-content{
|
||||
@@ -50,6 +51,15 @@ header{
|
||||
}
|
||||
}
|
||||
}
|
||||
#item_list{
|
||||
&.commanditaires{
|
||||
flex-direction: column;
|
||||
.card-title{
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,8 +116,8 @@ a.culturelle, span.culturelle{
|
||||
|
||||
.sidebar-right{
|
||||
ul, a{
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.9rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user