Skip to content

Commit 717a33a

Browse files
cdervcderv
committed
Refactor SCSS in nested structure
This allows to group common rule, and see patterns.
1 parent be10f24 commit 717a33a

File tree

1 file changed

+119
-107
lines changed

1 file changed

+119
-107
lines changed

‎src/resources/formats/revealjs/quarto.scss‎

Lines changed: 119 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -946,105 +946,136 @@ kbd {
946946
margin-bottom: $callout-margin-bottom;
947947
border-radius: $border-radius;
948948
overflow-wrap: break-word;
949-
}
950-
951-
.callout.callout-style-simple {
952-
padding: 0em 0.5em;
953-
border-left: $callout-border-width solid #acacac;
954-
border-right: solid 1px $table-border-color;
955-
border-top: solid 1px $table-border-color;
956-
border-bottom: solid 1px $table-border-color;
957-
display: flex;
958-
}
959-
960-
.callout.callout-style-default {
961-
border-left: $callout-border-width solid #acacac;
962-
border-right: solid 1px $table-border-color;
963-
border-top: solid 1px $table-border-color;
964-
border-bottom: solid 1px $table-border-color;
965-
}
966-
967-
.callout .callout-body-container {
968-
flex-grow: 1;
969-
}
970-
971-
.callout.callout-style-simple .callout-body {
972-
font-size: 1rem;
973-
font-weight: 400;
974-
}
975949

976-
.callout.callout-style-default .callout-body {
977-
font-size: 0.9rem;
978-
font-weight: 400;
979-
}
980-
981-
.callout.callout-titled.callout-style-simple .callout-body {
982-
margin-top: 0.2em;
983-
}
984-
985-
.callout:not(.callout-titled) .callout-body {
986-
display: flex;
987-
}
950+
&.callout-style-simple {
951+
padding: 0em 0.5em;
952+
border-left: $callout-border-width solid #acacac;
953+
border-right: solid 1px $table-border-color;
954+
border-top: solid 1px $table-border-color;
955+
border-bottom: solid 1px $table-border-color;
956+
display: flex;
957+
958+
.callout-body {
959+
font-size: 1rem;
960+
font-weight: 400;
961+
}
988962

989-
.callout:not(.no-icon).callout-titled.callout-style-simple .callout-content {
990-
padding-left: 1.6em;
991-
}
963+
&.callout-titled {
964+
.callout-body {
965+
margin-top: 0.2em;
966+
}
967+
&:not(.no-icon) {
968+
.callout-content {
969+
padding-left: 1.6em;
970+
p {
971+
margin-top: 0;
972+
}
973+
}
974+
}
975+
}
992976

993-
.callout.callout-titled .callout-header {
994-
padding-top: 0.2em;
995-
margin-bottom: -0.2em;
996-
}
977+
.callout-icon::before {
978+
height: 1em;
979+
width: 1em;
980+
display: inline-block;
981+
content: "";
982+
background-repeat: no-repeat;
983+
background-size: contain;
984+
}
997985

998-
.callout.callout-titled .callout-title p {
999-
margin-top: 0.5em;
1000-
margin-bottom: 0.5em;
1001-
}
986+
div.callout-title {
987+
border-bottom: none;
988+
font-size: 0.9rem;
989+
font-weight: 600;
990+
opacity: 75%;
991+
}
992+
}
1002993

