super-productivity/src/app/features/tasks/task/task.component.scss

@import '../../../../variables';
@import '~angular-material-css-vars/public-util';
@import './task.component.mixins';


// TASK BOX STYLES
// ---------------
// NOTE: needs to come first to be overwritten by :host.isCurrent
// NOTE: needs to be very light, because we're on a lighter background for the dark theme
:host-context(.isDarkTheme) {
  color: $dark-theme-text-color-most-intense;
}

:host {
  display: block;
  position: relative;

  color: $light-theme-text-color;

  &.isSelected {
    z-index: $z-is-selected-host;
    //position: sticky;
    //top: 16px;
  }

  &.isCurrent {
    z-index: $z-is-current-host;
    position: sticky;
    top: $s;
  }

  &:focus {
    z-index: $z-focus-host;
    outline: none;
  }
}


.inner-wrapper {
  position: relative;
  // NOTE: -1 px because we move the box slightly up
  padding: #{$task-inner-padding-top-bottom - 1} 0 $task-inner-padding-top-bottom;
  margin-bottom: 0;
}

.box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -1px;
  transition: $transition-standard;
  transition-property: transform, box-shadow;
  border: 1px solid $task-c-border-light;

  :host.gu-mirror & {
    box-shadow: $whiteframe-shadow-8dp !important;
  }

  @include lightTheme {
    background: $task-c-bg-light;
    border-color: $task-c-border-light;
  }

  @include darkTheme {
    background: $task-c-bg-dark;
    border-color: $task-c-border-dark;
  }

  // NOTE: also applies to child tasks
  :host-context(.isLightTheme).isSelected & {
    background: $task-c-selected-bg-light;
    border-color: $task-c-selected-border-light;
    border-width: 0;
  }

  :host-context(.isDarkTheme).isSelected & {
    background: $task-c-selected-bg-dark;
    border-color: $task-c-selected-border-dark;
  }

  .inner-wrapper.isSelected > & {
    transition: $transition-enter;
    transition-property: left, right, box-shadow;
    box-shadow: $whiteframe-shadow-2dp;
    //@include darkTheme {
    //  box-shadow: $whiteframe-shadow-1dp;
    //}

    @include mq(xs) {
      transform-origin: left;
      right: -34px;
      left: -1 * $task-border-radius;
      border-top-left-radius: $task-border-radius;
      border-bottom-left-radius: $task-border-radius;
    }
  }

  @include isHostFocus('.inner-wrapper') {
    border-radius: $task-border-radius;

    @include mq(xs) {
      // NOTE: somehow ng build messes up, if we don't include it like that
      border-color: $task-c-focus;
      border-width: 1px;
      border-style: dashed !important;
    }
  }

  :host.isCurrent.isCurrent.isCurrent.isCurrent.isCurrent & {
    border-color: $task-c-current !important;
    border-width: 1px !important;

    border-radius: 12px !important;
    bottom: -2px;
    top: -2px;
    @include mq(xs) {
      transform: scale($task-current-task-zoom);
    }
  }

  :host-context(.isLightTheme).isCurrent.isCurrent.isCurrent.isCurrent & {
    box-shadow: $task-active-shadow-light;
  }

  :host-context(.isDarkTheme).isCurrent.isCurrent.isCurrent.isCurrent & {
    background: $dark-theme-bg-slightly-lighter;
    box-shadow: $task-active-shadow-dark;
  }


  :host:first-child > .inner-wrapper > & {
    border-top-left-radius: $task-border-radius;
    border-top-right-radius: $task-border-radius;
  }

  :host:last-child > .inner-wrapper > & {
    border-bottom-left-radius: $task-border-radius;
    border-bottom-right-radius: $task-border-radius;
  }
}

.sub-tasks {
  margin: $s 0 $s $s*3;
  position: relative;

  @include smallMainContainer {
    margin: $s 0 $s $s*3;
    position: relative;
  }

  @include mq(xs) {
    //margin: $s $s*2 $s $s*3;
    margin: $s 0 $s $s*5;
  }
}


.first-line {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  user-select: none;
  justify-content: space-between;
  min-height: $task-first-line-min-height;
  touch-action: pan-y;

  @include mq(xs, max) {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  //@include smallMainContainer{
  //  flex-wrap: wrap;
  //  justify-content: flex-end;
  //}
}


.title-and-left-btns-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  flex-grow: 1;
  flex-basis: 70%;
  @include mq(xs, max) {
    //margin-bottom: 5px;
    //flex-shrink: 0;
    flex-basis: 50%;
  }

  @include isDoneForFirstLine {
    opacity: $task-is-done-dim-opacity;
  }
}

