mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-15 03:12:54 +03:00
c33c3012d1
Clean up grey colours by mixing in slightly more blue, standardise appearance across different parts of the app and move closer to brand colours.
203 lines
4.1 KiB
CSS
203 lines
4.1 KiB
CSS
/* Buttons
|
|
/* ---------------------------------------------------------- */
|
|
|
|
/* Base button style */
|
|
.btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
padding: 9px 15px;
|
|
border: #dfe1e3 1px solid;
|
|
background: #fff;
|
|
background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 */
|
|
border-radius: var(--border-radius);
|
|
color: #808284;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
text-shadow: none;
|
|
white-space: nowrap;
|
|
letter-spacing: 1px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.428571429;
|
|
font-weight: 300;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease,
|
|
background 0.2s ease,
|
|
border-color 0.2s ease;
|
|
}
|
|
|
|
/* When hovered or clicked */
|
|
.btn:hover,
|
|
.btn:focus {
|
|
border-color: var(--blue);
|
|
color: color(var(--blue) lightness(-10%));
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* When focused with keyboard */
|
|
.btn:focus,
|
|
.btn:active:focus,
|
|
.btn.active:focus {
|
|
outline: thin dotted;
|
|
outline: 0 auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* When clicked */
|
|
.btn:active,
|
|
.btn.active {
|
|
outline: 0;
|
|
background-image: none;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* When disabled */
|
|
.btn.disabled,
|
|
.btn[disabled],
|
|
fieldset[disabled] .btn {
|
|
box-shadow: none;
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
/* Blue button
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.btn-blue {
|
|
border-color: color(var(--blue) lightness(-10%));
|
|
background: var(--blue);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-blue:hover,
|
|
.btn-blue:active,
|
|
.btn-blue:focus {
|
|
border-color: color(var(--blue) lightness(-20%));
|
|
background: color(var(--blue) lightness(-10%));
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* Green button
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.btn-green {
|
|
border-color: color(var(--green) lightness(-10%));
|
|
background: var(--green);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-green:hover,
|
|
.btn-green:active,
|
|
.btn-green:focus {
|
|
border-color: color(var(--green) lightness(-20%));
|
|
background: color(var(--green) lightness(-10%));
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* Red button
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.btn-red {
|
|
border-color: color(var(--red) lightness(-10%));
|
|
background: var(--red);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-red:hover,
|
|
.btn-red:active,
|
|
.btn-red:focus {
|
|
border-color: color(var(--red) lightness(-20%));
|
|
background: color(var(--red) lightness(-10%));
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* Link button
|
|
/* ---------------------------------------------------------- */
|
|
|
|
/* For styling a button like a link */
|
|
.btn-link {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
color: var(--blue);
|
|
}
|
|
|
|
.btn-link:hover,
|
|
.btn-link:active,
|
|
.btn-link:focus {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
color: var(--blue);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.btn-link.disabled,
|
|
.btn-link[disabled] {
|
|
box-shadow: none;
|
|
color: #b2b2b2;
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
/* Minor button
|
|
/* ---------------------------------------------------------- */
|
|
|
|
/* For buttons with a small/insignificant action for
|
|
// example a "cancel" button. Style is de-emphasised. */
|
|
.btn-minor {
|
|
padding: 8px 15px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.btn-minor:hover,
|
|
.btn-minor:active,
|
|
.btn-minor:focus {
|
|
border-color: #c1c1c1;
|
|
background: #fff;
|
|
color: #808284;
|
|
}
|
|
|
|
|
|
/* Button size variations
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.btn-lg {
|
|
padding: 12px 18px;
|
|
border-radius: 4px;
|
|
font-size: 1.4rem;
|
|
line-height: 1.33;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 7px 10px;
|
|
border-radius: 2px;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Vertically space out multiple block buttons */
|
|
.btn-block + .btn-block {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Specificity overrides */
|
|
input[type="submit"].btn-block,
|
|
input[type="reset"].btn-block,
|
|
input[type="button"].btn-block {
|
|
width: 100%;
|
|
}
|