From d79523f2468a327b57008121750b0a7e57437e01 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 26 May 2020 14:25:12 +0200
Subject: [PATCH] feat: fix style for konnector status
---
src/styles/components/_konnector.scss | 5 +-
src/styles/index.css | 138 ++++++++++++++++----------
2 files changed, 88 insertions(+), 55 deletions(-)
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index efd3c1e77..910f87906 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -59,7 +59,6 @@
padding: 0 1rem;
}
.accordion-caption {
- font-size: 0.8rem;
color: $google-text-2;
text-transform: lowercase;
&::first-letter {
@@ -68,6 +67,10 @@
}
.accordion-caption-red {
color: $red-error;
+ text-transform: lowercase;
+ &::first-letter {
+ text-transform: uppercase;
+ }
}
.accordion-content {
overflow: hidden;
diff --git a/src/styles/index.css b/src/styles/index.css
index 2a9a12bae..92ba7db5c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -42,11 +42,11 @@ body {
/* line 30, src/styles/base/_layout.scss */
[role='banner'] .coz-bar-container {
- padding: 0 3.25em 0 0;
background-color: white; }
@media only screen and (max-width: 768px) {
/* line 30, src/styles/base/_layout.scss */
[role='banner'] .coz-bar-container {
+ padding: 0 3.25em 0 0;
background-color: unset; } }
/* line 38, src/styles/base/_layout.scss */
@@ -905,8 +905,10 @@ p {
/* line 105, src/styles/components/_konnector.scss */
.state-icon {
- height: 20px;
- width: 20px; }
+ height: 22px;
+ width: 22px;
+ margin-left: 32px;
+ margin-bottom: 40px; }
/** BLACK **/
/** TEXT COLOR **/
@@ -1968,51 +1970,67 @@ p {
align-items: center;
flex-direction: column;
color: #e0e0e0;
- height: 84vh;
+ min-height: 84vh;
justify-content: space-between; }
/* line 374, src/styles/components/_challenges.scss */
.cp-root .--locked.cp-content {
justify-content: center; }
- /* line 378, src/styles/components/_challenges.scss */
- .cp-root .cp-content .cp-info {
+ /* line 379, src/styles/components/_challenges.scss */
+ .cp-root .cp-content .cp-info, .cp-root .cp-content .cp-info.--available {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: #121212;
width: 100%;
- height: 60%;
- padding-top: 2rem;
+ padding-top: 1rem;
padding-bottom: 0.5rem; }
/* line 388, src/styles/components/_challenges.scss */
+ .cp-root .cp-content .--available.cp-info {
+ height: 74vh; }
+ /* line 392, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-icon {
margin-bottom: 1rem; }
- /* line 391, src/styles/components/_challenges.scss */
+ /* line 395, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-icon-available {
margin: 2rem; }
- /* line 394, src/styles/components/_challenges.scss */
+ /* line 398, src/styles/components/_challenges.scss */
+ .cp-root .cp-content .cp-info .cp-win-badge-star {
+ display: grid;
+ align-items: center;
+ justify-items: center; }
+ /* line 402, src/styles/components/_challenges.scss */
+ .cp-root .cp-content .cp-info .cp-win-badge-star .cp-win-badge {
+ grid-column: 1;
+ grid-row: 1;
+ z-index: 1; }
+ /* line 407, src/styles/components/_challenges.scss */
+ .cp-root .cp-content .cp-info .cp-win-badge-star .cp-win-star {
+ grid-column: 1;
+ grid-row: 1; }
+ /* line 412, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-date {
color: #a0a0a0;
text-align: center;
margin-top: 1rem; }
- /* line 399, src/styles/components/_challenges.scss */
+ /* line 417, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-title {
color: #e0e0e0;
text-align: center;
margin-top: 0.5rem; }
- /* line 404, src/styles/components/_challenges.scss */
+ /* line 422, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-result {
color: #e0e0e0;
text-align: center;
margin-top: 1.5rem;
margin-bottom: 0.5rem; }
- /* line 409, src/styles/components/_challenges.scss */
+ /* line 427, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-result .cp-result-positif {
color: #7fd771; }
- /* line 412, src/styles/components/_challenges.scss */
+ /* line 430, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-result .cp-result-negatif {
color: #d24444; }
- /* line 416, src/styles/components/_challenges.scss */
+ /* line 434, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-description {
text-align: center;
margin-top: 1rem;
@@ -2020,7 +2038,7 @@ p {
margin-left: 1.25rem;
margin-right: 1.25rem;
max-width: 53rem; }
- /* line 424, src/styles/components/_challenges.scss */
+ /* line 442, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-valid {
justify-content: center;
display: flex;
@@ -2028,17 +2046,17 @@ p {
width: 90%;
margin-top: 0.75rem;
max-width: 53rem; }
- /* line 431, src/styles/components/_challenges.scss */
+ /* line 449, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-valid .cp-left-button {
margin-right: 0.25rem;
margin-left: 0;
width: 100%; }
- /* line 436, src/styles/components/_challenges.scss */
+ /* line 454, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-info .cp-valid .cp-right-button {
margin-left: 0.25rem;
margin-right: 0;
width: 100%; }
- /* line 443, src/styles/components/_challenges.scss */
+ /* line 461, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-follow {
width: 90%;
display: flex;
@@ -2046,12 +2064,12 @@ p {
align-items: center;
margin-bottom: 1rem;
max-width: 53rem; }
- /* line 451, src/styles/components/_challenges.scss */
+ /* line 469, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-valid-locked {
margin-top: 2rem;
width: 80%;
max-width: 53rem; }
- /* line 456, src/styles/components/_challenges.scss */
+ /* line 474, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-bottom {
padding: 1.25rem 1.25rem;
width: 90%;
@@ -2061,16 +2079,16 @@ p {
max-width: 53rem;
margin-bottom: 2rem; }
@media only screen and (max-width: 768px) {
- /* line 456, src/styles/components/_challenges.scss */
+ /* line 474, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-bottom {
margin-bottom: 0; } }
- /* line 467, src/styles/components/_challenges.scss */
+ /* line 485, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-bottom .cp-eg-content {
width: 100%; }
- /* line 469, src/styles/components/_challenges.scss */
+ /* line 487, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-bottom .cp-eg-content .linked-ecogestures {
text-transform: uppercase; }
- /* line 472, src/styles/components/_challenges.scss */
+ /* line 490, src/styles/components/_challenges.scss */
.cp-root .cp-content .cp-bottom .cp-eg-content .cp-ecogestures {
width: 100%;
display: flex;
@@ -2094,7 +2112,7 @@ p {
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 1rem 1.5rem; }
+ padding: 1rem 1.5rem 2.5rem 1.5rem; }
/* line 11, src/styles/components/_ecogesture.scss */
.ecogesture-root .negawatt-button-content {
width: calc(53rem - 2%);
@@ -2176,44 +2194,43 @@ p {
.em-header {
color: #e0e0e0;
border-bottom: 1px solid rgba(163, 163, 163, 0.4);
- margin-bottom: 1rem;
padding-bottom: 1em;
width: 100%;
display: flex;
justify-content: center; }
-/* line 94, src/styles/components/_ecogesture.scss */
+/* line 93, src/styles/components/_ecogesture.scss */
.em-icon {
margin-bottom: 1rem; }
-/* line 97, src/styles/components/_ecogesture.scss */
+/* line 96, src/styles/components/_ecogesture.scss */
.em-title {
margin-bottom: 0; }
-/* line 100, src/styles/components/_ecogesture.scss */
+/* line 99, src/styles/components/_ecogesture.scss */
.em-detail {
display: flex;
flex-direction: row;
margin: 0.5em 0; }
- /* line 104, src/styles/components/_ecogesture.scss */
+ /* line 103, src/styles/components/_ecogesture.scss */
.em-detail .em-detail-nwh {
display: flex;
flex: 1;
align-self: flex-start;
margin-top: 0.65rem;
color: var(--textDark); }
- /* line 110, src/styles/components/_ecogesture.scss */
+ /* line 109, src/styles/components/_ecogesture.scss */
.em-detail .em-detail-nwh .em-detail-nwh-unit {
margin-left: 0.2rem; }
- /* line 114, src/styles/components/_ecogesture.scss */
+ /* line 113, src/styles/components/_ecogesture.scss */
.em-detail .em-picto-flow {
display: flex;
align-self: flex-end; }
- /* line 117, src/styles/components/_ecogesture.scss */
+ /* line 116, src/styles/components/_ecogesture.scss */
.em-detail .em-picto-flow .em-pic-content {
margin: 0.3em; }
-/* line 123, src/styles/components/_ecogesture.scss */
+/* line 122, src/styles/components/_ecogesture.scss */
.em-content-box {
max-height: 25rem;
overflow: auto;
@@ -2223,25 +2240,28 @@ p {
/* width */
/* Track */
/* Handle */ }
- /* line 130, src/styles/components/_ecogesture.scss */
+ /* line 129, src/styles/components/_ecogesture.scss */
.em-content-box::-webkit-scrollbar {
width: 10px; }
- /* line 134, src/styles/components/_ecogesture.scss */
+ /* line 133, src/styles/components/_ecogesture.scss */
.em-content-box::-webkit-scrollbar-track {
background: #3e4045; }
- /* line 138, src/styles/components/_ecogesture.scss */
+ /* line 137, src/styles/components/_ecogesture.scss */
.em-content-box::-webkit-scrollbar-thumb {
background: #6f7074; }
- /* line 141, src/styles/components/_ecogesture.scss */
+ /* line 140, src/styles/components/_ecogesture.scss */
.em-content-box .em-content-box-text {
display: flex;
flex-direction: column;
- padding: 0.5rem 1.5rem;
+ padding: 1.5rem 1.5rem;
width: 22.125rem; }
@media only screen and (max-width: 768px) {
- /* line 141, src/styles/components/_ecogesture.scss */
+ /* line 140, src/styles/components/_ecogesture.scss */
.em-content-box .em-content-box-text {
width: 100%; } }
+ /* line 148, src/styles/components/_ecogesture.scss */
+ .em-content-box .em-content-box-text .em-description {
+ padding-bottom: 2.5rem; }
/** BLACK **/
/** TEXT COLOR **/
@@ -2280,7 +2300,7 @@ p {
max-width: 100%;
max-height: 30rem;
transform: translate(-50%, -50%);
- padding: 1rem 0;
+ padding: 1rem 0 0 0;
box-sizing: border-box;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px; }
@@ -2339,37 +2359,34 @@ p {
margin-top: 2.5rem;
margin-bottom: 1.25rem;
color: #e0e0e0; }
- /* line 22, src/styles/components/_faq.scss */
- .faq-root .faq-content .faq-content-detail {
- padding-bottom: 1rem; }
-/* line 28, src/styles/components/_faq.scss */
+/* line 25, src/styles/components/_faq.scss */
.faq-card-link {
color: black; }
-/* line 31, src/styles/components/_faq.scss */
+/* line 28, src/styles/components/_faq.scss */
.faq-card {
display: flex;
flex-direction: row;
margin: -0.75rem 0;
width: 100%; }
@media only screen and (max-width: 768px) {
- /* line 31, src/styles/components/_faq.scss */
+ /* line 28, src/styles/components/_faq.scss */
.faq-card {
width: 100%; } }
- /* line 39, src/styles/components/_faq.scss */
+ /* line 36, src/styles/components/_faq.scss */
.faq-card .faq-card-content {
display: flex;
flex-direction: row; }
- /* line 42, src/styles/components/_faq.scss */
+ /* line 39, src/styles/components/_faq.scss */
.faq-card .faq-card-content .faq-card-content-icon {
margin: 0.5rem 0; }
- /* line 45, src/styles/components/_faq.scss */
+ /* line 42, src/styles/components/_faq.scss */
.faq-card .faq-card-content .faq-card-content-title {
margin: 0 1rem;
align-self: center; }
-/* line 53, src/styles/components/_faq.scss */
+/* line 50, src/styles/components/_faq.scss */
.faq-view-root {
display: flex;
flex-direction: column;
@@ -2377,13 +2394,26 @@ p {
justify-content: center;
padding: 1rem 0;
margin-top: 1.5rem; }
- /* line 60, src/styles/components/_faq.scss */
+ /* line 57, src/styles/components/_faq.scss */
.faq-view-root .faq-view-content {
width: 45.75rem; }
@media only screen and (max-width: 768px) {
- /* line 60, src/styles/components/_faq.scss */
+ /* line 57, src/styles/components/_faq.scss */
.faq-view-root .faq-view-content {
width: 100%; } }
+ /* line 62, src/styles/components/_faq.scss */
+ .faq-view-root .faq-view-content .faq-content-detail {
+ padding-bottom: 0.6rem; }
+ /* line 64, src/styles/components/_faq.scss */
+ .faq-view-root .faq-view-content .faq-content-detail .text-bold {
+ font-weight: bold; }
+ /* line 67, src/styles/components/_faq.scss */
+ .faq-view-root .faq-view-content .faq-content-detail .text-underline {
+ text-decoration: underline; }
+ /* line 70, src/styles/components/_faq.scss */
+ .faq-view-root .faq-view-content .faq-content-detail .spaceline {
+ height: 0.6rem;
+ display: block; }
/** BLACK **/
/** TEXT COLOR **/
--
GitLab