annotate core/themes/seven/css/components/tables.css @ 19:fa3358dc1485 tip

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