rework styles for admonition label

* apply background to i tag * add icon using before pseudo-element
asciidoctor · Nov 25, 2023 · 4235834 · 4235834
1 parent 2b4bcf3
commit 4235834
Showing 1 changed file with 35 additions and 29 deletions.
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -436,76 +436,82 @@
   font-size: calc(15 / var(--rem-base) * 1rem);
   line-height: 1;
   transform: translate(-0.5rem, -50%);
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%) no-repeat left center / 2.075em 100%;
-  border-radius: 0.5em;
-  padding: 0.25em 0.075em;
+  padding: 0;
 }
 
 .doc .admonitionblock td.icon i {
-  display: inline-flex;
   align-items: center;
-  width: auto;
-  background-position-x: 0.5em;
-  filter: invert(100%);
-  padding-left: 2em;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%) no-repeat left center / 2.05em 100%;
+  border-radius: 0.5em;
+  display: inline-flex;
+  filter: initial;
+  height: 1.5em;
+  padding: 0 0.5em;
   vertical-align: initial;
+  width: fit-content;
+}
+
+.doc .admonitionblock td.icon i::before {
+  background: no-repeat 0.05em center / 1em 1em;
+  content: "";
+  filter: invert(100%);
+  height: inherit;
+  width: 1.5em;
 }
 
 .doc .admonitionblock td.icon i::after {
   content: attr(title);
-  text-transform: uppercase;
-  filter: invert(100%); /* NOTE reverse the filter on the icon */
   font-weight: var(--admonition-label-font-weight);
   font-style: normal;
-  padding: 0 0.5em;
-  margin: -0.05em; /* NOTE account for slight offset in font */
+  padding-left: 0.5em;
+  text-transform: uppercase;
+}
+
+.doc .admonitionblock td.icon i.icon-caution::before {
+  background-image: url(../img/octicons-16.svg#view-flame);
 }
 
-.doc .admonitionblock.caution td.icon {
+.doc .admonitionblock td.icon i.icon-caution {
   background-color: var(--caution-color);
   color: var(--caution-on-color);
 }
 
-.doc .admonitionblock.caution td.icon i {
-  background-image: url(../img/octicons-16.svg#view-flame);
+.doc .admonitionblock td.icon i.icon-important::before {
+  background-image: url(../img/octicons-16.svg#view-stop);
 }
 
-.doc .admonitionblock.important td.icon {
+.doc .admonitionblock td.icon i.icon-important {
   background-color: var(--important-color);
   color: var(--important-on-color);
 }
 
-.doc .admonitionblock.important td.icon i {
-  background-image: url(../img/octicons-16.svg#view-stop);
+.doc .admonitionblock td.icon i.icon-note::before {
+  background-image: url(../img/octicons-16.svg#view-info);
 }
 
-.doc .admonitionblock.note td.icon {
+.doc .admonitionblock td.icon i.icon-note {
   background-color: var(--note-color);
   color: var(--note-on-color);
 }
 
-.doc .admonitionblock.note td.icon i {
-  background-image: url(../img/octicons-16.svg#view-info);
+.doc .admonitionblock td.icon i.icon-tip::before {
+  background-image: url(../img/octicons-16.svg#view-light-bulb);
 }
 
-.doc .admonitionblock.tip td.icon {
+.doc .admonitionblock td.icon i.icon-tip {
   background-color: var(--tip-color);
   color: var(--tip-on-color);
 }
 
-.doc .admonitionblock.tip td.icon i {
-  background-image: url(../img/octicons-16.svg#view-light-bulb);
+.doc .admonitionblock td.icon i.icon-warning::before {
+  background-image: url(../img/octicons-16.svg#view-alert);
 }
 
-.doc .admonitionblock.warning td.icon {
+.doc .admonitionblock td.icon i.icon-warning {
   background-color: var(--warning-color);
   color: var(--warning-on-color);
 }
 
-.doc .admonitionblock.warning td.icon i {
-  background-image: url(../img/octicons-16.svg#view-alert);
-}
-
 .doc .imageblock,
 .doc .videoblock {
   display: flex;