Add translucent badge option (#64)

btcpayserver · Jun 26, 2024 · a7a6827 · a7a6827
1 parent 1e22591
commit a7a6827
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 18 deletions.
diff --git a/src/bootstrap/_customizations.css b/src/bootstrap/_customizations.css
@@ -130,11 +130,9 @@ ul:not([class]) li {
 }
 
 .accordion-button .icon {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+  --icon-size: 1.5rem;
   margin-left: auto;
-  transition: transform 0.2s ease-in-out;
+  transition: transform var(--btcpay-transition-duration-fast) ease-in-out;
 }
 
 .accordion-button:not(.collapsed) .icon {
@@ -170,6 +168,37 @@ ul:not([class]) li {
   padding: 1rem;
 }
 
+/* Badges */
+.badge-translucent {
+  --btcpay-bg-opacity: .25;
+}
+.badge-translucent.text-bg-primary {
+  --btcpay-primary-text: var(--btcpay-primary);
+}
+.badge-translucent.text-bg-secondary {
+  --btcpay-secondary-text: var(--btcpay-neutral-light-900);
+  --btcpay-secondary-rgb: 248, 249, 250;
+}
+.badge-translucent.text-bg-success {
+  --btcpay-success-text: var(--btcpay-success);
+}
+.badge-translucent.text-bg-info {
+  --btcpay-info-text: var(--btcpay-info);
+}
+.badge-translucent.text-bg-warning {
+  --btcpay-warning-text: var(--btcpay-yellow-600);
+}
+.badge-translucent.text-bg-danger {
+  --btcpay-danger-text: var(--btcpay-danger);
+}
+.badge-translucent.text-bg-light {
+  --btcpay-light-text: var(--btcpay-neutral-800);
+  --btcpay-bg-opacity: .75;
+}
+.badge-translucent.text-bg-dark {
+  --btcpay-dark-text: var(--btcpay-white);
+}
+
 /* Icons */
 .icon {
     display: inline-block;

diff --git a/src/components/bootstrap/variants/badges.html b/src/components/bootstrap/variants/badges.html
@@ -11,13 +11,23 @@
         </div>
 
         <div class="bd-example">
+        <span class="badge rounded-pill text-bg-primary">Primary</span>
+        <!--<span class="badge rounded-pill text-bg-secondary">Secondary</span>-->
+        <span class="badge rounded-pill text-bg-success">Success</span>
+        <span class="badge rounded-pill text-bg-danger">Danger</span>
+        <span class="badge rounded-pill text-bg-warning">Warning</span>
+        <span class="badge rounded-pill text-bg-info">Info</span>
+        <!--<span class="badge rounded-pill text-bg-light">Light</span>-->
+        <!--<span class="badge rounded-pill text-bg-dark">Dark</span>-->
+        </div>
 
-        <span class="badge rounded-pill bg-primary">Primary</span>
-        <span class="badge rounded-pill bg-secondary">Secondary</span>
-        <span class="badge rounded-pill bg-success">Success</span>
-        <span class="badge rounded-pill bg-danger">Danger</span>
-        <span class="badge rounded-pill bg-warning">Warning</span>
-        <span class="badge rounded-pill bg-info">Info</span>
-        <span class="badge rounded-pill bg-light">Light</span>
-        <span class="badge rounded-pill bg-dark">Dark</span>
+        <div class="bd-example">
+        <span class="badge badge-translucent rounded-pill text-bg-primary">Primary</span>
+        <!--<span class="badge badge-translucent rounded-pill text-bg-secondary">Secondary</span>-->
+        <span class="badge badge-translucent rounded-pill text-bg-success">Success</span>
+        <span class="badge badge-translucent rounded-pill text-bg-danger">Danger</span>
+        <span class="badge badge-translucent rounded-pill text-bg-warning">Warning</span>
+        <span class="badge badge-translucent rounded-pill text-bg-info">Info</span>
+        <!--<span class="badge badge-translucent rounded-pill text-bg-light">Light</span>-->
+        <!--<span class="badge badge-translucent rounded-pill text-bg-dark">Dark</span>-->
         </div>
diff --git a/src/static/styles/btcpayserver-bootstrap.css b/src/static/styles/btcpayserver-bootstrap.css
@@ -12266,11 +12266,9 @@ ul:not([class]) li {
 }
 
 .accordion-button .icon {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+  --icon-size: 1.5rem;
   margin-left: auto;
-  transition: transform 0.2s ease-in-out;
+  transition: transform var(--btcpay-transition-duration-fast) ease-in-out;
 }
 
 .accordion-button:not(.collapsed) .icon {
@@ -12306,6 +12304,37 @@ ul:not([class]) li {
   padding: 1rem;
 }
 
+/* Badges */
+.badge-translucent {
+  --btcpay-bg-opacity: .25;
+}
+.badge-translucent.text-bg-primary {
+  --btcpay-primary-text: var(--btcpay-primary);
+}
+.badge-translucent.text-bg-secondary {
+  --btcpay-secondary-text: var(--btcpay-neutral-light-900);
+  --btcpay-secondary-rgb: 248, 249, 250;
+}
+.badge-translucent.text-bg-success {
+  --btcpay-success-text: var(--btcpay-success);
+}
+.badge-translucent.text-bg-info {
+  --btcpay-info-text: var(--btcpay-info);
+}
+.badge-translucent.text-bg-warning {
+  --btcpay-warning-text: var(--btcpay-yellow-600);
+}
+.badge-translucent.text-bg-danger {
+  --btcpay-danger-text: var(--btcpay-danger);
+}
+.badge-translucent.text-bg-light {
+  --btcpay-light-text: var(--btcpay-neutral-800);
+  --btcpay-bg-opacity: .75;
+}
+.badge-translucent.text-bg-dark {
+  --btcpay-dark-text: var(--btcpay-white);
+}
+
 /* Icons */
 .icon {
     display: inline-block;

diff --git a/src/styles/variables/theme.css b/src/styles/variables/theme.css
@@ -89,7 +89,7 @@
   --btcpay-pre-bg: var(--btcpay-neutral-900);
 
   --btcpay-primary: var(--btcpay-brand-primary);
-  --btcpay-primary-accent: var(--btcpay-brand-tertiary);
+  --btcpay-primary-accent: var(--btcpay-primary-700);
   --btcpay-primary-text: var(--btcpay-white);
   --btcpay-primary-text-hover: var(--btcpay-white);
   --btcpay-primary-text-active: var(--btcpay-white);
@@ -112,7 +112,7 @@
   --btcpay-primary-rgb: 81, 177, 62;
 
   --btcpay-secondary: var(--btcpay-white);
-  --btcpay-secondary-accent: var(--btcpay-secondary);
+  --btcpay-secondary-accent: var(--btcpay-neutral-700);
   --btcpay-secondary-text: var(--btcpay-primary);
   --btcpay-secondary-text-hover: var(--btcpay-primary);
   --btcpay-secondary-text-active: var(--btcpay-brand-dark);