-
Yoan VALLET authoredYoan VALLET authored
_challenges.scss 9.39 KiB
@import '../base/color';
@import '../base/breakpoint';
// ChallengeCardContainer
.ccc-root {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 1.5rem;
.ccc-content {
min-height: 9rem;
width: 45.75rem;
@media #{$large-phone} {
width: 100%;
}
.ccc-header {
margin-top: 0.375rem;
margin-bottom: 1.25rem;
color: $text-bright;
}
}
}
.loc-root {
display: flex;
justify-content: center;
.loc-content {
width: 100%;
max-width: 53rem;
display: grid;
@media #{$large-phone} {
display: block;
}
.timeline-line {
background-color: $text-bright;
width: 1px;
height: calc(100vh - 174px);
grid-column: 1;
grid-row: 1;
position: unset;
margin-left: 3.8rem;
@media #{$tablet} {
height: calc(100vh - 229px);
}
@media #{$large-phone} {
height: 100vh;
display: block;
position: fixed;
}
}
.list-of-challenge-cards {
padding-top: 1rem;
width: 100%;
grid-column: 1;
grid-row: 1;
@media #{$large-phone} {
display: block;
}
}
}
}
// ChallengeListItem
.cli-link {
color: black;
text-decoration: none;
}
.cli {
cursor: pointer; display: flex;
flex-direction: row;
margin: 2rem 0.5rem;
border-radius: 2px;
@media #{$large-phone} {
margin: 1rem 0.5rem;
}
&.cli-available {
background: $blue-gradient;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
&.cli-ongoing {
border: 1px solid $blue;
background: $dark-light-2;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.cli-left {
flex: 1;
display: flex;
flex-direction: column;
padding-left: 1.415rem;
.cli-content {
display: flex;
flex-direction: row;
.cli-content-icon {
margin: 0.5rem 0;
}
.cli-content-title {
color: $text-white;
margin: 0 1rem;
align-self: center;
}
.subtitle-finished {
color: $text-dark;
}
.title-finished {
color: $text-bright;
}
.subtitle-ongoing {
color: $text-blue;
}
.title-ongoing {
color: $text-white;
}
.subtitle-available {
color: $dark-light-2;
}
.title-available {
color: $dark-light-2;
}
.title-locked {
color: $text-dark;
opacity: 0.35;
}
}
}
.cli-right {
align-self: center;
padding-right: 1.2rem;
&.cli-right-ongoing {
padding-right: calc(1.2rem + 2px);
}
&.cli-right-available {
padding-right: calc(1.2rem + 2px);
}
}
}
// ChallengeCard
.cc-link {
color: black;
text-decoration: none;
}
.cc {
cursor: pointer;
display: flex;
flex-direction: row;
margin: 0.25rem 0.25rem;
width: 100%;
.cc-content-left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: inherit;
.cc-content-title {
color: $text-white;
&.cc-content-title-padding {
padding-top: 1rem;
}
}
.cc-content-progress {
margin-top: 1rem;
}
.cc-content-timeline {
padding: 0 0.5rem;
}
.cc-content-visu {
padding: 1rem 0;
}
}
.cc-content-right {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-self: center;
.cc-notification {
display: flex;
align-items: center;
justify-content: center;
height: 1.8125rem;
width: 1.8125rem;
border-radius: 50%;
background: $blue-radial-gradient;
color: $text-black;
margin-right: 1rem;
}
}
}
// ChallengePage
.cm-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 1.5rem 1rem 0.5rem;
width: 22.125rem;
@media #{$large-phone} {
width: 90%;
}
.win {
background: rgb(238, 213, 130);
background: Linear-gradient(
90deg,
#bf723b 0%,
#dd9a2b 26.04%, #f6d74c 45.31%,
#d1880d 75%,
#a05b11 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.defeat {
background: rgb(238, 213, 130);
background: Linear-gradient(
90deg,
#a66340 0%,
#ae5f38 33.33%,
#9e4e24 51.56%,
#a4573a 66.67%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cm-title {
text-align: center;
margin-bottom: 210px;
}
.cm-win-badge-star {
display: grid;
align-items: center;
justify-items: center;
position: absolute;
top: 22px;
.cm-win-badge {
grid-column: 1;
grid-row: 1;
z-index: 1;
}
.cm-win-star {
grid-column: 1;
grid-row: 1;
}
}
.cm-badge {
margin: 2rem;
}
.cm-button-valid {
margin-top: 1rem;
width: 100%;
}
.cm-txt {
text-align: center;
margin-bottom: 1rem;
width: 100%;
}
.cm-text-new-available {
margin-top: 1.25rem;
}
}
.cm-overspent-value {
color: $red-primary;
}
// FollowChallengeTimeLine
.list-of-days-duration {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 1rem;
width: 100%;
.day-solo {
display: flex;
flex-direction: column;
width: 100%; .day-line-label {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
.date-dash {
width: 50%;
height: 2px;
background-color: $grey-dark;
}
.past {
background-color: $blue;
}
.futur {
background-color: $grey-dark;
}
.date-label {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
position: absolute;
}
}
.day-letter {
margin-top: 0.8rem;
text-align: center;
color: $text-dark;
}
.day-date {
margin-top: 0.2rem;
text-align: center;
color: $text-dark;
}
}
}
// OngoingChallengeFirstViewingDate
.view-start-date {
padding: 0.25rem 0;
color: $blue;
}
// OngoingChallengePile
.pile-energy-follow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
.pile-section {
display: grid;
.filter-pile {
grid-column: 1;
grid-row: 1;
justify-self: flex-end;
align-self: center;
width: 0%;
position: relative;
right: 0;
opacity: 0.8;
background-color: $dark-light-2;
z-index: 1;
}
.pile-icon {
grid-column: 1;
grid-row: 1;
margin: -25px 0;
}
} .max-energy {
color: $grey-dark;
}
.no-values-section {
color: $text-white;
padding-right: 1rem;
}
}
// ChallengeDetailsViewContainer
.ongoing-challenge {
min-height: 620px;
}
.cp-root {
width: 100%;
.cp-content {
display: flex;
align-items: center;
flex-direction: column;
color: $text-bright;
height: 84vh;
justify-content: space-between;
&.--locked {
@extend .cp-content;
justify-content: center;
}
.cp-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: $dark-light-2;
width: 100%;
height: 60%;
padding-top: 2rem;
padding-bottom: 0.5rem;
.cp-icon {
margin-bottom: 1rem;
}
.cp-icon-available {
margin: 2rem;
}
.cp-date {
color: $text-dark;
text-align: center;
margin-top: 1rem;
}
.cp-title {
color: $text-bright;
text-align: center;
margin-top: 0.5rem;
}
.cp-result {
color: $text-bright;
text-align: center;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
.cp-result-positif {
color: $green-2;
}
.cp-result-negatif {
color: $red-no-data;
}
}
.cp-description {
text-align: center;
margin-top: 1rem;
margin-bottom: 0.5rem;
margin-left: 1.25rem; margin-right: 1.25rem;
max-width: 53rem;
}
.cp-valid {
justify-content: center;
display: flex;
flex-direction: row;
width: 90%;
margin-top: 0.75rem;
max-width: 53rem;
.cp-left-button {
margin-right: 0.25rem;
margin-left: 1.25rem;
width: 100%;
}
.cp-right-button {
margin-left: 0.25rem;
margin-right: 1.25rem;
width: 100%;
}
}
}
.cp-follow {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
max-width: 53rem;
}
.cp-valid-locked {
margin-top: 2rem;
width: 80%;
max-width: 53rem;
}
.cp-bottom {
padding: 1.25rem 1.25rem;
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 53rem;
margin-bottom: 2rem;
@media #{$large-phone} {
margin-bottom: 0;
}
.cp-eg-content {
width: 100%;
.linked-ecogestures {
text-transform: uppercase;
}
.cp-ecogestures {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
}
}
}