Convert fileinfo to scss.

src/styles/components/_fileinfo.scss

@@ -18,134 +18,132 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
- .file-info {
-	text-align:center;
-	border: 1px solid #ddd;
-	padding: 1em;
-	background: #fff;
-	border-radius: 4px;
-	padding: 1em;
-	position: relative;
-	max-width: 170px;
-}
-
-.file-info > div {
-	z-index: 3;
-	position: relative;
-}
-
-.file-info div.file-info-bg {
-	position:absolute;
-	left:41px;
-	top:-17px;
-	right:0px;
-	bottom:0px;
-	z-index:2;
-	overflow:hidden;
-}
 
-.file-info-bg i {
+.file-info {
-	font-size: 20em;
+  text-align:center;
-	color: #eee;
+  border: 1px solid #ddd;
+  padding: 1em;
+  background: #fff;
+  border-radius: 4px;
+  padding: 1em;
+  position: relative;
+  max-width: 170px;
+}
+
+.file-info {
+  > div {
+    z-index: 3;
+    position: relative;
+  }
+  .file-info-bg {
+    position:absolute;
+    left:41px;
+    top:-17px;
+    right:0px;
+    bottom:0px;
+    z-index:2;
+    overflow:hidden;
+    .#{$fa-css-prefix} {
+      font-size: 20em;
+      color: #eee;
+    }
+  }
+  .actions {
+    position: absolute;
+    top: 14px;
+    left: 50%;
+    margin-left: 10px;
+    text-align: left;
+  }
 }
 
 .file-info-name {
-	font-size: 1.1em;
+  font-size: 1.1em;
-	padding: 0 .2em;
+  padding: 0 .2em;
-	margin:0.2em 0;
+  margin:0.2em 0;
-	min-width:140px;
+  min-width:140px;
 }
 
 .file-info-size {
-	font-size: 0.8em;
+  font-size: 0.8em;
-	position:relative;
+  position:relative;
-	height: 20px;
+  height: 20px;
-}
+  > span {
-
+    padding: 4px;
-.file-info.downloader .file-info-size {
+    z-index:5;
-	margin-bottom: 10px;
+    display:block;
-}
+    position:relative;
-
+    text-shadow: 1px 1px 1px white;
-.file-info.downloading .file-info-size{
+    position: absolute;
-	border-color: #ddd;
+    margin: 0 auto;
-}
+    top:1px;
-
+    right:0px;
-.file-info-size > span {
+    left:0px;
-	padding: 4px;
+  }
-	z-index:5;
+  > div {
-	display:block;
+    z-index:0;
-	position:relative;
+    width:0%;
-	text-shadow: 1px 1px 1px white;
+    -webkit-box-shadow: none !important;
-	position: absolute;
+    box-shadow: none !important;
-	margin: 0 auto;
+    position: absolute;
-	top:1px;
+    left:0px;
-	right:0px;
+    bottom:0px;
-	left:0px;
+    top:0px;
-}
+    &.progress-bar {
-
+      opacity: 0.5;
-.file-info-size > div {
+    }
-	z-index:0;
+    &.progress-bar.download {
-	width:0%;
+      z-index:1;
-	-webkit-box-shadow: none !important;
+      opacity: 1;
-	box-shadow: none !important;
+    }
-	position: absolute;
+  }
-	left:0px;
+}
-	bottom:0px;
+
-	top:0px;
+.file-info-speed {
-}
+  position: absolute;
-
+  left: 0px;
-.file-info-size > div.progress-bar {
+  right: 0px;
-	opacity: 0.5;
+  bottom: 8px;
-}
+  text-align: center;
-
+  font-size: 0.8em;
-.file-info-size > div.progress-bar.download {
+}
-	z-index:1;
+
-	opacity: 1;
+.file-info.uploader {
-}
+  .file-info-speed {
-
+    bottom: 6px;
-div.file-info-speed {
+  }
-	position: absolute;
+  .actions {
-	left: 0px;
+    margin-left:30px;
-	right: 0px;
+    opacity:0;
-	bottom: 8px;
+  }
-	text-align: center;
+  .anim {
-	font-size: 0.8em;
+    margin-left: 0px;
-}
+  }
-.file-info.uploader div.file-info-speed {
+  .hovercontrol {
-	bottom: 6px;
+    &:hover .anim {
-}
+      margin-left: -50px;
-
+    }
-.file-info.downloader .anim {
+    &:hover .actions {
-	margin-left: -40px;
+      margin-left:0px;
-}
+      opacity:1;
-
+    }
-.file-info.uploader .anim {
+    > div {
-	margin-left: 0px;
+      transition: all .2s ease-in-out
-}
+    }
-.file-info.uploader .hovercontrol:hover .anim {
+  }
-	margin-left: -50px;
+}
-}
+
-
+.file-info.downloader {
-.file-info.uploader .hovercontrol > div {
+  .anim {
-  -webkit-transition: all .2s ease-in-out;
+    margin-left: -40px;
-  -moz-transition: all .2s ease-in-out;
+  }
-  -o-transition: all .2s ease-in-out;
+  .file-info-size {
-  transition: all .2s ease-in-out
+    margin-bottom: 10px;
-}
+  }
-
+}
-.file-info .actions {
+
-	position: absolute;
+.file-info.downloading {
-	top: 14px;
+  .file-info-size{
-	left: 50%;
+    border-color: #ddd;
-	margin-left: 10px;
+  }
-	text-align: left;
-}
-
-.file-info.uploader .actions {
-	margin-left:30px;
-	opacity:0;
-}
-.file-info.uploader .hovercontrol:hover .actions {
-	margin-left:0px;
-	opacity:1;
 }