More comprehensive system for displaying icons vertically centred within text

[ndcode_site.git] / css / bootstrap / _custom.scss

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 0f93c88..53b4834 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -12,30 +12,32 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-left: calc(100vw - 100%);
 }
 
-// needed for svg icons inside card headers
+// needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
-// the svg is positioned at an arbitrary position within this
-.icon32-outer {
-  display: inline-block;
-  position: relative;
-  width: calc(32px + 1rem);
-  height: 0;
-}
-.icon32-inner {
-  position: absolute;
-  top: -22px;
-}
-
-// apply this to svg, see _svg/icon_search.svg
-.svg-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-  position: relative;
-  //bottom: -.125em;
+// the svg is positioned within this to vertically centre on a capital letter
+$icon-sizes: (
+  24: 24px,
+  32: 32px,
+  48: 48px,
+  64: 64px
+);
+@each $icon-size, $icon-size-px in $icon-sizes {
+  .icon#{$icon-size}-outer {
+    display: inline-block;
+    position: relative;
+    width: $icon-size-px;
+    height: 0;
+    vertical-align: baseline;
+  }
+  .icon#{$icon-size}-inner {
+    position: absolute;
+    left: 0px;
+    top: calc(-.5 * $icon-size-px - .35em); // .35em = approx half cap height
+    width: $icon-size-px;
+    height: $icon-size-px;
+    fill: currentColor;
+    stroke: currentColor;
+  }
 }
 
 // use this to display the pi symbol without horrible blocky look in Sans