// CONTROLS
// --------
.all-controls-wrapper {
  display: flex;
  flex-flow: row;
  position: relative;
  margin-left: $s;
  margin-right: $s;
  align-items: stretch;

  @include verySmallMainContainer {
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: center;
  }
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: right;
  margin-right: 2px;
  position: relative;

  button {
    margin-top: auto;
    margin-bottom: auto;
    //height: 100%;
  }

  @include mq(xs, max) {
    white-space: normal;
    margin-left: 5px;
  }

  @include smallMainContainer {
    white-space: normal;
    margin-left: 5px;
  }

  @include verySmallMainContainer {
    min-height: 40px;
  }
}


.hover-controls {
  transform-origin: right center;
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  z-index: $z-hover-controls;
  display: none;

  :host-context([dir=rtl]) & {
    position: absolute;
    transform-origin: left center;
    left: 100%;
    right: unset;
    z-index: $z-hover-controls;
  }

  @include mq(xs, max) {
    :host-context(.isTouchDevice) & {
      display: none !important;
    }
  }

  button {
    margin-top: auto;
    margin-bottom: auto;
    //height: 100%;
  }

  .first-line:hover & {
    display: flex;
    background: $task-c-bg-light;

    @include darkTheme() {
      background: $task-c-bg-dark;
    }

    //:host-context(.isLightTheme).isSelected > .inner-wrapper > & {
    //  background: $task-c-selected-bg-light;
    //}
    //
    //:host-context(.isDarkTheme).isSelected > .inner-wrapper > & {
    //  background: $task-c-selected-bg-dark;
    //}
    // NOTE: also applies to child tasks
    :host-context(.isLightTheme).isSelected & {
      background: $task-c-selected-bg-light;
    }

    :host-context(.isDarkTheme).isCurrent &,
    :host-context(.isDarkTheme).isSelected & {
      background: $task-c-selected-bg-dark;
    }

  }

  // extra hitarea
  &:after {
    position: absolute;
    top: -$s*1.5;
    right: 0;
    left: -$s*1.5;
    bottom: -$s*1.5;
    content: '';

    :host-context([dir=rtl]) & {
      right: -$s*1.5;
      left: 0;
    }
  }

  &:before {
    content: '';
    border-left: 1px solid;
    width: 1px;
    height: 90%;
    position: absolute;
    left: 0;
    top: 5%;
    opacity: 0.5;

    :host-context([dir=rtl]) & {
      right: 0;
    }
  }
}


// OTHER UI ELEMENTS
// -----------------
.title-and-tags-wrapper {
  flex-grow: 1;
}

// TASK TITLE
.task-title {
  @include taskTitle;

  .inner-wrapper.isSelected > .first-line & {
    //font-weight: bold;
  }
}


@mixin timeWrapperMinimalStyles() {
  &:after {
    content: '';
    border-top: 1px solid;
    opacity: 0.1;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
  }

  .time {
    font-size: 13px;
    flex-direction: column;
  }

  .separator {
    display: none;
  }
}


// TIME
.time-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  margin-right: $s;
  z-index: $z-time-wrapper;

  &.isEditable {
    cursor: pointer;

    &:hover {
      .time {
        transition: $transition-standard;
        opacity: 1 !important;
      }
    }
  }

  @include noTouchDevice {
    &.hasNoTimeSpentOrEstimate {
      display: none;
    }
  }

  .time {
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    font-weight: 300;

    @include mq(xs) {
      opacity: 0.5;
      flex-direction: row;
    }
  }

  .time-val,
  .separator {
    display: block;
    white-space: nowrap;
  }

  .separator {
    padding: 0 $s/2;
  }

  @include smallMainContainer {
    @include timeWrapperMinimalStyles;
  }

  @include mq(xs, max) {
    @at-root  .time-wrapper {
      @include timeWrapperMinimalStyles;

      @include isDoneForFirstLine {
        opacity: $task-is-done-dim-opacity +0.1;
      }
    }
  }

  @include verySmallMainContainer {
    flex-direction: row;
    &:after {
      display: none;
    }
    .time {
      flex-direction: row;
    }
    .separator {
      display: block;
    }
  }
}


.additional-info {
  display: block;
  // required as sort of a clearfix (fixes padding issue)
  overflow: hidden;
}


.drag-over-msg {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  z-index: $z-drag-over-msg;
}


.check-done {
  opacity: 0.5;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  z-index: $z-check-done;
  transform: translate(-50%, -50%);
  transition: $transition-standard;
  border-radius: 50%;

  &:hover {
    opacity: 1 !important;
  }

  mat-icon {
    $task-size: 40px;
    font-size: $task-size;
    height: $task-size;
    width: $task-size;
    line-height: $task-size;

    &.undo {
      display: none;
    }
  }

  &:hover {
    mat-icon {
      animation: $transition-duration-m success-btn-ani linear;
    }

    .check {
      display: none;
    }

    .undo {
      display: block;
    }
  }
}


// SWIPE BLOCKS
.block-left,
.block-right {
  position: absolute;
  top: -1* $task-inner-padding-top-bottom;
  bottom: -1* $task-inner-padding-top-bottom;
  width: 33%;
  min-width: 100px;
  z-index: $z-swipe-block;
  transition: $transition-standard;
  transform: scaleX(0);

  &.isActive {
    background-color: $c-accent;
  }

  mat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(1);
  }
}


