diff --git a/src/styles/components/_attract_table.sass b/src/styles/components/_attract_table.sass index 2f70fc2..c761f27 100644 --- a/src/styles/components/_attract_table.sass +++ b/src/styles/components/_attract_table.sass @@ -1,65 +1,4 @@ -$thumbnail-max-width: 110px -$thumbnail-max-height: calc(110px * (9/16)) -.pillar-table-container - background-color: white - height: 100% - -.pillar-table - display: flex - flex-direction: column - width: 100% - height: 95% // TODO: Investigate why some rows are outside screen if 100% - -.pillar-table-head - display: flex - flex-direction: row - position: relative - box-shadow: 0 5 $color-background-dark - - .cell-content - display: flex - flex-direction: row - align-items: center - height: 100% - font-size: .9em - - .column-sort - display: flex - opacity: 0 - flex-direction: column - - .sort-action - &:hover - background-color: $color-background-active - &:hover - .column-sort - opacity: 1 - -.pillar-table-row-group - display: block - overflow-y: auto - height: 100% - - .pillar-table-row:nth-child(odd) - background-color: $color-background-dark - - .pillar-table-row - display: flex - flex-direction: row - transition: all 250ms ease-in-out - background-color: $color-background-light - - &:hover - background-color: $color-background-active - - &.is-busy - +stripes-animate - +stripes(transparent, rgba($color-background-active, .6), -45deg, 4em) - animation-duration: 4s - - &.active - border-left: 0.5em solid $color-background-active .pillar-table-container.attract-tasks-table .pillar-table-row @@ -77,47 +16,13 @@ $thumbnail-max-height: calc(110px * (9/16)) min-height: 2.6em .pillar-cell - display: flex - flex-direction: column - flex-grow: 1 - flex-basis: 0 - overflow: hidden - white-space: nowrap - text-overflow: ellipsis - justify-content: center - - &.highlight - background-color: rgba($color-background-active, .4) - - &.warning - background-color: rgba($color-warning, .4) - - &.header-cell - text-transform: capitalize - color: $color-text-dark-secondary - &.attract-status flex: 0 flex-basis: 1em - - &.thumbnail - flex: 0 - flex-basis: $thumbnail-max-width - text-align: center - - img - max-width: $thumbnail-max-width - height: auto &.task-type text-transform: capitalize - a - overflow: hidden - text-overflow: ellipsis - - @include status-color-property(background-color, '', '') - .add-task-link opacity: 0 cursor: pointer @@ -148,48 +53,3 @@ $thumbnail-max-height: calc(110px * (9/16)) &.active border: 2px solid white box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2) - - -.pillar-table-menu - display: flex - flex-direction: row - - .settings-menu - display: flex - flex-direction: column - position: absolute - background-color: white - list-style: none - margin: 0 - padding: 0 - text-transform: capitalize - z-index: $z-index-base + 1 - box-shadow: 0 2px 5px rgba(black, .4) - - .pillar-table-row-filter - display: flex - flex-direction: row - - .pillar-table-actions - margin-left: auto - - .action - cursor: pointer - vertical-align: middle - color: $color-primary - border: none - background: none - - &:hover - text-decoration-line: underline - - .pillar-table-column-filter - margin-left: auto - .settings-menu - right: 0em - -.pillar-table-row-item - display: inline-block - -.pillar-table-row-enter, .pillar-table-row-leave-to - opacity: 0