@import '~@styles/variables'; .connections-card { display: flex; flex-direction: column; flex: 1; margin-top: 10px; padding: 0; overflow: hidden; .connections { display: flex; flex-direction: column; width: 100%; flex-grow: 1; flex-basis: 0; overflow: auto; } .connections-body { flex: 1 0 auto; } .connections-th { $height: 30px; position: relative; text-align: center; color: $color-gray-darken; background: $color-gray-light; height: $height; line-height: $height; font-weight: 500; font-size: 14px; cursor: pointer; user-select: none; &.resizing .connections-resizer { opacity: 1; } &.fixed { position: sticky !important; left: 0; z-index: 99; } } .connections-resizer { $padding: 8px; $width: 20px; position: absolute; opacity: 0; right: $width / -2; top: $padding; bottom: $padding; width: $width; transition: opacity 0.3s ease; z-index: 10; font-size: 14px; font-weight: 300; touch-action: none; &::before { content: ''; display: block; position: absolute; left: $width / 2; transform: translateX(-2px); width: 2px; height: 100%; background-color: rgba($color-gray-darken, 60%); } } .connections-header { position: sticky; top: 0; z-index: 9999; white-space: nowrap; &:hover .connections-resizer { opacity: 1; } } .connetions-item { height: 36px; } .connections-block { display: flex; align-items: center; font-size: 14px; line-height: 36px; padding: 0 10px; color: $color-primary-darken; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &.center { text-align: center; } &.completed { background-color: darken($color-gray-light, 3%); color: rgba($color-primary-darken, 50%); } &.fixed { position: sticky; left: 0; z-index: 999; background-color: $color-white; box-shadow: 2px 8px 8px 0px rgba(0, 0, 0, 0.2); } } } .connections-filter { color: $color-primary-dark; font-size: 14px; line-height: 20px; margin-left: 15px; text-shadow: 0 0 6px rgba($color: $color-primary-dark, $alpha: 0.4); cursor: pointer; &.dangerous { color: $color-red; text-shadow: 0 0 6px rgba($color: $color-primary, $alpha: 0.2); } &.total { flex: 1; cursor: unset; } }