From a8309988518af5bddf62d6a326d990fde4069b40 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 3 Jan 2016 19:41:31 +0100 Subject: Set focus properties to button elements --- src/server/Design/LoggedIn/Add.hs | 13 ++++++-- src/server/Design/LoggedIn/Expandables.hs | 9 +++--- src/server/Design/LoggedIn/Pages.hs | 7 +---- src/server/Design/LoggedIn/Table.hs | 52 ++++++++++++++++++++++++------- 4 files changed, 58 insertions(+), 23 deletions(-) (limited to 'src/server/Design/LoggedIn') diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs index 3bdfb65..ef0603c 100644 --- a/src/server/Design/LoggedIn/Add.hs +++ b/src/server/Design/LoggedIn/Add.hs @@ -43,6 +43,9 @@ addDesign = borderRadius radius (px 0) (px 0) radius "width" -: "calc(100% - 40px)" "input:focus + label" ? backgroundColor C.grey + hover & do + input ? borderColor C.grey + label ? backgroundColor C.grey ".name" ? minWidth (px 150) @@ -51,18 +54,24 @@ addDesign = marginRight (pct blockPercentMargin) (".punctual" <> ".monthly") ? do - defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) + defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten paddingLeft (px 15) paddingRight (px 15) ".selected" & do backgroundColor C.blue color C.white + hover & (".punctual" <> ".monthly") ? + ".selected" & backgroundColor (focusLighten C.blue) + + focus & (".punctual" <> ".monthly") ? + ".selected" & backgroundColor (focusLighten C.blue) + ".punctual" ? borderRadius radius radius 0 0 ".monthly" ? borderRadius 0 0 radius radius button # ".add" ? do - defaultButton C.red C.white (px inputHeight) + defaultButton C.red C.white (px inputHeight) focusLighten paddingLeft (px 15) paddingRight (px 15) i ? marginLeft (px 10) diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs index 66a9b06..8ef42cd 100644 --- a/src/server/Design/LoggedIn/Expandables.hs +++ b/src/server/Design/LoggedIn/Expandables.hs @@ -22,7 +22,8 @@ expandablesDesign = right blockPadding bottom (px 2) - ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight) + ".monthlyPayments" ? do + expandBlock C.blue C.white (px inputHeight) ".account" ? do expandBlock C.green C.white (px inputHeight) @@ -35,7 +36,7 @@ expandablesDesign = backgroundColor C.lightGrey padding (px 0) (px 20) (px 0) (px 20) position relative - lineHeight rowHeight + lineHeight (px rowHeightPx) input ? do defaultInput inputHeight @@ -50,10 +51,10 @@ expandablesDesign = marginTop (px (-5)) ".validateIncomeEdition" <> ".editIncomeEdition" ? - defaultButton C.red C.white (px inputHeight) + defaultButton C.red C.white (px inputHeight) focusLighten ".undoIncomeEdition" ? - defaultButton C.blue C.white (px inputHeight) + defaultButton C.blue C.white (px inputHeight) focusLighten ".error" ? do color C.redError diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs index c42e9f3..f7946b8 100644 --- a/src/server/Design/LoggedIn/Pages.hs +++ b/src/server/Design/LoggedIn/Pages.hs @@ -19,17 +19,12 @@ pagesDesign = clearFix ".page" ? do + defaultButton C.white C.darkGrey (px 50) focusDarken display inlineBlock border solid (px 2) C.darkGrey - color C.darkGrey - borderRadius radius radius radius radius marginRight (px 10) - let h = 50 paddingLeft (px 10) paddingRight (px 10) - height (px h) - lineHeight (px h) - textAlign (alignSide (sideCenter)) fontWeight bold ":not(.current)" & cursor pointer diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs index 2876fa1..d9fc318 100644 --- a/src/server/Design/LoggedIn/Table.hs +++ b/src/server/Design/LoggedIn/Table.hs @@ -12,6 +12,7 @@ import qualified Clay.Display as D import Design.Color as C import Design.Media import Design.Constants +import Design.Helper tableDesign :: Css tableDesign = @@ -33,20 +34,48 @@ tableDesign = lineHeight headerHeight ".row" ? do - fontSize (px 20) - cursor pointer - lineHeight rowHeight - nthChild "odd" & backgroundColor C.lightGrey + fontSize (px 18) + lineHeight (px rowHeightPx) + + hover & do + let (borderW, triangleW, triangleH) = (4, 6, 8) + ".cell:first-child::before" ? do + display block + content (stringContent "") + position absolute + top (px 0) + left (px 0) + + width (px borderW) + height (px rowHeightPx) + backgroundColor C.green + + ".cell:first-child::after" ? do + display block + content (stringContent "") + position absolute + top (px (rowHeightPx `Prelude.div` 2 - triangleH)) + left (px borderW) + + width (px 0) + height (px 0) + borderTop solid (px triangleH) transparent + borderBottom solid (px triangleH) transparent + borderLeft solid (px triangleW) C.green + + nthChild "odd" & do + backgroundColor C.lightGrey ".edition" & do backgroundColor C.paymentFocus - ".delete" ? visibility visible + ".delete" |> button ? visibility visible ".cell" ? do display tableCell + position relative ".category" & width (pct 40) ".cost" & do width (pct 17) - ".refund" & color C.greenSuccess + ".refund" & color C.green ".user" & width (pct 20) ".date" & do width (pct 20) @@ -57,12 +86,13 @@ tableDesign = ".shortDate" ? display none ".longDate" ? display inline ".delete" & do + position relative width (pct 3) - height rowHeight textAlign (alignSide sideCenter) - backgroundColor C.red - visibility hidden button ? do + defaultButton C.red C.white (px rowHeightPx) focusLighten + position absolute + top (px 0) + right (px 0) width (pct 100) - height (pct 100) - color C.white + visibility hidden -- cgit v1.2.3