Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated button styles|

Browse source
This commit is contained in:
Peter Zimon 2021-02-04 17:25:42 +01:00
parent 879c7866e9
commit 3f0ec92119
5 changed files with 33 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ghost/admin/app/components/gh-posts-list-item.hbs
View file

@ -3,7 +3,7 @@
{{on "mouseleave" this.mouseLeave}}
...attributes
>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-title" @title="Edit this {{@post.displayName}}">
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-title">
<h3 class="gh-content-entry-title">
{{@post.title}}
</h3>
@ -22,7 +22,7 @@
</LinkTo>
{{#if (and this.feature.emailAnalytics (eq @post.displayName "post"))}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-recipients" @title="Edit this {{@post.displayName}}">
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-recipients">
<div class="flex fw4">
{{#if (or @post.email @post.willEmail)}}
{{#if (eq @post.email.status "submitted")}}
@ -35,7 +35,7 @@
</div>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens" @title="Edit this {{@post.displayName}}">
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-opens">
{{#if (and @post.email.trackOpens (eq @post.email.status "submitted"))}}
<div class="flex">
<span class="darkgrey fw5 gh-content-email-stats">
@ -51,7 +51,7 @@
</LinkTo>
{{/if}}
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status" @title="Edit this {{@post.displayName}}">
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-draft gh-badge nowrap" title="Scheduled" data-tooltip="{{capitalize this.scheduledText}} to {{@post.emailRecipientFilter}} members">

12
ghost/admin/app/styles/components/lists.css
View file

@ -1,5 +1,5 @@
.gh-list {
margin: 0 0 0 -6px;
margin: 0;
padding: 0;
list-style: none;
background: var(--white);
@ -17,9 +17,13 @@
display: table-row;
}
.gh-list-row:not(.header):not(.loading):hover .gh-list-cell,
/* .gh-list-row:not(.header):not(.loading):hover .gh-list-cell,
.gh-list-row:not(.header):not(.loading):hover .gh-list-data {
background: var(--whitegrey-l2);
} */
.gh-list-row:not(.header):not(.loading):hover {
background: linear-gradient(315deg, var(--whitegrey-l2) 60%, var(--white) 100%);
}
.gh-list-row:not(.header):first-of-type {
@ -52,7 +56,7 @@
.gh-list:not(.tabbed) .gh-list-header:first-child {
border-top-left-radius: 5px;
padding-left: 8px;
padding-left: 0;
}
.gh-list:not(.tabbed) .gh-list-header:last-child {
@ -73,7 +77,7 @@
}
.gh-list-row .gh-list-data:first-child {
padding-left: 8px;
padding-left: 0;
}
.gh-list-data.show-on-hover > *,

4
ghost/admin/app/styles/layouts/main.css
View file

@ -1,8 +1,8 @@
:root {
/* Main menu variables */
--mainmenu-color-hover-bg: var(--whitegrey-l1);
--mainmenu-color-hover-bg: var(--whitegrey);
--mainmenu-color-active: var(--black);
--mainmenu-color-active-bg: var(--whitegrey-l1);
--mainmenu-color-active-bg: var(--whitegrey);
--mainmenu-width: 340px;
--mainmenu-padding: var(--main-area-padding);
}

82
ghost/admin/app/styles/patterns/buttons.css
View file

@ -8,11 +8,10 @@
outline: none;
background: var(--white);
box-shadow: 0 2px 5px -3px rgba(0,0,0,.12);
color: color-mod(var(--midgrey) l(-7%));
color: var(--darkgrey);
text-decoration: none !important;
user-select: none;
fill: color-mod(var(--midgrey) l(-7%));
border: 1px solid color-mod(var(--midgrey) l(+35%) s(+10%));
fill: var(--white);
border-radius: 3px;
transition: all 0.2s ease;
transition-property: color, border-color, background, width, height, box-shadow;
@ -31,7 +30,7 @@
font-weight: 500;
text-align: center;
letter-spacing: 0.2px;
border-radius: 4px;
border-radius: 3px;
white-space: nowrap;
text-overflow: ellipsis;
}
@ -114,7 +113,7 @@ fieldset[disabled] .gh-btn {
/* Primary button
/* ---------------------------------------------------------- */
.gh-btn-primary,
.gh-btn-primary:hover {
.gh-btn-black {
background: var(--black) !important;
border: none;
color: var(--white);
@ -122,7 +121,8 @@ fieldset[disabled] .gh-btn {
box-shadow: none;
}
.gh-btn-primary:hover {
.gh-btn-primary:hover,
.gh-btn-black:hover {
background: color-mod(var(--black) l(-20%));
}
@ -133,7 +133,6 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-blue,
.gh-btn-blue:hover {
border: 1px solid color-mod(var(--blue) s(-5%));
color: #fff;
fill: #fff;
box-shadow: none;
@ -146,22 +145,22 @@ fieldset[disabled] .gh-btn {
/* The background of the span is the main visual element */
.gh-btn-blue span {
background: linear-gradient(color-mod(var(--blue) l(+6%) s(-1%)), color-mod(var(--blue) l(-6%) saturation(-8%)));
background: var(--blue);
font-weight: 500;
}
.gh-btn-blue:hover span {
background: linear-gradient(color-mod(var(--blue) l(+9%) s(-1%)), color-mod(var(--blue) l(-3%) saturation(-3%)));
background: color-mod(var(--blue) l(+5%));
}
/* When clicked or focused with keyboard */
.gh-btn-blue:active,
.gh-btn-blue:focus {
background: color-mod(var(--blue) l(-20%) saturation(-15%));
background: var(--blue);
}
.gh-btn-blue:active span,
.gh-btn-blue:focus span {
background: color-mod(var(--blue) l(-7%) saturation(-10%));
background: var(--blue);
box-shadow: none;
}
@ -171,7 +170,6 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-green,
.gh-btn-green:hover {
border: 1px solid color-mod(var(--green) s(-5%));
color: #fff;
fill: #fff;
box-shadow: none;
@ -184,22 +182,22 @@ fieldset[disabled] .gh-btn {
/* The background of the span is the main visual element */
.gh-btn-green span {
background: linear-gradient(color-mod(var(--green) l(+6%) s(-2%)), color-mod(var(--green) l(-8%) s(+5%)));
background: var(--green);
font-weight: 500;
}
.gh-btn-green:hover span {
background: linear-gradient(color-mod(var(--green) l(+9%) s(-1%)), color-mod(var(--green) l(-3%) saturation(-3%)));
background: color-mod(var(--green) l(+5%));
}
/* When clicked or focused with keyboard */
.gh-btn-green:active,
.gh-btn-green:focus {
background: color-mod(var(--green) l(-9%) saturation(-9%));
background: var(--green);
}
.gh-btn-green:active span,
.gh-btn-green:focus span {
background: color-mod(var(--green) l(-3%) saturation(-7%));
background: var(--green);
box-shadow: none;
}
@ -210,7 +208,6 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-red,
.gh-btn-red:hover {
border: 1px solid color-mod(var(--red) s(-5%));
color: #fff;
fill: #fff;
box-shadow: none;
@ -223,65 +220,22 @@ fieldset[disabled] .gh-btn {
/* The background of the span is the main visual element */
.gh-btn-red span {
background: linear-gradient(
color-mod(var(--red) whiteness(+7%)),
color-mod(var(--red) l(-7%) saturation(-10%)) 60%,
color-mod(var(--red) l(-7%) saturation(-10%)) 90%,
color-mod(var(--red) l(-4%) saturation(-10%))
);
background: var(--red);
font-weight: 500;
}
.gh-btn-red:hover span {
background: linear-gradient(color-mod(var(--red) l(+7%) s(-1%)), color-mod(var(--red) l(-5%) saturation(-3%)));
background: color-mod(var(--red) l(+5%));
}
/* When clicked or focused with keyboard */
.gh-btn-red:active,
.gh-btn-red:focus {
background: color-mod(var(--red) l(-20%) saturation(-15%));
background: var(--red);
}
.gh-btn-red:active span,
.gh-btn-red:focus span {
background: color-mod(var(--red) l(-7%) saturation(-10%));
box-shadow: none;
}
/* Black button
/* ---------------------------------------------------------- */
/* The background of the button creates 1px gradient border */
.gh-btn-black,
.gh-btn-black:hover {
border: 0;
color: #fff;
fill: #fff;
box-shadow: none;
transition-property: box-shadow;
}
.gh-btn-black:hover {
box-shadow: 0 4px 5px -3px rgba(0,0,0,.1);
}
/* The background of the span is the main visual element */
.gh-btn-black span {
background: linear-gradient(
color-mod(var(--darkgrey) whiteness(+7%)),
color-mod(var(--darkgrey) l(-7%) saturation(-10%)) 60%,
color-mod(var(--darkgrey) l(-7%) saturation(-10%)) 90%,
color-mod(var(--darkgrey) l(-4%) saturation(-10%))
);
}
/* When clicked or focused with keyboard */
.gh-btn-black:active,
.gh-btn-black:focus {
background: color-mod(var(--darkgrey) l(-20%) saturation(-15%));
}
.gh-btn-black:active span,
.gh-btn-black:focus span {
background: color-mod(var(--darkgrey) l(-7%) saturation(-10%));
background: var(--red);
box-shadow: none;
}

2
ghost/admin/app/styles/patterns/global.css
View file

@ -13,7 +13,7 @@
/* Secondary colours */
--blue: #23AAF4;
--green: #95DA02;
--green: #45C32E;
--purple: #F71D81;
--yellow: #FFC701;
--red: #f05230;