feat(css-variables): add button & spinner variables

springtreesolutions · Mar 24, 2021 · 1d5afa3 · 1d5afa3
1 parent 407514c
commit 1d5afa3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/components/picker-customers/picker-customers.scss b/src/components/picker-customers/picker-customers.scss
@@ -1,6 +1,7 @@
 :host {
   display: block;
   background: var(--background-color);
+  --button-hover-background-color: var(--config-picker-button-hover-background-color, rgba(0,0,0,.12));
 }
 
 img {
@@ -67,7 +68,7 @@ button.md {
   background-color: transparent;
   color: currentColor;
   &:hover {
-    background-color: rgba(0,0,0,.12);
+    background-color: var(--button-hover-background-color);
   }
 }
 

diff --git a/src/components/picker-spinner/picker-spinner.scss b/src/components/picker-spinner/picker-spinner.scss
@@ -1,3 +1,8 @@
 :host {
   display: block;
+  --spinner-fill: var(--config-picker-spinner-fill, black);
+}
+
+svg path {
+  fill: var(--spinner-fill);
 }
diff --git a/src/components/picker-spinner/picker-spinner.tsx b/src/components/picker-spinner/picker-spinner.tsx
@@ -18,8 +18,8 @@ export class Spinner {
         width: pixelatedSize,
         height: pixelatedSize
       }}>
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width={pixelatedSize} height={pixelatedSize} viewBox="0 0 50 50" style={{ 'enable-background': 'new 0 0 50 50' }} xmlSpace="preserve">
-          <path fill='black' d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(360 -4.05439e-8 -4.05439e-8)">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width={pixelatedSize} height={pixelatedSize} viewBox="0 0 50 50" style={{ 'enable-background': 'new 0 0 50 50' }} xmlSpace="preserve">
+          <path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(360 -4.05439e-8 -4.05439e-8)">
             <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
           </path>
         </svg>