Move pattern CSS to styles

pages/concave-corners/index.tsx

@@ -11,8 +11,6 @@ import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
-import './concave-corners.css';
-
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout pattern={Pattern.ConcaveCorners}>

pages/drop-cap/index.tsx

@@ -6,8 +6,6 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
-import './dropcap.css';
-
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Pattern from '../../constants/Pattern';

pages/dropdown/index.tsx

@@ -6,8 +6,6 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
-import './dropdown.css';
-
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';

styles/index.scss

@@ -8,3 +8,23 @@
 
 // Pages
 @import 'pages/home';
+
+// Patterns
+@import 'patterns/concave-corners';
+@import 'patterns/dropcap';
+@import 'patterns/dropdown';
+@import 'patterns/floating-label';
+@import 'patterns/folder-structure';
+@import 'patterns/inverted-corners';
+@import 'patterns/layered-card';
+@import 'patterns/masonry-grid';
+@import 'patterns/mega-menu';
+@import 'patterns/menu';
+@import 'patterns/nested-dropdowns';
+@import 'patterns/price-tag';
+@import 'patterns/radio-button-group';
+@import 'patterns/star';
+@import 'patterns/three-dimensions-card';
+@import 'patterns/tooltip';
+@import 'patterns/tree-diagram';
+@import 'patterns/zigzag-timeline';