From 3a275179454664dd51f64b201bc9ef290a477a9d Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Mon, 31 Jul 2023 16:44:42 +0200
Subject: [PATCH] Add styling for various components of the survey
---
survey-frontend/src/survey.scss | 107 ++++++++++++++++++++++++++++++--
1 file changed, 101 insertions(+), 6 deletions(-)
diff --git a/survey-frontend/src/survey.scss b/survey-frontend/src/survey.scss
index 444089cd..f13086b8 100644
--- a/survey-frontend/src/survey.scss
+++ b/survey-frontend/src/survey.scss
@@ -4,6 +4,29 @@
visibility: hidden;
}
+.survey-title {
+ color: #2db394;
+}
+
+.survey-description {
+ color: #262261;
+ font-weight: 400;
+}
+
+.survey-title:after {
+ content: '';
+ display: inline-block;
+ width: 0.1rem;
+ height: 1em;
+ background-color: #2db394;
+ margin: 0 .5rem;
+ vertical-align: middle;
+}
+
+.survey-title-nren {
+ color: #262261;
+}
+
#sv-nav-complete {
width: 0px;
height: 0px;
@@ -11,22 +34,94 @@
visibility: hidden;
}
+.sv-header-flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 2rem;
+ color: #2db394;
+ font-weight: bold;
+ padding-left: 1rem !important;
+}
+
+.sv-container-modern__title {
+ display: none;
+}
+
+.sv-title.sv-page__title {
+ // display: none;
+ // all: unset;
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #2db394;
+ margin-bottom: 0.25rem;
+}
+
+.sv-title.sv-panel__title {
+ color: #262261
+}
+
+.sv-description {
+ font-weight: bold;
+ color: #262261
+}
+
+.sv-text {
+ border-bottom: .2rem dotted var(--text-border-color, #d4d4d4)
+}
+
.verification {
+ min-height: 1.5rem;
+ order: 2; // Make sure the button comes last
+ margin-left: auto; // Push button to the right
display: inline-block;
- margin-left: 20px;
+ border-radius: 1rem;
+ padding: 0 1rem;
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+ margin-right: .4rem;
+ box-shadow: 0 0 2px 2px #2db394;
}
.verification-required {
- color: red;
- border-style: solid;
- border-width: 1px;
+ font-size: 0.85rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ background-color: white;
+}
+
+.verification-ok {
+ color: white;
+ font-size: 0.85rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ background-color: #2db394;
+
+ // disable hover/clicking/... for the button when verified
+ pointer-events: none;
+
}
.sv-action-bar-item.verification.verification-ok:hover {
cursor: auto;
- background-color: transparent;
+ background-color: #2db394;
}
+.survey-content,
.survey-progress {
- display: flex;
+ padding-right: 5rem;
+ padding-left: 5rem;
+}
+
+.survey-container {
+
+ margin-top: 2.5rem;
+
+ // limit the width on very large screens
+ @media screen and (min-width: 1441px) {
+ max-width: 65vw;
+ }
+
+ // default to 100vw
+ max-width: 100vw;
}
\ No newline at end of file
--
GitLab