minetestblog.github.io/_sass/_notices.scss
2022-01-22 18:49:09 -05:00

67 lines
1.7 KiB
SCSS

// Notice boxes
//-------------------------------
// Idea taken from
// https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/_notices.scss
@mixin notice($notice_bg, $notice-border-color, $notice-icon, $notice-icon-color) {
padding: 1rem 1rem 1rem 5rem;
background-color: var(--code-bg-color);
font-size: 0.85em;
box-shadow: 0 1px 2px var(--shadow-color);
position: relative;
&:before {
background-color: $notice-bg;
border: 1px solid $notice-border-color;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 4rem;
content: '';
}
&:after {
font-family: 'icomoon';
content: $notice-icon;
color: $notice-icon-color;
display: block;
font-size: 1.25em;
font-weight: normal;
left: 2rem;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
p:last-child {
margin-bottom: 0;
}
}
.notice {
$notice-bg: #d6e3ea;
$notice-border-color: rgba(200, 212, 218, .4);
$notice-icon: '\e88e';
$notice-icon-color: #596267;
@include notice($notice-bg, $notice-border-color, $notice-icon, $notice-icon-color)
}
.notice-alert {
$notice-alert-bg: #eae6ca;
$notice-border-color: rgba(222, 218, 192, .4);
$notice-alert-icon: '\e002';
$notice-alert-icon_color: #77703a;
@include notice($notice-alert-bg, $notice-border-color, $notice-alert-icon, $notice-alert-icon-color)
}
.notice-success {
$notice-success-bg: #d6ead8;
$notice-border-color: rgba(202, 220, 204, .4);
$notice-success-icon: '\e834';
$notice-success-icon_color: #506b53;
@include notice($notice-success-bg, $notice-border-color, $notice-success-icon, $notice-success-icon-color)
}