-
-
Save matthiasg/6153853 to your computer and use it in GitHub Desktop.
| /* Side notes for calling out things | |
| -------------------------------------------------- */ | |
| /* Base styles (regardless of theme) */ | |
| .bs-callout { | |
| margin: 20px 0; | |
| padding: 15px 30px 15px 15px; | |
| border-left: 5px solid #eee; | |
| } | |
| .bs-callout h4 { | |
| margin-top: 0; | |
| } | |
| .bs-callout p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .bs-callout code, | |
| .bs-callout .highlight { | |
| background-color: #fff; | |
| } | |
| /* Themes for different contexts */ | |
| .bs-callout-danger { | |
| background-color: #fcf2f2; | |
| border-color: #dFb5b4; | |
| } | |
| .bs-callout-warning { | |
| background-color: #fefbed; | |
| border-color: #f1e7bc; | |
| } | |
| .bs-callout-info { | |
| background-color: #f0f7fd; | |
| border-color: #d0e3f0; | |
| } | |
Brilliant work with the sass mixin @Gman29, thanks
I like it. Thanks! 👍
Thanks for sharing!!
nice thanks for it :)
the corrected code, with bootstrap5 shortcodes support:
/* Side notes for calling out things /
/ Base styles (regardless of theme) /
.bs-callout {
padding: 1.25rem;
margin-top: 1.25rem;
border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
background-color: var(--bd-callout-bg, var(--bs-gray-100));
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: var(--bs-gray-100);
}
/ Themes for different contexts */
.bs-callout-danger {
--bd-callout-bg: rgba(var(--bs-danger-rgb), .075);
--bd-callout-border: rgba(var(--bs-danger-rgb), .5);
}
.bs-callout-warning {
--bd-callout-bg: rgba(var(--bs-warning-rgb), .075);
--bd-callout-border: rgba(var(--bs-warning-rgb), .5);
}
.bs-callout-info {
--bd-callout-bg: rgba(var(--bs-info-rgb), .075);
--bd-callout-border: rgba(var(--bs-info-rgb), .5);
}
👍 Good , thanks