From 3a88115d118f8256f3ff034dc359df42a9e4051c Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 16 Apr 2016 21:35:50 +0200 Subject: Responsive header --- src/server/Design/LoggedIn/Home/Add.hs | 32 +++++++++++++------------- src/server/Design/LoggedIn/Home/Expandables.hs | 6 ++--- src/server/Design/LoggedIn/Home/Pages.hs | 10 ++++---- src/server/Design/LoggedIn/Home/Table.hs | 24 +++++++++---------- 4 files changed, 36 insertions(+), 36 deletions(-) (limited to 'src/server/Design/LoggedIn') diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs index 7613ba3..1a8b499 100644 --- a/src/server/Design/LoggedIn/Home/Add.hs +++ b/src/server/Design/LoggedIn/Home/Add.hs @@ -8,7 +8,7 @@ import Data.Monoid ((<>)) import Clay -import Design.Color as C +import Design.Color as Color import Design.Helper import Design.Constants @@ -28,8 +28,8 @@ design = do display inlineBlock width (px 50) textAlign (alignSide sideCenter) - backgroundColor C.darkGrey - color C.white + backgroundColor Color.mountainMist + color Color.white height (px inputHeight) lineHeight (px inputHeight) fontSize (px 22) @@ -40,10 +40,10 @@ design = do defaultInput inputHeight borderRadius radius (px 0) (px 0) radius "width" -: "calc(100% - 40px)" - "input:focus + label" ? backgroundColor C.grey + "input:focus + label" ? backgroundColor Color.pumice hover & do - input ? borderColor C.grey - label ? backgroundColor C.grey + input ? borderColor Color.pumice + label ? backgroundColor Color.pumice ".name" ? minWidth (px 150) @@ -52,36 +52,36 @@ design = do marginRight (pct blockPercentMargin) (".punctual" <> ".monthly") ? do - defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten + defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten paddingLeft (px 15) paddingRight (px 15) ".selected" & do - backgroundColor C.blue - color C.white + backgroundColor Color.blue + color Color.white hover & (".punctual" <> ".monthly") ? - ".selected" & backgroundColor (focusLighten C.blue) + ".selected" & backgroundColor (focusLighten Color.blue) focus & (".punctual" <> ".monthly") ? - ".selected" & backgroundColor (focusLighten C.blue) + ".selected" & backgroundColor (focusLighten Color.blue) ".punctual" ? borderRadius radius radius 0 0 ".monthly" ? borderRadius 0 0 radius radius button # ".add" ? do - defaultButton C.red C.white (px inputHeight) focusLighten + defaultButton Color.red Color.white (px inputHeight) focusLighten paddingLeft (px 15) paddingRight (px 15) i ? marginLeft (px 10) ".waitingServer" & ("cursor" -: "not-allowed") ".name.error" <> ".cost.error" ? do - input ? borderColor C.redError - label ? backgroundColor C.redError - "input:focus + label" ? backgroundColor C.redError + input ? borderColor Color.redError + label ? backgroundColor Color.redError + "input:focus + label" ? backgroundColor Color.redError ".errorMessage" ? do position absolute - color C.redError + color Color.redError top (px (inputHeight + 10)) left (px 0) diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs index 5ba5711..dc36392 100644 --- a/src/server/Design/LoggedIn/Home/Expandables.hs +++ b/src/server/Design/LoggedIn/Home/Expandables.hs @@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Expandables import Clay -import Design.Color as C +import Design.Color as Color import Design.Helper import Design.Constants @@ -18,10 +18,10 @@ design = do right blockPadding bottom (px 2) - ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight) + ".monthlyPayments" ? expandBlock Color.blue Color.white (px inputHeight) ".account" ? do - expandBlock C.green C.white (px inputHeight) + expandBlock Color.green Color.white (px inputHeight) ".userName" ? marginRight (px 10) ".detail" |> ".header" ? borderRadius radius radius 0 0 diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs index 0572fbf..f95a925 100644 --- a/src/server/Design/LoggedIn/Home/Pages.hs +++ b/src/server/Design/LoggedIn/Home/Pages.hs @@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Pages import Clay -import Design.Color as C +import Design.Color as Color import Design.Helper import Design.Constants @@ -17,9 +17,9 @@ design = do clearFix ".page" ? do - defaultButton C.white C.darkGrey (px 50) focusDarken + defaultButton Color.white Color.mountainMist (px 50) focusDarken display inlineBlock - border solid (px 2) C.darkGrey + border solid (px 2) Color.mountainMist marginRight (px 10) paddingLeft (px 10) paddingRight (px 10) @@ -28,5 +28,5 @@ design = do ":not(.current)" & cursor pointer ".current" & do - borderColor C.red - color C.red + borderColor Color.red + color Color.red diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs index 58ffb33..e7a00d1 100644 --- a/src/server/Design/LoggedIn/Home/Table.hs +++ b/src/server/Design/LoggedIn/Home/Table.hs @@ -9,8 +9,8 @@ import Data.Monoid ((<>)) import Clay import qualified Clay.Display as D -import Design.Color as C -import Design.Media +import Design.Color as Color +import qualified Design.Media as Media import Design.Constants import Design.Helper @@ -26,8 +26,8 @@ design = do ".header" ? do fontWeight bold - backgroundColor C.blue - color C.white + backgroundColor Color.blue + color Color.white fontSize iconFontSize lineHeight headerHeight @@ -46,7 +46,7 @@ design = do width (px borderW) height (px rowHeightPx) - backgroundColor C.green + backgroundColor Color.green ".cell:first-child::after" ? do display block @@ -59,12 +59,12 @@ design = do height (px 0) borderTop solid (px triangleH) transparent borderBottom solid (px triangleH) transparent - borderLeft solid (px triangleW) C.green + borderLeft solid (px triangleW) Color.green nthChild "odd" & do - backgroundColor C.lightGrey + backgroundColor Color.mercury ".edition" & do - backgroundColor C.paymentFocus + backgroundColor Color.paymentFocus ".delete" |> button ? visibility visible ".cell" ? do @@ -73,14 +73,14 @@ design = do ".category" & width (pct 40) ".cost" & do width (pct 17) - ".refund" & color C.green + ".refund" & color Color.green ".user" & width (pct 20) ".date" & do width (pct 20) - smallScreen $ do + Media.mobileTablet $ do ".shortDate" ? display inline ".longDate" ? display none - largeScreen $ do + Media.desktop $ do ".shortDate" ? display none ".longDate" ? display inline ".delete" & do @@ -88,7 +88,7 @@ design = do width (pct 3) textAlign (alignSide sideCenter) button ? do - defaultButton C.red C.white (px rowHeightPx) focusLighten + defaultButton Color.red Color.white (px rowHeightPx) focusLighten borderRadius (px 0) (px 0) (px 0) (px 0) position absolute top (px 0) -- cgit v1.2.3