kevin/lours.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

autoprefix

Browse Source
This commit is contained in:
kevin
2019-02-08 15:34:23 +01:00
parent bf69c0fe46
commit 3987fa5281
10 changed files with 378 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/le_style_de_lours_modif/css-compiled/theme.css
+9 -5
View File
File diff suppressed because one or more lines are too long
user/themes/le_style_de_lours_modif/scss/theme/_animation.scss
+77 -5
View File
@@ -1,11 +1,26 @@
@-webkit-keyframes rotateOpen{
0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes rotateOpen{ @keyframes rotateOpen{
0% {transform: rotate(-15deg);} 0% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
100% {transform: rotate(0deg);} 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@-webkit-keyframes rotateClose{
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
100% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
} }
@keyframes rotateClose{ @keyframes rotateClose{
0% { transform: rotate(0deg);} 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
100% {transform: rotate(-15deg);} 100% {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}
}
@-webkit-keyframes translateOpen{
0%{margin-top: 0px;}
100%{margin-top: -155px;}
} }
@keyframes translateOpen{ @keyframes translateOpen{
@@ -13,39 +28,84 @@
100%{margin-top: -155px;} 100%{margin-top: -155px;}
} }
@-webkit-keyframes translateClose{
0%{margin-top: -155px;}
100%{margin-top: 0px;}
}
@keyframes translateClose{ @keyframes translateClose{
0%{margin-top: -155px;} 0%{margin-top: -155px;}
100%{margin-top: 0px;} 100%{margin-top: 0px;}
} }
@-webkit-keyframes translateOpensvg{
0%{margin-top: 50px;}
100%{margin-top: 180px;}
}
@keyframes translateOpensvg{ @keyframes translateOpensvg{
0%{margin-top: 50px;} 0%{margin-top: 50px;}
100%{margin-top: 180px;} 100%{margin-top: 180px;}
} }
@-webkit-keyframes translateClosesvg{
0%{margin-top: 180px;}
100%{margin-top: 50px;}
}
@keyframes translateClosesvg{ @keyframes translateClosesvg{
0%{margin-top: 180px;} 0%{margin-top: 180px;}
100%{margin-top: 50px;} 100%{margin-top: 50px;}
} }
@keyframes visible{ @-webkit-keyframes visible{
0%{ 0%{
opacity: 0; opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px); transform: translateY(50px);
} }
100%{ 100%{
opacity: 1; opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px); transform: translateY(0px);
} }
} }
@keyframes visible{
0%{
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes hidden{
0%{
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
@keyframes hidden{ @keyframes hidden{
0%{ 0%{
opacity: 1; opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px); transform: translateY(0px);
} }
100%{ 100%{
opacity: 0; opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px); transform: translateY(50px);
} }
} }
@@ -53,30 +113,42 @@
.why_lsdo{ .why_lsdo{
&.open{ &.open{
h3{ h3{
-webkit-animation: rotateOpen 1s, translateOpen 1s;
animation: rotateOpen 1s, translateOpen 1s; animation: rotateOpen 1s, translateOpen 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
section{ section{
-webkit-animation: visible 1s;
animation: visible 1s; animation: visible 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
svg{ svg{
-webkit-animation: rotateOpen 1s, translateOpensvg 1s;
animation: rotateOpen 1s, translateOpensvg 1s; animation: rotateOpen 1s, translateOpensvg 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
} }
&.close{ &.close{
h3{ h3{
-webkit-animation: rotateClose 1s, translateClose 1s;
animation: rotateClose 1s, translateClose 1s; animation: rotateClose 1s, translateClose 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
section{ section{
-webkit-animation: hidden 1s;
animation: hidden 1s; animation: hidden 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
svg{ svg{
-webkit-animation: rotateClose 1s, translateClosesvg 1s;
animation: rotateClose 1s, translateClosesvg 1s; animation: rotateClose 1s, translateClosesvg 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
} }
user/themes/le_style_de_lours_modif/scss/theme/_carousel.scss
+3
View File
@@ -1,4 +1,6 @@
.owl-carousel{ .owl-carousel{
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important; display: flex!important;
margin: 0px 50px 0 50px; margin: 0px 50px 0 50px;
width: auto!important; width: auto!important;
@@ -26,6 +28,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
top:35%; top:35%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
button{ button{
width: 35px; width: 35px;
user/themes/le_style_de_lours_modif/scss/theme/_footer.scss
+6
View File
@@ -2,7 +2,11 @@ footer{
margin: 0 50px 0px 50px; margin: 0 50px 0px 50px;
padding-bottom: 20px; padding-bottom: 20px;
ul{ ul{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end; justify-content: flex-end;
width: 100%; width: 100%;
li{ li{
@@ -22,6 +26,8 @@ footer{
bottom: 0; bottom: 0;
width: 100%; width: 100%;
left: 0; left: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
& > div { & > div {
width: 55%; width: 55%;
user/themes/le_style_de_lours_modif/scss/theme/_header.scss
+20
View File
@@ -3,6 +3,8 @@
top: 0; top: 0;
width: 100%; width: 100%;
left: 0; left: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
& > div { & > div {
width: 55%; width: 55%;
@@ -51,6 +53,7 @@ header{
} }
} }
.title{ .title{
-webkit-transition: background 1s;
transition: background 1s; transition: background 1s;
background: none; background: none;
z-index: 998; z-index: 998;
@@ -74,8 +77,12 @@ header{
margin-top: 0px; margin-top: 0px;
white-space:nowrap; white-space:nowrap;
z-index: 1; z-index: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
&::after{ &::after{
right: 0; right: 0;
@@ -97,14 +104,20 @@ header{
} }
&.Hc{ &.Hc{
background: white; background: white;
-webkit-transition: background 1s;
transition: background 1s; transition: background 1s;
} }
} }
.logo{ .logo{
margin: 150px 0 50px 0; margin: 150px 0 50px 0;
width: 100%; width: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-ms-flex-pack: distribute;
justify-content: space-around; justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
& > div{ & > div{
width: calc(100% / 3); width: calc(100% / 3);
@@ -131,7 +144,12 @@ header{
} }
} }
.why_lsdo{ .why_lsdo{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
h3{ h3{
@@ -139,6 +157,7 @@ header{
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
-webkit-transform: rotate(-15deg) translateY(0px);
transform: rotate(-15deg) translateY(0px); transform: rotate(-15deg) translateY(0px);
} }
section{ section{
@@ -159,6 +178,7 @@ header{
width: 100px; width: 100px;
height: 20px; height: 20px;
position: absolute; position: absolute;
-webkit-transform: rotate(-15deg) translateY(50px);
transform: rotate(-15deg) translateY(50px); transform: rotate(-15deg) translateY(50px);
} }
} }
user/themes/le_style_de_lours_modif/scss/theme/_media-quieries.scss
+16
View File
@@ -61,6 +61,9 @@
} }
} }
.logo{ .logo{
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; flex-direction: column-reverse;
& > div{ & > div{
width: 100%; width: 100%;
@@ -83,7 +86,12 @@
#start{ #start{
.section{ .section{
.sous-section{ .sous-section{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
.blocks{ .blocks{
width: 90%; width: 90%;
@@ -109,6 +117,8 @@
#contact{ #contact{
.blocks{ .blocks{
&:nth-of-type(1){ &:nth-of-type(1){
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
p{ p{
text-align: center!important; text-align: center!important;
@@ -116,6 +126,8 @@
} }
&:nth-of-type(2){ &:nth-of-type(2){
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
.content{ .content{
p{ p{
@@ -229,6 +241,8 @@
} }
#clients{ #clients{
.images{ .images{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
img{ img{
margin:10px 10px; margin:10px 10px;
@@ -273,6 +287,8 @@
white-space: normal; white-space: normal;
} }
ul{ ul{
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
li{ li{
margin-left: 0; margin-left: 0;
user/themes/le_style_de_lours_modif/scss/theme/_mixins.scss
+11
View File
@@ -1,8 +1,12 @@
@mixin filet{ @mixin filet{
width: 100%; width: 100%;
text-align: center; text-align: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
&::after{ &::after{
right: 0; right: 0;
@@ -25,8 +29,12 @@
@mixin filet-b{ @mixin filet-b{
width: 100%; width: 100%;
text-align: center; text-align: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
width: 100%; width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
&::after{ &::after{
right: 0; right: 0;
@@ -49,6 +57,7 @@
@mixin triangle{ @mixin triangle{
position: absolute; position: absolute;
z-index: 1; z-index: 1;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg); transform: rotate(-135deg);
width: 0; width: 0;
height: 0; height: 0;
@@ -61,6 +70,7 @@
} }
@mixin rotateH{ @mixin rotateH{
-webkit-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
position: absolute; position: absolute;
top: -8px; top: -8px;
@@ -78,5 +88,6 @@
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
position: absolute; position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
} }
user/themes/le_style_de_lours_modif/scss/theme/_reset.scss
+1
View File
@@ -1,4 +1,5 @@
*{ *{
-webkit-box-sizing : border-box;
box-sizing : border-box; box-sizing : border-box;
} }
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
user/themes/le_style_de_lours_modif/scss/theme/_start.scss
+45
View File
@@ -32,8 +32,13 @@ body {
.sous-section { .sous-section {
width: 100%; width: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
h3 { h3 {
@include filet; @include filet;
@@ -74,9 +79,18 @@ body {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.txt { .txt {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -84,8 +98,12 @@ body {
top: 0%; top: 0%;
left: 0; left: 0;
background: transparent; background: transparent;
-webkit-transform: scale(0.95);
transform: scale(0.95); transform: scale(0.95);
-webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease; transition: transform 0.5s ease, background 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease, -webkit-transform 0.5s ease;
.content{ .content{
padding: 20px; padding: 20px;
} }
@@ -104,7 +122,11 @@ body {
&:hover { &:hover {
.txt { .txt {
-webkit-transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: background 0.5s ease, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease; transition: transform 0.5s ease, background 0.5s ease;
transition: transform 0.5s ease, background 0.5s ease, -webkit-transform 0.5s ease;
-webkit-transform: scale(1);
transform: scale(1); transform: scale(1);
background: $blue; background: $blue;
p, ul, li, a{ p, ul, li, a{
@@ -123,8 +145,13 @@ body {
.no-gal { .no-gal {
.section_n2 { .section_n2 {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
} }
} }
@@ -156,9 +183,16 @@ body {
} }
#clients{ #clients{
.images { .images {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; align-items: center;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
img { img {
width: 15%; width: 15%;
@@ -184,16 +218,27 @@ body {
#contact { #contact {
background: transparent!important; background: transparent!important;
.blocks{ .blocks{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; flex-direction: column-reverse;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; justify-content: center;
&:nth-of-type(1){ &:nth-of-type(1){
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end; align-items: flex-end;
p{ p{
text-align: right!important; text-align: right!important;
} }
} }
&:nth-of-type(2){ &:nth-of-type(2){
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; align-items: flex-start;
} }
.title{ .title{