scinote-web/app/assets/stylesheets/experiment/table.scss

584 lines
10 KiB
SCSS

// scss-lint:disable SelectorDepth NestingDepth IdSelector
#experimentTable {
--content-header-size: 5em;
--toolbar-height: 4.5em;
position: relative;
.title-row {
.header-actions {
&.experiment-header {
column-gap: .25em;
}
.sort-task-menu {
&:not(.archived) {
[data-view-mode="archived"] {
display: none;
}
}
}
}
}
.experiment-table-container {
height: calc(100vh - var(--content-header-size) - var(--navbar-height) - var(--toolbar-height));
overflow: auto;
}
.toolbar-row {
align-items: center;
display: flex;
height: var(--toolbar-height);
justify-content: space-between;
.toolbar-left-block {
align-items: center;
display: flex;
.btn {
margin-right: .25em;
}
}
.header-actions {
&.experiment-header {
column-gap: .25em;
}
.sort-task-menu {
&:not(.archived) {
[data-view-mode="archived"] {
display: none;
}
}
}
}
.view-switch-button {
outline: 1px solid $color-alto;
}
.view-switch,
.filter-container {
display: inline-block;
}
.view-switch {
margin-left: auto;
.caret {
margin: 8px 0 8px 8px;
}
&.open {
.caret {
transform: rotateX(180deg);
}
.sn-icon-down {
transform: rotateX(180deg);
}
}
.dropdown-menu {
@include font-button;
min-width: 100%;
padding: 0;
.divider-label {
@include font-small;
color: $color-silver-chalice;
padding: .25em 1em;
}
.divider {
margin: 0;
}
li {
cursor: pointer;
padding: .5em 1em;
white-space: nowrap;
.button-icon {
margin-right: .5em;
}
&:hover:not(.divider-label) {
background: $color-concrete;
}
.btn {
height: 36px;
}
a {
display: inline-block;
margin: -1em;
padding: .5em 1em;
width: calc(100% + 2em);
&.selected::after {
@include font-awesome;
content: $font-fas-check;
margin-left: auto;
position: absolute;
right: 1em;
}
}
}
}
.cards-switch {
&.active::after {
@include font-awesome;
content: "\f00c";
position: absolute;
right: 1em;
}
}
}
.toolbar-right-block {
margin-left: auto;
}
}
.experiment-table {
display: grid;
grid-auto-rows: 3em 1px;
grid-template-columns: max-content repeat(calc(var(--columns-count)), minmax(100px, auto)) max-content;
min-width: 100%;
.table-header-cell {
align-items: center;
background-color: $color-concrete;
border: 1px solid $color-white;
display: flex;
height: 3em;
padding: 0 .5em;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 7;
&.select-all-checkboxes {
justify-content: center;
}
.fa-comment {
color: $color-silver-chalice;
}
}
.table-header {
display: contents;
height: 10px;
&::after {
content: "";
grid-column: 1/-1;
}
}
.table-body {
display: contents;
.table-body-cell {
display: flex;
}
.table-body-cell:nth-child(1) {
justify-content: center;
}
}
.loading-overlay {
display: none;
}
.table-row-provisioning {
.loading-overlay {
display: block;
}
.sci-checkbox-container {
height: 1.5em;
width: 1.5em;
.loading-overlay::after {
background-size: 1.5em;
cursor: default;
}
.sci-checkbox,
.sci-checkbox-label {
display: none;
}
}
}
.table-body-cell {
align-items: center;
display: flex;
padding: 0 .5em;
.my-module-users-link {
color: $color-silver-chalice;
&:hover {
text-decoration: none;
}
}
.global-avatar-container {
color: $color-silver-chalice;
height: 2em;
line-height: 2em;
margin-right: .25em;
width: 2em;
}
.more-users {
background: $color-volcano;
border-radius: 50%;
color: $color-white;
height: 2em;
line-height: 2em;
margin-right: .25em;
text-align: center;
text-decoration: none;
width: 2em;
}
.new-user {
background: $color-concrete;
text-align: center;
}
}
.archived-column {
display: none;
}
.comments-column .disabled {
color: $color-silver-chalice;
}
.table-row {
display: contents;
&::after {
background: $color-concrete;
content: "";
display: inline-block;
grid-column: 1/-1;
height: 1px;
}
}
.open-my-module-menu:focus {
box-shadow: 0 0 0 1px $brand-focus;
}
.assign-users-dropdown {
.dropdown-menu {
padding: .5em;
width: 280px;
}
.users-list {
max-height: 300px;
overflow: auto;
}
.user-container {
align-items: center;
display: flex;
padding: .5em;
.user-avatar {
padding: 0 .75em;
&.archived {
padding-left: 0;
}
img {
border-radius: 50%;
width: 24px;
}
}
}
.assigned-users-container {
cursor: pointer;
display: flex;
}
.avatar-container {
align-items: center;
border: 1px solid $color-white;
border-radius: 50%;
display: inline-flex;
height: 26px;
justify-content: center;
margin-right: -5px;
width: 26px;
img {
border-radius: 50%;
max-height: 100%;
max-width: 100%;
}
}
.more-users {
font-size: 10px;
line-height: 24px;
}
.new-user {
color: var(--sn-black);
line-height: 24px;
&:not(:first-child) {
margin-left: 5px;
}
}
}
.my-module-status {
color: $color-white;
display: inline-block;
margin: 3px 0;
max-width: 100%;
overflow: hidden;
padding: 2px 8px;
text-overflow: ellipsis;
white-space: nowrap;
&.status-light {
@include not-started;
}
}
.table-row-placeholder-divider {
background: $color-concrete;
display: inline-block;
grid-column: 1/-1;
height: 1px;
}
.table-row-placeholder {
align-items: center;
background-color: $color-white;
border-radius: $border-radius-default;
box-shadow: $flyout-shadow;
display: grid;
grid-column: 1 / -1;
grid-template-columns: 32px repeat(9, minmax(max-content, auto));
.placeholder-cell {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: placeholder-pulsing;
background-color: $color-alto;
border-radius: $border-radius-default;
display: block;
height: 18px;
margin: auto;
width: 90%;
&.circle-0 {
border-radius: 100%;
height: 24px;
width: 24px;
}
@keyframes placeholder-pulsing {
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
}
}
&.last-page {
padding-bottom: 5em;
position: relative;
&.no-data {
padding-bottom: 0;
}
}
.experiment-table-list-end-placeholder {
align-items: center;
background-color: $color-concrete;
bottom: 1em;
display: flex;
height: 3em;
left: calc(50% - 150px);
margin: 0 auto;
padding: 1em;
position: absolute;
width: 300px;
> * {
flex-grow: 1;
text-align: center;
}
}
}
.unseen-comments {
align-items: center;
background-color: var(--sn-science-blue);
border: 1px solid $color-white;
border-radius: 50%;
color: var(--sn-white);
display: flex;
font-weight: bold;
font-size: 11px;
height: 16px;
justify-content: center;
margin: -4px -14px 0 0;
min-width: 16px;
right: 0;
position: absolute;
top: 0;
}
.datetime-container {
width: 100%;
.clear-date {
cursor: pointer;
left: calc(100% - 16px);
text-align: center;
width: 24px;
&.open {
visibility: visible;
}
}
.date-text {
.alert-yellow {
color: $brand-warning;
margin-left: 4px;
}
.alert-red {
color: $brand-danger;
margin-left: 4px;
}
}
.datetime-picker-container {
left: 0;
position: absolute;
top: 0;
width: calc(100% - 24px);
.calendar-due-date {
opacity: 0;
}
}
}
.open-comments-sidebar {
margin-bottom: 0;
position: relative;
}
&.archived {
.table-body-cell {
background-color: $color-concrete;
}
.archived-column {
display: flex;
}
}
.task_name-column {
a {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
}
span {
color: $color-silver-chalice;
}
}
.no-data-container {
display: none;
}
}
.table-display-modal {
.modal-description,
.column-container {
font-size: 14px;
}
.column-container {
align-items: center;
border-bottom: $border-default;
display: flex;
padding: .5em 1.4em;
&:not(.visible) {
color: $color-alto;
}
&:last-child {
border: 0;
}
.fas {
cursor: pointer;
margin-right: 1em;
&.disabled {
color: $color-alto;
pointer-events: none;
}
}
.sn-icon {
cursor: pointer;
margin-right: .6em;
&.disabled {
cursor: not-allowed;
}
}
}
}
@media (max-width: 1000px) {
.toolbar-row {
.button-text {
display: none;
}
}
}