document-row refactoring

pages/_app.tsx

@@ -1,4 +1,5 @@
 import 'src/style.css'
+import 'src/style/document-row.css'
 import 'src/style/content.css'
 import 'src/style/article.css'
 import 'src/style/marker/marker-table.css'

src/style/components/document-row.scss

@@ -1,42 +0,0 @@
-.document-row {
-  display: flex;
-  flex-direction: row;
-  padding: 0;
-  margin-bottom: var(--size-m);
-}
-
-.document-row__image{
-  min-width: 4em;
-  width: 4em;
-  height: 4em;
-
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  //align-items: center;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    box-shadow: var(--shadow);
-  }
-}
-
-.document-row__image--medium{
-}
-
-.document-row__image--big{
-  max-width: 20em;
-}
-
-.document-row__file {
-  margin-left: var(--size-m);
-  flex-grow: 10;
-}
-
-.document-row__file-info {
-  width: 25%;
-  flex-grow: 1;
-  font-size: var(--font-size-second);
-  text-align: right;
-}

src/style/document-row.css

@@ -0,0 +1,37 @@
+.document-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin-bottom: var(--size-m);
+}
+
+.document-row__image {
+    min-width: 4em;
+    width: 4em;
+    height: 4em;
+
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.document-row__image img {
+    max-width: 100%;
+    max-height: 100%;
+    box-shadow: var(--shadow);
+}
+
+.document-row__image--big {
+    max-width: 20em;
+}
+
+.document-row__file {
+    margin-left: var(--size-m);
+    flex-grow: 10;
+}
+
+.document-row__file-info {
+    width: 25%;
+    flex-grow: 1;
+    font-size: var(--font-size-second);
+    text-align: right;
+}