diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss')
| -rw-r--r-- | packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss | 259 |
1 files changed, 259 insertions, 0 deletions
diff --git a/packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss b/packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss new file mode 100644 index 000000000..62414a00a --- /dev/null +++ b/packages/merchant-backoffice-ui/src/scss/_custom-calendar.scss @@ -0,0 +1,259 @@ +/* + This file is part of GNU Taler + (C) 2021-2024 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +:root { + --primary-color: #3298dc; + + --primary-text-color-dark: rgba(0, 0, 0, 0.87); + --secondary-text-color-dark: rgba(0, 0, 0, 0.57); + --disabled-text-color-dark: rgba(0, 0, 0, 0.13); + + --primary-text-color-light: rgba(255, 255, 255, 0.87); + --secondary-text-color-light: rgba(255, 255, 255, 0.57); + --disabled-text-color-light: rgba(255, 255, 255, 0.13); + + --font-stack: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; + + --primary-card-color: #fff; + --primary-background-color: #f2f2f2; + + --box-shadow-lvl-1: 0 1px 3px rgba(0, 0, 0, 0.12), + 0 1px 2px rgba(0, 0, 0, 0.24); + --box-shadow-lvl-2: 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); + --box-shadow-lvl-3: 0 10px 20px rgba(0, 0, 0, 0.19), + 0 6px 6px rgba(0, 0, 0, 0.23); + --box-shadow-lvl-4: 0 14px 28px rgba(0, 0, 0, 0.25), + 0 10px 10px rgba(0, 0, 0, 0.22); +} + +.datePicker { + text-align: left; + background: var(--primary-card-color); + border-radius: 3px; + z-index: 200; + position: fixed; + height: auto; + max-height: 90vh; + width: 90vw; + max-width: 448px; + transform-origin: top left; + transition: transform 0.22s ease-in-out, opacity 0.22s ease-in-out; + top: 50%; + left: 50%; + opacity: 0; + transform: scale(0) translate(-50%, -50%); + user-select: none; + + &.datePicker--opened { + opacity: 1; + transform: scale(1) translate(-50%, -50%); + } + + .datePicker--titles { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + padding: 24px; + height: 100px; + background: var(--primary-color); + + h2, + h3 { + cursor: pointer; + color: #fff; + line-height: 1; + padding: 0; + margin: 0; + font-size: 32px; + } + + h3 { + color: rgba(255, 255, 255, 0.57); + font-size: 18px; + padding-bottom: 2px; + } + } + + nav { + padding: 20px; + height: 56px; + + h4 { + width: calc(100% - 60px); + text-align: center; + display: inline-block; + padding: 0; + font-size: 14px; + line-height: 24px; + margin: 0; + position: relative; + top: -9px; + color: var(--primary-text-color); + } + + i { + cursor: pointer; + color: var(--secondary-text-color); + font-size: 26px; + user-select: none; + border-radius: 50%; + + &:hover { + background: var(--disabled-text-color-dark); + } + } + } + + .datePicker--scroll { + overflow-y: auto; + max-height: calc(90vh - 56px - 100px); + } + + .datePicker--calendar { + padding: 0 20px; + + .datePicker--dayNames { + width: 100%; + display: grid; + text-align: center; + + // there's probably a better way to do this, but wanted to try out CSS grid + grid-template-columns: + calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) + calc(100% / 7) calc(100% / 7) calc(100% / 7); + + span { + color: var(--secondary-text-color-dark); + font-size: 14px; + line-height: 42px; + display: inline-grid; + } + } + + .datePicker--days { + width: 100%; + display: grid; + text-align: center; + grid-template-columns: + calc(100% / 7) calc(100% / 7) calc(100% / 7) calc(100% / 7) + calc(100% / 7) calc(100% / 7) calc(100% / 7); + + span { + color: var(--primary-text-color-dark); + line-height: 42px; + font-size: 14px; + display: inline-grid; + transition: color 0.22s; + height: 42px; + position: relative; + cursor: pointer; + user-select: none; + border-radius: 50%; + + &::before { + content: ""; + position: absolute; + z-index: -1; + height: 42px; + width: 42px; + left: calc(50% - 21px); + background: var(--primary-color); + border-radius: 50%; + transition: transform 0.22s, opacity 0.22s; + transform: scale(0); + opacity: 0; + } + + &[disabled="true"] { + cursor: unset; + } + + &.datePicker--today { + font-weight: 700; + } + + &.datePicker--selected { + color: rgba(255, 255, 255, 0.87); + + &:before { + transform: scale(1); + opacity: 1; + } + } + } + } + } + + .datePicker--selectYear { + padding: 0 20px; + display: block; + width: 100%; + text-align: center; + max-height: 362px; + + span { + display: block; + width: 100%; + font-size: 24px; + margin: 20px auto; + cursor: pointer; + + &.selected { + font-size: 42px; + color: var(--primary-color); + } + } + } + + div.datePicker--actions { + width: 100%; + padding: 8px; + text-align: right; + + button { + margin-bottom: 0; + font-size: 15px; + cursor: pointer; + color: var(--primary-text-color); + border: none; + margin-left: 8px; + min-width: 64px; + line-height: 36px; + background-color: transparent; + appearance: none; + padding: 0 16px; + border-radius: 3px; + transition: background-color 0.13s; + + &:hover, + &:focus { + outline: none; + background-color: var(--disabled-text-color-dark); + } + } + } +} + +.datePicker--background { + z-index: 199; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.52); + animation: fadeIn 0.22s forwards; +} |