mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-27 02:41:56 -04:00
1a3df7039f
The scrollable tables code styles some of the cells in the target table
by looking for the `table-field-center-aligned` class.
This class was renamed in 0512f40ad3
This commit updates the scrollable tables code to refer to the new
classname, which means that things should line up properly when drawing
the table.
147 lines
2.3 KiB
SCSS
147 lines
2.3 KiB
SCSS
.fullscreen {
|
|
|
|
&-content {
|
|
|
|
background: $white;
|
|
z-index: 10;
|
|
overflow-y: hidden;
|
|
box-sizing: border-box;
|
|
margin: 0 0 $gutter 0;
|
|
padding: 0 0 0 0;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid $border-colour;
|
|
|
|
.table {
|
|
|
|
margin-bottom: 0;
|
|
|
|
tr:last-child {
|
|
td {
|
|
border-bottom: 1px solid $white;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
th,
|
|
.table-field-error-label,
|
|
.table-field-left-aligned {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
}
|
|
|
|
&-right-shadow {
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
z-index: 200;
|
|
|
|
&.visible {
|
|
|
|
&.with-transition {
|
|
transition: box-shadow 0.6s ease-out;
|
|
}
|
|
|
|
box-shadow: inset -1px 0 0 0 $border-colour, inset -3px 0 0 0 rgba($border-colour, 0.2);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-scrollable-table {
|
|
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
|
|
.table-field-heading-first,
|
|
.table-field-index {
|
|
display: none;
|
|
}
|
|
|
|
.table-field-left-aligned {
|
|
position: relative;
|
|
z-index: 150;
|
|
background: $white;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
&::-webkit-scrollbar:horizontal {
|
|
height: 11px;
|
|
background-color: $white;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 8px;
|
|
border: 2px solid $white;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: $white;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
}
|
|
|
|
&-fixed-table {
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
overflow: hidden;
|
|
|
|
.table-field-heading {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.table-field-left-aligned {
|
|
width: 0;
|
|
position: relative;
|
|
z-index: 100;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.table-field-heading-first,
|
|
.table-field-index {
|
|
transition: none;
|
|
position: relative;
|
|
z-index: 200;
|
|
background: $white;
|
|
}
|
|
|
|
}
|
|
|
|
&-scrolled-table {
|
|
|
|
padding-bottom: 20px;
|
|
|
|
.table-field-heading-first,
|
|
.table-field-index {
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
box-shadow: 1px 0 0 0 $border-colour, 3px 0 0 0 rgba($border-colour, 0.2);
|
|
}
|
|
|
|
}
|
|
|
|
&-shim {
|
|
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 9;
|
|
margin-bottom: 30px;
|
|
pointer-events: none;
|
|
|
|
& + .table-show-more-link {
|
|
margin-top: -28px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|