super-productivity/src/app/tasks/task-additional-info/task-additional-info.component.scss

@import '../../../_variables.scss';

:host {
}

.wrapper {
  margin: $s;
  border-radius: $card-border-radius;
  border: 1px solid #dddddd;

  @include darkTheme {
    border-color: #333333;
  }

  @media (max-width: $layout-xs) {
    margin: $s/2;
  }
}

.tab-header-icon {
  &,
  ::ng-deep & {
    margin-right: $s;
  }
}

::ng-deep .mat-tab-labels {
  justify-content: stretch;
}

::ng-deep .mat-tab-label {
  flex-grow: 1;
  height: 30px;
}

.tab-label-text {
  &,
  ::ng-deep & {
    @media (max-width: $layout-xs) {
      display: none;
    }
  }
}

::ng-deep .issue-tab-header {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

.tab-content {
  // needed to overstyle current task
  @include standardThemeTextColor();
  padding: $s;
  h3 {
    margin-bottom: $s;
  }
}

.notes {
  margin: $s;

  ::ng-deep {
    .markdown-wrapper {
      min-height: 60px;
      max-height: 600px;
    }

    .markdown-unparsed,
    .markdown-parsed {
      @include standardThemeTextColor();

      background: $standard-note-ng-light;
      color: $standard-note-fg-light;
      box-sizing: border-box;

      @include darkTheme {
        background: $standard-note-bg-dark;
        color: $standard-note-fg-dark;
        border-color: #333333;
      }
    }
  }
}