|
|
| (No se muestra una edición intermedia del mismo usuario) |
| Línea 1: |
Línea 1: |
| body {
| |
| background-color: red;
| |
| }
| |
|
| |
| @import "bourbon";
| |
|
| |
| // Breakpoints
| |
| $bp-maggie: 15em;
| |
| $bp-lisa: 30em;
| |
| $bp-bart: 48em;
| |
| $bp-marge: 62em;
| |
| $bp-homer: 75em;
| |
|
| |
| // Styles
| |
| * {
| |
| @include box-sizing(border-box);
| |
|
| |
| &:before,
| |
| &:after {
| |
| @include box-sizing(border-box);
| |
| }
| |
| }
| |
|
| |
| body {
| |
| font-family: $helvetica;
| |
| color: rgba(94,93,82,1);
| |
| }
| |
|
| |
| a {
| |
| color: rgba(51,122,168,1);
| |
|
| |
| &:hover,
| |
| &:focus {
| |
| color: rgba(75,138,178,1);
| |
| }
| |
| }
| |
|
| |
| .container {
| |
| margin: 5% 3%;
| |
|
| |
| @media (min-width: $bp-bart) {
| |
| margin: 2%;
| |
| }
| |
|
| |
| @media (min-width: $bp-homer) {
| |
| margin: 2em auto;
| |
| max-width: $bp-homer;
| |
| }
| |
| }
| |
|
| |
| h1 { | | h1 { |
| padding: 0.2em 0.4em; | | padding: 0.2em 0.4em; |
| Línea 61: |
Línea 11: |
| } | | } |
|
| |
|
| .responsive-table {
| | h2{ |
| width: 100%;
| | font-family: sans-serif; |
| margin-bottom: 1.5em;
| | margin: 100px auto; |
| border-spacing: 0;
| | text-align: center; |
|
| | font-size: 40px; |
| @media (min-width: $bp-bart) {
| | max-width: 600px; |
| font-size: .9em;
| | position:relative; |
| }
| | } |
|
| | h2:before{ |
| @media (min-width: $bp-marge) {
| | content: ""; |
| font-size: 1em;
| | display:block; |
| }
| | width: 120px; |
|
| | height:2px; |
| thead {
| | background: #000; |
| // Accessibly hide <thead> on narrow viewports
| | position: absolute; |
| position: absolute;
| | left: 0; |
| clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
| | top: 50%; |
| padding: 0;
| | z-index: -2; |
| border: 0;
| | } |
| height: 1px;
| | h2:after{ |
| width: 1px;
| | content: ""; |
| overflow: hidden;
| | display:block; |
|
| | width: 120px; |
| @media (min-width: $bp-bart) {
| | height:2px; |
| // Unhide <thead> on wide viewports
| | background: #000; |
| position: relative;
| | position: absolute; |
| clip: auto;
| | right: 0; |
| height: auto;
| | top: 50%; |
| width: auto;
| | z-index: -2; |
| 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;
| |
|
| |
| @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-lisa) {
| |
| border-left: 1px solid rgba(29,150,178,1);
| |
| border-bottom: 1px solid rgba(29,150,178,1);
| |
| }
| |
|
| |
| @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-bart) {
| |
| border-left: 1px solid rgba(29,150,178,1);
| |
| border-bottom: 1px solid rgba(29,150,178,1);
| |
| text-align: center;
| |
| }
| |
|
| |
| &:last-of-type {
| |
| @media (min-width: $bp-bart) {
| |
| border-right: 1px solid rgba(29,150,178,1);
| |
| }
| |
| }
| |
| }
| |
|
| |
| 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;
| |
| }
| |
| }
| |
| }
| |
| } | | } |
