git.roojs.org Git - ratchet/blob - lib/css/lists.css

   1 /* Lists
   2 -------------------------------------------------- */
   3
   4 /* Remove usual bullet styles from list */
   5 .list {
   6   margin-bottom: 10px;
   7   list-style: none;
   8   background-color: #fff;
   9 }
  10
  11 /* Pad each list item and add dividers */
  12 .list li {
  13   position: relative;
  14   padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
  15   border-bottom: 1px solid rgba(0, 0, 0, .1);
  16 }
  17
  18 /* Give top border to first list items */
  19 .list li:first-child {
  20   border-top: 1px solid rgba(0, 0, 0, .1);
  21 }
  22
  23 /* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
  24 .list li > a:not([class*="button"]) {
  25   position: relative;
  26   display: block;
  27   padding: inherit;
  28   margin: -20px -60px -20px -10px;
  29   color: inherit;
  30 }
  31
  32 /* Inset list
  33 -------------------------------------------------- */
  34
  35 .list.inset {
  36   width: auto;
  37   margin-right: 10px;
  38   margin-left: 10px;
  39   border: 1px solid rgba(0, 0, 0, .1);
  40   border-radius: 6px;
  41   box-sizing: border-box;
  42 }
  43
  44 /* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
  45 .list.inset li:first-child {
  46   border-top-width: 0;
  47 }
  48 .list.inset li:last-child {
  49   border-bottom-width: 0;
  50 }
  51
  52
  53 /* List dividers
  54 -------------------------------------------------- */
  55
  56 .list .list-divider {
  57   position: relative;
  58   top: -1px;
  59   padding-top: 6px;
  60   padding-bottom: 6px;
  61   font-size: 12px;
  62   font-weight: bold;
  63   line-height: 18px;
  64   text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  65   background-color: #f8f8f8;
  66   background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%);
  67   background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%);
  68   border-top: 1px solid rgba(0, 0, 0, .1);
  69   border-bottom: 1px solid rgba(0, 0, 0, .1);
  70   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
  71 }
  72
  73 /* Rounding first divider on inset lists and remove border on the top */
  74 .list.inset .list-divider:first-child {
  75   top: 0;
  76   border-top-width: 0;
  77   border-radius: 6px 6px 0 0;
  78 }
  79
  80 /* Rounding last divider on inset lists */
  81 .list.inset .list-divider:last-child {
  82   border-radius: 0 0 6px 6px;
  83 }
  84
  85 /* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
  86 -------------------------------------------------- */
  87 .list .chevron,
  88 .list [class*="button"],
  89 .list [class*="count"],
  90 .list .toggle {
  91   position: absolute;
  92   top: 50%;
  93   right: 10px;
  94 }
  95
  96  /* Position chevrons/counts vertically centered on the right in list items */
  97 .list .chevron,
  98 .list [class*="count"] {
  99   margin-top: -10px; /* Half height of chevron */
 100 }
 101
 102 /* Push count over if there's a sibling chevron */
 103 .list .chevron + [class*="count"] {
 104   right: 30px;
 105 }
 106
 107 /* Position buttons vertically centered on the right in list items */
 108 .list [class*="button"] {
 109   left: auto;
 110   margin-top: -14px; /* Half height of button */
 111 }
 112
 113 .list .toggle {
 114   margin-top: -15px; /* Half height of toggle */
 115 }