Commit 12aeda39 authored by Agami4's avatar Agami4
Browse files

Issue #3196848 by agami4: Improve general styles for the tables

parent e1c625ec
......@@ -155,7 +155,8 @@ body {
#skip-link a {
background: #222222;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
color: #f3f3f3;
padding: 3px 20px 8px;
text-decoration: none;
......@@ -548,63 +549,103 @@ th {
}
.table,
.path-node .body-text table {
.path-node .body-text table,
.comment .comment__text table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
font-size: 0.875rem;
border-color: #CCCCCC;
}
.table th,
.table td,
.path-node .body-text table th,
.path-node .body-text table td {
padding: 0.75rem;
.path-node .body-text table td,
.comment .comment__text table th,
.comment .comment__text table td {
padding: 0.75rem 1.25rem;
vertical-align: top;
word-wrap: break-word;
border: 1px solid #CCCCCC;
}
.table th p:last-child,
.table td p:last-child,
.path-node .body-text table th p:last-child,
.path-node .body-text table td p:last-child,
.comment .comment__text table th p:last-child,
.comment .comment__text table td p:last-child {
margin-bottom: 0;
}
.table thead th,
.path-node .body-text table thead th {
font-weight: 500;
font-size: 12px;
.path-node .body-text table thead th,
.comment .comment__text table thead th {
font-weight: 700;
font-size: 14px;
vertical-align: bottom;
border-bottom: 2px solid #e6e6e6;
}
.table thead th a,
.path-node .body-text table thead th a,
.comment .comment__text table thead th a {
font-weight: bold;
}
.table tbody + tbody,
.path-node .body-text table tbody + tbody {
border-top: 2px solid #e6e6e6;
.path-node .body-text table tbody + tbody,
.comment .comment__text table tbody + tbody {
border-top: 1px solid #CCCCCC;
}
.table .views-align-left,
.path-node .body-text table .views-align-left {
.path-node .body-text table .views-align-left,
.comment .comment__text table .views-align-left {
text-align: left;
}
.table .views-align-right,
.path-node .body-text table .views-align-right {
.path-node .body-text table .views-align-right,
.comment .comment__text table .views-align-right {
text-align: right;
}
.table .views-align-center,
.path-node .body-text table .views-align-center {
.path-node .body-text table .views-align-center,
.comment .comment__text table .views-align-center {
text-align: center;
}
.page-node-edit form .table td,
.page-node-edit form .table th,
.path-group form .table td,
.path-group form .table th,
.page-node form .table td,
.page-node form .table th {
border: none;
}
.page-node-edit form .table thead th,
.path-group form .table thead th,
.page-node form .table thead th {
font-weight: bold;
border-bottom: 2px solid #CCCCCC;
}
.table-sm th,
.table-sm td {
padding: 0.3rem;
}
.table-bordered {
border: 1px solid #e6e6e6;
border: 1px solid #CCCCCC;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #e6e6e6;
border: 1px solid #CCCCCC;
}
.table-bordered thead th,
......@@ -655,6 +696,10 @@ form:not(.layout-builder-add-block) .tabledrag-handle ~ .form-managed-file {
width: 100%;
}
.table-responsive.card__block--table {
margin-bottom: .625rem;
}
.table-responsive .table-bordered {
border: 0;
}
......@@ -686,6 +731,10 @@ form:not(.layout-builder-configure-block) .select-all.checkbox {
justify-content: left;
}
.vbo-table .btn-group--operations > .btn {
white-space: nowrap;
}
.vbo-table .form-no-label.checkbox label {
display: none;
}
......@@ -756,6 +805,99 @@ form:not(.layout-builder-configure-block) .select-all.checkbox {
padding-top: 0.5rem;
}
.card__block--table table {
margin-bottom: 0;
}
.card__block--table table th,
.card__block--table table td {
border-color: #e6e6e6;
}
.card__block--table table thead th {
border: none;
}
.card__block--table table tbody tr:nth-of-type(odd), .card__block--table table tbody tr:hover {
background-color: #f3f3f3;
}
.card__block--table table tbody td {
border-width: 1px 0 0;
}
.card__block--table table tbody td a {
font-weight: bold;
}
.card__block--table table tbody td,
.card__block--table table tbody td a {
font-size: 1rem;
line-height: 1.5rem;
}
.card__block--table table {
margin-bottom: 0;
}
.card__block--table table th,
.card__block--table table td {
border-color: #e6e6e6;
}
.card__block--table table thead th {
border: none;
}
.card__block--table table tbody tr:nth-of-type(odd), .card__block--table table tbody tr:hover {
background-color: #f3f3f3;
}
.card__block--table table tbody td {
border-width: 1px 0 0;
}
.card__block--table table tbody td a {
font-weight: bold;
}
.card__block--table table tbody td,
.card__block--table table tbody td a {
font-size: 1rem;
line-height: 1.5rem;
}
.card__block--table table {
margin-bottom: 0;
}
.card__block--table table th,
.card__block--table table td {
border-color: #e6e6e6;
}
.card__block--table table thead th {
border: none;
}
.card__block--table table tbody tr:nth-of-type(odd), .card__block--table table tbody tr:hover {
background-color: #f3f3f3;
}
.card__block--table table tbody td {
border-width: 1px 0 0;
}
.card__block--table table tbody td a {
font-weight: bold;
}
.card__block--table table tbody td,
.card__block--table table tbody td a {
font-size: 1rem;
line-height: 1.5rem;
}
b,
strong {
font-weight: bold;
......@@ -1404,6 +1546,42 @@ button.close {
h4, .h4 {
font-size: 1.25rem;
}
.card__block--table table tbody td {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
.card__block--table table tr th:first-child,
.card__block--table table tr td:first-child {
padding-left: 2.5rem;
}
.card__block--table table tr th:last-child,
.card__block--table table tr td:last-child {
padding-right: 2.5rem;
}
.card__block--table table tbody td {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
.card__block--table table tr th:first-child,
.card__block--table table tr td:first-child {
padding-left: 2.5rem;
}
.card__block--table table tr th:last-child,
.card__block--table table tr td:last-child {
padding-right: 2.5rem;
}
.card__block--table table tbody td {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
.card__block--table table tr th:first-child,
.card__block--table table tr td:first-child {
padding-left: 2.5rem;
}
.card__block--table table tr th:last-child,
.card__block--table table tr td:last-child {
padding-right: 2.5rem;
}
}
@media (min-width: 1200px) {
......@@ -1423,12 +1601,6 @@ button.close {
figure.align-left figcaption, figure.align-right figcaption, figure.align-center figcaption {
padding: 0;
}
.table-responsive {
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-bottom: 100px;
margin-bottom: -100px;
}
.table-responsive.card__block--table {
margin-bottom: 0;
}
......@@ -1458,3 +1630,12 @@ button.close {
display: none;
}
}
@media (max-width: 899px) {
.table-responsive {
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-bottom: 100px;
margin-bottom: -100px;
}
}
......@@ -47,10 +47,6 @@
padding-top: 0;
}
.card__block--table {
padding: 1.25rem 0;
}
.card__block--list:not(:first-child) {
padding-top: 0;
}
......
......@@ -8,6 +8,7 @@ $gray-light: #777777;
$gray-light-1: #adadad;
$gray-lighter: #e6e6e6;
$gray-lighter-1: #f7f7f7;
$gray-lighter-2: #CCCCCC;
$gray-lightest: #f3f3f3;
//** Global text color on `<body>`.
......
//** Padding for `<th>`s and `<td>`s.
// ** Current variable does not use for the tables.
$table-cell-padding: 0.75rem;
$table-cell-padding-y: 0.75rem;
$table-cell-padding-x: 1.25rem;
//** Padding for cells in `.table-condensed`.
$table-cell-padding-sm: 0.3rem;
......@@ -10,7 +15,7 @@ $table-hover-bg: rgba(0,0,0,.075);
$table-active-bg: $table-hover-bg;
$table-border-width: $border-width;
$table-border-color: $gray-lighter;
$table-border-color: $gray-lighter-2;
$table-head-bg: $gray-lighter;
$table-head-color: $gray;
\ No newline at end of file
......@@ -11,6 +11,7 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !def
$font-family-base: $font-family-sans-serif !default;
$font-weight-strong: 500;
$font-weight-bold: 700;
$font-size-base: 16px;
$font-size-large: floor(($font-size-base * 1.25));
......
......@@ -17,8 +17,8 @@ table {
}
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y;
color: $text-muted;
text-align: left;
caption-side: bottom;
......@@ -33,31 +33,41 @@ th {
// Baseline styles
.table,
.path-node .body-text table {
.path-node .body-text table,
.comment .comment__text table {
width: 100%;
max-width: 100%;
margin-bottom: $spacer;
background-color: $table-bg;
font-size: 0.875rem;
border-color: $table-border-color;
th,
td {
padding: $table-cell-padding;
padding: $table-cell-padding-y $table-cell-padding-x;
vertical-align: top;
word-wrap: break-word;
border: 1px solid $table-border-color;
p:last-child {
margin-bottom: 0;
}
}
// Bottom align for column headings
thead th {
font-weight: $font-weight-strong;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
font-size: $font-size-small;
vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
a {
font-weight: bold;
}
}
// Account for multiple tbody instances
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
border-top: $table-border-width solid $table-border-color;
}
// allow columns to have their own alignment
......@@ -73,6 +83,25 @@ th {
}
// Resent some table style for the create/edit pages.
.page-node-edit,
.path-group,
.page-node {
form .table {
td,
th {
border: none;
}
thead {
th {
font-weight: bold;
border-bottom: ($table-border-width * 2) solid $table-border-color;
}
}
}
}
// Condensed table w/ half padding
......@@ -170,13 +199,17 @@ form:not(.layout-builder-add-block) {
display: block;
width: 100%;
@include for-phone-only {
@include for-tablet-landscape-down {
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-bottom: 100px;
margin-bottom: -100px;
}
&.card__block--table {
margin-bottom: .625rem;
&.card__block--table {
@include for-phone-only {
margin-bottom: 0;
}
}
......@@ -229,6 +262,10 @@ form:not(.layout-builder-configure-block) .select-all.checkbox {
.vbo-table .btn-group--operations {
justify-content: left;
> .btn {
white-space: nowrap;
}
}
.vbo-table .form-no-label.checkbox label {
......@@ -316,3 +353,186 @@ form:not(.layout-builder-configure-block) .select-all.checkbox {
padding-top: 0.5rem;
}
}
// Cart table.
.card__block--table {
table {
margin-bottom: 0;
th,
td {
border-color: $gray-lighter;
}
thead {
th {
border: none;
}
}
tbody {
tr {
&:nth-of-type(odd),
&:hover {
background-color: $gray-lightest;
}
}
td {
border-width: 1px 0 0;
@include for-tablet-landscape-up {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
a {
font-weight: bold;
}
}
td,
td a {
font-size: 1rem;
line-height: 1.5rem;
}
}
tr {
@include for-tablet-landscape-up {
th,
td {
&:first-child {
padding-left: 2.5rem;
}
&:last-child {
padding-right: 2.5rem;
}
}
}
}
}
}
// Cart table.
.card__block--table {
table {
margin-bottom: 0;
th,
td {
border-color: $gray-lighter;
}
thead {
th {
border: none;
}
}
tbody {
tr {
&:nth-of-type(odd),
&:hover {
background-color: $gray-lightest;
}
}
td {
border-width: 1px 0 0;
@include for-tablet-landscape-up {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
a {
font-weight: bold;
}
}
td,
td a {
font-size: 1rem;
line-height: 1.5rem;
}
}
tr {
@include for-tablet-landscape-up {
th,
td {
&:first-child {
padding-left: 2.5rem;
}
&:last-child {
padding-right: 2.5rem;
}
}
}
}
}
}
// Cart table.
.card__block--table {
table {
margin-bottom: 0;
th,
td {
border-color: $gray-lighter;
}
thead {
th {
border: none;
}
}
tbody {
tr {
&:nth-of-type(odd),
&:hover {
background-color: $gray-lightest;
}
}
td {
border-width: 1px 0 0;
@include for-tablet-landscape-up {
padding-top: 1.875rem;
padding-bot