diff options
Diffstat (limited to 'packages/merchant-backoffice/src/scss/_custom-calendar.scss')
| -rw-r--r-- | packages/merchant-backoffice/src/scss/_custom-calendar.scss | 254 |
1 files changed, 0 insertions, 254 deletions
diff --git a/packages/merchant-backoffice/src/scss/_custom-calendar.scss b/packages/merchant-backoffice/src/scss/_custom-calendar.scss deleted file mode 100644 index 9ac877c..0000000 --- a/packages/merchant-backoffice/src/scss/_custom-calendar.scss +++ /dev/null @@ -1,254 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 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,.87); - --secondary-text-color-dark: rgba(0,0,0,.57); - --disabled-text-color-dark: rgba(0,0,0,.13); - - --primary-text-color-light: rgba(255,255,255,.87); - --secondary-text-color-light: rgba(255,255,255,.57); - --disabled-text-color-light: rgba(255,255,255,.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 .22s ease-in-out, opacity .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,.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 .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 .22s, opacity .22s; - transform: scale(0); - opacity: 0; - } - - &[disabled=true] { - cursor: unset; - } - - &.datePicker--today { - font-weight: 700; - } - - &.datePicker--selected { - color: rgba(255,255,255,.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 .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,.52); - animation: fadeIn .22s forwards; -} |