*fix Card without title style (#583)

hazelcast · Dec 2, 2024 · 210f1ac · 210f1ac
1 parent d05020c
commit 210f1ac
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 35 deletions.
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Card_Without_Title.png b/packages/ui/.loki/reference/chrome_minimal_Components_Card_Without_Title.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Animation_Fade.png b/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Animation_Fade.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Default.png b/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Doubles.png b/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Doubles.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Infinite_Slides.png b/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Infinite_Slides.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Start_From_Last.png b/packages/ui/.loki/reference/chrome_minimal_Components_Carousel_Start_From_Last.png
diff --git a/...ages/ui/.loki/reference/chrome_minimal_Components_Carousel_Without_Controls.png b/...ages/ui/.loki/reference/chrome_minimal_Components_Carousel_Without_Controls.png
diff --git a/packages/ui/src/Card.module.scss b/packages/ui/src/Card.module.scss
@@ -1,8 +1,8 @@
 @use '../styles/constants' as c;
 
-.wrapper {
-  $padding: c.$grid * 5;
+$padding: c.$grid * 5;
 
+.wrapper {
   background: c.$colorNeutralWhite;
 
   .heading {
@@ -35,12 +35,6 @@
     @include c.typographyBodyNormal;
   }
 
-  &.noTitle {
-    .content {
-      margin-top: 0;
-    }
-  }
-
   .caption {
     display: flex;
     margin-bottom: $padding;
@@ -49,43 +43,50 @@
       flex: 1;
     }
   }
+}
 
-  &.bordered {
-    padding: $padding;
-    border-radius: c.$borderRadius;
-    border: c.$borderWidth solid c.$colorNeutral;
+.bordered {
+  padding: $padding;
+  border-radius: c.$borderRadius;
+  border: c.$borderWidth solid c.$colorNeutral;
 
-    .heading {
-      @include c.typographyH3;
+  .heading {
+    @include c.typographyH3;
 
-      display: flex;
-      align-items: center;
-      margin: 0;
+    display: flex;
+    align-items: center;
+    margin: 0;
 
-      .icon {
-        margin-right: c.$grid * 2.5;
-      }
+    .icon {
+      margin-right: c.$grid * 2.5;
+    }
 
-      .title {
-        margin: 0;
-        font-size: c.$fontSizeBodyNormal !important;
-        line-height: c.$lineHeightBodyNormal !important;
+    .title {
+      margin: 0;
+      font-size: c.$fontSizeBodyNormal !important;
+      line-height: c.$lineHeightBodyNormal !important;
 
-        &.space {
-          margin-right: c.$grid * 2.5;
-        }
+      &.space {
+        margin-right: c.$grid * 2.5;
       }
     }
+  }
 
-    .content {
-      @include c.typographyBodyNormal;
+  .content {
+    @include c.typographyBodyNormal;
 
-      margin-top: c.$grid * 4;
-      padding: 0;
-    }
+    margin-top: c.$grid * 4;
+    padding: 0;
+  }
 
-    .caption {
-      margin: (-$padding) (-$padding) $padding;
-    }
+  .caption {
+    margin: (-$padding) (-$padding) $padding;
+  }
+}
+
+.noTitle {
+  .content {
+    margin-top: 0;
+    padding-top: 0;
   }
 }