github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/src/FlySuccess/Styles.elm (about) 1 module FlySuccess.Styles exposing 2 ( body 3 , button 4 , card 5 , input 6 , paragraph 7 , title 8 ) 9 10 import Colors 11 import FlySuccess.Models exposing (ButtonState(..), InputState(..), isClicked) 12 import Html 13 import Html.Attributes exposing (style) 14 import Views.Styles 15 16 17 card : List (Html.Attribute msg) 18 card = 19 [ style "background-color" Colors.flySuccessCard 20 , style "padding" "30px" 21 , style "width" "330px" 22 , style "margin" "50px auto" 23 , style "display" "flex" 24 , style "flex-direction" "column" 25 , style "align-items" "center" 26 , style "text-align" "center" 27 , style "font-weight" Views.Styles.fontWeightLight 28 ] 29 30 31 title : List (Html.Attribute msg) 32 title = 33 [ style "font-size" "18px" 34 , style "margin" "0" 35 , style "font-weight" Views.Styles.fontWeightDefault 36 ] 37 38 39 body : List (Html.Attribute msg) 40 body = 41 [ style "font-size" "14px" 42 , style "margin" "10px 0" 43 , style "display" "flex" 44 , style "flex-direction" "column" 45 , style "align-items" "center" 46 ] 47 48 49 paragraph : List (Html.Attribute msg) 50 paragraph = 51 [ style "margin" "5px 0" 52 ] 53 54 55 input : InputState -> List (Html.Attribute msg) 56 input inputState = 57 [ style "border" <| 58 "1px solid " 59 ++ Colors.text 60 , style "display" "flex" 61 , style "justify-content" "center" 62 , style "align-items" "center" 63 , style "margin" "15px 0" 64 , style "padding" "10px 10px" 65 , style "width" "192px" 66 , style "text-align" "center" 67 , style "background-color" Colors.flySuccessCard 68 , style "background-color" <| 69 case inputState of 70 InputUnhovered -> 71 Colors.flySuccessCard 72 73 InputHovered -> 74 Colors.flySuccessButtonHover 75 , style "color" Colors.text 76 , style "white-space" "nowrap" 77 , style "overflow" "hidden" 78 , style "text-overflow" "ellipsis" 79 ] 80 81 82 button : ButtonState -> List (Html.Attribute msg) 83 button buttonState = 84 [ style "border" <| 85 "1px solid " 86 ++ (if isClicked buttonState then 87 Colors.flySuccessTokenCopied 88 89 else 90 Colors.text 91 ) 92 , style "display" "flex" 93 , style "justify-content" "center" 94 , style "align-items" "center" 95 , style "margin" "15px 0" 96 , style "padding" "10px 0" 97 , style "width" "212px" 98 , style "cursor" <| 99 if isClicked buttonState then 100 "default" 101 102 else 103 "pointer" 104 , style "text-align" "center" 105 , style "background-color" <| 106 case buttonState of 107 Unhovered -> 108 Colors.flySuccessCard 109 110 Hovered -> 111 Colors.flySuccessButtonHover 112 113 Clicked -> 114 Colors.flySuccessTokenCopied 115 ]