tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Updated fix for staff user edit button using task button property 

refs TryGhost/Ghost#11789

- Reverted aaac414745 as we want to handle the state with css props instead of relying on specificity
- Updates fix for change password button on staff user edit screen to use task button props - aaac414745
This commit is contained in:
Rish 2020-06-08 13:36:21 +05:30 committed by Rishabh Garg
parent c7c24623cb
commit 7fde2e1aac
2 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/styles/patterns/buttons.css
View File

@ -141,6 +141,44 @@ fieldset[disabled] .gh-btn {
box-shadow: none;
}
/* Green button
/* ---------------------------------------------------------- */
/* 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;
transition-property: box-shadow;
}
.gh-btn-green:hover {
box-shadow: none;
}
/* 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%)));
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%)));
}
/* When clicked or focused with keyboard */
.gh-btn-green:active,
.gh-btn-green:focus {
background: color-mod(var(--green) l(-9%) saturation(-9%));
}
.gh-btn-green:active span,
.gh-btn-green:focus span {
background: color-mod(var(--green) l(-3%) saturation(-7%));
box-shadow: none;
}
/* Red button
/* ---------------------------------------------------------- */
@ -185,44 +223,6 @@ fieldset[disabled] .gh-btn {
box-shadow: none;
}
/* Green button
/* ---------------------------------------------------------- */
/* 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;
transition-property: box-shadow;
}
.gh-btn-green:hover {
box-shadow: none;
}
/* 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%)));
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%)));
}
/* When clicked or focused with keyboard */
.gh-btn-green:active,
.gh-btn-green:focus {
background: color-mod(var(--green) l(-9%) saturation(-9%));
}
.gh-btn-green:active span,
.gh-btn-green:focus span {
background: color-mod(var(--green) l(-3%) saturation(-7%));
box-shadow: none;
}
/* Black button
/* ---------------------------------------------------------- */

2
app/templates/staff/user.hbs
View File

@ -338,7 +338,7 @@
</GhFormGroup>
<div class="form-group">
<GhTaskButton @buttonText="Change Password" @class="gh-btn gh-btn-red gh-btn-icon button-change-password" @task={{this.user.saveNewPassword}} data-test-save-pw-button="true" />
<GhTaskButton @buttonText="Change Password" @idleClass="gh-btn-red" @class="gh-btn gh-btn-icon button-change-password" @task={{this.user.saveNewPassword}} data-test-save-pw-button="true" />
</div>
</fieldset>
</div>