LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

switch to BEM naming pattern

Browse source
This commit is contained in:
Sean Yesmunt 2017-06-07 09:06:14 -07:00
parent 0a7626fe49
commit 11fa00504d
2 changed files with 64 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/js/component/video/internal/loading-screen.jsx
View file

@ -1,11 +1,11 @@
import React from "react"; import React from "react";
const LoadingScreen = ({ status }) => const LoadingScreen = ({ status }) =>
<div className="video--loading--screen"> <div className="video--loading-screen">
<div className="loading--screen--content"> <div className="video--loading-screen-content">
<div className="loading--spinner" /> <div className="video--loading-spinner" />
<div className="video--loading--status"> <div className="video--loading-status">
{status} {status}
</div> </div>
</div> </div>

122
ui/scss/component/_video.scss
View file

@ -28,74 +28,72 @@ video {
/*background: none;*/ /*background: none;*/
} }
.video--loading--screen {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.loading--screen--content {
.loading--spinner {
position: relative;
width: 11em;
height: 11em;
margin: 20px auto;
font-size: 3px;
border-radius: 50%;
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
animation: spin 1.4s infinite linear;
transform: translateZ(0);
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
}
&:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
}
&:after {
height: 75%;
width: 75%;
margin: auto;
bottom: 0;
right: 0;
background: black;
border-radius: 50%;
}
}
.video--loading--status {
padding-top: 20px;
color: white;
}
}
}
.plyr { .plyr {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
.video--loading-screen {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.video--loading-spinner {
position: relative;
width: 11em;
height: 11em;
margin: 20px auto;
font-size: 3px;
border-radius: 50%;
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
animation: spin 1.4s infinite linear;
transform: translateZ(0);
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
}
&:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
}
&:after {
height: 75%;
width: 75%;
margin: auto;
bottom: 0;
right: 0;
background: black;
border-radius: 50%;
}
}
.video--loading-status {
padding-top: 20px;
color: white;
}
.video__cover { .video__cover {
text-align: center; text-align: center;
height: 100%; height: 100%;