material-ui/src/List/ListItem.js styles annotated with React Native relevance

index.html

<span class=""><span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >export</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >const</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >styles</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >=</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >=&gt;</span> ({</span><br>
<span class="">&nbsp;  root<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  display<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>flex<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  justifyContent<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>flex-start<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  alignItems<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>center<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  position<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>relative<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="chg" style="background-color:#FFFFE0;" >&nbsp;  &nbsp;  textDecoration<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>none<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  width<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>100%<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  boxSizing<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>border-box<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="rel" style="background-color:#E6E6DC;" >&nbsp;  &nbsp;  textAlign<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>left<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  container<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  position<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>relative<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  keyboardFocused<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  backgroundColor<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >palette</span>.<span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >action</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >hover</span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  default<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  paddingTop<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >12</span>,</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  paddingBottom<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >12</span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  dense<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  paddingTop<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >spacing</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >unit</span>,</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  paddingBottom<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >spacing</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >unit</span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  disabled<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  opacity<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >0.5</span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  divider<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="chg" style="background-color:#FFFFE0;" >&nbsp;  &nbsp;  borderBottom<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >&grave;</span>1px solid <span class="pl-s1" style="box-sizing:border-box;color:#24292e;" ><span class="pl-pse" style="box-sizing:border-box;" >${</span><span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >palette</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >divider</span><span class="pl-pse" style="box-sizing:border-box;" >}</span></span><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >&grave;</span></span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  backgroundClip<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>padding-box<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  gutters<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >mixins</span>.<span class="pl-en" style="box-sizing:border-box;color:#6f42c1;" >gutters</span>(),</span><br>
<span class="">&nbsp;  button<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  transition<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >transitions</span>.<span class="pl-en" style="box-sizing:border-box;color:#6f42c1;" >create</span>(<span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>background-color<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>, {</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  duration<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >transitions</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >duration</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >shortest</span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  }),</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>&amp;:hover<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span><span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  textDecoration<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>none<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  backgroundColor<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >palette</span>.<span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >action</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >hover</span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  <span class="pl-c" style="box-sizing:border-box;color:#6a737d;" ><span class="pl-c" style="box-sizing:border-box;color:#6a737d;" >//</span> Reset on mouse devices</span></span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>@media (hover: none)<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span><span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  &nbsp;  backgroundColor<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>transparent<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  &nbsp;  },</span><br>
<span class="web" style="background-color:#C33;" >&nbsp;  &nbsp;  },</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">&nbsp;  secondaryAction<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="">&nbsp;  &nbsp;  <span class="pl-c" style="box-sizing:border-box;color:#6a737d;" ><span class="pl-c" style="box-sizing:border-box;color:#6a737d;" >//</span> Add some space to avoid collision as &grave;ListItemSecondaryAction&grave;</span></span><br>
<span class="">&nbsp;  &nbsp;  <span class="pl-c" style="box-sizing:border-box;color:#6a737d;" ><span class="pl-c" style="box-sizing:border-box;color:#6a737d;" >//</span> is absolutely positionned.</span></span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp;  &nbsp;  paddingRight<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >spacing</span>.<span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >unit</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >*</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >4</span>,</span><br>
<span class="">&nbsp;  },</span><br>
<span class="">});</span><br>