document scss moved to file css

src/components/File/index.tsx

@@ -1,24 +1,26 @@
+import './styles.css'
+
 import { FileDefinition } from 'src/types'
 import { ext, size } from 'src/lib/file'
 import { titleCase } from 'src/lib/string'
 
 export const File: React.SFC<FileDefinition> = props => (
-    <div className="document">
+    <div className={'file'}>
         <h1>{titleCase(props.name)}</h1>
 
         {!props.cover?.src ? null : (
-            <div className="document__image">
+            <div className={'file__image'}>
                 <a href={props.file.src} target="_blank" className="invisible">
                     <img src={props.cover.src} alt={props.name} />
                 </a>
             </div>
         )}
 
-        <div className="document__file">
+        <div className={'file__file'}>
             <span>{titleCase(props.name)}</span>
         </div>
 
-        <div className="document__file-info">
+        <div className={'file__file-info'}>
             <a href={props.file.src} target="_blank">{ext(props.file.name)} ({size(props.file.size)})</a>
         </div>
     </div>

src/components/File/styles.css

@@ -0,0 +1,25 @@
+.file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+    margin-bottom: var(--size-xl);
+}
+
+.file__image {
+    margin-bottom: var(--size-m);
+}
+
+.file__image img {
+    max-width: 100%;
+    max-height: 100%;
+    box-shadow: var(--shadow);
+}
+
+.file__image--big {
+    max-width: 20em;
+}
+
+.file__file-info {
+    font-size: var(--font-size-second);
+}

src/style/components/document.scss

@@ -1,41 +0,0 @@
-.document {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-  margin-bottom: var(--size-xl);
-}
-
-.document__image{
-  //min-width: 10em;
-  //width: 20em;
-  //height: 20em;
-
-  margin-bottom: var(--size-m);
-
-  //display: flex;
-  //justify-content: center;
-  //align-items: flex-start;
-  //align-items: center;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    box-shadow: var(--shadow);
-  }
-}
-
-.document__image--medium{
-}
-
-.document__image--big{
-  max-width: 20em;
-}
-
-.document__file {
-
-}
-
-.document__file-info {
-  font-size: var(--font-size-second);
-}