1003-
.callout.callout-titled.callout-style-simple .callout-content p {
1004-
margin-top: 0;
1005-
}
994+
&.callout-style-default {
995+
border-left: $callout-border-width solid #acacac;
996+
border-right: solid 1px $table-border-color;
997+
border-top: solid 1px $table-border-color;
998+
border-bottom: solid 1px $table-border-color;
999+
1000+
.callout-body {
1001+
font-size: 0.9rem;
1002+
font-weight: 400;
1003+
}
1004+
&.callout-titled {
1005+
.callout-content {
1006+
p {
1007+
margin-top: 0.7em;
1008+
}
1009+
}
1010+
}
10061011

1007-
.callout.callout-titled.callout-style-default .callout-content p {
1008-
margin-top: 0.7em;
1009-
}
1012+
.callout-icon::before {
1013+
height: 0.9em;
1014+
width: 0.9em;
1015+
display: inline-block;
1016+
content: "";
1017+
background-repeat: no-repeat;
1018+
background-size: contain;
1019+
}
10101020

1011-
.callout.callout-style-simple div.callout-title {
1012-
border-bottom: none;
1013-
font-size: 0.9rem;
1014-
font-weight: 600;
1015-
opacity: 75%;
1016-
}
1021+
div {
1022+
&.callout-title {
1023+
border-bottom: none;
1024+
font-weight: 600;
1025+
opacity: 85%;
1026+
font-size: 0.9rem;
1027+
padding-left: 0.5em;
1028+
padding-right: 0.5em;
1029+
}
1030+
&.callout-content {
1031+
padding-left: 0.5em;
1032+
padding-right: 0.5em;
1033+
}
1034+
}
1035+
}
10171036

1018-
.callout.callout-style-default div.callout-title {
1019-
border-bottom: none;
1020-
font-weight: 600;
1021-
opacity: 85%;
1022-
font-size: 0.9rem;
1023-
padding-left: 0.5em;
1024-
padding-right: 0.5em;
1025-
}
1037+
.callout-body-container {
1038+
flex-grow: 1;
1039+
}
10261040

1027-
.callout.callout-style-default div.callout-content {
1028-
padding-left: 0.5em;
1029-
padding-right: 0.5em;
1030-
}
1041+
&:not(.callout-titled) {
1042+
.callout-body {
1043+
display: flex;
1044+
}
1045+
.callout-icon::before {
1046+
margin-top: 1rem;
1047+
padding-right: 0.5rem;
1048+
}
1049+
}
10311050

1032-
.callout.callout-style-simple .callout-icon::before {
1033-
height: 1em;
1034-
width: 1em;
1035-
display: inline-block;
1036-
content: "";
1037-
background-repeat: no-repeat;
1038-
background-size: contain;
1039-
}
1051+
&.callout-titled {
1052+
.callout-header {
1053+
padding-top: 0.2em;
1054+
margin-bottom: -0.2em;
1055+
}
1056+
.callout-title {
1057+
p {
1058+
margin-top: 0.5em;
1059+
margin-bottom: 0.5em;
1060+
}
1061+
}
1062+
.callout-body {
1063+
> .callout-content {
1064+
> :last-child {
1065+
padding-bottom: 0.5rem;
1066+
margin-bottom: 0;
1067+
}
1068+
}
1069+
}
1070+
.callout-icon::before {
1071+
margin-top: 0.5rem;
1072+
padding-right: 0.5rem;
1073+
}
1074+
}
10401075

1041-
.callout.callout-style-default .callout-icon::before {
1042-
height: 0.9em;
1043-
width: 0.9em;
1044-
display: inline-block;
1045-
content: "";
1046-
background-repeat: no-repeat;
1047-
background-size: contain;
1076+
&.no-icon::before {
1077+
display: none !important;
1078+
}
10481079
}
10491080

10501081
.callout-title {
@@ -1056,25 +1087,6 @@ kbd {
10561087
padding-right: 0.5rem;
10571088
}
10581089

1059-
.callout.no-icon::before {
1060-
display: none !important;
1061-
}
1062-
1063-
.callout.callout-titled .callout-body > .callout-content > :last-child {
1064-
padding-bottom: 0.5rem;
1065-
margin-bottom: 0;
1066-
}
1067-
1068-
.callout.callout-titled .callout-icon::before {
1069-
margin-top: 0.5rem;
1070-
padding-right: 0.5rem;
1071-
}
1072-
1073-
.callout:not(.callout-titled) .callout-icon::before {
1074-
margin-top: 1rem;
1075-
padding-right: 0.5rem;
1076-
}
1077-
10781090
/* Callout Types */
10791091

10801092
// Generate per callout type css to customize their appearance

0 commit comments

Comments
 (0)