59 lines
1.5 KiB
SCSS
59 lines
1.5 KiB
SCSS
blockquote {
|
|
@include left-line();
|
|
|
|
p {
|
|
display: inline;
|
|
font-size: 14px;
|
|
}
|
|
|
|
ol, ul {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
footer {
|
|
@include light-meta();
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
@mixin box($name, $base-color, $symbol-letter, $symbol-path, $symbol-height: 35px, $symbol-width: 35px, $symbol-line-height: 1.1) {
|
|
div.#{$name} {
|
|
background: rgba($base-color, 0.15);
|
|
border-left: 4px solid rgba($base-color, 0.45);
|
|
margin: 1.8rem 0 1.25rem 15px;
|
|
padding: 0.8em;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
position: relative;
|
|
clear: both;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
div.#{$name}::before {
|
|
content: $symbol-letter;
|
|
color: $back-white;
|
|
background: rgba($base-color, 0.8);
|
|
align-items: flex-end;
|
|
top: -1rem;
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
-webkit-clip-path: $symbol-path;
|
|
clip-path: $symbol-path;
|
|
width: $symbol-width;
|
|
height: $symbol-height;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: -1.2rem;
|
|
line-height: $symbol-line-height;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@include box(info, $blue, "i", circle(50% at 50% 50%), 30px, 30px, 1.3)
|
|
@include box(success, $green, "✔", polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%), 35px, 35px, 1.5)
|
|
@include box(warning, $orange, "!", polygon(50% 0,0 100%,100% 100%))
|
|
@include box(error, $red, "!", polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%), 30px)
|
|
@include box(notes, $purple, "✎", polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%), 32px, 32px, 1.3)
|