use a function to create rgba colors

pydata · May 10, 2022 · be98a87 · be98a87
1 parent 3fd40b9
commit be98a87
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_functions.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_functions.scss
@@ -0,0 +1,13 @@
+/*********************************************
+* SASS Functions
+*********************************************/
+
+/********************************************
+ * generate rgba colors from the rgb defined variables
+ */
+@function colorAlpha($color, $opacity) {
+  $red: red($color);
+  $green: green($color);
+  $blue: blue($color);
+  @return rgba($red, $green, $blue, $opacity);
+}
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -4,6 +4,7 @@
 
 span.guilabel {
   border: 1px solid var(--pst-color-info);
+  background-color: colorAlpha(var(--pst-color-info), 0.1);
   color: var(--pst-color-info);
   font-size: 80%;
   font-weight: 700;
@@ -14,7 +15,7 @@ span.guilabel {
 
   // This is a hack to control the opacity for admonitions with our color variables
   // ref: https://stackoverflow.com/a/56951626/6734243
-  &:before {
+  /*&:before {
     content: "";
     width: 100%;
     height: 100%;
@@ -23,5 +24,5 @@ span.guilabel {
     top: 0;
     background-color: var(--pst-color-info);
     opacity: 0.1;
-  }
+  }*/
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss
@@ -18,6 +18,9 @@ $grid-breakpoints: (
 );
 @import "~bootstrap/scss/bootstrap";
 
+// Variables and re-usable SCSS functions
+@import "abstracts/functions";
+
 // Basic styling applied throughout site
 @import "./base/base";
 @import "./base/color";