fix(component/option-card): update the z-index values of the componen…

…t elements (#1319)
adeo · Jan 4, 2023 · 23a8d01 · 23a8d01
1 parent 44b5aa2
commit 23a8d01
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/styles/components/_c.option-card.scss b/packages/styles/components/_c.option-card.scss
@@ -16,7 +16,7 @@
       position: absolute;
       right: $mu100;
       top: $mu100;
-      z-index: 10;
+      z-index: 4;
 
       &:focus {
         box-shadow: none;
@@ -46,7 +46,7 @@
         textarea,
         #{$parent}__focusable,
         [tabindex]:not([tabindex="-1"]) {
-          z-index: 2;
+          z-index: 3;
         }
       }
 
@@ -81,7 +81,7 @@
     top: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
-    z-index: 5;
+    z-index: 2;
 
     &-text {
       @include visually-hidden();

diff --git a/src/docs/Components/OptionGroup/OptionCard/code.mdx b/src/docs/Components/OptionGroup/OptionCard/code.mdx
@@ -106,3 +106,7 @@ To achieve that you have to add `mc-option-card--small` modifier to the `mc-opti
 In some cases, your content need to fill the whole card. To add an image for example.
 
 To achieve that you have to add `mc-option-card--no-padding` modifier to the `mc-option-card` element.
+
+## Implementation examples
+
+<Preview path="product" />
diff --git a/src/docs/Components/OptionGroup/OptionCard/previews/product.preview.scss b/src/docs/Components/OptionGroup/OptionCard/previews/product.preview.scss
@@ -50,7 +50,3 @@
 .hide-button {
   display: none;
 }
-
-#exampleButton {
-  z-index: 10;
-}