@kaizen/components 2.2.4 → 2.3.0

package/src/TitleBlock/TitleBlock.module.scss

@@ -84,6 +84,10 @@
 
   .lightVariant .titleRowInner {
     border-bottom: 1px solid $color-gray-300;
+
+    @include title-block-xsmall {
+      padding-bottom: 12px;
+    }
   }
 
   .rowBelowSeparatorInner {
@@ -112,6 +116,10 @@
     @include title-block-medium-and-small {
       border-bottom: none;
     }
+
+    @include title-block-xsmall {
+      flex-wrap: wrap;
+    }
   }
 
   .title {
@@ -202,10 +210,10 @@
     }
 
     @include title-block-medium-and-small {
-      font-size: $typography-heading-4-font-size;
-      line-height: $typography-heading-4-line-height;
-      letter-spacing: $typography-heading-4-letter-spacing;
-      padding: 0;
+      font-size: $typography-heading-3-font-size;
+      line-height: $typography-heading-3-line-height;
+      letter-spacing: $typography-heading-3-letter-spacing;
+      padding: 8px 0;
     }
   }
 
@@ -243,7 +251,6 @@
 
     @include title-block-medium-and-small {
       display: flex;
-      align-items: center;
     }
   }
 
@@ -518,9 +525,20 @@
       color: $color-blue-500;
     }
 
-    @include title-block-medium-and-small {
+    .secondaryOverflowCombinedMenu {
       display: none;
     }
+
+    @include title-block-medium-and-small {
+      .secondaryButtonContainer,
+      .secondaryOverflowMenu {
+        display: none;
+      }
+
+      .secondaryOverflowCombinedMenu {
+        display: flex;
+      }
+    }
   }
 
   .breadcrumb {
@@ -570,10 +588,6 @@
         @include ca-position($start: 0);
       }
     }
-
-    @include title-block-medium-and-small {
-      display: none;
-    }
   }
 
   @mixin visually-hidden {
@@ -696,6 +710,10 @@
       color: $color-blue-500;
       background-color: rgba($color-blue-500-rgb, 0.1);
     }
+
+    @include title-block-medium-and-small {
+      display: none;
+    }
   }
   /* stylelint-enable no-descending-specificity */
 }