2023-03-02 09:20:38 -05:00
|
|
|
.directory-table-top-scroll {
|
|
|
|
width: 100%;
|
|
|
|
overflow-x: auto;
|
|
|
|
}
|
|
|
|
|
2015-03-16 15:14:33 -04:00
|
|
|
.directory {
|
|
|
|
margin-bottom: 100px;
|
2018-03-29 02:57:10 -04:00
|
|
|
|
2020-03-31 04:12:52 -04:00
|
|
|
&.users-directory {
|
2021-06-08 14:20:08 -04:00
|
|
|
.directory-group-selector {
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
2020-03-31 04:12:52 -04:00
|
|
|
}
|
|
|
|
|
2016-03-24 13:05:09 -04:00
|
|
|
.user-info {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
2018-03-29 02:57:10 -04:00
|
|
|
|
2015-03-16 15:14:33 -04:00
|
|
|
.spinner {
|
|
|
|
clear: both;
|
|
|
|
}
|
2018-03-29 02:57:10 -04:00
|
|
|
|
2020-03-30 14:27:49 -04:00
|
|
|
.directory-controls {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
2020-08-26 10:14:20 -04:00
|
|
|
.total-rows {
|
|
|
|
color: var(--primary-medium);
|
2021-09-09 11:01:56 -04:00
|
|
|
font-weight: normal;
|
2020-03-30 14:27:49 -04:00
|
|
|
}
|
|
|
|
}
|
2020-03-31 04:12:52 -04:00
|
|
|
|
2020-03-30 14:27:49 -04:00
|
|
|
.directory-last-updated {
|
|
|
|
margin-bottom: 0.5em;
|
2020-08-03 22:57:10 -04:00
|
|
|
color: var(--primary-medium);
|
2022-10-12 09:31:59 -04:00
|
|
|
font-size: var(--font-down-1);
|
2020-03-30 14:27:49 -04:00
|
|
|
}
|
2015-03-16 15:14:33 -04:00
|
|
|
}
|
2021-06-07 13:34:01 -04:00
|
|
|
|
|
|
|
.edit-user-directory-columns-modal {
|
|
|
|
.edit-directory-columns-container {
|
|
|
|
.edit-directory-column {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 12px 0;
|
|
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
|
|
|
|
.column-name {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
.d-icon-heart {
|
|
|
|
color: var(--love);
|
|
|
|
margin: 0 0.25em 0 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.move-column-up {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.left-content,
|
|
|
|
.right-content {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-of-type {
|
|
|
|
border-bottom: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.modal-footer {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
.reset-to-default {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.edit-user-directory-columns-modal .modal-inner-container {
|
|
|
|
min-width: 450px;
|
|
|
|
}
|
2023-03-02 09:20:38 -05:00
|
|
|
|
|
|
|
@container (min-width: 47em) {
|
|
|
|
.users-directory {
|
|
|
|
.directory-table {
|
|
|
|
&__value {
|
|
|
|
white-space: nowrap;
|
|
|
|
font-size: var(--font-up-2);
|
|
|
|
&,
|
|
|
|
&--user-field {
|
|
|
|
color: var(--primary-medium);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.directory-table {
|
|
|
|
display: grid;
|
|
|
|
gap: 0;
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 1em;
|
|
|
|
overflow-x: auto;
|
|
|
|
|
|
|
|
.me {
|
|
|
|
.directory-table__cell {
|
|
|
|
&,
|
|
|
|
&--user-field {
|
|
|
|
background-color: var(--highlight-low-or-medium);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__header,
|
|
|
|
&__body,
|
|
|
|
&__row {
|
|
|
|
display: contents; // we'll be able to remove this with subgrid support
|
|
|
|
}
|
|
|
|
|
|
|
|
&__column-header,
|
|
|
|
&__cell,
|
|
|
|
&__cell--user-field {
|
|
|
|
display: flex;
|
|
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__column-header {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
white-space: nowrap;
|
|
|
|
color: var(--primary-medium);
|
|
|
|
padding: 0.5em;
|
|
|
|
.d-icon {
|
|
|
|
margin-right: 0.25em;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
.header-contents {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__cell {
|
|
|
|
&,
|
|
|
|
&--user-field {
|
|
|
|
padding: 0.75em 0.5em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__value {
|
|
|
|
white-space: nowrap;
|
|
|
|
&--user-field {
|
|
|
|
max-width: 30em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.d-icon-heart {
|
|
|
|
font-size: var(--font-down-1);
|
|
|
|
color: var(--love);
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-detail {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
min-width: 0; // allow content to shrink and hide overflow
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-info {
|
|
|
|
display: flex;
|
|
|
|
min-width: 0;
|
|
|
|
margin: 0;
|
|
|
|
width: 100%;
|
|
|
|
.user-image {
|
|
|
|
padding-right: 0.5em;
|
|
|
|
margin-right: 0.5em;
|
|
|
|
}
|
|
|
|
.user-detail {
|
|
|
|
padding: 0;
|
|
|
|
width: 100%;
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
// overrides existing media query
|
|
|
|
font-size: var(--font-0);
|
|
|
|
}
|
|
|
|
@include breakpoint("mobile-medium") {
|
|
|
|
font-size: var(--font-down-1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.title {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-contents {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// using a container query to switch to a flex-based layout
|
|
|
|
// browsers without support for container queries
|
|
|
|
// fallback to big horizontal scrolling table
|
|
|
|
|
|
|
|
@container (max-width: 47em) {
|
|
|
|
.directory-table {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
.me {
|
|
|
|
background-color: var(--highlight-low-or-medium);
|
|
|
|
}
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
display: inline-flex;
|
|
|
|
color: var(--primary-medium);
|
|
|
|
padding-right: 0.5em;
|
|
|
|
align-items: baseline;
|
|
|
|
align-self: start;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
span {
|
|
|
|
// caution: display flex here can interfere with overflow hiding
|
|
|
|
flex: 0 1 auto; // can shrink if needed
|
|
|
|
margin-right: 0.25em;
|
|
|
|
@include ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
// flexible divider between the label and value
|
|
|
|
&:after {
|
|
|
|
flex: 1 1 0; // can grow or shrink, but should be 0 width if needed
|
|
|
|
color: var(--primary-300);
|
|
|
|
min-width: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
// this needs to be long to account for all possible widths
|
|
|
|
content: "...................................................................................................................................";
|
|
|
|
}
|
|
|
|
|
|
|
|
.d-icon {
|
|
|
|
font-size: 0.8em;
|
|
|
|
vertical-align: baseline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__value {
|
|
|
|
font-size: var(--font-0);
|
|
|
|
color: var(--primary);
|
|
|
|
}
|
|
|
|
|
|
|
|
&__row {
|
|
|
|
&:first-child {
|
|
|
|
border-top: 1px solid var(--primary-low);
|
|
|
|
}
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
|
|
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
padding: 0.85em 0.75em 1em;
|
|
|
|
gap: 0 15%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__header {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__cell {
|
|
|
|
&,
|
|
|
|
&--user-field {
|
|
|
|
padding: 0.25em;
|
|
|
|
border: none;
|
|
|
|
&:first-child {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0.5em 0.25em 1em;
|
|
|
|
justify-content: start;
|
|
|
|
// force full width of the cell
|
|
|
|
grid-column-start: 1;
|
|
|
|
grid-column-end: -1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&--user-field {
|
|
|
|
order: 2;
|
|
|
|
// force full width of the cell
|
|
|
|
// because we don't know how much content there is
|
|
|
|
grid-column-start: 1;
|
|
|
|
grid-column-end: -1;
|
|
|
|
.directory-table__label {
|
|
|
|
margin-right: 0.25em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|