aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/css/components/tables.css

   1 /**
   2  * @file
   3  * Seven styles for Tables.
   4  */
   5
   6 table {
   7   width: 100%;
   8   margin: 0 0 10px;
   9 }
  10 caption {
  11   text-align: left; /* LTR */
  12 }
  13 [dir="rtl"] caption {
  14   text-align: right;
  15 }
  16 th {
  17   text-align: left; /* LTR */
  18   padding: 10px 12px;
  19 }
  20 [dir="rtl"] th {
  21   text-align: right;
  22 }
  23 thead th {
  24   background: #f5f5f2;
  25   border: solid #bfbfba;
  26   border-width: 1px 0;
  27   color: #333;
  28   text-transform: uppercase;
  29 }
  30 tr {
  31   border-bottom: 1px solid #e6e4df;
  32   padding: 0.1em 0.6em;
  33 }
  34 thead > tr {
  35   border-bottom: 1px solid #000;
  36 }
  37 tbody tr:hover,
  38 tbody tr:focus {
  39   background: #f7fcff;
  40 }
  41 /* See colors.css */
  42 tbody tr.color-warning:hover,
  43 tbody tr.color-warning:focus {
  44   background: #fdf8ed;
  45 }
  46 tbody tr.color-error:hover,
  47 tbody tr.color-error:focus {
  48   background: #fcf4f2;
  49 }
  50
  51 td,
  52 th {
  53   vertical-align: middle;
  54 }
  55 td {
  56   padding: 10px 12px;
  57   text-align: left; /* LTR */
  58 }
  59 [dir="rtl"] td {
  60   text-align: right;
  61 }
  62 th > a {
  63   position: relative;
  64   display: block;
  65 }
  66
  67 /* 1. Must match negative bottom padding of the parent <th> */
  68 th > a:after {
  69   content: '';
  70   display: block;
  71   position: absolute;
  72   top: 0;
  73   bottom: -10px; /* 1. */
  74   left: 0;
  75   right: 0;
  76   border-bottom: 2px solid transparent;
  77   -webkit-transition: all 0.1s;
  78   transition: all 0.1s;
  79 }
  80 th.is-active > a {
  81   color: #004875;
  82 }
  83 th.is-active img {
  84   position: absolute;
  85   right: 0; /* LTR */
  86   top: 50%;
  87 }
  88 [dir="rtl"] th.is-active img {
  89   right: auto;
  90   left: 0;
  91 }
  92 th.is-active > a:after {
  93   border-bottom-color: #004875;
  94 }
  95 th > a:hover,
  96 th > a:focus,
  97 th.is-active > a:hover,
  98 th.is-active > a:focus {
  99   color: #008ee6;
 100   text-decoration: none;
 101 }
 102 th > a:hover:after,
 103 th > a:focus:after,
 104 th.is-active > a:hover:after,
 105 th.is-active > a:focus:after {
 106   border-bottom-color: #008ee6;
 107 }
 108 td .item-list ul {
 109   margin: 0;
 110 }
 111 /* This is required to win over specificity of [dir="rtl"] .item-list ul */
 112 [dir="rtl"] td .item-list ul {
 113   margin: 0;
 114 }
 115 td.is-active {
 116   background: none;
 117 }
 118
 119 /* Force browsers to calculate the width of a 'select all' <th> element. */
 120 th.select-all {
 121   width: 1px;
 122 }
 123
 124 /**
 125  * Captions.
 126  */
 127 .caption {
 128   margin-bottom: 1.2em;
 129 }
 130
 131 /**
 132  * Responsive tables.
 133  */
 134 @media screen and (max-width: 37.5em) { /* 600px */
 135   th.priority-low,
 136   td.priority-low,
 137   th.priority-medium,
 138   td.priority-medium {
 139     display: none;
 140   }
 141 }
 142 @media screen and (max-width: 60em) { /* 920px */
 143   th.priority-low,
 144   td.priority-low {
 145     display: none;
 146   }
 147 }