|
|
| Line 626: |
Line 626: |
| | } | | } |
| | | | |
| − | @import "bourbon";
| + | #HQ_page td { |
| − | | + | padding: 10px; |
| − | // Breakpoints
| + | border: 1px solid #ccc; |
| − | $bp-maggie: 15em;
| + | border-collapse: collapse; |
| − | $bp-lisa: 30em;
| + | vertical-align: text-top; |
| − | $bp-bart: 48em;
| + | background-color: white; |
| − | $bp-marge: 62em;
| + | font-family: Helvetica; |
| − | $bp-homer: 75em;
| + | font-weight: 300; |
| − | | + | |
| − | // Styles
| + | |
| − | * {
| + | |
| − | @include box-sizing(border-box);
| + | |
| − |
| + | |
| − | &:before,
| + | |
| − | &:after {
| + | |
| − | @include box-sizing(border-box);
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | body {
| + | #HQ_page th { |
| − | font-family: $helvetica;
| + | background-color: #f2f2f2; |
| − | color: rgba(94,93,82,1);
| + | padding: 10px; |
| | + | color: black; |
| | + | border: 1px solid #ccc; |
| | + | border-collapse: collapse; |
| | + | vertical-align: text-top; |
| | + | font-family: Helvetica; |
| | + | font-weight: 501; |
| | } | | } |
| | | | |
| − | a {
| |
| − | color: rgba(51,122,168,1);
| |
| − |
| |
| − | &:hover,
| |
| − | &:focus {
| |
| − | color: rgba(75,138,178,1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .container_table {
| |
| − | margin: 5% 3%;
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | margin: 2%;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-homer) {
| |
| − | margin: 2em auto;
| |
| − | max-width: $bp-homer;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .responsive-table {
| |
| − | width: 100%;
| |
| − | margin-bottom: 1.5em;
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | font-size: .9em;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-marge) {
| |
| − | font-size: 1em;
| |
| − | }
| |
| − |
| |
| − | thead {
| |
| − | // Accessibly hide <thead> on narrow viewports
| |
| − | position: absolute;
| |
| − | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
| |
| − | clip: rect(1px, 1px, 1px, 1px);
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | height: 1px;
| |
| − | width: 1px;
| |
| − | overflow: hidden;
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | // Unhide <thead> on wide viewports
| |
| − | position: relative;
| |
| − | clip: auto;
| |
| − | height: auto;
| |
| − | width: auto;
| |
| − | overflow: auto;
| |
| − | }
| |
| − |
| |
| − | th {
| |
| − | background-color: rgba(29,150,178,1);
| |
| − | border: 1px solid rgba(29,150,178,1);
| |
| − | font-weight: normal;
| |
| − | text-align: center;
| |
| − | color: white;
| |
| − |
| |
| − | &:first-of-type {
| |
| − | text-align: left;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Set these items to display: block for narrow viewports
| |
| − | tbody,
| |
| − | tr,
| |
| − | th,
| |
| − | td {
| |
| − | display: block;
| |
| − | padding: 0;
| |
| − | text-align: left;
| |
| − | white-space: normal;
| |
| − | }
| |
| − |
| |
| − | tr {
| |
| − | @media (min-width: $bp-bart) {
| |
| − | // Undo display: block
| |
| − | display: table-row;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | th,
| |
| − | td {
| |
| − | padding: .5em;
| |
| − | vertical-align: middle;
| |
| − |
| |
| − | @media (min-width: $bp-lisa) {
| |
| − | padding: .75em .5em;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | // Undo display: block
| |
| − | display: table-cell;
| |
| − | padding: .5em;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-marge) {
| |
| − | padding: .75em .5em;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-homer) {
| |
| − | padding: .75em;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | caption {
| |
| − | margin-bottom: 1em;
| |
| − | font-size: 1em;
| |
| − | font-weight: bold;
| |
| − | text-align: center;
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | font-size: 1.5em;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | tfoot {
| |
| − | font-size: .8em;
| |
| − | font-style: italic;
| |
| − |
| |
| − | @media (min-width: $bp-marge) {
| |
| − | font-size: .9em;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | tbody {
| |
| − | @media (min-width: $bp-bart) {
| |
| − | // Undo display: block
| |
| − | display: table-row-group;
| |
| − | }
| |
| − |
| |
| − | tr {
| |
| − | margin-bottom: 1em;
| |
| − | border: 2px solid rgba(29,150,178,1);
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | // Undo display: block
| |
| − | display: table-row;
| |
| − | border-width: 1px;
| |
| − | }
| |
| − |
| |
| − | &:last-of-type {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − |
| |
| − | &:nth-of-type(even) {
| |
| − | @media (min-width: $bp-bart) {
| |
| − | background-color: rgba(94,93,82,.1);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | th[scope="row"] {
| |
| − | background-color: rgba(29,150,178,1);
| |
| − | color: white;
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | background-color: transparent;
| |
| − | color: rgba(94,93,82,1);
| |
| − | text-align: left;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | td {
| |
| − | text-align: right;
| |
| − |
| |
| − | @media (min-width: $bp-lisa) {
| |
| − | border-bottom: 1px solid rgba(29,150,178,1);
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | text-align: center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | td[data-type=currency] {
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − | td[data-title]:before {
| |
| − | content: attr(data-title);
| |
| − | float: left;
| |
| − | font-size: .8em;
| |
| − | color: rgba(94,93,82,.75);
| |
| − |
| |
| − | @media (min-width: $bp-lisa) {
| |
| − | font-size: .9em;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: $bp-bart) {
| |
| − | // Don’t show data-title labels
| |
| − | content: none;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| | </style> | | </style> |
| | | | |
