feat(mon-pix): add border-left to feedbacks

Co-authored-by: Rébecca Kaci <82950611+reibecca@users.noreply.github.com>
1024pix · Jul 8, 2024 · bf125c3 · bf125c3
1 parent eeba227
commit bf125c3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/mon-pix/app/styles/components/modulix/_feedback.scss b/mon-pix/app/styles/components/modulix/_feedback.scss
@@ -1,4 +1,7 @@
 .feedback {
+  position: relative;
+  padding-left: var(--pix-spacing-3x);
+
   &--success {
     --modulix-feedback-state-color: var(--pix-success-700);
   }
@@ -7,6 +10,16 @@
     --modulix-feedback-state-color: var(--pix-error-700);
   }
 
+  &::before {
+    position: absolute;
+    left: 0;
+    width: 6px;
+    height: 100%;
+    background-color: var(--modulix-feedback-state-color);
+    border-radius: var(--modulix-radius-full);
+    content: '';
+  }
+
   &__state {
     color: var(--modulix-feedback-state-color);
     font-weight: var(--pix-font-bold);

diff --git a/mon-pix/app/styles/pages/_module.scss b/mon-pix/app/styles/pages/_module.scss
@@ -3,6 +3,7 @@
 
   --modulix-max-content-width: 740px;
   --modulix-radius: 16px;
+  --modulix-radius-full: 100% / 10%;
 
   flex-grow: 1;
   color: var(--pix-neutral-900);