Cleaning up

cloudscape-design · Aug 29, 2023 · 8ba0362 · 8ba0362
1 parent 3618a04
commit 8ba0362
Showing 1 changed file with 23 additions and 32 deletions.
diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -17,18 +17,17 @@
   width: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
-  column-gap: awsui.$space-xs;
+
+  &:not(.root-no-actions) {
+    row-gap: awsui.$space-xxs;
+  }
 
   &-no-actions,
   &-has-description {
     &.root-variant-h2:not(.refresh),
     &.root-variant-h3:not(.refresh) {
       padding-bottom: awsui.$space-scaled-xxs;
     }
-
-    // > .main-variant-h1 {
-    //   padding: awsui.$space-scaled-2x-xxs 0;
-    // }
   }
 
   // H3s are most often used inside containers, so minimal headings have extra padding below
@@ -42,15 +41,15 @@
     &.refresh.root-variant-h3 {
       row-gap: awsui.$space-scaled-xxxs;
     }
-    &:not(.refresh) > .main > .title-variant-h2,
-    &:not(.refresh) > .main > .title-variant-h3 {
-      padding-bottom: awsui.$space-scaled-xxs;
-    }
   }
 
   &-no-wrap {
     flex-wrap: nowrap;
   }
+
+  &.root-variant-h1.root-has-description:not(.refresh) {
+    padding-bottom: awsui.$space-scaled-2x-xxs;
+  }
 }
 
 .main {
@@ -63,34 +62,17 @@
   flex-wrap: wrap;
 
   &.refresh {
-    // display: flex;
-    // flex-direction: column;
     // Can't use justify-content: center because it won't align with configurable dashboard fixed handle icon
-
     row-gap: awsui.$space-scaled-xxs;
   }
 
   &-variant-h1 {
-    // padding: awsui.$space-scaled-2x-xxs 0;
-    &.refresh {
-      // padding: 0;
-      // row-gap: awsui.$space-scaled-xxs;
-    }
+    row-gap: awsui.$space-scaled-2x-xxs;
   }
+}
 
-  // So that headers with only a title have the same height as headers with actions and descriptions
-  &-variant-h2,
-  &-variant-h3 {
-    // &:not(.refresh) > .title {
-    //   padding-top: awsui.$space-scaled-xxs;
-    //   :not(.root-has-description) > & {
-    //     padding-bottom: awsui.$space-xxxs;
-    //   }
-    // }
-    &.refresh > .title {
-      // row-gap: awsui.$space-scaled-xxxs;
-    }
-  }
+.root-has-description > .main {
+  row-gap: awsui.$space-scaled-2x-xxs;
 }
 
 .actions {
@@ -113,11 +95,14 @@
 
   &-variant-h1:not(.refresh) {
     padding: awsui.$space-scaled-xs 0;
+    .root-has-description > .main > & {
+      padding-bottom: 0;
+    }
   }
   &-variant-h2:not(.refresh),
   &-variant-h3:not(.refresh) {
     padding: awsui.$space-scaled-xxs 0;
-    .root-has-description > & {
+    .root-has-description > .main > & {
       padding-bottom: 0;
     }
   }
@@ -156,6 +141,13 @@
   }
 }
 
+.root-no-actions.root-has-description > .main > :not(.refresh) {
+  &.title-variant-h2,
+  &.title-variant-h3 {
+    padding-bottom: awsui.$space-scaled-xxs;
+  }
+}
+
 .info {
   // Space 's' used as it's the smallest value that works in all browsers
   padding-right: awsui.$space-s;
@@ -171,7 +163,6 @@
     @include styles.font-body-m;
     &:not(.refresh) {
       padding-top: awsui.$space-scaled-xxs;
-      padding-bottom: awsui.$space-scaled-2x-xxs;
     }
     &.refresh {
       padding-top: awsui.$space-scaled-xxs;