diff --git a/src/app/features/tasks/dialog-add-task-reminder/dialog-add-task-reminder.component.html b/src/app/features/tasks/dialog-add-task-reminder/dialog-add-task-reminder.component.html index 062de47e95..c2081a5681 100644 --- a/src/app/features/tasks/dialog-add-task-reminder/dialog-add-task-reminder.component.html +++ b/src/app/features/tasks/dialog-add-task-reminder/dialog-add-task-reminder.component.html @@ -10,6 +10,7 @@ diff --git a/src/styles.scss b/src/styles.scss index f91ca7f6c6..23645929d8 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,5 @@ @import "styles/page"; @import "styles/util"; @import "styles/components/components"; -@import "~ngx-date-time-picker-schedule/assets/style/picker.min.css"; //* {box-shadow: none !important;} diff --git a/src/styles/components/_components.scss b/src/styles/components/_components.scss index 6735af05cb..e2d329ae88 100644 --- a/src/styles/components/_components.scss +++ b/src/styles/components/_components.scss @@ -5,6 +5,7 @@ @import "backdrop"; @import "issue-table"; @import "enlarge-img"; +@import "date-time-picker-schedule"; @import "overwrite-material"; @import "promise-btn"; @import "global-error-alert"; diff --git a/src/styles/components/date-time-picker-schedule.scss b/src/styles/components/date-time-picker-schedule.scss new file mode 100644 index 0000000000..ce1b074cb3 --- /dev/null +++ b/src/styles/components/date-time-picker-schedule.scss @@ -0,0 +1,773 @@ +@import "../../variables"; + +$owl-accent-color: $c-accent; +$owl-accent-contrast-color: $c-contrast; +$owl-bg: transparent; +$owl-shadow: none; +$owl-today-not-selected: $c-primary; + +// dark theme +$owl-dark-text-color-strong: rgba(255, 255, 255, .9); +$owl-dark-text-color: rgba(255, 255, 255, .75); +$owl-dark-text-color-less-intense: rgba(255, 255, 255, .5); +$owl-dark-text-color-muted: rgba(255, 255, 255, .15); + +$owl-dark-light-selected-bg: rgba(255, 255, 255, .04); + +$owl-dark-divider-color: rgba(255, 255, 255, .12); + +$owl-dark-inp-bg-color: rgba(255, 255, 255, .08); +$owl-dark-inp-fg-color: $owl-dark-text-color-strong; +$owl-dark-arrow-color: $owl-dark-text-color-strong; + +// light (default) theme +$owl-text-color-strong: rgba(0, 0, 0, .9); +$owl-text-color: rgba(0, 0, 0, .75); +$owl-text-color-less-intense: rgba(0, 0, 0, .5); +$owl-text-color-muted: rgba(0, 0, 0, .15); + +$owl-light-selected-bg: rgba(0, 0, 0, .04); + +$owl-divider-color: rgba(0, 0, 0, .12); + +$owl-inp-bg-color: rgba(0, 0, 0, .04); + +$owl-inp-fg-color: $owl-text-color-strong; +$owl-arrow-color: $owl-text-color-strong; + + +$owl-missing: yellowgreen !default; + + +.owl-dialog-container { + position: relative; + pointer-events: auto; + box-sizing: border-box; + display: block; + padding: 1.5em; + box-shadow: $owl-shadow; + border-radius: 2px; + overflow: auto; + background: $owl-bg; + width: 100%; + height: 100%; + outline: none; + color: $owl-text-color; + + @include darkTheme(true) { + color: $owl-dark-text-color; + } +} + +.owl-dt-container, +.owl-dt-container * { + box-sizing: border-box; +} + +.owl-dt-container { + display: block; + font-size: 1rem; + background: $owl-bg; + pointer-events: auto; + z-index: 1000; +} + +.owl-dt-container-row { + border-bottom: 1px solid $owl-divider-color; + + @include darkTheme(true) { + border-color: $owl-dark-divider-color; + } + + + &:last-child { + border-bottom: none; + } +} + +.owl-dt-calendar { + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + width: 100%; +} + +.owl-dt-calendar-control { + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + font-size: 1em; + width: 100%; + padding: .5em; + color: $owl-text-color-strong; + + @include darkTheme(true) { + color: $owl-dark-text-color-strong; + } + + .owl-dt-calendar-control-content { + -webkit-box-flex: 1; + flex: 1 1 auto; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + + .owl-dt-calendar-control-button { + padding: 0 .8em; + + &:hover { + background-color: $owl-missing; + } + } + } +} + +.owl-dt-calendar-main { + display: -webkit-box; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -webkit-box-flex: 1; + flex: 1 1 auto; + padding: 0 .2em .2em; + outline: 0; +} + +.owl-dt-calendar-view { + display: block; + -webkit-box-flex: 1; + flex: 1 1 auto; +} + +.owl-dt-calendar-multi-year-view { + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + + .owl-dt-calendar-table { + width: calc(100% - 3em); + + .owl-dt-calendar-header th { + padding-bottom: .25em; + } + } +} + +.owl-dt-calendar-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + + .owl-dt-calendar-header { + color: $owl-text-color-less-intense; + + @include darkTheme(true) { + color: $owl-dark-text-color-less-intense; + } + + .owl-dt-weekdays { + th { + font-size: .7em; + font-weight: 400; + text-align: center; + padding-bottom: 0; + } + } + + .owl-dt-calendar-table-divider { + position: relative; + height: 1px; + padding-bottom: .5em; + + &:after { + content: ''; + position: absolute; + top: 0; + left: -.5em; + right: -.5em; + height: 1px; + background: $owl-divider-color; + + @include darkTheme(true) { + color: $owl-dark-divider-color; + } + } + } + } + + .owl-dt-calendar-cell { + position: relative; + height: 0; + line-height: 0; + text-align: center; + outline: 0; + color: $owl-text-color; + -webkit-appearance: none; + padding-top: 12px; + -webkit-tap-highlight-color: transparent; + + @include darkTheme(true) { + color: $owl-dark-text-color; + } + } + + .owl-dt-calendar-cell-content { + position: absolute; + top: 5%; + left: 5%; + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + box-sizing: border-box; + width: 90%; + height: 90%; + font-size: .8em; + line-height: 1; + border: 1px solid transparent; + border-radius: 999px; + color: inherit; + cursor: pointer; + } + + .owl-dt-calendar-cell-out { + opacity: .3; + } + + .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) { + border-color: $owl-today-not-selected; + } + + .owl-dt-calendar-cell-selected { + color: $owl-accent-contrast-color; + background-color: $owl-accent-color; + + &.owl-dt-calendar-cell-today { + box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .85); + } + } + + .owl-dt-calendar-cell-disabled { + cursor: default; + + & > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) { + color: $owl-text-color-muted; + + @include darkTheme(true) { + color: $owl-dark-text-color-muted; + } + } + + & > .owl-dt-calendar-cell-content.owl-dt-calendar-cell-selected { + opacity: .4; + } + + & > .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) { + border-color: $owl-missing; + } + } + + .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected), + :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) { + background-color: $owl-light-selected-bg; + + @include darkTheme(true) { + background-color: $owl-dark-light-selected-bg; + } + } + + .owl-dt-calendar-cell-in-range { + background: $owl-missing; + + &.owl-dt-calendar-cell-range-from { + border-top-left-radius: 999px; + border-bottom-left-radius: 999px; + } + + &.owl-dt-calendar-cell-range-to { + border-top-right-radius: 999px; + border-bottom-right-radius: 999px; + } + } +} + +.owl-dt-timer { + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + width: 100%; + padding: .5em; + height: auto; + outline: none; +} + +.owl-dt-timer-box { + position: relative; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -webkit-box-align: center; + align-items: center; + width: 50%; + height: 100%; +} + +.owl-dt-timer-content { + -webkit-box-flex: 1; + flex: 1 1 auto; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + width: 100%; + margin: .2em 0; + + .owl-dt-timer-input { + display: block; + width: 2em; + text-align: center; + border: 1px solid $owl-divider-color; + color: $owl-inp-fg-color; + border-radius: 3px; + outline: medium none; + font-size: 1.2em; + padding: .2em; + background: $owl-inp-bg-color; + + + @include darkTheme(true) { + border-color: $owl-dark-divider-color; + color: $owl-dark-inp-fg-color; + background: $owl-dark-inp-bg-color; + } + } +} + + +.owl-dt-timer-divider { + display: inline-block; + align-self: flex-end; + position: absolute; + width: .6em; + color: $owl-text-color-strong; + height: 100%; + left: -.3em; + + @include darkTheme(true) { + color: $owl-dark-text-color-strong; + } + + &:before, + &:after { + content: ''; + display: inline-block; + width: .35em; + height: .35em; + position: absolute; + left: 50%; + border-radius: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: currentColor; + } + + &:before { + top: 35%; + } + + &:after { + bottom: 35%; + } +} + +.owl-dt-control-button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + outline: none; + border: none; + -webkit-tap-highlight-color: transparent; + display: inline-block; + white-space: nowrap; + text-decoration: none; + vertical-align: baseline; + margin: 0; + padding: 0; + background-color: transparent; + font-size: 1em; + color: inherit; + + .owl-dt-control-button-content { + position: relative; + display: inline-flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + outline: none; + } +} + +.owl-dt-control-period-button { + .owl-dt-control-button-content { + height: 1.5em; + padding: 0 .5em; + border-radius: 3px; + -webkit-transition: background-color 100ms linear; + transition: background-color 100ms linear; + } + + &:hover > .owl-dt-control-button-content { + background-color: $owl-light-selected-bg; + + + @include darkTheme(true) { + background-color: $owl-dark-light-selected-bg; + } + } + + .owl-dt-control-button-arrow { + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + width: 1em; + height: 1em; + margin: .1em; + transition: transform 200ms ease; + color: $owl-arrow-color; + fill: $owl-arrow-color; + + @include darkTheme(true) { + color: $owl-dark-arrow-color; + fill: $owl-dark-arrow-color; + } + } +} + +.owl-dt-control-arrow-button { + color: $owl-arrow-color; + + @include darkTheme(true) { + color: $owl-dark-arrow-color; + } + + .owl-dt-control-button-content { + padding: 0; + border-radius: 50%; + width: 1.5em; + height: 1.5em; + } + + &[disabled] { + cursor: default; + color: $owl-text-color-muted; + + @include darkTheme(true) { + color: $owl-dark-text-color-muted; + } + } + + svg { + width: 50%; + height: 50%; + fill: currentColor; + } +} + +.owl-dt-inline-container, +.owl-dt-popup-container { + position: relative; + width: 18.5em; + box-shadow: $owl-shadow; + + .owl-dt-calendar, + .owl-dt-timer { + width: 100%; + } + + .owl-dt-calendar { + height: 20.25em; + } +} + +.owl-dt-inline-container { + .owl-dt-calendar { + height: auto; + } +} + + +.owl-dt-dialog-container { + max-height: 95vh; + margin: -1.5em; + + .owl-dt-calendar { + min-width: 250px; + max-width: 750px; + max-height: 750px; + } + + .owl-dt-timer { + max-width: 750px; + } +} + +@media all and (orientation: landscape) { + .owl-dt-dialog-container { + .owl-dt-calendar { + width: 58vh; + height: 62vh; + } + + .owl-dt-timer { + width: 58vh; + } + } +} + +@media all and (orientation: portrait) { + .owl-dt-dialog-container { + } +} + +.owl-dt-container-buttons { + display: -webkit-box; + display: flex; + width: 100%; + height: 2em; + color: $owl-accent-color; +} + +.owl-dt-container-control-button { + font-size: 1em; + width: 50%; + height: 100%; + border-radius: 0; + + .owl-dt-control-button-content { + height: 100%; + width: 100%; + -webkit-transition: background-color 100ms linear; + transition: background-color 100ms linear; + } + + &:hover { + .owl-dt-control-button-content { + background-color: $owl-missing; + } + } +} + +.owl-dt-container-info { + padding: 0 .5em; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + + .owl-dt-container-range { + outline: none; + + .owl-dt-container-range-content { + display: -webkit-box; + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; + padding: .5em 0; + font-size: .8em; + } + + &:last-child { + border-top: 1px solid $owl-divider-color; + + @include darkTheme(true) { + border-color: $owl-dark-divider-color; + } + } + } + + .owl-dt-container-info-active { + color: $owl-accent-color; + } +} + +.owl-dt-container-disabled, +.owl-dt-trigger-disabled { + opacity: 0.35; + filter: Alpha(Opacity=35); + background-image: none; + cursor: default !important; +} + +.owl-dt-timer-hour12 { + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + color: $owl-accent-color; + + .owl-dt-timer-hour12-box { + border: 1px solid currentColor; + border-radius: 2px; + -webkit-transition: background 200ms ease; + transition: background 200ms ease; + + .owl-dt-control-button-content { + width: 100%; + height: 100%; + padding: .5em; + } + + &:focus, &:hover { + .owl-dt-control-button-content { + background: $owl-accent-color; + color: $owl-accent-contrast-color; + } + } + } +} + +.owl-dt-calendar-only-current-month { + .owl-dt-calendar-cell-out { + visibility: hidden; + cursor: default; + } +} + +.owl-dt-inline { + display: inline-block; +} + +.owl-dt-control { + outline: none; + cursor: pointer; + + .owl-dt-control-content { + outline: none; + } + + &:focus > .owl-dt-control-content { + background-color: $owl-missing; + } + + &:not(:-moz-focusring):focus > .owl-dt-control-content { + box-shadow: none; + } +} + +.owl-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + + +.owl-header-wrapper { + display: flex; + border-bottom: 1px solid $owl-divider-color; + align-items: stretch; + + @include darkTheme(true) { + border-color: $owl-dark-divider-color; + } + + > * { + flex: 1; + + &:first-child { + border-right: 1px solid $owl-divider-color; + + @include darkTheme(true) { + border-color: $owl-dark-divider-color; + } + } + } +} + + +.owl-dt-schedule { + display: flex; + flex-direction: column; +} + +.owl-dt-schedule-item { + flex: 1; + padding: 0 0.5em; + font-size: 0.9em; + background: transparent; + border: none; + cursor: pointer; + width: auto; + display: flex; + align-items: center; + opacity: 0.7; + min-height: 2em; + color: $owl-text-color-strong; + + @include darkTheme(true) { + color: $owl-dark-text-color-strong; + } + + &:focus, + &:hover { + background: $owl-light-selected-bg; + opacity: 1; + + @include darkTheme(true) { + background: $owl-dark-light-selected-bg; + } + } +} + +.owl-dt-schedule-item--icon { + margin-right: 0.5em; + opacity: 0.7; + width: 1em; +} + +.owl-top-input { + border-bottom: 1px solid $owl-divider-color; + + @include darkTheme(true) { + border-color: $owl-dark-divider-color; + } + + input { + border: none; + width: 100%; + height: 36px; + line-height: 36px; + padding: 0 .5em; + color: $owl-inp-fg-color; + background: $owl-inp-bg-color; + + @include darkTheme(true) { + color: $owl-dark-inp-fg-color; + background: $owl-dark-inp-bg-color; + } + } +}