Skip to content

Commit

Permalink
#673 Caption on tables
Browse files Browse the repository at this point in the history 
Signed-off-by: James Hunt <[email protected]>
  • Loading branch information
@thetwopct @cjyabraham
thetwopct authored and cjyabraham committed Mar 27, 2023
1 parent 7a2c4ab commit ae80492
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 128 deletions.
137 changes: 64 additions & 73 deletions web/wp-content/themes/lfevents/src/assets/scss/admin/_tables-admin.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
table:not(.wp-block-cgb-block-pricing-block):not(.has-background) {

&,
tbody,
tr {
Expand Down Expand Up @@ -33,8 +32,8 @@ table:not(.wp-block-cgb-block-pricing-block):not(.has-background) {
text-decoration: underline;
}

strong>em,
em>strong {
strong > em,
em > strong {
font-family: $font-family-monospace;
font-style: normal;
font-weight: bold;
Expand All @@ -45,34 +44,20 @@ table:not(.wp-block-cgb-block-pricing-block):not(.has-background) {

// Sets a grey background for default tables.
.wp-block-table table:not(.has-background):not(.wp-block-cgb-block-pricing-block) {


border-collapse: initial;

thead,
tfoot {
background: inherit;
}

// td,
// th,
// tbody,
// thead,
// tfoot {
// outline-style: dashed;
// outline-color: #D8D8D8;
// outline-width: 1px;
// }

.wp-block-table__cell-content {
outline-style: dashed;
outline-color: #D8D8D8;
outline-color: #d8d8d8;
outline-width: 1px;
}
}

table:not(.wp-block-cgb-block-pricing-block) {

td,
th {
font-size: calc(#{rem-calc(10)} + 0.5vw);
Expand All @@ -95,30 +80,26 @@ table:not(.wp-block-cgb-block-pricing-block) {
text-decoration: underline;
}

strong>em,
em>strong {
strong > em,
em > strong {
font-family: $font-family-monospace;
font-style: normal;
font-weight: bold;
font-size: 1em; // 1.1
}
}

}

// make sure the weird standard colors work.
.wp-block-table .has-subtle-light-gray-background-color {

thead,
tr,
tfoot {

background-color: #f3f4f5;
}
}

.wp-block-table .has-subtle-pale-green-background-color {

thead,
tr,
tfoot {
Expand All @@ -127,7 +108,6 @@ table:not(.wp-block-cgb-block-pricing-block) {
}

.wp-block-table .has-subtle-pale-blue-background-color {

thead,
tr,
tfoot {
Expand All @@ -136,7 +116,6 @@ table:not(.wp-block-cgb-block-pricing-block) {
}

.wp-block-table .has-subtle-pale-pink-background-color {

thead,
tr,
tfoot {
Expand All @@ -146,9 +125,7 @@ table:not(.wp-block-cgb-block-pricing-block) {

// Stacked responsive styles except on column header tables.
.wp-block-table:not(.is-style-table-with-column-headers) {

@media (max-width: 600px) {

// align all cells on new line 100%.
table,
thead,
Expand All @@ -167,8 +144,7 @@ table:not(.wp-block-cgb-block-pricing-block) {
}

// for normal tables, remove border (as used in group).
table:not([class^="has-"]) {

table:not([class^='has-']) {
td,
th {
border: 0;
Expand All @@ -179,8 +155,7 @@ table:not(.wp-block-cgb-block-pricing-block) {
}
}

table[class^="has-"] {

table[class^='has-'] {
td,
th {
border: 0;
Expand All @@ -190,16 +165,15 @@ table:not(.wp-block-cgb-block-pricing-block) {
&:last-of-type {
border-bottom: 4px solid transparent;
}

}

tr:first-of-type {
border-top: 4px solid transparent;
}

tr:last-of-type {}
tr:last-of-type {
}
}

}

// restricting to 50% of width on desktops.
Expand All @@ -208,7 +182,6 @@ table:not(.wp-block-cgb-block-pricing-block) {
width: 100%;

table {

@media (min-width: 1024px) {
margin-left: auto;
margin-right: auto;
Expand All @@ -231,14 +204,13 @@ table:not(.wp-block-cgb-block-pricing-block) {

// Column Header table (uses responsive-table.js).
.wp-block-table.is-style-table-with-column-headers {

td,
th {
font-size: 0.9em;
padding: 1vw !important;
width: 15%;
text-align: center;
border: .5px solid $lf-gray;
border: 0.5px solid $lf-gray;

@include breakpoint(large) {
font-size: 1em;
Expand All @@ -261,101 +233,100 @@ table:not(.wp-block-cgb-block-pricing-block) {
}

ul.tabletolist img {
max-width: 100%
max-width: 100%;
}

ul.tabletolist.nrh {
border-bottom: 2px solid $lf-gray;
}

ul.tabletolist.nrh>li {
ul.tabletolist.nrh > li {
border-top: 2px solid $lf-gray;
}

ul.tabletolist,
ul.tabletolist>li>ul {
ul.tabletolist > li > ul {
padding: 0 !important;
list-style: none !important;
}

ul.tabletolist>li>ul {
ul.tabletolist > li > ul {
margin: 0 !important;
}

ul.tabletolist>li .titles {
ul.tabletolist > li .titles {
background-color: #f8f8f8;
display: block;
color: $black;
padding: 10px;
font-weight: 700
font-weight: 700;
}

ul.tabletolist>li {
border-top: .5px solid $lf-gray;
border-left: .5px solid $lf-gray;
border-right: .5px solid $lf-gray;
ul.tabletolist > li {
border-top: 0.5px solid $lf-gray;
border-left: 0.5px solid $lf-gray;
border-right: 0.5px solid $lf-gray;

&:last-child {
border-bottom: .5px solid $lf-gray;
border-bottom: 0.5px solid $lf-gray;
}
}

ul.tabletolist>li>ul>li {
ul.tabletolist > li > ul > li {
font-weight: 300;
padding: 10px
padding: 10px;
}

ul.tabletolist>li>ul>li:hover {
background-color: #efefef
ul.tabletolist > li > ul > li:hover {
background-color: #efefef;
}

ul.tabletolist>li>ul>li:last-child {
border-bottom: none
ul.tabletolist > li > ul > li:last-child {
border-bottom: none;
}

ul.tabletolist ul>li .row_headers {
ul.tabletolist ul > li .row_headers {
max-width: 40%;
float: left;
margin-right: 3%
margin-right: 3%;
}

ul.tabletolist ul>li .row_data {
ul.tabletolist ul > li .row_data {
float: right;
font-weight: 800;
max-width: 57%;
width: 100%;
text-align: left;
}

ul.tabletolist>li>ul>li {
*zoom: 1
ul.tabletolist > li > ul > li {
*zoom: 1;
}

ul.tabletolist>li>ul>li:before {
content: " ";
display: table
ul.tabletolist > li > ul > li:before {
content: ' ';
display: table;
}

ul.tabletolist>li>ul>li:after {
content: " ";
ul.tabletolist > li > ul > li:after {
content: ' ';
display: table;
clear: both
clear: both;
}

ul.tabletolist ul>li .row_data.html {
font-weight: 400
ul.tabletolist ul > li .row_data.html {
font-weight: 400;
}

ul.tabletolist ul>li .row_data.html ul {
list-style-type: disc
ul.tabletolist ul > li .row_data.html ul {
list-style-type: disc;
}

.row_data.html {
display: flex;
flex-wrap: wrap;


>*:not(:last-child) {
> *:not(:last-child) {
margin-right: 10px;
}

Expand All @@ -368,10 +339,30 @@ table:not(.wp-block-cgb-block-pricing-block) {
display: flex;
flex-wrap: wrap;

>*:not(:last-child) {
> *:not(:last-child) {
margin-right: 10px;
}
}
}
}
}

// Makes the caption more obvious.
figure[data-type='core/table'] {
figcaption {
font-size: 16px;
padding: 1rem;
border: 1px solid #f3f4f5;
position: relative;

&:before {
content: 'ACCESSIBILITY CAPTION';
color: #d8d8d8;
position: absolute;
left: 1px;
top: 0;
line-height: 1;
font-size: 12px;
}
}
}
Loading

0 comments on commit ae80492

Please sign in to comment.