Skip to content
Snippets Groups Projects
Commit c4bdab1b authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

Remove border + remove global stylesheet

parent 290ca463
Branches
Tags
1 merge request!144Features/us316 maj ecogestures icon
Hide whitespace changes
Inline Side-by-side
Showing
with 289 additions and 909 deletions
src/components/CommonKit/Card/StyledEcogestureCard.tsx
+ 109
− 109
View file @ c4bdab1b
import React, { ReactNode } from 'react'
import CardActionArea, {
CardActionAreaProps,
} from '@material-ui/core/CardActionArea'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
const CardBase = withStyles({
root: {
background: 'var(--greyLinearGradientBackground)',
border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
borderRadius: '4px',
margin: '10px 0px 10px 0px',
padding: '0.5rem 1rem',
minHeight: '72px',
},
})(CardActionArea)
const CardUnlocked = withStyles({
root: {
border: '1px solid var(--blue)',
color: 'white',
height: '100%',
padding: 0,
},
})(CardBase)
const CardNew = withStyles({
'@keyframes glowAnimation': {
'0%': { boxShadow: '0px 0px 4px var(--blue)' },
'50%': { boxShadow: '0px 0px 16px var(--blue)' },
'100%': { boxShadow: '0px 0px 4px var(--blue)' },
},
root: {
border: '1px solid var(--blue)',
animation: '2s glowAnimation linear infinite',
color: 'white',
height: '100%',
padding: 0,
},
})(CardBase)
const CardBlueBorderContentBase = withStyles({
root: {
border: '1px solid var(--blue)',
height: '100%',
padding: 0,
},
})(CardBase)
const CardChallengeBase = withStyles({
root: {
height: '100%',
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
})(CardContent)
const CardContentBase = withStyles({
root: {
color: 'white',
height: '100%',
padding: 0,
},
})(CardContent)
interface StyledEcogestureCardProps extends CardActionAreaProps {
unlocked?: boolean
border?: boolean
newEcogesture?: boolean | null
}
const GenerateContentCard = (children: ReactNode): React.ReactFragment => {
return <CardChallengeBase>{children}</CardChallengeBase>
}
const StyledEcogestureCard: React.ComponentType<StyledEcogestureCardProps> = ({
unlocked,
border,
newEcogesture,
...props
}: StyledEcogestureCardProps) => {
if (newEcogesture) {
return <CardNew {...props}>{GenerateContentCard(props.children)}</CardNew>
} else if (unlocked) {
return (
<CardUnlocked {...props}>
{GenerateContentCard(props.children)}
</CardUnlocked>
)
} else if (border) {
return (
<CardBlueBorderContentBase {...props}>
{GenerateContentCard(props.children)}
</CardBlueBorderContentBase>
)
} else {
return (
<CardBase {...props}>
<CardContentBase>{props.children}</CardContentBase>
</CardBase>
)
}
}
export default StyledEcogestureCard
import React, { ReactNode } from 'react'
import CardActionArea, {
CardActionAreaProps,
} from '@material-ui/core/CardActionArea'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
const CardBase = withStyles({
root: {
background: 'var(--greyLinearGradientBackground)',
// border: '1px solid',
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
borderRadius: '4px',
margin: '10px 0px 10px 0px',
padding: '0.5rem 1rem',
minHeight: '72px',
},
})(CardActionArea)
const CardUnlocked = withStyles({
root: {
// border: '1px solid var(--blue)',
color: 'white',
height: '100%',
padding: 0,
},
})(CardBase)
const CardNew = withStyles({
'@keyframes glowAnimation': {
'0%': { boxShadow: '0px 0px 4px var(--blue)' },
'50%': { boxShadow: '0px 0px 16px var(--blue)' },
'100%': { boxShadow: '0px 0px 4px var(--blue)' },
},
root: {
border: '1px solid var(--blue)',
animation: '2s glowAnimation linear infinite',
color: 'white',
height: '100%',
padding: 0,
},
})(CardBase)
const CardBlueBorderContentBase = withStyles({
root: {
border: '1px solid var(--blue)',
height: '100%',
padding: 0,
},
})(CardBase)
const CardChallengeBase = withStyles({
root: {
height: '100%',
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
})(CardContent)
const CardContentBase = withStyles({
root: {
color: 'white',
height: '100%',
padding: 0,
},
})(CardContent)
interface StyledEcogestureCardProps extends CardActionAreaProps {
unlocked?: boolean
border?: boolean
newEcogesture?: boolean | null
}
const GenerateContentCard = (children: ReactNode): React.ReactFragment => {
return <CardChallengeBase>{children}</CardChallengeBase>
}
const StyledEcogestureCard: React.ComponentType<StyledEcogestureCardProps> = ({
unlocked,
border,
newEcogesture,
...props
}: StyledEcogestureCardProps) => {
if (newEcogesture) {
return <CardNew {...props}>{GenerateContentCard(props.children)}</CardNew>
} else if (unlocked) {
return (
<CardUnlocked {...props}>
{GenerateContentCard(props.children)}
</CardUnlocked>
)
} else if (border) {
return (
<CardBlueBorderContentBase {...props}>
{GenerateContentCard(props.children)}
</CardBlueBorderContentBase>
)
} else {
return (
<CardBase {...props}>
<CardContentBase>{props.children}</CardContentBase>
</CardBase>
)
}
}
export default StyledEcogestureCard
src/components/Ecogesture/EcogestureCard.scss 0 → 100644
+ 64
− 0
View file @ c4bdab1b
@import '../../styles/base/color';
// EcogestureCard
.ec {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
.ecogesture-card-notif {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 8px;
top: 8px;
width: 1.25rem;
height: 1.25rem;
color: $dark-light;
border-radius: 50%;
border: 1px solid $dark-light;
z-index: 1;
background: $blue-radial-gradient;
font-size: 12px;
}
.ec-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 1rem;
&.ec-content-unlocked {
padding: 0.4rem 0;
}
&.ec-content-challenge {
padding: 0.5rem 0;
}
.ec-content-icon {
min-height: 50px;
}
.ec-content-short-name {
display: flex;
flex: 1;
align-items: center;
text-align: center;
}
.ec-content-nwh {
margin-top: 0.25rem;
color: $soft-grey;
}
}
}
.cp-eg-1 {
height: 8rem;
width: 100%;
margin-right: 0.25rem;
text-align: center;
}
.cp-eg-2 {
height: 8rem;
width: 100%;
margin-left: 0.25rem;
text-align: center;
}
src/components/Ecogesture/EcogestureCard.tsx
+ 10
− 4
View file @ c4bdab1b
import React, { useState, useEffect } from 'react'
import { Ecogesture } from 'models'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
// import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { importIconbyId } from 'utils/utils'
import './EcogestureCard.scss'
interface EcogestureCardProps {
ecogesture: Ecogesture
handleClick?: (ecogesture: Ecogesture) => void
......@@ -18,7 +18,7 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
const handleCardclick = () => {
handleClick && ecogesture && handleClick(ecogesture)
}
const [ecogestureIcon, setEcogestureIcon] = useState(defaultIcon)
const [ecogestureIcon, setEcogestureIcon] = useState()
useEffect(() => {
if (ecogesture) {
......@@ -34,7 +34,13 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
<div className="ec">
<div className={`ec-content `}>
<div className="ec-content-icon">
<StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
{ecogestureIcon && (
<StyledIcon
className="Icon"
icon={ecogestureIcon || ''}
size={50}
/>
)}
</div>
<div className="ec-content-short-name text-16-bold">
{ecogesture.shortName}
......
src/styles/components/_ecogesture.scss → src/components/Ecogesture/EcogestureList.scss
+ 2
− 165
View file @ c4bdab1b
@import '../base/color';
@import '../base/breakpoint';
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';
// EcogestureCardContainer
.ecogesture-root {
......@@ -153,166 +153,3 @@
}
}
}
// EcogestureCard
.ec {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
.ecogesture-card-notif {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 8px;
top: 8px;
width: 1.25rem;
height: 1.25rem;
color: $dark-light;
border-radius: 50%;
border: 1px solid $dark-light;
z-index: 1;
background: $blue-radial-gradient;
font-size: 12px;
}
.ec-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
&.ec-content-unlocked {
padding: 0.4rem 0;
}
&.ec-content-challenge {
padding: 0.5rem 0;
}
.ec-content-icon {
min-height: 50px;
}
.ec-content-short-name {
display: flex;
flex: 1;
align-items: center;
text-align: center;
}
.ec-content-nwh {
margin-top: 0.25rem;
color: $soft-grey;
}
}
}
.cp-eg-1 {
height: 8rem;
width: 100%;
margin-right: 0.25rem;
text-align: center;
}
.cp-eg-2 {
height: 8rem;
width: 100%;
margin-left: 0.25rem;
text-align: center;
}
// EcogestureModal
.em-header {
color: $grey-bright;
border-bottom: 1px solid rgba(163, 163, 163, 0.4);
padding-bottom: 1em;
width: 100%;
display: flex;
justify-content: center;
}
.em-root {
overflow: auto;
width: 100%;
display: flex;
justify-content: center;
/* width */
&::-webkit-scrollbar {
width: 10px;
}
/* Track */
&::-webkit-scrollbar-track {
background: $scrollbar-track;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $scrollbar-thumb;
}
.em-content {
padding: 1.5rem 2.5rem 0;
@media #{$large-phone} {
width: 100%;
padding: 1.5rem 1.5rem 0;
}
.em-content-box-img {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon {
margin-bottom: 1rem;
}
}
.em-detail {
display: flex;
flex-direction: row;
margin: 0.5em 0;
.em-detail-nwh {
display: flex;
flex: 1;
align-self: flex-start;
margin-top: 0.65rem;
color: $soft-grey;
.em-detail-nwh-unit {
margin-left: 0.2rem;
}
}
.em-picto-flow {
display: flex;
align-self: flex-end;
.em-pic-content {
margin: 0.3em;
}
}
}
.em-title {
margin-bottom: 0;
text-align: center;
}
.long-name {
font-weight: bold;
line-height: 150%;
margin: 0.5rem 0 1rem;
}
.em-description {
padding-bottom: 2rem;
}
}
}
.em-content-box-text {
display: flex;
flex-direction: column;
padding: 1.5rem 2.5rem;
@media #{$large-phone} {
padding: 1.5rem 1.5rem;
}
.em-description {
padding-bottom: 2rem;
}
.em-description-2 {
padding-top: 2rem;
}
.em-description-3 {
padding-bottom: 0.5rem;
}
.em-title {
margin-bottom: 0;
}
}
src/components/Ecogesture/EcogestureList.tsx
+ 1
− 0
View file @ c4bdab1b
......@@ -19,6 +19,7 @@ import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import NegaWattModal from 'components/Ecogesture/NegaWattModal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import './EcogestureList.scss'
const EcogesturesList: React.FC = () => {
const { t } = useI18n()
......
src/components/Ecogesture/EcogestureModal.scss 0 → 100644
+ 102
− 0
View file @ c4bdab1b
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';
// EcogestureModal
.em-header {
color: $grey-bright;
border-bottom: 1px solid rgba(163, 163, 163, 0.4);
padding-bottom: 1em;
width: 100%;
display: flex;
justify-content: center;
}
.em-root {
overflow: auto;
width: 100%;
display: flex;
justify-content: center;
/* width */
&::-webkit-scrollbar {
width: 10px;
}
/* Track */
&::-webkit-scrollbar-track {
background: $scrollbar-track;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: $scrollbar-thumb;
}
.em-content {
padding: 1.5rem 2.5rem 0;
@media #{$large-phone} {
width: 100%;
padding: 1.5rem 1.5rem 0;
}
.em-content-box-img {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon {
margin-bottom: 1rem;
}
}
.em-detail {
display: flex;
flex-direction: row;
margin: 0.5em 0;
.em-detail-nwh {
display: flex;
flex: 1;
align-self: flex-start;
margin-top: 0.65rem;
color: $soft-grey;
.em-detail-nwh-unit {
margin-left: 0.2rem;
}
}
.em-picto-flow {
display: flex;
align-self: flex-end;
.em-pic-content {
margin: 0.3em;
}
}
}
.em-title {
margin-bottom: 0;
text-align: center;
}
.long-name {
font-weight: bold;
line-height: 150%;
margin: 0.5rem 0 1rem;
}
.em-description {
padding-bottom: 2rem;
}
}
}
.em-content-box-text {
display: flex;
flex-direction: column;
padding: 1.5rem 2.5rem;
@media #{$large-phone} {
padding: 1.5rem 1.5rem;
}
.em-description {
padding-bottom: 2rem;
}
.em-description-2 {
padding-top: 2rem;
}
.em-description-3 {
padding-bottom: 0.5rem;
}
.em-title {
margin-bottom: 0;
}
}
src/components/Ecogesture/EcogestureModal.tsx
+ 1
− 1
View file @ c4bdab1b
......@@ -8,7 +8,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import { importIconbyId } from 'utils/utils'
import './EcogestureModal.scss'
interface EcogestureModalProps {
open: boolean
ecogesture: Ecogesture
......
src/styles/components/_challenges.scss deleted 100644 → 0
+ 0
− 628
View file @ 290ca463
@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: $grey-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: $grey-bright;
width: 1px;
height: calc(100vh);
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;
z-index: 5;
width: 62px;
height: 62px;
}
.cli-content-title {
color: $white;
margin: 0 1rem;
align-self: center;
}
.subtitle-finished {
color: $soft-grey;
}
.title-finished {
color: $grey-bright;
}
.subtitle-ongoing {
color: $blue;
}
.title-ongoing {
color: $white;
}
.subtitle-available {
color: $dark-light-2;
}
.title-available {
color: $dark-light-2;
}
.title-locked {
color: $soft-grey;
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: $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: $dark-light;
margin-right: 1rem;
}
}
}
// ChallengePage
.cm-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 1.5rem 1rem 1.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%
);
background-clip: text;
-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%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cm-title {
text-align: center;
}
.cm-win-badge-star {
display: grid;
align-items: center;
justify-items: center;
position: absolute;
top: 52px;
@media #{$large-phone} {
top: 65px;
}
&.--ecolyo-royal {
@extend .cp-content;
top: 0px;
@media #{$large-phone} {
top: 5px;
}
}
.cm-win-badge {
-webkit-animation: scale-in-center 0.6s
cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s
both;
grid-column: 1;
grid-row: 1;
z-index: 1;
}
.cm-win-star {
grid-column: 1;
grid-row: 1;
-webkit-animation: rotating 60s linear infinite;
animation: rotating 60s linear infinite;
}
}
.cm-result {
color: $grey-bright;
text-align: center;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
margin-bottom: 165px;
.cm-result-positif {
color: $green;
}
.cm-result-negatif {
color: $red-primary;
}
}
.cm-badge {
position: absolute;
top: 135px;
@media #{$large-phone} {
top: 142px;
}
}
.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;
}
}
// FollowChallengeTimeLine
.list-of-days-duration {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 3rem;
width: 100%;
@media #{$large-phone} {
margin-top: 1rem;
}
.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;
}
.none {
opacity: 0;
}
.date-label {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
position: absolute;
}
}
.day-letter {
margin-top: 0.8rem;
text-align: center;
color: $soft-grey;
}
.day-date {
margin-top: 0.2rem;
text-align: center;
color: $soft-grey;
}
}
}
// OngoingChallengeFirstViewingDate
.view-start-date {
padding: 0.25rem 0;
color: $blue;
}
// OngoingChallengePile
.pile-energy-follow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
&.--home {
@extend .pile-energy-follow;
justify-content: start;
}
.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;
}
.values-section {
margin-left: 1rem;
}
.no-values-section {
color: $white;
margin-left: 1rem;
}
}
// ChallengeDetailsViewContainer
.ongoing-challenge {
min-height: 620px;
}
.cp-root {
width: 100%;
.cp-content {
display: flex;
align-items: center;
flex-direction: column;
color: $grey-bright;
min-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%;
min-height: 55vh;
padding-top: 1rem;
padding-bottom: 0.5rem;
&.--available {
@extend .cp-info;
height: 74vh;
}
.cp-icon {
margin: 1rem;
}
.cp-icon-available {
margin: 2rem;
}
.cp-win-badge-star {
display: grid;
align-items: center;
justify-items: center;
margin: -100px;
.cp-win-badge {
grid-column: 1;
grid-row: 1;
z-index: 1;
}
.cp-win-star {
grid-column: 1;
grid-row: 1;
}
}
.cp-date {
color: $soft-grey;
text-align: center;
margin-top: 1rem;
}
.cp-title {
color: $grey-bright;
text-align: center;
margin-top: 0.5rem;
}
.cp-result {
color: $grey-bright;
text-align: center;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
.cp-result-positif {
color: $green;
}
.cp-result-negatif {
color: $red-primary;
}
}
.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;
&.--ongoing {
@extend .cp-valid;
width: 25%;
@media #{$large-phone} {
width: 60%;
}
}
.cp-left-button {
margin-right: 0.25rem;
margin-left: 0;
width: 100%;
}
.cp-right-button {
margin-left: 0.25rem;
margin-right: 0;
width: 100%;
}
}
.lack-of-data-challenge {
margin: auto;
padding: 1rem;
width: 90%;
background-color: $red-primary;
display: flex;
justify-content: center;
}
.lack-of-data-content {
align-items: center;
flex-direction: column;
max-width: 80%;
}
.lack-of-data-content > div,span {
margin: 0.3rem 0;
}
.warning-white {
position: relative;
& svg {
position: absolute;
top: 0;
left: -45px;
}
}
.fluid-enum {
font-weight: bold;
}
}
.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;
}
}
}
}
}
// animations
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
src/styles/index.scss
+ 0
− 2
View file @ c4bdab1b
......@@ -17,8 +17,6 @@
@import 'components/barchart';
@import 'components/nav';
@import 'components/indicators';
@import 'components/challenges';
@import 'components/ecogesture';
@import 'components/modal';
@import 'components/faq';
@import 'components/legalnotice';
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment