Ghost/ghost/admin/app/styles/patterns/boxes.css
2021-03-23 12:17:47 +01:00

99 lines
2.0 KiB
CSS

/* Alerts
/* ---------------------------------------------------------- */
.gh-box {
position: relative;
margin-top: 3px;
padding: 12px 10px 14px 40px;
border: 1px solid var(--blue);
color: var(--darkgrey);
line-height: 1.55em;
letter-spacing: 0.2px;
background: color-mod(var(--blue) a(4%));
border-radius: 3px;
}
.gh-box a {
color: var(--black);
font-weight: 600;
}
.gh-box svg:first-of-type {
position: absolute;
left: 12px;
width: auto;
}
.gh-box-tip svg:first-of-type {
top: 12px;
height: 2rem;
fill: var(--blue);
}
.gh-box-alert {
border-color: var(--yellow);
background: color-mod(var(--yellow) a(4%));
}
.gh-box-alert svg:first-of-type {
top: 14px;
height: 1.8rem;
fill: color-mod(var(--yellow) l(-8%) s(+10%));
}
.gh-box-error {
border: 1px solid var(--red);
background: color-mod(var(--red) a(3%));
}
.gh-box-error svg:first-of-type {
top: 14px;
height: 1.8rem;
fill: var(--red);
}
.gh-box-error-border {
border-left: 5px solid var(--red);
}
.gh-content-bg-whitegrey {
background: var(--whitegrey-l1);
}
.gh-content-box {
border: 1px solid var(--whitegrey);
border-radius: 4px;
background: var(--white);
}
.gh-content-box.pa { padding: 24px; }
.gh-content-box.pt { padding-top: 24px; }
.gh-content-box.pr { padding-right: 24px; }
.gh-content-box.pb { padding-bottom: 24px; }
.gh-content-box.pl { padding-left: 24px; }
.gh-content-box.grey {
border: none;
background: var(--main-color-content-greybg);
}
.gh-content-box.darkgrey {
border: none;
background: color-mod(var(--black) l(+6%) s(+2%));
color: var(--white);
}
.gh-content-box.black {
border: none;
background: var(--black);
color: var(--white);
}
.gh-content-box.vertical {
background: none;
border-left: none;
border-right: none;
border-top: 1px solid var(--list-color-divider);
border-bottom: 1px solid var(--list-color-divider);
border-radius: 0;
}