From e6cb384fb16e84767b4d0347666459819a5cf0ab Mon Sep 17 00:00:00 2001 From: Valerio Date: Thu, 12 Dec 2024 16:13:04 +0100 Subject: [PATCH] fix: fixed focus on input click (#364) --- package-lock.json | 18 +- package.json | 4 +- src/app/components/EditorDescriptionInput.tsx | 9 +- src/app/components/EditorInput.tsx | 7 +- src/assets/index.css | 1643 +++++++++-------- 5 files changed, 933 insertions(+), 748 deletions(-) diff --git a/package-lock.json b/package-lock.json index ee70ab71..6403ca85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "bootstrap-italia": "^2.8.8", "copy-to-clipboard": "^3.3.3", "countries-list": "^3.0.6", - "design-react-kit": "^5.0.4", + "design-react-kit": "^5.4.1", "i18next": "^23.2.2", "i18next-browser-languagedetector": "^7.2.0", "js-yaml": "^4.1.0", @@ -5058,9 +5058,10 @@ } }, "node_modules/bootstrap-italia": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/bootstrap-italia/-/bootstrap-italia-2.8.8.tgz", - "integrity": "sha512-2NJqPQRnyO2hb5stRNRXk/kQku42vLBKC8CGgDoekD9Fb8UALfeicpZiL0wqDdT/MxFwbQNz3sDLGjJKcXesXA==", + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/bootstrap-italia/-/bootstrap-italia-2.11.0.tgz", + "integrity": "sha512-4cUxPYovt4aUhKxhu5OvmUiJM1ZsM/4ouz3w5rKJnwyFLGJV5ao1K1D59caKbxkgejXBQLPmV92+ExD7rjepYw==", + "license": "BSD-3-Clause", "dependencies": { "@popperjs/core": "^2.11.2", "@splidejs/splide": "^3.6.12", @@ -6576,9 +6577,10 @@ "integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==" }, "node_modules/design-react-kit": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/design-react-kit/-/design-react-kit-5.2.0.tgz", - "integrity": "sha512-JjEWhCEy/OeawXwoEkoXRfANaquQd0tZ6gYTYL/PS2SrFaPGAqFx9CXHvvQPvEmab/Z9H87g1XO7/eftbcoyBw==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/design-react-kit/-/design-react-kit-5.4.1.tgz", + "integrity": "sha512-euxJDryyDhfNbttDlrqc70e/op2asr0CVQEWhz13x5o2LMPY70rmp15Ake6R3pSvC5VQPGy9gn5PlwUonF1GHg==", + "license": "BSD-3-Clause", "dependencies": { "classnames": "^2.3.1", "is-number": "^7.0.0", @@ -6592,7 +6594,7 @@ "node": ">=20" }, "peerDependencies": { - "bootstrap-italia": "2.8.8", + "bootstrap-italia": "2.11.0", "react": ">=18.2.0" } }, diff --git a/package.json b/package.json index dc313a41..d92c8ee2 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "bootstrap-italia": "^2.8.8", "copy-to-clipboard": "^3.3.3", "countries-list": "^3.0.6", - "design-react-kit": "^5.0.4", + "design-react-kit": "^5.4.1", "i18next": "^23.2.2", "i18next-browser-languagedetector": "^7.2.0", "js-yaml": "^4.1.0", @@ -96,4 +96,4 @@ "typescript-eslint": "^8.11.0", "vite": "^5.4.1" } -} +} \ No newline at end of file diff --git a/src/app/components/EditorDescriptionInput.tsx b/src/app/components/EditorDescriptionInput.tsx index e4314e05..101f3743 100644 --- a/src/app/components/EditorDescriptionInput.tsx +++ b/src/app/components/EditorDescriptionInput.tsx @@ -1,14 +1,14 @@ +import { Input, TextArea } from "design-react-kit"; +import { get } from "lodash"; import { FieldPathByValue, useController, useFormContext, } from "react-hook-form"; import { useTranslation } from "react-i18next"; -import PublicCode, { Description } from "../contents/publiccode"; -import { get } from "lodash"; -import { displayName } from "../../i18n"; -import { Input, TextArea } from "design-react-kit"; import { RequiredDeep } from "type-fest"; +import { displayName } from "../../i18n"; +import PublicCode, { Description } from "../contents/publiccode"; type Props = { fieldName: T; @@ -47,6 +47,7 @@ export default function EditorInput< value={(value as string) || ""} innerRef={ref} label={`${label}${extraLangInfo}${required ? " *" : ""}${deprecated ? ` - ${t(`editor.form.deprecatedField`)}` : ""}`} + placeholder={label} infoText={description} valid={get(errors, `description.${lang}.${fieldName}`) && false} validationText={get(errors, `description.${lang}.${fieldName}.message`)} diff --git a/src/app/components/EditorInput.tsx b/src/app/components/EditorInput.tsx index aed76c6c..631e34d4 100644 --- a/src/app/components/EditorInput.tsx +++ b/src/app/components/EditorInput.tsx @@ -1,13 +1,13 @@ +import { Input, TextArea } from "design-react-kit"; +import { get } from "lodash"; import { FieldPathByValue, useController, useFormContext, } from "react-hook-form"; import { useTranslation } from "react-i18next"; -import PublicCode, { PublicCodeWithDeprecatedFields } from "../contents/publiccode"; -import { get } from "lodash"; -import { Input, TextArea } from "design-react-kit"; import { RequiredDeep } from "type-fest"; +import PublicCode, { PublicCodeWithDeprecatedFields } from "../contents/publiccode"; type Props = { fieldName: T; @@ -44,6 +44,7 @@ export default function EditorInput< value={value || ""} innerRef={ref} label={`${label}${required ? " *" : ""}${deprecated ? ` - ${t(`editor.form.deprecatedField`)}` : ""}`} + placeholder={label} infoText={description} valid={get(errors, fieldName) && false} validationText={get(errors, `${fieldName}.message`)} diff --git a/src/assets/index.css b/src/assets/index.css index 97bf20ca..18915f5b 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,853 +1,1034 @@ @import url("https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,700"); + @import url("https://fonts.googleapis.com/css?family=Lora:100,300,400,700"); @import "./glyphicons/glyphicons.css"; -.system { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} + .system { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + } + * { - font-family: "Titillium Web", "Roboto Mono", "system", sans-serif; -} + font-family: "Titillium Web", "Roboto Mono", "system", sans-serif; + } + .info__box { - background-color: rgba(0, 0, 0, 0.3); - z-index: 10; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - position: absolute; - display: none; -} + background-color: rgba(0, 0, 0, 0.3); + z-index: 10; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + position: absolute; + display: none; + } + .info__box.info__box__visible { - display: flex; - justify-content: center; - align-items: center; -} + display: flex; + justify-content: center; + align-items: center; + } + .info__box__body { - position: relative; - width: 640px; - height: 400px; - max-width: 100%; - max-height: 100%; - background-color: #fff; - border: 3px solid #32d6d6; - overflow: auto; -} + position: relative; + width: 640px; + height: 400px; + max-width: 100%; + max-height: 100%; + background-color: #fff; + border: 3px solid #32d6d6; + overflow: auto; + } + .info__box__title { - color: rgba(0, 102, 204, 1); -} + color: rgba(0, 102, 204, 1); + } + .info__box__content { - padding: 40px; - font-size: 18px; - color: #5a768a; - display: flex; - flex-direction: column; - justify-content: center; -} + padding: 40px; + font-size: 18px; + color: #5a768a; + display: flex; + flex-direction: column; + justify-content: center; + } + .info__box__close { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: flex-end; - text-align: right; - font-size: 14px; - margin: 10px; -} + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-end; + text-align: right; + font-size: 14px; + margin: 10px; + } + .close__button { - display: inline-block; - opacity: 0.5; - cursor: pointer; -} + display: inline-block; + opacity: 0.5; + cursor: pointer; + } + .close__button:hover { - opacity: 1; -} + opacity: 1; + } + .editor__widget { - padding: 0 10px; -} + padding: 0 10px; + } + .editor__toolbar { - margin: 0 !important; -} + margin: 0 !important; + } + .editor__content { - border-bottom: 1px solid #979797; -} + border-bottom: 1px solid #979797; + } + .has-error .editor__content { - border-bottom: 1px solid #f83e5a; -} - .editor__wrapper, .editor__component { - border: none !important; - margin: 0 !important; - padding: 0 !important; -} + border-bottom: 1px solid #f83e5a; + } + + .editor__wrapper, + .editor__component { + border: none !important; + margin: 0 !important; + padding: 0 !important; + } + .editor__component .public-DraftEditor-content { - min-height: 300px; - border-size: 0; -} + min-height: 300px; + border-size: 0; + } + input.rw-widget-input { - border: none !important; -} + border: none !important; + } + .editor__component .public-DraftEditor-content { - word-break: break-all; -} + word-break: break-all; + } + .rectangle-5-copy-34 { - height: 48px; - width: 186px; - background-color: #0073e6; -} + height: 48px; + width: 186px; + background-color: #0073e6; + } + .editor_button { - display: flex; - overflow: hidden; - margin: 10px; - padding: 12px 12px; - height: 56px; - width: 172px; - cursor: pointer; - user-select: none; - transition: all 150ms linear; - text-align: center; - white-space: nowrap; - text-decoration: none !important; - text-transform: none; - text-transform: capitalize; - color: #fff; - background-color: #0073e6; - border: 0 none; - border-radius: 4px; - font-family: "Titillium Web"; - font-size: 18px; - font-weight: bold; - line-height: 28px; - text-align: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - justify-content: center; - align-items: center; - flex: 0 0 240px; - box-shadow: 2px 5px 10px var(--color-smoke); -} + display: flex; + overflow: hidden; + margin: 10px; + padding: 12px 12px; + height: 56px; + width: 172px; + cursor: pointer; + user-select: none; + transition: all 150ms linear; + text-align: center; + white-space: nowrap; + text-decoration: none !important; + text-transform: none; + text-transform: capitalize; + color: #fff; + background-color: #0073e6; + border: 0 none; + border-radius: 4px; + font-family: "Titillium Web"; + font-size: 18px; + font-weight: bold; + line-height: 28px; + text-align: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + justify-content: center; + align-items: center; + flex: 0 0 240px; + box-shadow: 2px 5px 10px var(--color-smoke); + } + .editor_button:hover { - transition: all 150ms linear; - background-color: #0059b3; - opacity: 0.85; -} + transition: all 150ms linear; + background-color: #0059b3; + opacity: 0.85; + } + .editor_button:active { - transition: all 150ms linear; - opacity: 0.75; -} + transition: all 150ms linear; + opacity: 0.75; + } + .editor_button:focus { - outline: 0; - outline-offset: -4px; -} + outline: 0; + outline-offset: -4px; + } + .editor_button:disabled { - opacity: 0.5; - background-color: #0059b3; -} + opacity: 0.5; + background-color: #0059b3; + } + .editor_button--primary { - color: #fff; - background-color: #0073e6; -} + color: #fff; + background-color: #0073e6; + } + .editor_button--primary:hover { - color: #fff; - background-color: #0059b3; - opacity: 1; -} + color: #fff; + background-color: #0059b3; + opacity: 1; + } + .editor_button--primary:active { - color: #fff; - background-color: #0059b3; - opacity: 1; -} + color: #fff; + background-color: #0059b3; + opacity: 1; + } + .editor_button--secondary { - border: 2px solid #0073e6; - background-color: #fff f; - color: #0073e6; -} + border: 2px solid #0073e6; + background-color: #fff f; + color: #0073e6; + } + .editor_button--secondary:hover { - color: #0059b3; - background-color: #fff f; - opacity: 1; -} + color: #0059b3; + background-color: #fff f; + opacity: 1; + } + .editor_button--secondary:active { - color: #0059b3; - background-color: #fff f; - opacity: 1; -} + color: #0059b3; + background-color: #fff f; + opacity: 1; + } + .editor_button--quaternary { - height: 56px; - width: 242px; - border: 2px solid #e6e9f2; - background-color: #fcfdff; - color: #5c6f82; -} + height: 56px; + width: 242px; + border: 2px solid #e6e9f2; + background-color: #fcfdff; + color: #5c6f82; + } + .editor_button--quaternary:hover { - color: #38444f; - background-color: #fcfdff; - opacity: 1; -} + color: #38444f; + background-color: #fcfdff; + opacity: 1; + } + .editor_button--quaternary:active { - color: #38444f; - background-color: #fcfdff; - opacity: 1; -} + color: #38444f; + background-color: #fcfdff; + opacity: 1; + } + .editor_button--custom { - height: 56px; - width: 172px; - border: 0; - background-color: #fff; - color: #5c6f82; -} + height: 56px; + width: 172px; + border: 0; + background-color: #fff; + color: #5c6f82; + } + .editor_button--custom:hover { - color: #38444f; - background-color: #fcfdff; - opacity: 1; -} - input[type="date"], input[type="datetime-local"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="date"], select.form-control, textarea.form-control { - background-color: transparent; - border: none; - border-bottom: 1px solid #979797; - border-radius: 0; - outline: 0; - height: 2.5rem; - width: 100%; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transition: all 0.3s; - transition: all 0.3s; - font-weight: 600; - color: #17324d; -} - .has-error input[type="date"], .has-error input[type="datetime-local"], .has-error input[type="email"], .has-error input[type="number"], .has-error input[type="password"], .has-error input[type="search"], .has-error input[type="tel"], .has-error input[type="text"], .has-error input[type="time"], .has-error input[type="url"], .has-error input[type="date"], .has-error select.form-control, .has-error textarea.form-control { - border-bottom: 1px solid #f83e5a; -} - .control-label, .control-link, legend { - color: #5a768a; - font-weight: 400; - display: block; - font-size: 18px; -} + color: #38444f; + background-color: #fcfdff; + opacity: 1; + } + + input[type="date"], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="text"], + input[type="time"], + input[type="url"], + input[type="date"], + select.form-control, + textarea.form-control { + background-color: transparent; + border: none; + border-bottom: 1px solid #979797; + border-radius: 0; + outline: 0; + height: 2.5rem; + width: 100%; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: all 0.3s; + transition: all 0.3s; + font-weight: 600; + color: #17324d; + } + + .has-error input[type="date"], + .has-error input[type="datetime-local"], + .has-error input[type="email"], + .has-error input[type="number"], + .has-error input[type="password"], + .has-error input[type="search"], + .has-error input[type="tel"], + .has-error input[type="text"], + .has-error input[type="time"], + .has-error input[type="url"], + .has-error input[type="date"], + .has-error select.form-control, + .has-error textarea.form-control { + border-bottom: 1px solid #f83e5a; + } + + .control-label, + .control-link, legend { - padding: 0 10px !important; -} + color: #5a768a; + font-weight: 400; + /* display: block; */ + font-size: 18px; + } + + legend { + padding: 0 10px !important; + } + .form-check-label { - color: #5a768a; - font-weight: 400; - display: block; - font-size: 16px; -} - .help-block, .help-block small, .help-block .form-text .text-muted { - font-size: 14px; - color: #5a768a; - font-weight: 400; - display: inline; -} + color: #5a768a; + font-weight: 400; + display: block; + font-size: 16px; + } + + .help-block, + .help-block small, + .help-block .form-text .text-muted { + font-size: 14px; + color: #5a768a; + font-weight: 400; + display: inline; + } + .has-error .help-block { - background-color: #f83e5a; - padding: 0px 12px; - color: #fff; -} + background-color: #f83e5a; + padding: 0px 12px; + color: #fff; + } + @keyframes fadein { - from { - bottom: 0; - opacity: 0; - } - to { - bottom: 30px; - opacity: 1; - } -} + from { + bottom: 0; + opacity: 0; + } + + to { + bottom: 30px; + opacity: 1; + } + } + @keyframes fadeout { - from { - bottom: 30px; - opacity: 1; - } - to { - bottom: 0; - opacity: 0; - } -} + from { + bottom: 30px; + opacity: 1; + } + + to { + bottom: 0; + opacity: 0; + } + } + #snackbar { - visibility: hidden; - min-width: 250px; - margin-left: -125px; - background-color: #232527; - color: #fff; - text-align: center; - border-radius: 2px; - padding: 16px; - position: fixed; - z-index: 1; - left: 50%; - bottom: 30px; -} + visibility: hidden; + min-width: 250px; + margin-left: -125px; + background-color: #232527; + color: #fff; + text-align: center; + border-radius: 2px; + padding: 16px; + position: fixed; + z-index: 1; + left: 50%; + bottom: 30px; + } + #snackbar.show { - visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; - animation: fadein 0.5s, fadeout 0.5s 2.5s; -} + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; + } + .notify-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: flex-end; - align-items: flex-start; - align-content: flex-start; - position: fixed; - top: 35px; - right: 30%; - z-index: 9000; -} + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-end; + align-items: flex-start; + align-content: flex-start; + position: fixed; + top: 35px; + right: 30%; + z-index: 9000; + } + .notify-item { - width: 250px; - margin: 5px 10px; - color: #fff; - border-radius: 5px; - text-align: center; -} + width: 250px; + margin: 5px 10px; + color: #fff; + border-radius: 5px; + text-align: center; + } + .notify-item:hover { - opacity: 0.8; - box-shadow: 0 0 10px 0 #0f0f0f; -} - .notify-item > p { - margin: 10px; - opacity: 0.8; - text-align: center; -} + opacity: 0.8; + box-shadow: 0 0 10px 0 #0f0f0f; + } + + .notify-item>p { + margin: 10px; + opacity: 0.8; + text-align: center; + } + .notify-item.info { - background-color: rgba(0, 102, 204, 1); -} + background-color: rgba(0, 102, 204, 1); + } + .notify-item.success { - background-color: rgba(23, 23, 23, 0.9); -} + background-color: rgba(23, 23, 23, 0.9); + } + .notify-item.error { - background-color: #e80801; - color: #fff; -} + background-color: #e80801; + color: #fff; + } + .notify-title { - font-weight: 700; -} + font-weight: 700; + } + .wrapper { - margin: 0; - padding: 0; - display: flex; - flex-flow: row; - height: 100vh; - width: 100vw; - overflow: hidden; -} + margin: 0; + padding: 0; + display: flex; + flex-flow: row; + height: 100vh; + width: 100vw; + overflow: hidden; + } + .wrapper.loadingRemote { - filter: blur(8px); - -webkit-filter: blur(8px); -} + filter: blur(8px); + -webkit-filter: blur(8px); + } + .d-flex.align-items-center.col-12.position-absolute.h-100 { - z-index: 9999; -} + z-index: 9999; + } + .spinner-grow { - margin-left: 30px; - height: 10rem; - width: 10rem; -} + margin-left: 30px; + height: 10rem; + width: 10rem; + } + @media all and (max-width: 640px) { - .wrapper { - overflow: auto; - flex-flow: column; - } -} + .wrapper { + overflow: auto; + flex-flow: column; + } + } + .field_info span { - margin-right: 5px; -} + margin-right: 5px; + } + .content__head { - padding: 1.5rem 2em 2rem 2em; - height: 2rem; - display: flex; - justify-content: space-between; - align-items: center; - background: #fdfdfd; -} + padding: 1.5rem 2em 2rem 2em; + height: 2rem; + display: flex; + justify-content: space-between; + align-items: center; + background: #fdfdfd; + } + .content__head__title { - color: #06c; - font-family: "Titillium Web"; - font-size: 2rem; - font-weight: bold; - letter-spacing: -0.33px; - line-height: 40px; -} + color: #06c; + font-family: "Titillium Web"; + font-size: 2rem; + font-weight: bold; + letter-spacing: -0.33px; + line-height: 40px; + } + .content__head__help { - margin: 10px 20px 0; - height: 40px; - display: flex; - flex-direction: row; - align-items: flex-end; - justify-content: space-between; - text-align: right; -} + margin: 10px 20px 0; + height: 40px; + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: space-between; + text-align: right; + } + .content__head__help a { - text-align: right; - color: #5c6f82; - font-family: "Titillium Web"; - font-size: 16px; - font-weight: bold; - line-height: 24px; - padding-left: 2rem; -} + text-align: right; + color: #5c6f82; + font-family: "Titillium Web"; + font-size: 16px; + font-weight: bold; + line-height: 24px; + padding-left: 2rem; + } + .content__head__status { - align-self: flex-end; - color: #adadad; - font-family: "Titillium Web"; - font-size: 12px; - font-weight: 300; - line-height: 16px; - text-align: right; -} + align-self: flex-end; + color: #adadad; + font-family: "Titillium Web"; + font-size: 12px; + font-weight: 300; + line-height: 16px; + text-align: right; + } + .content__main { - padding: 0 2em; - flex: 1; - overflow: auto; - top: 0; - transition: top 0.8s ease 0s; -} + padding: 0 2em; + flex: 1; + overflow: auto; + top: 0; + transition: top 0.8s ease 0s; + } + .content { - display: flex; - flex-direction: column; - background: #fff; - flex: 5 1 0; - order: 0; -} + display: flex; + flex-direction: column; + background: #fff; + flex: 5 1 0; + order: 0; + } + .content__foot { - padding: 0 2em; - height: 100px; - border-top: 1px solid #e8e8e8; - margin-top: 20px; - display: flex; - align-items: center; - flex-direction: row; - justify-content: center; -} + padding: 0 2em; + height: 100px; + border-top: 1px solid #e8e8e8; + margin-top: 20px; + display: flex; + align-items: center; + flex-direction: row; + justify-content: center; + } + .content__foot_item { - text-align: center; -} + text-align: center; + } + .content__foot_item button { - margin: 0 20px; -} + margin: 0 20px; + } + @media all and (max-width: 640px) { - .content__head, .content__foot { - min-height: 100px; - } -} + + .content__head, + .content__foot { + min-height: 100px; + } + } + .react-phone-number-input__input:focus { - color: #495057 !important; - background-color: #fff !important; - border-color: #5ab2ff !important; - outline: 0 !important; - box-shadow: 0 0 0 0.2rem rgba(0, 116, 217, 0.25) !important; -} + color: #495057 !important; + background-color: #fff !important; + border-color: #5ab2ff !important; + outline: 0 !important; + box-shadow: 0 0 0 0.2rem rgba(0, 116, 217, 0.25) !important; + } + .react-phone-number-input__icon { - line-height: 0 !important; -} + line-height: 0 !important; + } + .loading { - width: 40px; - fill: #06c; -} + width: 40px; + fill: #06c; + } + .sidebar { - background-color: #00264d; - color: #fff; - flex: 2 1 0; - height: 100%; - order: 3; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - justify-content: space-between; - overflow: hidden; - position: relative; -} + background-color: #00264d; + color: #fff; + flex: 2 1 0; + height: 100%; + order: 3; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow: hidden; + position: relative; + } + .sidebar__title { - padding: 1em; - font-size: 24px; - font-weight: bold; - line-height: 28px; -} - .sidebar__footer_item > .disabled { - cursor: not-allowed; -} - .sidebar__footer_item > a.disabled img { - display: none; -} - .sidebar__footer_item > a.disabled span { - color: #adb2b8; -} + padding: 1em; + font-size: 24px; + font-weight: bold; + line-height: 28px; + } + + .sidebar__footer_item>.disabled { + cursor: not-allowed; + } + + .sidebar__footer_item>a.disabled img { + display: none; + } + + .sidebar__footer_item>a.disabled span { + color: #adb2b8; + } + .sidebar__info { - font-size: 14px; - line-height: 28px; - color: #fff; - margin-left: 20px; - opacity: 0.3; -} + font-size: 14px; + line-height: 28px; + color: #fff; + margin-left: 20px; + opacity: 0.3; + } + .sidebar__prefooter { - z-index: 10; - position: absolute; - width: 100%; - padding: 0; - margin: 0; - background-color: rgba(0, 102, 204, 1); - color: #fff; - bottom: 0; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; -} + z-index: 10; + position: absolute; + width: 100%; + padding: 0; + margin: 0; + background-color: rgba(0, 102, 204, 1); + color: #fff; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + } + .sidebar__prefooter img { - height: 16px; - margin-right: 5px; -} + height: 16px; + margin-right: 5px; + } + .sidebar__prefooter__close { - margin-top: 5px; - margin-right: 10px; - color: #fff; - align-self: flex-end; -} + margin-top: 5px; + margin-right: 10px; + color: #fff; + align-self: flex-end; + } + .sidebar__prefooter__content { - width: 90%; - padding: 10px; - margin: 20px auto; -} + width: 90%; + padding: 10px; + margin: 20px auto; + } + .sidebar__prefooter__content__form { - margin: 10px auto; - width: 100%; - display: flex; - flex-direction: row; -} + margin: 10px auto; + width: 100%; + display: flex; + flex-direction: row; + } + .sidebar__prefooter__content__form .form-control { - width: 100%; - background-color: #f4f4f4; -} + width: 100%; + background-color: #f4f4f4; + } + .sidebar__body { - flex: 8 0 0; - width: 100%; - overflow: auto; - display: flex; - position: relative; -} + flex: 8 0 0; + width: 100%; + overflow: auto; + display: flex; + position: relative; + } + .sidebar__code { - flex: 1; - color: #00ff80; -} - .sidebar__code pre, .sidebar__code code { - margin-top: -10px; - padding: 0 18px 18px; - color: #00ff80; - font-family: "Roboto Mono"; - font-weight: 300; - font-size: 14px; - line-height: 18px; -} + flex: 1; + color: #00ff80; + } + + .sidebar__code pre, + .sidebar__code code { + margin-top: -10px; + padding: 0 18px 18px; + color: #00ff80; + font-family: "Roboto Mono"; + font-weight: 300; + font-size: 14px; + line-height: 18px; + } + .sidebar__error { - padding: 10px; - overflow: auto; - font-family: "Roboto Mono"; - font-weight: 500; - font-size: 18px; - line-height: 24px; - color: #f83e5a; - margin-left: 15px; -} + padding: 10px; + overflow: auto; + font-family: "Roboto Mono"; + font-weight: 500; + font-size: 18px; + line-height: 24px; + color: #f83e5a; + margin-left: 15px; + } + .sidebar__error img { - margin-right: 10px; -} + margin-right: 10px; + } + .sidebar__overlay { - background-color: rgba(0, 0, 0, 0.7); - z-index: 10; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - position: absolute; - display: none; -} + background-color: rgba(0, 0, 0, 0.7); + z-index: 10; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + position: absolute; + display: none; + } + .sidebar__footer { - position: relative; - height: 100px; - background-color: #06c; - color: #fff; - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-around; -} + position: relative; + height: 100px; + background-color: #06c; + color: #fff; + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-around; + } + .sidebar__footer_item { - line-height: 40px; - flex: 1; - text-align: center; -} + line-height: 40px; + flex: 1; + text-align: center; + } + .sidebar__footer_item a { - color: #fff; -} + color: #fff; + } + .sidebar__footer_item .span { - margin-right: 2px; -} + margin-right: 2px; + } + .sidebar__footer_item .action { - margin-left: 2px; - line-height: 24px; - font-size: 16px; -} + margin-left: 2px; + line-height: 24px; + font-size: 16px; + } + .sidebar__footer_item img { - height: 20px; - margin-right: 2px; -} + height: 20px; + margin-right: 2px; + } + @media all and (max-width: 640px) { - .sidebar { - order: 0; - min-height: 100px; - } -} + .sidebar { + order: 0; + min-height: 100px; + } + } + .block__wrapper { - margin: 10px 0; -} + margin: 10px 0; + } + .block { - padding: 0 0 1em 0; - margin: 0; - display: flex; - flex-wrap: wrap; - padding: 0; -} + padding: 0 0 1em 0; + margin: 0; + display: flex; + flex-wrap: wrap; + padding: 0; + } + .block_heading_oval { - height: 40px; - width: 40px; - border-radius: 50%; - background-color: #06c; - color: #fff; - font-family: "Roboto Mono"; - font-size: 21px; - font-weight: 500; - line-height: 28px; - display: flex; - justify-content: center; - align-items: center; -} + height: 40px; + width: 40px; + border-radius: 50%; + background-color: #06c; + color: #fff; + font-family: "Roboto Mono"; + font-size: 21px; + font-weight: 500; + line-height: 28px; + display: flex; + justify-content: center; + align-items: center; + } + .block_heading_title { - padding-left: 10px; - color: #000; - font-family: "Titillium Web"; - font-size: 24px; - font-weight: bold; - line-height: 28px; -} + padding-left: 10px; + color: #000; + font-family: "Titillium Web"; + font-size: 24px; + font-weight: bold; + line-height: 28px; + } + .block_heading { - height: 50px; - display: flex; - flex-direction: row; - align-items: center; - padding: 10px; -} + height: 50px; + display: flex; + flex-direction: row; + align-items: center; + padding: 10px; + } + .block__item { - flex-basis: 50%; - display: flex; - flex-direction: column; - padding: 10px; -} + flex-basis: 50%; + display: flex; + flex-direction: column; + padding: 10px; + } + .block__object { - border-bottom: 1px solid #e8e8e8; - flex: 1 0 100%; -} + border-bottom: 1px solid #e8e8e8; + flex: 1 0 100%; + } + .block__array__remove { - top: 35px; -} + top: 35px; + } + .block__item--full .block__array .block__array__remove { - top: 10px; - right: 20px; -} + top: 10px; + right: 20px; + } + .block__item--full .block__array .block { - color: #5c6f82; - background-color: #f6f8f8; - border-bottom: 1px solid #e8e8e8; -} + color: #5c6f82; + background-color: #f6f8f8; + border-bottom: 1px solid #e8e8e8; + } + .block__item--full { - padding: 10px; - flex: 1 0 100%; - display: flex; - flex-direction: column; -} + padding: 10px; + flex: 1 0 100%; + display: flex; + flex-direction: column; + } + @media all and (max-width: 640px) { - .block { - flex-flow: column; - flex-wrap: nowrap; - } - .block__item { - flex-basis: 100%; - } -} + .block { + flex-flow: column; + flex-wrap: nowrap; + } + + .block__item { + flex-basis: 100%; + } + } + .error-info { - display: flex; - justify-content: center; - align-items: center; - padding: 0; - margin: 15px; - width: 28px; - height: 28px; - border-radius: 50%; - background: #fff; - color: #f00; -} + display: flex; + justify-content: center; + align-items: center; + padding: 0; + margin: 15px; + width: 28px; + height: 28px; + border-radius: 50%; + background: #fff; + color: #f00; + } + .rc-collapse { - background-color: #fff; - border-radius: 3px; - border: 1px solid #fefefe; -} + background-color: #fff; + border-radius: 3px; + border: 1px solid #fefefe; + } + .rc-collapse-anim-active { - transition: height 0.2s ease-out; -} - .rc-collapse > .rc-collapse-item { - border-top: 1px solid #fefefe; -} - .rc-collapse > .rc-collapse-item:first-child { - border-top: none; -} - .rc-collapse > .rc-collapse-item > .rc-collapse-header { - height: 56px; - line-height: 56px; - text-indent: 16px; - cursor: pointer; - border-bottom: 1px solid #e5e5e5; - background: #fff; -} - .rc-collapse > .rc-collapse-item > .rc-collapse-header .arrow { - display: inline-block; - content: "\20"; - width: 0; - height: 0; - font-size: 0; - line-height: 0; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - border-left: 4px solid #666; - vertical-align: middle; - margin-right: 8px; -} - .rc-collapse > .rc-collapse-item-disabled > .rc-collapse-header { - cursor: not-allowed; - background-color: #fff; -} + transition: height 0.2s ease-out; + } + + .rc-collapse>.rc-collapse-item { + border-top: 1px solid #fefefe; + } + + .rc-collapse>.rc-collapse-item:first-child { + border-top: none; + } + + .rc-collapse>.rc-collapse-item>.rc-collapse-header { + height: 56px; + line-height: 56px; + text-indent: 16px; + cursor: pointer; + border-bottom: 1px solid #e5e5e5; + background: #fff; + } + + .rc-collapse>.rc-collapse-item>.rc-collapse-header .arrow { + display: inline-block; + content: "\20"; + width: 0; + height: 0; + font-size: 0; + line-height: 0; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; + border-left: 4px solid #666; + vertical-align: middle; + margin-right: 8px; + } + + .rc-collapse>.rc-collapse-item-disabled>.rc-collapse-header { + cursor: not-allowed; + background-color: #fff; + } + .rc-collapse-content { - overflow: hidden; - padding: 0 8px; - background-color: #fff; -} - .rc-collapse-content > .rc-collapse-content-box { - margin-top: 16px; - margin-bottom: 16px; -} + overflow: hidden; + padding: 0 8px; + background-color: #fff; + } + + .rc-collapse-content>.rc-collapse-content-box { + margin-top: 16px; + margin-bottom: 16px; + } + .rc-collapse-content-inactive { - display: none; -} - .rc-collapse-item:last-child > .rc-collapse-content { - border-radius: 0 0 3px 3px; -} - .rc-collapse > .rc-collapse-item-active > .rc-collapse-header .arrow { - border-left: 3px solid transparent; - border-right: 3px solid transparent; - border-top: 4px solid #fefefe; - margin-right: 6px; -} - .rc-collapse-item > .rc-collapse-header { - font-family: "Titillium Web"; - font-size: 18px; - color: #0073e6; - background: #fff; -} - .rc-collapse > .rc-collapse-item-active > .rc-collapse-header { - color: #fff; - border-bottom: none; - background: #06c; -} - .rc-collapse > .rc-collapse-item-active > .rc-collapse-header-error { - color: #fff; - border-bottom: none; - background: #f83e5a; -} + display: none; + } + + .rc-collapse-item:last-child>.rc-collapse-content { + border-radius: 0 0 3px 3px; + } + + .rc-collapse>.rc-collapse-item-active>.rc-collapse-header .arrow { + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 4px solid #fefefe; + margin-right: 6px; + } + + .rc-collapse-item>.rc-collapse-header { + font-family: "Titillium Web"; + font-size: 18px; + color: #0073e6; + background: #fff; + } + + .rc-collapse>.rc-collapse-item-active>.rc-collapse-header { + color: #fff; + border-bottom: none; + background: #06c; + } + + .rc-collapse>.rc-collapse-item-active>.rc-collapse-header-error { + color: #fff; + border-bottom: none; + background: #f83e5a; + } + .language-switcher { - display: flex; - border-bottom: 1px solid #e8e8e8; - margin-bottom: 20px; - flex-flow: row wrap; - padding: 0 2em; - background: #fdfdfd; - min-width: 50rem; -} + display: flex; + border-bottom: 1px solid #e8e8e8; + margin-bottom: 20px; + flex-flow: row wrap; + padding: 0 2em; + background: #fdfdfd; + min-width: 50rem; + } + .rw-multiselect-input { - min-width: 50rem; - margin-left: 0.5rem; - margin-right: 0.5rem; -} + min-width: 50rem; + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .rw-multiselect-tag-btn { - opacity: 60%; -} + opacity: 60%; + } + .rw-multiselect-tag-btn:hover { - opacity: 100%; -} - .language-switcher__link, .language-switcher__item { - font-size: 18px; - color: #06c; - margin-right: 10px; - width: 150px; - text-align: center; -} - .language-switcher__link .language-switcher__item-label, .language-switcher__item .language-switcher__item-label { - display: inline-block; - width: 80%; - padding-bottom: 0.5rem; - cursor: pointer; -} - .language-switcher__link img, .language-switcher__item img { - width: 14px; - height: 14px; - cursor: pointer; -} + opacity: 100%; + } + + .language-switcher__link, + .language-switcher__item { + font-size: 18px; + color: #06c; + margin-right: 10px; + width: 150px; + text-align: center; + } + + .language-switcher__link .language-switcher__item-label, + .language-switcher__item .language-switcher__item-label { + display: inline-block; + width: 80%; + padding-bottom: 0.5rem; + cursor: pointer; + } + + .language-switcher__link img, + .language-switcher__item img { + width: 14px; + height: 14px; + cursor: pointer; + } + .language-switcher__item--selected { - border-bottom: 1px solid #06c; - cursor: pointer; -} + border-bottom: 1px solid #06c; + cursor: pointer; + } + .language-switcher__link { - font-size: 18px; - margin-bottom: 10px; - color: #06c; -} + font-size: 18px; + margin-bottom: 10px; + color: #06c; + } + .language-filter__dropdown { - padding: 0; - margin: 0; - cursor: pointer; -} + padding: 0; + margin: 0; + cursor: pointer; + } + .language-filter { - margin-top: -48px; - width: 250px; - height: 400px; -} + margin-top: -48px; + width: 250px; + height: 400px; + } + input[type="text"].language-filter__input { - margin-top: -5px; - border-bottom: 3px; - font-size: 18px; - color: #5c6f82; - border-bottom: 1px solid #e8e8e8; - outline: 0; -} + margin-top: -5px; + border-bottom: 3px; + font-size: 18px; + color: #5c6f82; + border-bottom: 1px solid #e8e8e8; + outline: 0; + } + input[type="text"].language-filter__input::placeholder { - opacity: 0.4; - font-size: 18px; -} + opacity: 0.4; + font-size: 18px; + } + input[type="text"].language-filter__input:focus { - outline: 0; - outline-offset: -4px; -} + outline: 0; + outline-offset: -4px; + } + .language-filter__content { - overflow-y: scroll; - height: 300px; -} + overflow-y: scroll; + height: 300px; + } + .language-filter__content__item { - color: #5c6f82; - font-size: 18px; - font-weight: 500; - margin-left: -10px; -} - -.notification { - z-index: 999999 !important; -} + color: #5c6f82; + font-size: 18px; + font-weight: 500; + margin-left: -10px; + } + + .notification { + z-index: 999999 !important; + } \ No newline at end of file