From 368455afca7ffcdbb70bad7342981be559a3c0a9 Mon Sep 17 00:00:00 2001
From: Gauthier <ext.sopra.glefevre@grandlyon.com>
Date: Thu, 4 Jun 2020 17:02:52 +0200
Subject: [PATCH] fixe-notif-css
---
.../ContentComponents/Navbar/Navbar.tsx | 2 +-
src/styles/components/_nav.scss | 26 ++++++++++---------
2 files changed, 15 insertions(+), 13 deletions(-)
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index 2fdc439c5..15d2a8ce6 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -40,7 +40,7 @@ export const Navbar = ({ t }: NavbarProps) => {
activeClassName="is-active"
>
{challengeNotification && (
- <div className="nb-challenge-notif text-16-bold">1</div>
+ <div className="nb-challenge-notif">1</div>
)}
<Icon className="c-nav-icon off" icon={ChallengeIconOff} />
<Icon className="c-nav-icon on" icon={ChallengeIconOn} />
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index 20f3651b0..424ac10de 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -78,20 +78,22 @@
}
.nb-challenge-notif {
- @media #{$large-phone} {
- left: 25px;
- padding: 4px;
- width: 0.75rem;
- height: 0.75rem;
- top: 0px;
- }
position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ left: 42px;
+ bottom: 22px;
+ width: 1.25rem;
+ height: 1.25rem;
+ color: $dark-light;
border-radius: 50%;
+ border: 1px solid $dark-light;
z-index: 1;
- height: 1.2rem;
- width: 1.2rem;
background: $blue-radial-gradient;
- left: 40px;
- top: 7px;
- text-align: center;
+ font-size: 12px;
+ @media #{$tablet} {
+ left: 25px;
+ bottom: unset;
+ }
}
--
GitLab