diff --git a/src/header/styles.scss b/src/header/styles.scss index e5bd1a9bdb..e0494d8b9b 100644 --- a/src/header/styles.scss +++ b/src/header/styles.scss @@ -17,7 +17,10 @@ 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 { @@ -25,10 +28,6 @@ &.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;