github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/src/Pipeline/PinMenu/Styles.elm (about)

     1  module Pipeline.PinMenu.Styles exposing
     2      ( pinBadge
     3      , pinIcon
     4      , pinIconBackground
     5      , pinIconDropdown
     6      , pinIconDropdownItem
     7      , title
     8      )
     9  
    10  import Assets
    11  import Colors
    12  import Html
    13  import Html.Attributes exposing (style)
    14  import Pipeline.PinMenu.Views
    15      exposing
    16          ( Background(..)
    17          , Distance(..)
    18          , Position(..)
    19          )
    20  import SideBar.Styles as SS
    21  import Views.Styles
    22  
    23  
    24  pinIconBackground :
    25      { a | background : Background, clickable : Bool }
    26      -> List (Html.Attribute msg)
    27  pinIconBackground { background, clickable } =
    28      [ style "position" "relative"
    29      , style "border-left" <| "1px solid " ++ Colors.background
    30      , style "border-bottom" <| "1px solid " ++ Colors.frame
    31      , style "width" "54px"
    32      , style "height" "54px"
    33      , style "display" "flex"
    34      , style "align-items" "center"
    35      , style "justify-content" "center"
    36      , style "cursor" <|
    37          if clickable then
    38              "pointer"
    39  
    40          else
    41              "default"
    42      , style "background-color" <|
    43          case background of
    44              Light ->
    45                  Colors.sideBarBackground
    46  
    47              Dark ->
    48                  Colors.topBarBackground
    49      ]
    50  
    51  
    52  pinIcon : { a | opacity : SS.Opacity } -> List (Html.Attribute msg)
    53  pinIcon { opacity } =
    54      [ style "background-image" <|
    55          Assets.backgroundImage <|
    56              Just Assets.PinIconWhite
    57      , style "width" "18px"
    58      , style "height" "18px"
    59      , style "background-repeat" "no-repeat"
    60      , style "background-position" "50% 50%"
    61      , style "background-size" "contain"
    62      , style "position" "relative"
    63      , SS.opacityAttr opacity
    64      ]
    65  
    66  
    67  pinBadge :
    68      { a
    69          | color : String
    70          , diameterPx : Int
    71          , position : Position
    72      }
    73      -> List (Html.Attribute msg)
    74  pinBadge { color, diameterPx, position } =
    75      case position of
    76          TopRight top right ->
    77              [ style "background-color" color
    78              , style "border-radius" "50%"
    79              , style "width" <| String.fromInt diameterPx ++ "px"
    80              , style "height" <| String.fromInt diameterPx ++ "px"
    81              , style "position" "absolute"
    82              , style "top" <|
    83                  case top of
    84                      Px px ->
    85                          String.fromInt px ++ "px"
    86  
    87                      Percent pct ->
    88                          String.fromInt pct ++ "%"
    89              , style "right" <|
    90                  case right of
    91                      Px px ->
    92                          String.fromInt px ++ "px"
    93  
    94                      Percent pct ->
    95                          String.fromInt pct ++ "%"
    96              , style "display" "flex"
    97              , style "align-items" "center"
    98              , style "justify-content" "center"
    99              ]
   100  
   101  
   102  pinIconDropdown : { a | position : Position } -> List (Html.Attribute msg)
   103  pinIconDropdown { position } =
   104      case position of
   105          TopRight top right ->
   106              [ style "color" Colors.pinIconHover
   107              , style "position" "absolute"
   108              , style "top" <|
   109                  case top of
   110                      Px px ->
   111                          String.fromInt px ++ "px"
   112  
   113                      Percent pct ->
   114                          String.fromInt pct ++ "%"
   115              , style "right" <|
   116                  case right of
   117                      Px px ->
   118                          String.fromInt px ++ "px"
   119  
   120                      Percent pct ->
   121                          String.fromInt pct ++ "%"
   122              , style "white-space" "nowrap"
   123              , style "list-style-type" "none"
   124              , style "margin-top" "1px"
   125              , style "margin-right" "-2px"
   126              , style "z-index" "1"
   127              ]
   128  
   129  
   130  pinIconDropdownItem :
   131      { a | paddingPx : Int, background : String }
   132      -> List (Html.Attribute msg)
   133  pinIconDropdownItem { paddingPx, background } =
   134      [ style "padding" <| String.fromInt paddingPx ++ "px"
   135      , style "background-color" background
   136      , style "cursor" "pointer"
   137      , style "font-weight" Views.Styles.fontWeightLight
   138      , style "border-width" "0 1px 1px 1px"
   139      , style "border-style" "solid"
   140      , style "border-color" Colors.frame
   141      ]
   142  
   143  
   144  title : { a | fontWeight : String, color : String } -> List (Html.Attribute msg)
   145  title { fontWeight, color } =
   146      [ style "font-weight" fontWeight
   147      , style "color" color
   148      ]