Home | History | Annotate | Download | only in css 
      1 
      2 list,
      3 grid {
      4   display: block;
      5   outline: none;
      6   overflow: auto;
      7   position: relative; /* Make sure that item offsets are relative to the
      8                          list. */
      9 }
     10 
     11 list > *,
     12 grid > * {
     13   -webkit-user-select: none;
     14   background-color: rgba(255,255,255,0);
     15   border: 1px solid rgba(255,255,255,0); /* transparent white */
     16   border-radius: 2px;
     17   cursor: default;
     18   line-height: 20px;
     19   margin: -1px 0;
     20   overflow: hidden;
     21   padding: 0px 3px;
     22   position: relative; /* to allow overlap */
     23   text-overflow: ellipsis;
     24   white-space: pre;
     25 }
     26 
     27 list > * {
     28   display: block;
     29 }
     30 
     31 grid > * {
     32   display: inline-block;
     33 }
     34 
     35 list > [lead],
     36 grid > [lead] {
     37   border-color: transparent;
     38 }
     39 
     40 list:focus > [lead],
     41 grid:focus > [lead] {
     42   border-color: hsl(214, 91%, 65%);
     43   z-index: 2;
     44 }
     45 
     46 list > [anchor],
     47 grid > [anchor] {
     48 
     49 }
     50 
     51 list:not([disabled]) > :hover,
     52 grid:not([disabled]) > :hover {
     53   border-color: hsl(214, 91%, 85%);
     54   z-index: 1;
     55   background-color: hsl(214, 91%, 97%);
     56 }
     57 
     58 list > [selected],
     59 grid > [selected] {
     60   border-color: hsl(0, 0%, 85%);
     61   background-color: hsl(0,0%,90%);
     62   z-index: 2;
     63   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
     64                                             rgba(255, 255, 255, 0));
     65 }
     66 
     67 list:focus > [selected],
     68 grid:focus > [selected] {
     69   background-color: hsl(214,91%,89%);
     70   border-color: hsl(214, 91%, 65%);
     71 }
     72 
     73 list:focus > [lead][selected],
     74 list > [selected]:hover,
     75 grid:focus > [lead][selected],
     76 grid > [selected]:hover {
     77   background-color: hsl(214, 91%, 87%);
     78   border-color: hsl(214, 91%, 65%);
     79 }
     80 
     81 list > .spacer,
     82 grid > .spacer {
     83   border: 0;
     84   box-sizing: border-box;
     85   display: block;
     86   overflow: hidden;
     87   visibility: hidden;
     88   margin: 0;
     89 }
     90