Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue with tertiary button hit areas #10888

Merged
merged 3 commits into from Oct 25, 2018
Merged

Fix issue with tertiary button hit areas #10888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f7e464
Fix issue with tertiary button hit areas
jasmussen Oct 22, 2018
197467f
Address feedback.
Oct 24, 2018
38fc071
Clarify comment.
Oct 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/components/src/button/style.scss
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@
height: 28px;
border-radius: 3px;
white-space: nowrap;
border-width: 1px;
border-width: $border-width;
border-style: solid;
}

Expand Down Expand Up @@ -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;
Expand Down
19 changes: 18 additions & 1 deletion packages/edit-post/src/components/header/style.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down
22 changes: 9 additions & 13 deletions packages/editor/src/components/post-saved-state/style.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down