mirror of
https://github.com/minetestblog/minetestblog.github.io.git
synced 2025-07-17 03:38:53 +02:00
67 lines
1.7 KiB
SCSS
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)
|
|
}
|