mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-25 17:03:52 +00:00
780 lines
14 KiB
SCSS
780 lines
14 KiB
SCSS
@import '../../../../variables';
|
|
@import '~angular-material-css-vars/public-util';
|
|
|
|
$task-shadow: $shadow-card-shadow;
|
|
$sub-task-shadow: $whiteframe-shadow-1dp;
|
|
$task-active-shadow: $whiteframe-shadow-6dp;
|
|
$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;
|
|
|
|
// 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: 13;
|
|
|
|
$z-is-current-host: 20;
|
|
$z-focus-host: 20;
|
|
|
|
$z-toggle-sub-task-btn: 21;
|
|
$z-drag-over-msg: 22;
|
|
$z-task-title-focus: 23;
|
|
|
|
$z-time-btn-svg-wrapper: 5555;
|
|
|
|
@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;
|
|
|
|
&.isCurrent {
|
|
z-index: $z-is-current-host;
|
|
color: mat-css-contrast-color(600);
|
|
}
|
|
|
|
&:focus {
|
|
z-index: $z-focus-host;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
|
|
.inner-wrapper {
|
|
position: relative;
|
|
padding: $task-inner-padding-top-bottom 0;
|
|
margin-bottom: 0;
|
|
|
|
//&.isCurrent,
|
|
&.isAdditionalInfoOpen {
|
|
margin-top: $s*2;
|
|
margin-bottom: $s*2;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
transition: $transition-standard;
|
|
transition-property: transform;
|
|
//border-radius: $card-border-radius;
|
|
border: 1px solid $light-theme-extra-border-color;
|
|
border-bottom-color: transparent;
|
|
|
|
@include mq(xs) {
|
|
box-shadow: $task-shadow;
|
|
}
|
|
|
|
:host-context(.sub-tasks) & {
|
|
@include mq(xs) {
|
|
box-shadow: $sub-task-shadow;
|
|
}
|
|
}
|
|
|
|
@include darkTheme {
|
|
border-color: $dark-theme-bg;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
@include isHostFocus('.inner-wrapper') {
|
|
border-radius: $card-border-radius;
|
|
|
|
@include mq(xs) {
|
|
border: 1px solid $c-accent !important;
|
|
box-shadow: $whiteframe-shadow-5dp;
|
|
left: -3px;
|
|
right: -3px;
|
|
}
|
|
}
|
|
|
|
@include isCurrent {
|
|
transform: scale($task-current-task-zoom);
|
|
box-shadow: $task-active-shadow;
|
|
border-color: transparent;
|
|
border-radius: $card-border-radius;
|
|
background: mat-css-color-primary(600);
|
|
}
|
|
|
|
:host:first-child > .inner-wrapper > & {
|
|
border-top-left-radius: $card-border-radius;
|
|
border-top-right-radius: $card-border-radius;
|
|
}
|
|
|
|
:host:last-child > .inner-wrapper > & {
|
|
border-bottom-left-radius: $card-border-radius;
|
|
border-bottom-right-radius: $card-border-radius;
|
|
}
|
|
|
|
:host-context(.isLightTheme):last-child > .inner-wrapper > & {
|
|
@include mq(xs, max) {
|
|
border-bottom-color: $light-theme-extra-border-color;
|
|
}
|
|
}
|
|
|
|
:host-context(.isDarkTheme):last-child > .inner-wrapper > & {
|
|
@include mq(xs, max) {
|
|
//border-bottom-color: $dark-theme-extra-border-color;
|
|
//border-bottom-color: $dark-theme-bg;
|
|
border-bottom-color: rgb(55, 55, 55);
|
|
}
|
|
}
|
|
|
|
.inner-wrapper:not(.isCurrent) > .box {
|
|
box-shadow: none !important;
|
|
border-color: transparent;
|
|
background: transparent !important;
|
|
}
|
|
|
|
&.focus {
|
|
> .inner-wrapper:not(.isCurrent) > .box {
|
|
border-color: $c-accent !important;
|
|
}
|
|
}
|
|
|
|
:host-context(.isReducedTheme):focus > .inner-wrapper:not(.isCurrent) > & {
|
|
border-color: $c-accent !important;
|
|
}
|
|
|
|
:host-context(.isReducedTheme) > .inner-wrapper:not(.isCurrent) > & {
|
|
box-shadow: none !important;
|
|
border-color: transparent;
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
|
|
.sub-tasks {
|
|
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;
|
|
}
|
|
}
|
|
|
|
|
|
.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;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
text-align: right;
|
|
margin-right: 2px;
|
|
position: relative;
|
|
|
|
button {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
@include mq(xs, max) {
|
|
white-space: normal;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.hover-controls {
|
|
transform-origin: right center;
|
|
position: absolute;
|
|
right: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: $z-hover-controls;
|
|
|
|
|
|
@include mq(xs, max) {
|
|
display: none !important;
|
|
}
|
|
|
|
@include mq(xs) {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.first-line:hover & {
|
|
display: flex;
|
|
}
|
|
|
|
:host-context(.isReducedTheme.isDarkTheme) & {
|
|
background-color: $dark-theme-bg;
|
|
}
|
|
|
|
:host-context(.isReducedTheme.isLightTheme) & {
|
|
background-color: $light-theme-bg;
|
|
}
|
|
|
|
.inner-wrapper.isCurrent > .first-line > .all-controls-wrapper > &:before {
|
|
border-left: 1px solid rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
|
|
// extra hitarea
|
|
&:after {
|
|
position: absolute;
|
|
top: -$s*1.5;
|
|
right: 0;
|
|
left: -$s*1.5;
|
|
bottom: -$s*1.5;
|
|
content: '';
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
border-left: 1px solid;
|
|
width: 1px;
|
|
height: 90%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 5%;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
|
|
// OTHER UI ELEMENTS
|
|
// -----------------
|
|
|
|
// TASK TITLE
|
|
.task-title {
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
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 !important;
|
|
|
|
@include darkTheme() {
|
|
caret-color: #ffffff;
|
|
}
|
|
|
|
&:first-letter {
|
|
// we can't do this, as this messes up text input :/
|
|
// text-transform: uppercase;
|
|
}
|
|
|
|
.isCurrent & {
|
|
//font-weight: bold;
|
|
}
|
|
|
|
&:after {
|
|
transition: $transition-leave;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
content: '';
|
|
box-shadow: $shadow-edit-on-click;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
border-radius: $card-border-radius;
|
|
background: #fff;
|
|
|
|
@include darkTheme() {
|
|
background: $dark-theme-bg-lightest;
|
|
box-shadow: 0 0 4px 0 $dark-theme-bg-lightest, $whiteframe-shadow-13dp;
|
|
}
|
|
}
|
|
|
|
|
|
&: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;
|
|
|
|
// NOTE: needed to overwrite color for current task
|
|
color: $light-theme-text-color;
|
|
|
|
@include darkTheme() {
|
|
color: #fff;
|
|
}
|
|
|
|
.is-hide-controls & {
|
|
transform-origin: center center;
|
|
transform: scale(1.142857143) translateX(20px);
|
|
}
|
|
|
|
&:after {
|
|
opacity: 1;
|
|
transition: $transition-standard;
|
|
}
|
|
|
|
@include mq(xs, max) {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 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 mq(xs, max) {
|
|
@include isDoneForFirstLine {
|
|
opacity: $task-is-done-dim-opacity +0.1;
|
|
}
|
|
&:after {
|
|
content: '';
|
|
border-top: 1px solid;
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@include mq(xs, max) {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.time-val,
|
|
.separator {
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.separator {
|
|
padding: 0 $s/2;
|
|
@include mq(xs, max) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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 {
|
|
min-width: 24px;
|
|
margin: 0 4px 0 9px;
|
|
position: relative;
|
|
z-index: $z-drag-handle;
|
|
cursor: grab;
|
|
@extend %standardTaskOpacityChange;
|
|
|
|
// fixes drag and drop on mobile
|
|
touch-action: none;
|
|
|
|
@include mq(xs) {
|
|
opacity: 0;
|
|
.first-line:hover & {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&: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*2;
|
|
bottom: -$s*2;
|
|
left: -$s*2;
|
|
right: -$s*0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.toggle-sub-tasks-btn,
|
|
.first-line .ico-btn {
|
|
$task-button-spacer: 1px;
|
|
margin: auto $task-button-spacer;
|
|
padding: 0;
|
|
z-index: $z-btn;
|
|
color: inherit;
|
|
|
|
@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;
|
|
|
|
@include mq(xs, max) {
|
|
//display: none;
|
|
}
|
|
|
|
:host-context(.isNoTouchDevice) & {
|
|
opacity: 0;
|
|
}
|
|
|
|
@include mq(xs, max) {
|
|
//display: none;
|
|
}
|
|
|
|
:host:hover & {
|
|
opacity: 1;
|
|
}
|
|
|
|
@include reducedTheme {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
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;
|
|
}
|