Include pages into table component

1 files changed, 55 insertions, 0 deletions

diff --git a/server/src/Design/View/Pages.hs b/server/src/Design/View/Pages.hs
new file mode 100644
index 0000000..1482ef4
--- /dev/null
+++ b/server/src/Design/View/Pages.hs
@@ -0,0 +1,55 @@
+module Design.View.Pages
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
+
+design :: Css
+design =
+  ".pages" ? do
+    display flex
+    justifyContent center
+
+    Media.desktop $ do
+      padding (px 40) (px 30) (px 30) (px 30)
+
+    Media.tablet $ do
+      padding (px 30) (px 30) (px 30) (px 30)
+
+    Media.mobile $ do
+      padding (px 20) (px 0) (px 20) (px 0)
+      lineHeight (px 40)
+
+    svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)
+
+    ".page" ? do
+      display inlineBlock
+      fontWeight bold
+
+      Media.desktop $ do
+        Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken
+
+      Media.tabletDesktop $ do
+        border solid (px 2) Color.dustyGray
+        marginRight (px 10)
+
+      Media.tablet $ do
+        Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
+        fontSize (px 15)
+
+      Media.mobile $ do
+        Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
+        fontSize (px 12)
+        border solid (px 1) Color.dustyGray
+        marginRight (px 5)
+
+      ":not(.current)" & cursor pointer
+
+      ".current" & do
+        borderColor Color.chestnutRose
+        color Color.chestnutRose