diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 6ee83ef41edca..a611eb5f68e51 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -14,7 +14,7 @@ height: 28px; border-radius: 3px; white-space: nowrap; - border-width: 1px; + border-width: $border-width; border-style: solid; } @@ -196,6 +196,11 @@ &.is-tertiary { color: theme(outlines); + // Matches default button in hit area. See line 11. + padding: 0 10px; + line-height: 26px; + height: 28px; + .dashicon { display: inline-block; flex: 0 0 auto; diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index a1f659231b077..987dcbfd5e14c 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -94,14 +94,31 @@ background: $dark-gray-500; } + // Make editor header bar buttons bigger to match IconButtons. + &.editor-post-save-draft, + &.editor-post-switch-to-draft, &.editor-post-preview, &.editor-post-publish-button, &.editor-post-publish-panel__toggle { margin: 2px; height: 33px; line-height: 32px; - padding: 0 5px 2px; font-size: $default-font-size; + } + + &.editor-post-save-draft, + &.editor-post-switch-to-draft { + padding: 0 5px; + + @include break-small() { + padding: 0 12px; + } + } + + &.editor-post-preview, + &.editor-post-publish-button, + &.editor-post-publish-panel__toggle { + padding: 0 5px 2px; @include break-small() { padding: 0 12px 2px; diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss index 6ac4bc3fca945..0b74a6820fff5 100644 --- a/packages/editor/src/components/post-saved-state/style.scss +++ b/packages/editor/src/components/post-saved-state/style.scss @@ -16,32 +16,28 @@ .editor-post-saved-state { width: $icon-button-size - 8px; - - @include break-small() { - width: auto; - } -} - -.editor-post-saved-state, -.editor-post-save-draft { white-space: nowrap; - padding: 8px 4px; + padding: #{ $grid-size-small * 3 } $grid-size-small; .dashicon { - margin-right: 8px; + margin-right: $grid-size; } @include break-small() { - padding: 8px; + width: auto; + padding: $grid-size #{ $grid-size-small * 3 }; text-indent: inherit; .dashicon { - margin-right: 4px; + margin-right: $grid-size-small; } } } -.editor-post-save-draft { +// This needs specificity to override inherited styles. +.edit-post-header .edit-post-header__settings .components-button.editor-post-save-draft { + margin: 0; + @include break-small() { .dashicon { display: none;