/ittf/site/t/common/styled.ittf (primary)

                                            
   1 $group
   2     const FlexRow
   3         _ styled.div
   4             =>
   5                 param props
   6                 var ret
   7                     {
   8                         @ display 'flex'
   9                         @ flexDirection 'row'
  10                         @ justifyContent 'center'
  11                 if props.height
  12                     set ret.height = props.height
  13                 if props.style
  14                     set ret = Object.assign({}, ret, props.style)
  15                 return ret
  16     const FlexColumn
  17         _ styled.div
  18             =>
  19                 param props
  20                 var ret
  21                     {
  22                         @ display 'flex'
  23                         @ flexDirection 'column'
  24                         @ justifyContent 'center'
  25                 if props.width
  26                     set ret.width = props.width
  27                 if props.style
  28                     set ret = Object.assign({}, ret, props.style)
  29                 return ret
  30     const SelectorLabel
  31         _ styled.label
  32             =>
  33                 param props
  34                 const ret
  35                     {
  36                         @ width '44%'
  37                         @ display 'inline-block'
  38                 if props.size == 'h1'
  39                     set ret.width = '49%'
  40                     set ret.fontSize = '2em'
  41                 elif props.size == 'h2'
  42                     set ret.fontSize = '1.5em'
  43                 else
  44                     set ret.fontSize = '1.2em'
  45                 return ret
  46     const SelectorSelectValue
  47         _ styled.select
  48             =>
  49                 param props
  50                 ()
  51                     {
  52                         @ width '49%'
  53                         @ backgroundColor '#defdef'
  54                         @ border 'none'
  55                         @ borderRadius '5px'
  56                         @ padding '3px 5px'
  57                         @ outlineColor '#dedede'
  58                         @ fontWeight '700'
  59     const SelectorInputValue
  60         _ styled.input
  61             =>
  62                 param props
  63                 ()
  64                     {
  65                         @ width '49%'
  66                         @ backgroundColor '#defdef'
  67                         @ border 'none'
  68                         @ borderRadius '5px'
  69                         @ padding '3px 5px'
  70                         @ outlineColor '#dedede'
  71                         @ fontWeight '700'
  72     const Button
  73         _ styled.div
  74             =>
  75                 param props
  76                 const ret
  77                     {
  78                         @ backgroundColor '#dedede'
  79                         @ borderStyle 'solid'
  80                         @ borderColor '#ababab'
  81                         @ cursor 'pointer'
  82                         @ transition 'all 0.3s'
  83                         { '&:hover'
  84                             @ backgroundColor '#212121'
  85                             @ color '#fff'
  86                 if props.size == 'h1'
  87                     set ret.borderWidth = '2px'
  88                     set ret.borderRadius = '10px'
  89                     set ret.padding = '10px 20px'
  90                     set ret.margin = '15px 5px'
  91                 if props.size == 'h6'
  92                     set ret.borderWidth = '1px'
  93                     set ret.borderRadius = '2px'
  94                     set ret.padding = '2px 4px'
  95                     set ret.margin = '1px 2px'
  96                 return ret
  97     const FormRoot
  98         _ styled.div
  99             =>
 100                 param props
 101                 ()
 102                     {
 103                         @ padding '10px'
 104                         @ height props.height || 'auto'
 105     const FormControl
 106         _ styled.div
 107             =>
 108                 param props
 109                 ()
 110                     {
 111                         @ width props.width || '100%'
 112                         @ height props.height || 'auto'
 113                         @ padding props.padding || 'auto'
 114     const ControlLabel
 115         _ styled.label
 116             =>
 117                 param props
 118                 const ret
 119                     {
 120                         @ width '49%'
 121                         @ display 'inline-block'
 122                 if props.size == 'h1'
 123                     set ret.fontSize = '2em'
 124                 elif props.size == 'h2'
 125                     set ret.fontSize = '1.5em'
 126                 else
 127                     set ret.fontSize = '1.2em'
 128                 return ret
 129     const ModalTitle
 130         _ styled.h2
 131             =>
 132                 param props
 133                 ()
 134                     {
 135                         @ fontSize '18px'
 136                         @ padding '15px'
 137     const SidebarTitle
 138         _ styled.h3
 139             =>
 140                 param props
 141                 ()
 142                     {
 143                         @ fontSize '16px'
 144                         @ fontWeight '700'
 145                         @ padding '12px'
 146     const Typo
 147         _ styled.p
 148             =>
 149                 param props
 150                 ()
 151                     {
 152                         @ padding '10px'
 153                         @ fontSize '0.8em'
 154     const Pre
 155         _ styled.pre
 156             =>
 157                 param props
 158                 ()
 159                     {
 160                         @ padding '0px 10px'
 161                         @ fontSize '0.9em'
 162     const PropertyFieldset
 163         _ styled.fieldset
 164             =>
 165                 param props
 166                 ()
 167                     {
 168                         @ border 'none'
 169                         @ width '100%'
 170                         @ marginBottom '3px'
 171     const PropertyLabel
 172         _ styled.label
 173             =>
 174                 param props
 175                 ()
 176                     {
 177                         @ width '44%'
 178                         @ display 'inline-block'
 179     const PropertyInput
 180         _ styled.input
 181             =>
 182                 param props
 183                 ()
 184                     {
 185                         @ width '49%'
 186                         @ backgroundColor '#defdef'
 187                         @ border 'none'
 188                         @ borderRadius '5px'
 189                         @ padding '3px 5px'
 190                         @ outlineColor '#dedede'
 191                         @ fontWeight '700'
 192     const PropertySelect
 193         _ styled.select
 194             =>
 195                 param props
 196                 ()
 197                     {
 198                         @ width '49%'
 199                         @ backgroundColor '#defdef'
 200                         @ border 'none'
 201                         @ borderRadius '5px'
 202                         @ padding '3px 5px'
 203                         @ outlineColor '#dedede'
 204                         @ fontWeight '700'
 205     const FileListTitle
 206         _ styled.h3
 207             =>
 208                 param props
 209                 ()
 210                     {
 211                         @ fontWeight '700'
 212                         @ padding '5px 5px 5px 0'
 213     const FileListItem
 214         _ styled.div
 215             =>
 216                 param props
 217                 ()
 218                     {
 219                         @ paddingLeft '10px'
 220                         @ fontSize '0.9em'
 221                         @ cursor 'pointer'