Skip to content

Commit e3b51a6

Browse files
dieghernandieghernan
committed
Callouts for Quarto
1 parent d4f3410 commit e3b51a6

File tree

2 files changed

+301
-1
lines changed

2 files changed

+301
-1
lines changed

‎inst/pkgdown/assets/BS5/rostemplate.css‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1031,3 +1031,303 @@ pre code span.wa
10311031
border-top-color: var(--brand-ros_black);
10321032
}
10331033
}
1034+
1035+
/* Quarto Callouts */
1036+
.callout {
1037+
margin-top: 1.25rem;
1038+
margin-bottom: 1.25rem;
1039+
border-radius: 0.25rem;
1040+
overflow-wrap: break-word;
1041+
}
1042+
1043+
.callout .callout-title-container {
1044+
overflow-wrap: anywhere;
1045+
}
1046+
1047+
.callout.callout-style-simple {
1048+
padding: 0.4em 0.7em;
1049+
border-left: 5px solid;
1050+
border-right: 1px solid RGBA(var(--bs-body-color-rgb), 0.1);
1051+
border-top: 1px solid RGBA(var(--bs-body-color-rgb), 0.1);
1052+
border-bottom: 1px solid RGBA(var(--bs-body-color-rgb), 0.1);
1053+
}
1054+
1055+
.callout.callout-style-default {
1056+
border-left: 5px solid;
1057+
border-right: 1px solid RGBA(var(--bs-body-color-rgb), 0.1);
1058+
border-top: 1px solid RGBA(var(--bs-body-color-rgb), 0.1);
1059+
border-bottom: 1px solid RGBA(var(--bs-body-color-rgb), 0.1);
1060+
}
1061+
1062+
.callout .callout-body-container {
1063+
flex-grow: 1;
1064+
}
1065+
1066+
.callout.callout-style-simple .callout-body {
1067+
font-size: 0.9rem;
1068+
font-weight: 400;
1069+
margin-bottom: -0.4em;
1070+
margin-top: 0.5em;
1071+
}
1072+
1073+
.callout.callout-style-default .callout-body {
1074+
font-size: 0.9rem;
1075+
font-weight: 400;
1076+
}
1077+
1078+
.callout:not(.no-icon).callout-titled.callout-style-simple .callout-body {
1079+
padding-left: 1.6em;
1080+
}
1081+
1082+
.callout.callout-titled > .callout-header {
1083+
padding-top: 0.2em;
1084+
margin-bottom: -0.2em;
1085+
}
1086+
1087+
.callout.callout-empty-content > .callout-header {
1088+
margin-bottom: 0em;
1089+
border-bottom-right-radius: calc(0.25rem + -1px);
1090+
}
1091+
1092+
.callout > .callout-header.collapsed {
1093+
border-bottom-right-radius: calc(0.25rem + -1px);
1094+
}
1095+
1096+
.callout.callout-style-simple > div.callout-header {
1097+
border-bottom: none;
1098+
font-size: 0.9rem;
1099+
font-weight: 600;
1100+
opacity: 75%;
1101+
}
1102+
1103+
.callout.callout-style-default > div.callout-header {
1104+
border-bottom: none;
1105+
font-weight: 600;
1106+
opacity: 85%;
1107+
font-size: 0.9rem;
1108+
padding-left: 0.5em;
1109+
padding-right: 0.5em;
1110+
border-top-right-radius: calc(0.25rem + -1px);
1111+
}
1112+
1113+
.callout.callout-style-default .callout-body {
1114+
padding-left: 0.5em;
1115+
padding-right: 0.5em;
1116+
}
1117+
1118+
.callout.callout-style-default .callout-body > :first-child {
1119+
padding-top: 0.5rem;
1120+
margin-top: 0;
1121+
}
1122+
1123+
.callout > div.callout-header[data-bs-toggle="collapse"] {
1124+
cursor: pointer;
1125+
}
1126+
1127+
.callout.callout-style-default .callout-header[aria-expanded="false"],
1128+
.callout.callout-style-default .callout-header[aria-expanded="true"] {
1129+
padding-top: 0px;
1130+
margin-bottom: 0px;
1131+
align-items: center;
1132+
}
1133+
1134+
.callout.callout-titled .callout-body > :last-child:not(.sourceCode),
1135+
.callout.callout-titled .callout-body > div > :last-child:not(.sourceCode) {
1136+
padding-bottom: 0.5rem;
1137+
margin-bottom: 0;
1138+
}
1139+
1140+
.callout:not(.callout-titled) .callout-body > :first-child,
1141+
.callout:not(.callout-titled) .callout-body > div > :first-child {
1142+
margin-top: 0.25rem;
1143+
}
1144+
1145+
.callout:not(.callout-titled) .callout-body > :last-child,
1146+
.callout:not(.callout-titled) .callout-body > div > :last-child {
1147+
margin-bottom: 0.2rem;
1148+
}
1149+
1150+
.callout.callout-style-simple:not(.callout-titled) .callout-body > :last-child,
1151+
.callout.callout-style-simple:not(.callout-titled)
1152+
.callout-body
1153+
> div
1154+
> :last-child {
1155+
margin-bottom: 0.5em;
1156+
}
1157+
1158+
.callout.callout-style-simple .callout-icon::before,
1159+
.callout.callout-style-simple .callout-toggle::before {
1160+
height: 1rem;
1161+
width: 1rem;
1162+
display: inline-block;
1163+
content: "";
1164+
background-repeat: no-repeat;
1165+
background-size: 1rem 1rem;
1166+
}
1167+
1168+
.callout.callout-style-default .callout-icon::before,
1169+
.callout.callout-style-default .callout-toggle::before {
1170+
height: 0.9rem;
1171+
width: 0.9rem;
1172+
display: inline-block;
1173+
content: "";
1174+
background-repeat: no-repeat;
1175+
background-size: 0.9rem 0.9rem;
1176+
}
1177+
1178+
.callout.callout-style-default .callout-toggle::before {
1179+
margin-top: 5px;
1180+
}
1181+
1182+
.callout .callout-btn-toggle .callout-toggle::before {
1183+
transition: transform 0.2s linear;
1184+
}
1185+
1186+
.callout .callout-header[aria-expanded="false"] .callout-toggle::before {
1187+
transform: rotate(-90deg);
1188+
}
1189+
1190+
.callout .callout-header[aria-expanded="true"] .callout-toggle::before {
1191+
transform: none;
1192+
}
1193+
1194+
.callout.callout-style-simple:not(.no-icon) div.callout-icon-container {
1195+
padding-top: 0.2em;
1196+
padding-right: 0.55em;
1197+
}
1198+
1199+
.callout.callout-style-default:not(.no-icon) div.callout-icon-container {
1200+
padding-top: 0.1em;
1201+
padding-right: 0.35em;
1202+
}
1203+
1204+
.callout.callout-style-default:not(.no-icon) div.callout-title-container {
1205+
margin-top: -1px;
1206+
}
1207+
1208+
.callout.callout-style-default.callout-caution:not(.no-icon)
1209+
div.callout-icon-container {
1210+
padding-top: 0.3em;
1211+
padding-right: 0.35em;
1212+
}
1213+
1214+
.callout > .callout-body > .callout-icon-container > .no-icon,
1215+
.callout > .callout-header > .callout-icon-container > .no-icon {
1216+
display: none;
1217+
}
1218+
1219+
div.callout.callout {
1220+
border-left-color: var(--bs-secondary);
1221+
}
1222+
1223+
div.callout.callout-style-default > .callout-header {
1224+
background-color: var(--bs-secondary);
1225+
}
1226+
1227+
div.callout-note.callout {
1228+
border-left-color: var(--bs-info);
1229+
}
1230+
1231+
div.callout-note.callout-style-default > .callout-header {
1232+
background-color: RGBA(var(--bs-info-rgb), 0.1);
1233+
}
1234+
1235+
div.callout-note:not(.callout-titled) .callout-icon::before {
1236+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(35.1, 115.2, 204.3)" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>');
1237+
}
1238+
1239+
div.callout-note.callout-titled .callout-icon::before {
1240+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(35.1, 115.2, 204.3)" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>');
1241+
}
1242+
1243+
div.callout-note .callout-toggle::before {
1244+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
1245+
}
1246+
1247+
div.callout-tip.callout {
1248+
border-left-color: var(--bs-success);
1249+
}
1250+
1251+
div.callout-tip.callout-style-default > .callout-header {
1252+
background-color: RGBA(var(--bs-success-rgb), 0.1);
1253+
}
1254+
1255+
div.callout-tip:not(.callout-titled) .callout-icon::before {
1256+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(56.7, 163.8, 21.6)" class="bi bi-lightbulb" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/></svg>');
1257+
}
1258+
1259+
div.callout-tip.callout-titled .callout-icon::before {
1260+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(56.7, 163.8, 21.6)" class="bi bi-lightbulb" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/></svg>');
1261+
}
1262+
1263+
div.callout-tip .callout-toggle::before {
1264+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
1265+
}
1266+
1267+
div.callout-warning.callout {
1268+
border-left-color: var(--bs-warning);
1269+
}
1270+
1271+
div.callout-warning.callout-style-default > .callout-header {
1272+
background-color: RGBA(var(--bs-warning-rgb), 0.1);
1273+
}
1274+
1275+
div.callout-warning:not(.callout-titled) .callout-icon::before {
1276+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(229.5, 105.3, 21.6)" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>');
1277+
}
1278+
1279+
div.callout-warning.callout-titled .callout-icon::before {
1280+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(229.5, 105.3, 21.6)" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>');
1281+
}
1282+
1283+
div.callout-warning .callout-toggle::before {
1284+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
1285+
}
1286+
1287+
div.callout-caution.callout {
1288+
border-left-color: var(--bs-warning);
1289+
}
1290+
1291+
div.callout-caution.callout-style-default > .callout-header {
1292+
background-color: RGBA(var(--bs-warning-rgb), 0.1);
1293+
}
1294+
1295+
div.callout-caution:not(.callout-titled) .callout-icon::before {
1296+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(216, 155.7, 70.2)" class="bi bi-cone-striped" viewBox="0 0 16 16"><path d="M9.97 4.88l.953 3.811C10.158 8.878 9.14 9 8 9c-1.14 0-2.159-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.274 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/></svg>');
1297+
}
1298+
1299+
div.callout-caution.callout-titled .callout-icon::before {
1300+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(216, 155.7, 70.2)" class="bi bi-cone-striped" viewBox="0 0 16 16"><path d="M9.97 4.88l.953 3.811C10.158 8.878 9.14 9 8 9c-1.14 0-2.159-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.274 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/></svg>');
1301+
}
1302+
1303+
div.callout-caution .callout-toggle::before {
1304+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
1305+
}
1306+
1307+
div.callout-important.callout {
1308+
border-left-color: var(--bs-danger);
1309+
}
1310+
1311+
div.callout-important.callout-style-default > .callout-header {
1312+
background-color: RGBA(var(--bs-danger-rgb), 0.1);
1313+
}
1314+
1315+
div.callout-important:not(.callout-titled) .callout-icon::before {
1316+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(229.5, 0, 51.3)" class="bi bi-exclamation-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>');
1317+
}
1318+
1319+
div.callout-important.callout-titled .callout-icon::before {
1320+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: rgb(229.5, 0, 51.3)" class="bi bi-exclamation-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>');
1321+
}
1322+
1323+
div.callout-important .callout-toggle::before {
1324+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(52, 58, 64)" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
1325+
}
1326+
1327+
div.callout-body-container.callout-body pre {
1328+
margin-left: calc(var(--bs-gutter-x) * 0.5) !important;
1329+
margin-right: calc(var(--bs-gutter-x) * 0.5) !important;
1330+
}
1331+
div.callout-body-container.callout-body .btn-copy-ex {
1332+
right: 18px !important;
1333+
}

0 commit comments

Comments
 (0)