mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-18 07:51:55 +03:00
e85a6a1cac
* Update mobile modal animations * Member popup input error and placeholder refinements * Adding close animation to members auth popups * Improve members auth dialog * Refine members reset password design
395 lines
7.8 KiB
CSS
395 lines
7.8 KiB
CSS
/* Reusable components */
|
|
/* ------------------------------------------------------------
|
|
|
|
|
|
*/
|
|
|
|
|
|
/* Modal */
|
|
/* ------------------------------------------------------------ */
|
|
.gm-page-overlay {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
overflow-y: scroll;
|
|
background: rgba(10, 17, 23, 0.9);
|
|
animation: fadeInOverlay 0.2s ease 1 forwards;
|
|
}
|
|
|
|
.gm-page-overlay.close {
|
|
animation: fadeOutOverlay 0.2s ease 0.5s 1 forwards;
|
|
}
|
|
|
|
.gm-page-overlay.close .gm-modal {
|
|
animation: closeModal 0.5s ease-in 1 forwards;
|
|
}
|
|
|
|
.gm-modal-container {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.gm-modal {
|
|
position: relative;
|
|
background: white;
|
|
margin: 0 auto;
|
|
width: 288px;
|
|
border-radius: 4px;
|
|
padding: 40px;
|
|
box-shadow: var(--box-shadow-base);
|
|
animation: openModal 0.6s ease 1 forwards;
|
|
}
|
|
|
|
.gm-modal-close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
display: block;
|
|
padding: 8px;
|
|
}
|
|
|
|
.gm-modal-close svg path {
|
|
stroke: var(--grey);
|
|
transition: all var(--animation-speed-base) ease;
|
|
}
|
|
|
|
.gm-modal-close:hover svg path {
|
|
stroke: var(--grey-d2);
|
|
}
|
|
|
|
@keyframes fadeInOverlay {
|
|
from {opacity: 0;}
|
|
to {opacity: 1;}
|
|
}
|
|
|
|
@keyframes fadeOutOverlay {
|
|
from {opacity: 1;}
|
|
to {opacity: 0;}
|
|
}
|
|
|
|
@keyframes openModal { /* Safari and Chrome */
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(25px) scale(0.85);
|
|
}
|
|
|
|
40% {
|
|
opacity: 1.0;
|
|
transform: translateY(-8px) scale(1.04);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) scale(1.0);
|
|
}
|
|
}
|
|
|
|
@keyframes closeModal { /* Safari and Chrome */
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
opacity: 1.0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(85px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 440px) {
|
|
.gm-modal-container {
|
|
margin: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
transform: none;
|
|
height: 100vh;
|
|
}
|
|
|
|
.gm-modal {
|
|
width: calc(100% - 48px);
|
|
height: calc(100vh - 48px);
|
|
padding: 24px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.gm-page-overlay {
|
|
background: rgba(10, 17, 23, 0.0);
|
|
}
|
|
|
|
@keyframes openModal {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1.0;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes closeModal {
|
|
0% {
|
|
opacity: 1.0;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Buttons */
|
|
/* ------------------------------------------------------------ */
|
|
button {
|
|
width: 100%;
|
|
font-weight: 500;
|
|
border: 1px solid var(--grey);
|
|
color: var(--grey-d3);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
padding: 15px 15px 16px;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
transition: all var(--animation-speed-f1) ease-in-out;
|
|
position: relative;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
button:hover {
|
|
color: var(--blue-l1);
|
|
}
|
|
|
|
.gm-btn-blue {
|
|
background: var(--blue);
|
|
background: linear-gradient(to bottom, rgba(62,176,239,1) 0%,rgba(0,139,214,1) 100%);
|
|
color: var(--white);
|
|
border: none;
|
|
}
|
|
|
|
.gm-btn-blue:active {
|
|
background: var(--blue-d1);
|
|
background: linear-gradient(to bottom, rgb(22, 147, 214) 0%,rgb(0, 118, 182) 100%);
|
|
}
|
|
|
|
.gm-btn-blue:hover {
|
|
color: var(--white);
|
|
}
|
|
|
|
.gm-btn-blue:hover:before {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.gm-btn-blue:before {
|
|
content: "";
|
|
transition: all var(--animation-speed-s1) ease;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2));
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
/* Forms inputs */
|
|
/* ------------------------------------------------------------ */
|
|
|
|
/* Change Autocomplete styles in Chrome*/
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover
|
|
textarea:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill:active,
|
|
select:-webkit-autofill,
|
|
select:-webkit-autofill:hover,
|
|
select:-webkit-autofill:focus,
|
|
select:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0px 40px #FFF inset;
|
|
}
|
|
|
|
::-webkit-input-placeholder,
|
|
::-moz-placeholder,
|
|
:-ms-input-placeholder,
|
|
:-moz-placeholder {
|
|
color: var(--white);
|
|
}
|
|
|
|
.gm-form-element {
|
|
margin: 24px 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.gm-input {
|
|
position: relative;
|
|
}
|
|
|
|
.gm-input input {
|
|
font-size: var(--text-s);
|
|
color: var(--grey-d3);
|
|
border: none;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--grey-l1);
|
|
height: 38px;
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
background: var(--white);
|
|
width: 100%;
|
|
outline: none;
|
|
transition: border var(--animation-speed-f1) ease-in-out;
|
|
padding: 20px 14px 22px 38px; /* 1px bottom padding fixes jump that's caused by the border change */
|
|
letter-spacing: 0.2px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.gm-input input:hover {
|
|
border: 1px solid var(--grey);
|
|
}
|
|
|
|
.gm-input input.gm-error {
|
|
border: 1px solid color-mod(var(--red) a(0.8));
|
|
background: color-mod(var(--red) a(0.02))
|
|
}
|
|
|
|
.gm-input input:focus {
|
|
border: 1px solid color-mod(var(--blue) a(0.8));
|
|
box-shadow: 0 0 6px rgba(62, 176, 239, 0.3), 0 0 0px 40px #FFF inset;
|
|
}
|
|
|
|
.gm-input label {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
font-size: var(--text-s);
|
|
padding: 0 0 2px 0;
|
|
width: 100%;
|
|
top: 14px;
|
|
left: 38px;
|
|
color: var(--grey);
|
|
transition: all var(--animation-speed-base) ease-in-out;
|
|
pointer-events: none;
|
|
letter-spacing: 0.4px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.gm-input input:hover + label {
|
|
color: var(--grey-d1);
|
|
}
|
|
|
|
.gm-input input.gm-input-filled + label,
|
|
.gm-input input:focus + label {
|
|
opacity: 0;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.gm-input input.gm-error + label {
|
|
color: color-mod(var(--red) a(0.5));
|
|
}
|
|
|
|
.gm-input label i svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.gm-input label i svg path,
|
|
.gm-input i svg path {
|
|
stroke: var(--grey);
|
|
transition: stroke var(--animation-speed-base) ease-in-out;
|
|
}
|
|
|
|
.gm-input input:hover + label + i svg path {
|
|
stroke: var(--grey-d1);
|
|
}
|
|
|
|
.gm-input input.gm-error + label + i svg path {
|
|
stroke: color-mod(var(--red) a(0.5));
|
|
}
|
|
|
|
.gm-input input.gm-input-filled + label + i svg path,
|
|
.gm-input input:focus + label + i svg path {
|
|
stroke: var(--grey-d2);
|
|
}
|
|
|
|
.gm-input i {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
opacity: 1.0;
|
|
transition: all var(--animation-speed-base) ease-in-out;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.gm-input-errortext {
|
|
position: absolute;
|
|
top: 46px;
|
|
color: color-mod(var(--red) l(+5%) s(-2%));
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.8px;
|
|
border-radius: 5px;
|
|
z-index: 9999;
|
|
animation: slideErrorText 0.4s ease;
|
|
}
|
|
|
|
@keyframes slideErrorText {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
/* Error tooltip triangle */
|
|
.gm-input-errortext-xx:before {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 50%;
|
|
margin-left: -6px;
|
|
width: 0;
|
|
border-bottom: 6px solid var(--grey-d3);
|
|
border-bottom: 6px solid var(--grey-d3);
|
|
border-right: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
content: " ";
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.gm-form-errortext {
|
|
color: var(--red);
|
|
font-size: var(--text-s);
|
|
letter-spacing: 0.4px;
|
|
margin: 40px -2px -12px;
|
|
background: color-mod(var(--red) a(0.08));
|
|
padding: 11px 14px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: start;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.gm-form-errortext span {
|
|
margin: 1px 0 0;
|
|
}
|
|
|
|
.gm-form-errortext i {
|
|
margin: 1px 8px 0 0;
|
|
} |