mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-26 06:24:28 +02:00
Code Issues Releases Wiki Activity

Slide-bg

Browse Source
This commit is contained in:
Antonio Laguna
2017-05-28 23:26:33 +02:00
parent d997593fd2
commit e91a255560
1 changed files with 110 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/scss/modules/_slides-bg.scss Normal file
View File

@@ -0,0 +1,110 @@
.background,
[class*='background-'] {
background-repeat: no-repeat;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.background {
background-position: center;
background-size: cover;
&-top {
background-position: top;
background-size: cover;
}
&-bottom {
background-position: bottom;
background-size: cover;
}
&-center {
background-position: center;
}
&-center-top {
background-position: center top;
}
&-right-top {
background-position: right top;
}
&-left-top {
background-position: left top;
}
&-center-bottom,
&-left-bottom,
&-right-bottom,
&-left,
&-right {
background-position: center bottom;
}
@media (min-width: 1024px) {
&-left-bottom {
background-position: left bottom;
}
&-right-bottom {
background-position: right bottom;
}
&-right {
background-position: right;
}
&-left {
background-position: left;
}
}
&-video {
height: 100%;
object-fit: fill;
width: 100%;
}
}
[class*='bg-'] .light,
[class*='bg-'] .light {
opacity: .8;
}
[class*='bg-'] .dark,
[class*='bg-'] .dark {
opacity: .2;
}
[class*='bg-'] .background-video.dark {
opacity: .5;
}
@media (max-width: 1023px) {
[class*='background-'] {
animation: fadeIn ease-in .2;
opacity: .2;
}
.background-video {
opacity: .8;
}
}
.background.anim {
animation: anim 80s linear infinite;
background-position: center top;
background-repeat: repeat;
background-size: 100%;
height: 200%;
}
[class*='background'].frame {
margin: 2.4rem;
}