From 1c85d0b3cd825666fb1013d97ba20dcf9c8c3f27 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@gmail.com>
Date: Thu, 15 Sep 2022 10:46:26 -0600
Subject: [PATCH] adding a disco button

---
 src/resources/css/elements/buttons.css | 141 +++++++++++++++++++++++++
 1 file changed, 141 insertions(+)

diff --git a/src/resources/css/elements/buttons.css b/src/resources/css/elements/buttons.css
index 0951c95..d89da48 100644
--- a/src/resources/css/elements/buttons.css
+++ b/src/resources/css/elements/buttons.css
@@ -200,3 +200,144 @@
     border-color: hsl(358, 84%, 85.7%);
     box-shadow: 0 6px 16px 0 hsla(358, 84%, 85.7%, 0.33), inset 0 6px 16px 0 hsla(358, 84%, 85.7%, 0.33);
 }
+
+
+/** +----------------------------------------------------------------+ **/
+/** | "Disco" animated buttons                                       | **/
+/** +----------------------------------------------------------------+ **/
+/* https://github.com/joe-bell/loading-disco */
+.disco-button {
+    /* Customizable */
+    --button-color-bg: rgb(24 24 27);
+    --button-color-border: rgb(63 63 70);
+    --button-color-disco: rgb(59 130 246);
+    --button-color-text: rgb(161 161 170);
+    --button-color-text-busy: rgb(113 113 122);
+    --button-border-width: 1px;
+    --button-bg-gradient-start: rgb(24 24 27);
+    --button-bg-gradient-end: rgb(39 39 42);
+    --button-disco-animation: disco 1.5s linear infinite;
+    --button-disco-gradient-stops: transparent 135deg,
+    var(--button-color-disco) 180deg, transparent 225deg;
+    --button-disco-opacity: 1;
+    --button-radius: 0.5rem;
+    --button-transition-duration: 200ms;
+    --button-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+    --button-transition: var(--button-transition-duration)
+    var(--button-transition-easing);
+    /**
+    * Using an advance mathematic technique often referred to as
+    * "winging it", we'll offset the aspect ratio by a figure
+    * that brings the shape of the "disco" element as close to
+    * the edge of the button as possible – to reduce the effect
+    * of "easing".
+    */
+    --button-aspect-ratio-multiplier: 0.65;
+    /* Styles */
+    appearance: none;
+    position: relative;
+    border: 0;
+    font: inherit;
+    width: max-content;
+    overflow: hidden;
+    margin: calc(var(--button-border-width) * -1);
+    padding: var(--button-border-width);
+    color: var(--button-color-text);
+    border-radius: var(--button-radius);
+    transform: none;
+    user-select: none;
+    will-change: transform;
+    background-color: var(--button-color-border);
+    /**
+    * This one's optional, it just stops the button from jumping around when the
+    * content width changes
+    */
+    min-width: 8rem;
+}
+
+.disco-button:hover {
+    filter: brightness(0.95);
+}
+.disco-button:active {
+    transform: scale(0.95);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .disco-button {
+        transition: var(--button-transition);
+        transition-property: color, filter, transform;
+    }
+}
+
+.button__content {
+    display: inline-flex;
+    position: relative;
+    border-radius: calc(var(--button-radius) - var(--button-border-width));
+    background-image: linear-gradient(
+        to top right,
+        var(--button-bg-gradient-start),
+        var(--button-bg-gradient-end)
+    );
+    background-color: var(--button-bg-gradient-end);
+    width: 100%;
+    justify-content: center;
+    padding: 0.625rem 1rem;
+    text-align: center;
+    z-index: 10;
+}
+
+.button__disco,
+.button__disco::before {
+    position: absolute;
+    width: 100%;
+}
+
+.button__disco {
+    inset: 0;
+    height: 100%;
+    top: 50%;
+    transform: translateY(-50%)
+    scaleX(
+        calc(var(--button-aspect-ratio) * var(--button-aspect-ratio-multiplier))
+    );
+    will-change: transform;
+}
+
+.button__disco::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    min-height: 100%;
+    top: 50%;
+    aspect-ratio: 1/1;
+    transform-origin: center;
+    background-image: conic-gradient(var(--button-disco-gradient-stops));
+    opacity: var(--button-disco-opacity-enabled, 0);
+    /**
+    * This one's not strictly necessary, but I think it helps soften the gradient
+    * and reduces animation "easing".
+    */
+    filter: blur(8px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .button__disco::before {
+        transform: translateY(-50%) rotate(0deg);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .button__disco::before {
+        animation: var(--button-disco-animation);
+        animation-play-state: var(--button-disco-animation-state, paused);
+        transition: var(--button-transition);
+        transition-property: opacity;
+    }
+}
+
+.disco-button.is-busy {
+    --button-color-text: var(--button-color-text-busy);
+    --button-disco-animation-state: running;
+    --button-disco-opacity-enabled: var(--button-disco-opacity);
+    cursor: progress;
+}