.block-left {
  pointer-events: none;
  color: #fff;
  left: 0;
  transform-origin: left center;
  box-shadow: $shadow-card-shadow;
}

.block-right {
  pointer-events: none;
  color: #fff;
  right: 0;
  transform-origin: right center;
  box-shadow: $shadow-card-shadow;
}

progress-bar {
  z-index: $z-progress-bar;
}


// BUTTON STYLES AND DRAG HANDLE
// -----------------------------
.toggle-sub-tasks-btn,
.first-line .ico-btn {
  $task-button-spacer: 1px;
  margin: 0 $task-button-spacer;
  padding: 0;
  z-index: $z-btn;
  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: $z-btn-hover;
  }

  &:focus {
    outline: none;
  }
}

.first-line .menu-trigger {
  @include mq(xs) {
    opacity: 0;
  }
}

.first-line:hover .menu-trigger {
  @include standardTaskOpacityChange;
}

.delete-btn {
  mat-icon.delete-icon {
    color: $c-warn !important;
  }
}


.drag-handle {
  margin-left: $s;
  margin-right: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  z-index: $z-drag-handle;
  cursor: grab;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  position: relative;


  // fixes drag and drop on mobile
  touch-action: none;

  > * {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }


  .type-ico-wrapper {
    width: 40px;
    height: 40px;
    min-width: 40px;
    opacity: $task-icon-default-opacity;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    //.first-line:hover & {
    //  opacity: .7;
    //}

    :host.isCurrent &::ng-deep mat-icon {
      transform: scale(1.4) !important;
      transform-origin: center center;
      opacity: 0.18;
    }

    @include mq(xs, max) {
      display: none;
    }

    a {
      opacity: 1;
    }
  }

  .drag-handle-ico {
    @include mq(xs) {
      opacity: 0.15;
      //.first-line:hover & {
      //opacity: 0.3;
      //}
    }
  }


  &:active {
    cursor: grabbing;
  }

  // hit area
  &:after {
    content: '';
    position: absolute;
    top: -$s*0.25;
    bottom: -$s*0.25;
    left: -$s*0.25;
    right: -$s*0.25;

    @include mq(xs) {
      top: -$s*1;
      bottom: -$s*1;
      left: -$s*1;
      right: -$s*0.5;
    }
  }
}

$this-play-size: 22px;

.play-icon-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: $c-accent;

  height: $this-play-size;
  margin-top: 1px;
  width: $this-play-size;
  font-size: $this-play-size;
  line-height: $this-play-size;
  opacity: 1 !important;
  z-index: 3;

  @include mq(xs) {
    margin-top: 0;
    //left: 10px;
  }

  .first-line:hover & {
    display: none;
  }
}


.ico-btn {
  color: inherit;

  &.mat-accent {
    color: $c-accent;
  }
}

.toggle-sub-tasks-btn,
.first-line .ico-btn {
  $task-button-spacer: 1px;
  margin: auto $task-button-spacer;
  padding: 0;
  z-index: $z-btn;

  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: $z-btn-hover;
  }

  &:focus {
    outline: none;
  }
}

.toggle-sub-tasks-btn.toggle-sub-tasks-btn {
  position: absolute !important;
  transform: translateY(-50%);
  left: -24px;
  top: 50%;
  z-index: $z-toggle-sub-task-btn !important;
  min-width: 0;
  min-height: 0;
  width: 32px;
  height: 32px;
  margin-top: -1px !important;
  transform-origin: left top;
  transition-property: all;

  :host-context(.isNoTouchDevice) & {
    opacity: 0;
  }

  :host:hover & {
    opacity: 1;
  }

  mat-icon {
    transition: $transition-standard;
    margin-top: -8px;
    opacity: $task-icon-default-opacity;

    &.isHideDoneTasks {
      transform: rotate(-45deg);
    }
  }
}

.attachment-btn,
.show-additional-info-btn {
  mat-icon {
    transition: transform $transition-standard;
    backface-visibility: hidden;
  }

  &.isActive mat-icon {
    transform: rotate(45deg);
  }
}


.start-task-btn {
  :host-context(.isHidePlayBtn) & {
    display: none !important;
  }
}

// ANIMATIONS ETC
// --------------
@keyframes success-btn-ani {
  0% {
    transform: scale(0.5) rotate(-180deg);
  }
  50% {
    transform: scale(1) rotate(-90deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.isPreventPointerEventsWhilePanning {
  * {
    user-select: none !important;
    pointer-events: none !important;
    transition: none !important;
  }
}

$min-badge-size: $s*2.25;
.mini-badge {
  line-height: $min-badge-size;
  width: $min-badge-size;
  height: $min-badge-size;
  font-size: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  text-align: center;
}