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

$task-shadow: $shadow-card-shadow;
$task-active-shadow-dark: $whiteframe-shadow-6dp;
$task-active-shadow-light: $whiteframe-shadow-3dp;

$task-first-line-min-height: 40px;
$task-icon-default-opacity: 0.7;
$task-current-task-zoom: 1.0178571428, 1;
$task-inner-padding-top-bottom: 4px;
$task-is-done-dim-opacity: 0.3;
$task-border-radius: 4px;

// z-indexes
$z-drag-handle: 1;
$z-task-title: 4;
$z-btn: 4;
$z-time-wrapper: 4;
$z-btn-hover: 5;
$z-hover-controls: 6;
$z-progress-bar: 7;

$z-check-done: 11;
$z-first-line-controls-hover: 12;
$z-swipe-block: 0;

$z-is-selected-host: 20;
$z-focus-host: 21;
$z-is-current-host: 22;

$z-toggle-sub-task-btn: 30;
$z-drag-over-msg: 31;
$z-task-title-focus: 32;

$z-time-btn-svg-wrapper: 5555;

// colors
$task-c-current: $c-accent;
$task-c-selected: $c-primary-700;
$task-c-focus: $c-focus-border;

$task-text-c-dark: $dark-theme-text-color-most-intense;
$task-text-c-dark: $dark-theme-text-color;
// NOTE: light is just standard color

$task-c-bg-light: #fff;
$task-c-bg-dark: $dark-theme-card-bg;

$task-c-border-light: $light-theme-extra-border-color;
$task-c-selected-border-light: $task-c-border-light;
$task-c-border-dark: $dark-theme-extra-border-color;
$task-c-selected-border-dark: $task-c-border-dark;


$task-c-selected-bg-light: $light-theme-selected-task-bg-color;
$task-c-selected-bg-dark: $dark-theme-bg-slightly-lighter;


@mixin isHostFocus($direct-parent-only-sel: false) {
  @if $direct-parent-only-sel {
    :host-context(.isNoTouchOnlyDevice):focus > #{$direct-parent-only-sel} > & {
      @content;
    }
  } @else {
    :host-context(.isNoTouchOnlyDevice):focus & {
      @content;
    }
  }
}

@mixin isDone($direct-parent-only-sel: false) {
  @if $direct-parent-only-sel {
    .inner-wrapper.isDone > #{$direct-parent-only-sel} > & {
      @content;
    }
  } @else {
    .inner-wrapper.isDone & {
      @content;
    }
  }
}

@mixin isDoneForFirstLine($direct-parent-only-sel: false) {
  :host.isDone > .inner-wrapper > .first-line & {
    @content;
  }
}


@mixin standardTaskOpacityChange {
  opacity: $task-icon-default-opacity;
  transition: transform $transition-fast;

  .isCurrent &,
  &:hover,
  &:focus {
    opacity: 1;
  }
}

@mixin taskTitle() {
  flex-grow: 1;
  text-align: start;
  outline: none;
  margin-left: 2px;
  padding: 4px 0 4px 6px;
  line-height: 1.5;
  min-height: 20px;
  text-overflow: ellipsis;
  cursor: text;
  transition: $transition-leave;
  transition-property: opacity, transform;
  background: inherit;
  position: relative;
  overflow: visible;
  user-select: none;
  caret-color: #000000;
  z-index: $z-task-title;

  // needs to be block for it not to mess up
  display: block;

  @include darkTheme() {
    caret-color: #ffffff;
  }

  &:first-letter {
    // we can't do this, as this messes up text input :/
    // text-transform: uppercase;
  }


  &:after {
    transition: $transition-leave;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    opacity: 0;
    z-index: -1;
    pointer-events: none;

    @include inlineEditElevation();
  }


  &:focus {
    z-index: $z-task-title-focus;
    user-select: all;
    // thee magic number is 16/14 so we scale to whole pixels
    transform: scale(1.142857143);
    transition: $transition-standard;
    outline: none;

    // NOTE: needed to overwrite color for current task
    color: $light-theme-text-color;

    @include mq(xs, max) {
      transform: scale(1);
    }

    @include darkTheme() {
      color: #fff;
    }

    &:after {
      opacity: 1;
      transition: $transition-standard;
    }
  }
}

%standardTaskOpacityChange {
  @include standardTaskOpacityChange;
}

%standardTaskZoom {
  &:hover,
  &:focus {
    transform: scale(1.2);
  }
}