0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00

Updated button styles (#21080)

DES-774

- The buttons in the Admin got very diverse over the last couple of
years. This PR updates the styles to use outline buttons, white
background for better contrast and slightly more rounded corners.
Additionally the right click and dropdown menu typography and spacing
has also been updated.
This commit is contained in:
Peter Zimon 2024-09-24 09:20:20 +02:00 committed by GitHub
parent ae8f8f128b
commit 8d54e4bf7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 124 additions and 118 deletions

View file

@ -44,15 +44,15 @@
@class="gh-btn gh-btn-icon refresh"
@successClass="gh-btn gh-btn-icon refresh" />
{{#unless this.post.emailOnly}}
<button type="button" class="gh-post-list-cta share" {{on "click" this.togglePublishFlowModal}}>
{{svg-jar "share" title="Share post"}}<span>Share</span>
<button type="button" class="gh-btn gh-btn-icon share" {{on "click" this.togglePublishFlowModal}}>
<span>{{svg-jar "share" title="Share post"}} Share</span>
</button>
{{/unless}}
<span class="dropdown">
<GhDropdownButton
@dropdownName="analytics-actions-menu"
@classNames="gh-post-list-cta gh-btn-icon icon-only gh-btn-action-icon"
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
@title="Analytics Actions"
data-test-button="analytics-actions"
>

View file

@ -259,7 +259,7 @@ input:focus,
}
.gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-primary):not(.gh-btn-black):not(.gh-btn-text):not(.gh-btn-accent):not(.gh-btn-link):not(.gh-editor-preview-trigger) {
background: var(--lightgrey);
border: 1px solid var(--lightgrey);
color: var(--black);
}
@ -663,6 +663,17 @@ input:focus,
background: var(--dark-main-bg-color);
}
.gh-posts-list-item-group,
.gh-list-scrolling tbody .gh-list-data,
.gh-list-scrolling thead th {
border-color: var(--lightgrey);
}
.gh-list-scrolling thead th:first-child::before,
.gh-list-scrolling tbody .gh-list-data:first-child::before {
background: var(--lightgrey);
}
.gh-posts-list-item:hover,
.ember-power-select-group .ember-power-select-option[aria-current=true],
.settings-tag .tag-edit-button.active,
@ -841,7 +852,6 @@ input:focus,
}
.gh-post-list-cta {
background: #26282b;
color: #ffffff;
border-color: #33373d;
}
@ -871,6 +881,10 @@ input:focus,
}
/* Members */
.members-header .view-actions input.gh-members-list-searchfield {
border-color: var(--lightgrey)
}
.gh-members-help-card,
.gh-offers-help-card {
background: var(--dark-main-bg-color);
@ -1081,6 +1095,13 @@ kbd {
/* Dashboard */
.gh-dashboard-box.is-secondary, .gh-dashboard-resource-box,
.gh-main-section-content.grey,
.gh-expandable,
.gh-expandable-content {
background: #1C1E22;
}
.gh-dashboard .gh-dashboard-anchor .gh-dashboard-stats {
background: transparent;
border-top-color: #2b2d31;
@ -1465,4 +1486,10 @@ Publish flow: Share modal */
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads) svg path {
fill: var(--darkgrey);
}
/* --------------------------------- */
.gh-contentfilter-menu-trigger.bordered {
border-color: var(--lightgrey);
}

View file

@ -20,7 +20,7 @@
left: 0;
float: left;
margin: 2px 0 0;
padding: 6px 0;
padding: 4px 0;
min-width: 200px;
background-color: #fff;
background-clip: padding-box;
@ -61,15 +61,17 @@
display: flex;
align-items: center;
clear: both;
padding: 6px 14px;
width: 100%;
padding: 7px 10px;
margin: 0 4px;
width: calc(100% - 8px);
color: var(--darkgrey);
text-align: left;
white-space: nowrap;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.4em;
font-weight: normal;
transition: none;
border-radius: 3px
}
.dropdown-menu li > button:disabled {
@ -370,14 +372,9 @@ Post context menu
transform: translate(-100%, -100%);
}
.gh-posts-context-menu li > button {
padding: 8px 16px;
}
.gh-posts-context-menu li > button span {
display: flex;
align-items: center;
font-size: 1.35rem;
}
.gh-posts-context-menu li > button span svg,
@ -401,5 +398,5 @@ Post context menu
margin: 5px 0;
width: 100%;
height: 1px;
background-color: var(--whitegrey-d1);
background-color: var(--whitegrey);
}

View file

@ -169,7 +169,7 @@
padding: 32px;
background-color: #fff;
background-clip: padding-box;
border-radius: 3px;
border-radius: 8px;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),

