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

🐛 Fixed change password button state on staff screen 

closes https://github.com/TryGhost/Ghost/issues/11789

- Invert css classes definitions for red/green buttons to allow the button to turn green for the success state

Credits - https://github.com/m1kl - https://github.com/TryGhost/Ghost-Admin/pull/1568
This commit is contained in:
Rish 2020-06-04 13:14:41 +05:30 committed by Rishabh Garg
parent 36fa9dc32c
commit aaac414745
1 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -141,44 +141,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;
}
/* Red button
/* ---------------------------------------------------------- */
@ -223,6 +185,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;
}
/* Black button
/* ---------------------------------------------------------- */