From 7cf70b0b0c04b49b048ec8474a8ab4c89e033842 Mon Sep 17 00:00:00 2001 From: Arkadiusz Wieczorek Date: Mon, 25 Apr 2022 20:02:20 +0200 Subject: [PATCH] Update report-window styles --- .../generate-survey-questions.ts | 2 +- components/report-window/questions.tsx | 2 +- components/report-window/report-window.html | 44 ++-- components/report-window/report-window.scss | 215 ++++++++++++++---- components/sidebar/sidebar.html | 18 +- components/sidebar/sidebar.scss | 5 +- components/toolbar/toolbar.html | 18 +- components/toolbar/toolbar.scss | 5 +- esbuild.config.js | 2 + styles/colors.scss | 4 + styles/fonts.scss | 2 +- styles/global.scss | 2 - 12 files changed, 232 insertions(+), 87 deletions(-) diff --git a/components/report-window/generate-survey-questions.ts b/components/report-window/generate-survey-questions.ts index 2485ce2..4e0a18a 100644 --- a/components/report-window/generate-survey-questions.ts +++ b/components/report-window/generate-survey-questions.ts @@ -176,7 +176,7 @@ export default function generateSurveyQuestions(hosts: string[]) { ], }, { - title: 'Obowiązek informacyjny i machanizm pozyskiwania zgody', + title: 'Obowiązek informacyjny i mechanizm pozyskiwania zgody', elements: [ { type: 'radiogroup', diff --git a/components/report-window/questions.tsx b/components/report-window/questions.tsx index 3029a51..1bbaabd 100644 --- a/components/report-window/questions.tsx +++ b/components/report-window/questions.tsx @@ -13,7 +13,7 @@ export default function Questions({ onComplete: (sender) => onComplete(sender.data), }); if (!survey) { - return
Wczytywanie....
; + return
Wczytywanie...
; } return ; } diff --git a/components/report-window/report-window.html b/components/report-window/report-window.html index 39a537d..8425879 100644 --- a/components/report-window/report-window.html +++ b/components/report-window/report-window.html @@ -1,17 +1,33 @@ - - - Treść maila do zgłoszenia - - - - -
- - - - - + + + Treść maila do zgłoszenia + + + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/components/report-window/report-window.scss b/components/report-window/report-window.scss index dbcb96a..baa49fb 100644 --- a/components/report-window/report-window.scss +++ b/components/report-window/report-window.scss @@ -1,20 +1,22 @@ @import './../../styles/colors.scss'; +* { + font-family: 'OpenSans' !important; +} + html { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; } body { - background-color: #fff; + background-color: #f9f9fa; margin: 3rem 3rem; } nav { position: sticky; top: 0; - background-color: #fff; + // background-color: #fff; display: flex; flex-wrap: wrap; justify-content: left; @@ -42,10 +44,10 @@ h3 { align-items: center; max-height: 3.5rem; min-height: 3.5rem; - border-bottom: 1px solid $light-grey; + // border-bottom: 1px solid $light-grey; position: sticky; top: 0; - background: #ffffff; + // background: #ffffff; z-index: 1; .webpage-metadata { @@ -69,68 +71,193 @@ h3 { } .sv_main { + font-family: 'OpenSans' !important; + background-color: transparent; + .sv_p_root { + & > .sv_row:nth-child(2n) { + // background-color: hsl(217.5, 7.8%, 96%); + background-color: #fff; + } + + & > .sv_row:nth-child(2n + 1) { + background-color: #fff; + } + + & > .sv_row { + // border-bottom: 1px solid #d1d1d1; + border-bottom: none; + background-color: #fff; + box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px; + } + + & > .sv_row:last-child { + border-bottom: none; + } + } .sv_container { - color: #000; - padding: 1rem 0; + color: rgb(12, 12, 13); + padding: 0; + .sv_body { + padding: 0; + + .sv_p_root { + & > .sv_row { + padding: 0.75rem 1.5rem; + margin-bottom: 1rem; + border-radius: 3px; + } + + .sv_page_title { + font-weight: bold; + font-size: calc(15 / 16 * 1rem); + } + .sv_q { + padding: 0; + } + } + + .sv_progress { + height: 0.25rem; + .sv_progress_bar { + margin-top: 0; + margin-bottom: 0.5rem; + } + } + } } .sv_body { border: none !important; + background-color: transparent; + } + .sv_progress { + background-color: hsl(240, 9.1%, 87.8%); + margin-bottom: 4rem; + transition: all 200ms; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); + & > span { + font-weight: 600; + } + } + .sv_progress_bar { + background-color: #000; + transition: all 200ms; + transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); } } -.sv_q_radiogroup { - margin-bottom: .5rem; +.sv_main .sv_container .sv_body .sv_p_root .sv_page_title { + font-size: 1.1rem; + font-weight: bold; } -.sv_row { - background-color: #fff !important; +.sv_q_radiogroup { + margin-top: 0.25rem; +} + +.sv_main .sv_q_other input, +.sv_main .sv_q_text_root, +.sv_main .sv_q_dropdown_control, +.sv_main + input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']), +.sv_main select, +.sv_main textarea { + border: 1px solid #6d7072; + color: #000; + padding-left: 0.25rem !important; + margin-top: 0.5rem; + margin-bottom: 0.5rem; } .sv_nav { - display: grid; - grid-template-columns: 1fr 1fr; + display: flex; margin: 2rem 0; -} - -.sv_prev_btn { - grid-column-start: 0; - justify-self: flex-start; -} - -.sv_next_btn { - grid-column-start: 2; - justify-self: flex-end; + justify-content: flex-end; } .sv_prev_btn, .sv_next_btn { border: 0; outline: 0; - height: 3rem; - font-size: 0.875rem; - line-height: 0.875rem; + font-size: 0.875rem !important; + line-height: 0.875rem !important; height: 2.5rem; cursor: pointer; +} +.sv_next_btn { background-color: #000 !important; - font-weight: 800; + font-weight: 800 !important; padding: 0 1.5rem; background-color: #000; - color: $icd-rentgen-color; + margin: 0 !important; + color: #fff !important; - // &:hover { - // background-image: linear-gradient( - // to right, - // $icd-rentgen-color 0%, - // $icd-rentgen-color 4%, - // #000 4%, - // #000 100% - // ); - // animation: slidebg 1s cubic-bezier(0.19, 1, 0.22, 1) infinite; - // } + &:hover { + color: $icd-rentgen-color !important; + background-image: linear-gradient( + to right, + $icd-rentgen-color 0%, + $icd-rentgen-color 4%, + #000 4%, + #000 100% + ); + animation: slidebg 1s cubic-bezier(0.19, 1, 0.22, 1) infinite; + } - // @keyframes slidebg { - // to { - // background-position: 155px; - // } - // } + @keyframes slidebg { + to { + background-position: 155px; + } + } +} + +.sv_prev_btn { + margin-right: 0.5rem !important; + color: #000 !important; + text-decoration: underline !important; + background-color: transparent !important; + font-weight: 700 !important; +} + +.sv_main .sv_q_erbox:not([style*='display: none']):not([style*='display:none']) { + color: $dark-red; +} + +.sv_main .sv_q_erbox:not([style*='display: none']):not([style*='display:none']) { + border: 1px solid $dark-red; + background-color: $pale-red; +} + +.sv_main + .sv_container + .sv_body + .sv_p_root + .sv_q + .sv_q_erbox:not([style*='display: none']):not([style*='display:none']) { + margin: 0.5rem 0; + padding: 1rem; +} + +.sv_qstn fieldset { + margin: 0px; + padding: 0px; + font-size: calc(14 / 16 * 1rem); +} + +.sv_main .sv_custom_header { + background-color: transparent; +} + +.sv_main .sv_q_other input:focus, +.sv_main .sv_q_text_root:focus, +.sv_main .sv_q_dropdown_control:focus, +.sv_main + input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']):focus, +.sv_main select:focus, +.sv_main textarea:focus { + border: 1px solid #000; +} + +.sv_main .sv_container .sv_body .sv_p_root .sv_q_title { + font-weight: 600; + font-size: calc(14 / 16 * 1rem); } diff --git a/components/sidebar/sidebar.html b/components/sidebar/sidebar.html index 4bb1b1f..fe53422 100644 --- a/components/sidebar/sidebar.html +++ b/components/sidebar/sidebar.html @@ -3,13 +3,6 @@ - - - - -
- - + + + +
+ + + - + \ No newline at end of file diff --git a/components/sidebar/sidebar.scss b/components/sidebar/sidebar.scss index bee6c43..0921310 100644 --- a/components/sidebar/sidebar.scss +++ b/components/sidebar/sidebar.scss @@ -125,9 +125,10 @@ padding: 0 1.5rem; margin-left: 0.5rem; background-color: #000; - color: $icd-rentgen-color; - + color: #fff; + &:hover { + color: $icd-rentgen-color; background-image: linear-gradient( to right, $icd-rentgen-color 0%, diff --git a/components/toolbar/toolbar.html b/components/toolbar/toolbar.html index 0434f5a..d616432 100644 --- a/components/toolbar/toolbar.html +++ b/components/toolbar/toolbar.html @@ -3,13 +3,6 @@ - - - - -
- - + + + +
+ + + - + \ No newline at end of file diff --git a/components/toolbar/toolbar.scss b/components/toolbar/toolbar.scss index 3fb1dae..61a3339 100644 --- a/components/toolbar/toolbar.scss +++ b/components/toolbar/toolbar.scss @@ -149,9 +149,10 @@ body { padding: 0 1.5rem; margin-left: 0.5rem; background-color: #000; - color: $icd-rentgen-color; - + color: #fff; + &:hover { + color: $icd-rentgen-color; background-image: linear-gradient( to right, $icd-rentgen-color 0%, diff --git a/esbuild.config.js b/esbuild.config.js index 5045871..88560f8 100644 --- a/esbuild.config.js +++ b/esbuild.config.js @@ -49,6 +49,8 @@ esbuild 'test.ts', 'components/report-window/report-window.tsx', 'background.ts', + 'styles/global.scss', + 'styles/fonts.scss' ], bundle: true, // minify: true, diff --git a/styles/colors.scss b/styles/colors.scss index 6eba428..5d59315 100644 --- a/styles/colors.scss +++ b/styles/colors.scss @@ -7,5 +7,9 @@ $blue: #0048d9; $icd-yellow: #ffee2c; $icd-rentgen-color: #99ffdd; $highlight-color: #ccffee; +$row-color: hsl(160, 100%, 94%); $pale-yellow: #fff8e5; +$pale-red: hsl(10.8, 100%, 94.9%); $contrast-yellow: #ffb900; +$contrast-red: #ff726b; +$dark-red: hsl(2.8, 100%, 34%); \ No newline at end of file diff --git a/styles/fonts.scss b/styles/fonts.scss index 5ab07a4..85b579c 100644 --- a/styles/fonts.scss +++ b/styles/fonts.scss @@ -1,7 +1,7 @@ @font-face { font-family: 'Fira Code'; src: url('../assets/fonts/fira-code/woff2/FiraCode-Light.woff2') format('woff2'), - url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff'); + url('../assets/fonts/fira-code/woff/FiraCode-Light.woff') format('woff'); font-weight: 300; font-style: normal; } diff --git a/styles/global.scss b/styles/global.scss index 0332962..e77cfeb 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -10,8 +10,6 @@ user-select: none; } - - html { font-size: 1rem; font-family: 'OpenSans';