View file

@ -21,10 +21,9 @@
}
.ember-power-select-trigger:not(.ember-power-select-multiple-trigger):not(.gh-preview-newsletter-trigger) svg {
height: 4px;
width: 6.11px;
height: 6px;
margin-left: 2px;
margin-top: -2px;
margin-right: -4px;
vertical-align: middle;
}

View file

@ -1026,7 +1026,7 @@
.modal-post-success .modal-footer .gh-btn {
min-width: 64px;
height: 40px;
border-radius: 4px;
border-radius: var(--border-radius);
display: flex;
justify-content: center;
align-items: center;
@ -1058,6 +1058,7 @@
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) {
width: 56px;
background: var(--whitegrey-l1);
border-color: transparent;
}
.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover {

View file

@ -44,35 +44,47 @@
color: var(--darkgrey);
}
.gh-contentfilter-menu-trigger,
.gh-contentfilter-menu-trigger:focus,
.gh-contentfilter-menu-trigger--active {
.gh-contentfilter-menu-trigger {
display: flex;
align-items: center;
gap: 4px;
background: var(--white);
font-size: 1.35rem;
font-weight: 400;
color: var(--darkgrey);
letter-spacing: 0.2px;
font-size: 1.3rem;
font-weight: 500;
height: 34px;
padding: 6px 12px 6px;
margin-right: 6px;
outline: none;
border: none;
border-radius: 2px !important;
border: 1px solid transparent;
border-radius: 5px !important;
white-space: nowrap;
transition: all 0.25s ease;
overflow: hidden;
}
.gh-contentfilter-menu-trigger.ember-power-select-trigger[aria-expanded="true"] {
border: 1px solid transparent !important;
}
.gh-contentfilter-menu-trigger:focus,
.gh-contentfilter-menu-trigger--active {
border: 1px solid transparent;
background: var(--whitegrey-l1);
}
.gh-contentfilter-menu-trigger.bordered {
border: 1px solid var(--whitegrey);
}
.gh-contentfilter-menu-trigger:hover {
cursor: pointer;
color: var(--darkgrey);
background: var(--whitegrey);
background: var(--whitegrey-l1);
}
.gh-contentfilter-selected .gh-contentfilter-menu-trigger,
.gh-contentfilter-selected .gh-contentfilter-menu-trigger:hover {
font-weight: 600;
background: var(--whitegrey-l1);
border: 1px solid var(--whitegrey);
}
.gh-contentfilter-selected:not(.no-highlight) .gh-contentfilter-menu-trigger,
@ -90,6 +102,10 @@
stroke: var(--black);
}
.gh-btn-save-view {
border: 1px solid var(--whitegrey) !important;
}
.gh-btn-save-view svg {
margin-top: 3px !important;
}
@ -102,7 +118,7 @@
.gh-contentfilter-menu-dropdown {
width: 180px;
margin-top: 6px;
padding: 6px 0;
padding: 4px 0;
border: none !important;
font-size: 1.35rem;
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 7px 20px -5px rgba(0,0,0,.15);
@ -120,6 +136,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 7px 10px;
margin: 0 4px;
border-radius: 3px;
font-size: 1.3rem;
}
.gh-contentfilter-sort .gh-contentfilter-menu-trigger {
@ -142,7 +162,7 @@
height: 33px;
margin: 0 0 0 6px;
line-height: 33px;
background: color-mod(var(--whitegrey-l1) l(-3%));
border: 1px solid var(--whitegrey);
}
@ -306,14 +326,11 @@
font-size: 1.3rem;
}
.gh-post-list-button {
width: 78px;
}
.gh-list-data.gh-post-list-metrics,
.gh-list-data.gh-post-list-button {
vertical-align: top;
padding-left: 0;
padding-right: 16px;
}
.gh-list .gh-content-entry-title {
@ -1460,10 +1477,6 @@
padding: 0 0 0 1px;
}
.gh-post-list-button {
width: 78px;
}
.gh-post-list-cta {
display: flex;
align-items: center;
@ -1476,19 +1489,18 @@
border-radius: var(--border-radius);
transition: all .2s ease;
white-space: nowrap;
height: 38px;
height: 36px;
overflow: hidden;
transition: all .1s linear;
}
.gh-post-list-cta:hover {
border-color: var(--lightgrey-l2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.gh-list-data .gh-post-list-cta {
justify-content: center;
width: 56px;
width: 52px;
}
.gh-post-analytics-header .gh-post-list-cta.edit {
@ -1498,17 +1510,14 @@
.gh-post-analytics-header .share svg {
margin-top: -2px;
}
.gh-post-analytics-header .gh-btn.refresh {
border: 1px solid var(--whitegrey-d1);
background: var(--white);
width: 1.5rem;
height: 1.5rem;
color: var(--darkgrey);
stroke: var(--darkgrey);
}
.gh-post-analytics-header .gh-btn.refresh:hover {
border-color: var(--lightgrey-l2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
.gh-post-analytics-header .gh-btn-action-icon {
margin-right: 0;
}
.gh-post-analytics-header .gh-btn.refresh svg path {
@ -1519,23 +1528,13 @@
border-color: var(--whitegrey-d2);
}
.gh-post-list-cta.stats.is-hovered {
color: var(--green);
}
.gh-post-list-cta.stats.is-hovered:hover {
border-color: var(--lightgrey-l2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.gh-post-list-cta.edit.is-hovered {
color: var(--pink);
}
.gh-post-list-cta.edit.is-hovered:hover,
.gh-post-list-cta.edit:not(.is-hovered):hover {
border-color: var(--lightgrey-l2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.gh-post-list-cta > svg {
@ -1562,17 +1561,6 @@ span.dropdown .gh-post-list-cta > span {
padding: 0;
}
.gh-post-list-cta.edit.is-hovered > *,
.gh-post-list-cta.edit.is-hovered:hover > *,
.gh-post-list-cta.edit:not(.is-hovered):hover > * {
color: var(--pink-d1);
}
.gh-post-list-cta.stats.is-hovered > *,
.gh-post-list-cta.stats.is-hovered:hover > * {
color: var(--green-d1);
}
@media screen and (max-width: 1200px) {
.gh-post-analytics-box.resources {
flex-direction: column;

View file

@ -344,12 +344,6 @@ Dashboard Layout */
}
.gh-dashboard-select .ember-power-select-selected-item {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -.1px;
line-height: 1em;
padding: 0 0 10px;
color: var(--middarkgrey);
white-space: nowrap;
}
@ -2925,7 +2919,7 @@ Onboarding checklist */
.gh-onboarding-item-content {
padding-right: 16px;
}
.gh-onboarding-item--next {
padding: 24px 20px;
}
@ -3155,7 +3149,7 @@ Share publication modal */
flex-direction: row;
}
.gh-share-links li {
.gh-share-links li {
font-size: 1.5rem;
font-weight: 600;
color: var(--darkgrey);
@ -3169,7 +3163,7 @@ Share publication modal */
margin: 0;
}
.gh-share-links li a {
.gh-share-links li a {
display: block;
padding: 20px 0;
text-align: center;
@ -3226,7 +3220,7 @@ span.gh-tip {
display: block;
}
span.gh-tip a {
span.gh-tip a {
text-decoration: underline;
color: var(--midgrey);
}

View file

@ -331,6 +331,7 @@
.gh-btn-editor {
background: var(--white) !important;
border-color: transparent !important;
}
.gh-btn-editor:not(.gh-publish-trigger) span {
@ -338,11 +339,11 @@
}
.gh-btn-editor:hover {
background: var(--whitegrey) !important;
background: var(--whitegrey-l1) !important;
}
.gh-btn-editor.active {
background: var(--whitegrey) !important;
background: var(--whitegrey-l1) !important;
}
.gh-btn-editor.green span {
@ -437,7 +438,7 @@
bottom: 22px;
display: flex;
align-items: center;
border-radius: 3px;
border-radius: var(--border-radius);
background: #fff;
cursor: pointer;
}
@ -448,7 +449,7 @@
.gh-editor-feedback-dropdown {
min-width: 400px;
border-radius: 3px;
border-radius: var(--border-radius);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 20px -3px rgba(0, 0, 0, .2);
padding: 20px;
background-color: #fff;
@ -878,7 +879,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
line-height: 34px;
white-space: nowrap;
background: var(--white);
border-radius: 3px;
border-radius: var(--border-radius);
transition: all 0.25s ease;
transition-property: color, border-color, background, width, height, box-shadow;
}
@ -921,7 +922,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
letter-spacing: .2px;
line-height: 34px;
background: var(--white);
border-radius: 3px;
border-radius: var(--border-radius);
}
@media (max-width: 500px) {

View file

@ -1616,9 +1616,7 @@
}
.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-link) {
border: none;
box-shadow: none;
background: color-mod(var(--whitegrey-l1) l(-3%));
}
.view-actions .gh-btn:not(.gh-btn-primary):not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-link):hover {

View file

@ -101,9 +101,10 @@
.members-header .view-actions input.gh-members-list-searchfield {
min-width: 220px;
padding-left: 32px;
border: none;
background: var(--white);
height: 34px;
background: var(--whitegrey-l1);
border: var(--input-border);
border-color: transparent;
}
.members-header.grey .view-actions .gh-btn,
@ -121,7 +122,7 @@
height: 16px;
top: 9px;
left: 9px;
fill: var(--middarkgrey);
fill: var(--midlightgrey);
}
.members-header.black .view-actions input.gh-members-list-searchfield {

View file

@ -3,35 +3,36 @@
/* Base button style */
/* Should only be applied to <a> tags */
.gh-btn,
.gh-btn-grey {
.gh-btn {
display: inline-block;
outline: none;
background: var(--whitegrey);
border: 1px solid var(--whitegrey-d1);
color: var(--darkgrey);
text-decoration: none !important;
user-select: none;
fill: var(--white);
font-weight: 500;
border-radius: 3px;
border-radius: var(--border-radius);
transition: all 0.2s ease;
transition-property: color, border-color, background, width, height, box-shadow;
-webkit-font-smoothing: subpixel-antialiased;
}
.gh-btn.no-border {
border: none;
}
/* ALL buttons must have a span for content */
.gh-btn span,
.gh-btn-grey span {
.gh-btn span {
display: block;
overflow: hidden;
padding: 0 14px;
height: 34px;
font-size: 1.35rem;
font-size: 1.3rem;
line-height: 34px;
text-align: center;
letter-spacing: 0.2px;
border-radius: 3px;
border-radius: var(--border-radius);
white-space: nowrap;
text-overflow: ellipsis;
}
@ -45,10 +46,8 @@
letter-spacing: .4px;
}
.gh-btn:hover,
.gh-btn-grey:hover {
color: var(--darkgrey);
background: var(--whitegrey-d1);
.gh-btn:hover {
background: var(--whitegrey-l1);
}
.gh-btn svg {
@ -76,7 +75,7 @@ fieldset[disabled] .gh-btn {
.gh-btn-black {
color: var(--white);
background: var(--black);
font-weight: 500;
border: none;
}
.gh-btn-primary:hover,
@ -93,18 +92,20 @@ fieldset[disabled] .gh-btn {
color: #fff;
fill: #fff;
background: var(--blue);
font-weight: 500;
border: none;
}
.gh-btn-blue:hover {
color: #fff !important;
background: color-mod(var(--blue) l(-4%)) !important;
border: none;
}
/* When clicked or focused with keyboard */
.gh-btn-blue:active,
.gh-btn-blue:focus {
background: color-mod(var(--blue) l(-7%)) !important;
border: none;
}
/* Green button
@ -115,7 +116,6 @@ fieldset[disabled] .gh-btn {
color: #fff;
fill: #fff;
background: var(--green);
font-weight: 500;
}
.gh-btn-green:hover {
@ -139,7 +139,7 @@ fieldset[disabled] .gh-btn {
fill: #fff;
box-shadow: none;
background: var(--red);
font-weight: 500;
border: none;
}
.gh-btn-red:hover {
@ -263,7 +263,7 @@ fieldset[disabled] .gh-btn {
.gh-btn:not(.gh-btn-blue):not(.gh-btn-green):not(.gh-btn-red) svg.gh-icon-spinner rect {
fill: color-mod(var(--midgrey) l(-7%));
}
}
.gh-btn-icon-right svg,
svg.gh-btn-icon-right {
@ -418,7 +418,7 @@ Usage: CTA buttons grouped together horizontally.
display: flex;
align-items: center;
background: var(--whitegrey-l1);
border-radius: 3px;
border-radius: var(--border-radius);
line-height: 0;
}
@ -437,7 +437,7 @@ Usage: CTA buttons grouped together horizontally.
border-radius: 0;
height: 30px;
line-height: 30px;
border-radius: 3px;
border-radius: calc(var(--border-radius) - 1px);
background: transparent !important;
font-weight: 500 !important;
}

View file

@ -169,7 +169,7 @@
--main-layout-section-vpadding: 3vw;
/* Style values */
--border-radius: 3px;
--border-radius: 5px;
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif;
--font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
@ -199,7 +199,7 @@
/* Inputs */
--input-bg-color: var(--white);
--input-border-color: var(--whitegrey-d2);
--input-border-color: var(--whitegrey-d1);
--input-border: var(--input-border-color) 1px solid;
}

View file

@ -68,7 +68,7 @@
@searchEnabled={{false}}
@onChange={{this.onDaysChange}}
@triggerComponent={{component "gh-power-select/trigger"}}
@triggerClass="gh-contentfilter-menu-trigger"
@triggerClass="gh-contentfilter-menu-trigger bordered"
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
@matchTriggerWidth={{false}}
@horizontalPosition="right"