diff options
Diffstat (limited to 'packages/anastasis-webui/src/scss/_custom-calendar.scss')
-rw-r--r-- | packages/anastasis-webui/src/scss/_custom-calendar.scss | 83 |
1 files changed, 44 insertions, 39 deletions
diff --git a/packages/anastasis-webui/src/scss/_custom-calendar.scss b/packages/anastasis-webui/src/scss/_custom-calendar.scss index bff68cf79..e0334b62d 100644 --- a/packages/anastasis-webui/src/scss/_custom-calendar.scss +++ b/packages/anastasis-webui/src/scss/_custom-calendar.scss @@ -16,31 +16,30 @@ :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-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); + 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); + 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); + 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); + 0 10px 10px rgba(0, 0, 0, 0.22); } - .home .datePicker div { margin-top: 0px; margin-bottom: 0px; @@ -56,7 +55,7 @@ width: 90vw; max-width: 448px; transform-origin: top left; - transition: transform .22s ease-in-out, opacity .22s ease-in-out; + transition: transform 0.22s ease-in-out, opacity 0.22s ease-in-out; top: 50%; left: 50%; opacity: 0; @@ -67,7 +66,7 @@ opacity: 1; transform: scale(1) translate(-50%, -50%); } - + .datePicker--titles { border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -75,7 +74,8 @@ height: 100px; background: var(--primary-color); - h2, h3 { + h2, + h3 { cursor: pointer; color: #fff; line-height: 1; @@ -85,7 +85,7 @@ } h3 { - color: rgba(255,255,255,.57); + color: rgba(255, 255, 255, 0.57); font-size: 18px; padding-bottom: 2px; } @@ -114,13 +114,13 @@ 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); @@ -133,9 +133,11 @@ 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); + 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); @@ -149,14 +151,16 @@ 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); + 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; + transition: color 0.22s; height: 42px; position: relative; cursor: pointer; @@ -164,7 +168,7 @@ border-radius: 50%; &::before { - content: ''; + content: ""; position: absolute; z-index: -1; height: 42px; @@ -172,12 +176,12 @@ left: calc(50% - 21px); background: var(--primary-color); border-radius: 50%; - transition: transform .22s, opacity .22s; + transition: transform 0.22s, opacity 0.22s; transform: scale(0); opacity: 0; } - - &[disabled=true] { + + &[disabled="true"] { cursor: unset; } @@ -186,7 +190,7 @@ } &.datePicker--selected { - color: rgba(255,255,255,.87); + color: rgba(255, 255, 255, 0.87); &:before { transform: scale(1); @@ -196,21 +200,21 @@ } } } - + .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); @@ -236,9 +240,10 @@ appearance: none; padding: 0 16px; border-radius: 3px; - transition: background-color .13s; + transition: background-color 0.13s; - &:hover, &:focus { + &:hover, + &:focus { outline: none; background-color: var(--disabled-text-color-dark); } @@ -253,6 +258,6 @@ left: 0; bottom: 0; right: 0; - background: rgba(0,0,0,.52); - animation: fadeIn .22s forwards; + background: rgba(0, 0, 0, 0.52); + animation: fadeIn 0.22s forwards; } |