github.com/simpleiot/simpleiot@v0.18.3/frontend/src/UI/Style.elm (about)

     1  module UI.Style exposing
     2      ( button
     3      , colors
     4      , error
     5      , h2
     6      , link
     7      )
     8  
     9  import Element exposing (..)
    10  import Element.Background as Background
    11  import Element.Border as Border
    12  import Element.Font as Font
    13  import Html.Attributes as Attr
    14  
    15  
    16  colors :
    17      { white : Color
    18      , jet : Color
    19      , coral : Color
    20      , black : Color
    21      , ltgray : Color
    22      , gray : Color
    23      , darkgray : Color
    24      , pale : Color
    25      , red : Color
    26      , orange : Color
    27      , yellow : Color
    28      , green : Color
    29      , darkgreen : Color
    30      , blue : Color
    31      , ltblue : Color
    32      , none : Color
    33      }
    34  colors =
    35      { white = rgb 1 1 1
    36      , jet = rgb255 40 40 40
    37      , coral = rgb255 204 75 75
    38      , black = rgb 0 0 0
    39      , ltgray = rgb 0.9 0.9 0.9
    40      , gray = rgb 0.5 0.5 0.5
    41      , darkgray = rgb 0.8 0.8 0.8
    42      , pale = rgba 0.97 0.97 0.97 0.9
    43      , red = rgb255 204 85 68
    44      , orange = rgb255 255 165 0
    45      , yellow = rgb 1 1 0.7
    46      , green = rgba 0.7 1 0.7 0.9
    47      , darkgreen = rgb255 4 106 56
    48      , blue = rgb255 50 100 150
    49      , ltblue = rgb255 135 206 250
    50      , none = rgba 0 0 0 0
    51      }
    52  
    53  
    54  fonts : { sans : List Font.Font }
    55  fonts =
    56      { sans =
    57          [ Font.external
    58              { name = "IBM Plex Sans"
    59              , url = "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,600,600i&display=swap"
    60              }
    61          , Font.serif
    62          ]
    63      }
    64  
    65  
    66  link : List (Attribute msg)
    67  link =
    68      [ Font.underline
    69      , Font.color colors.blue
    70      , transition
    71          { property = "opacity"
    72          , duration = 150
    73          }
    74      , mouseOver
    75          [ alpha 0.6
    76          ]
    77      ]
    78  
    79  
    80  button : Color -> List (Attribute msg)
    81  button color =
    82      [ paddingXY 16 8
    83      , Font.size 14
    84      , Border.color color
    85      , Font.color color
    86      , Background.color colors.white
    87      , Border.width 2
    88      , Border.rounded 4
    89      , pointer
    90      , transition
    91          { property = "all"
    92          , duration = 150
    93          }
    94      , mouseOver
    95          [ Font.color colors.white
    96          , Background.color color
    97          ]
    98      ]
    99  
   100  
   101  error : List (Attribute msg)
   102  error =
   103      [ paddingXY 16 8
   104      , Font.size 14
   105      , Font.color colors.white
   106      , Font.bold
   107      , Background.color colors.coral
   108      , Border.width 2
   109      , Border.rounded 4
   110      , width fill
   111      ]
   112  
   113  
   114  h2 : List (Attribute msg)
   115  h2 =
   116      [ Font.family fonts.sans
   117      , Font.semiBold
   118      , Font.size 24
   119      ]
   120  
   121  
   122  transition :
   123      { property : String
   124      , duration : Int
   125      }
   126      -> Attribute msg
   127  transition { property, duration } =
   128      Element.htmlAttribute
   129          (Attr.style
   130              "transition"
   131              (property ++ " " ++ String.fromInt duration ++ "ms ease-in-out")
   132          )