Added Button Razor component

1 files changed, 79 insertions, 0 deletions

diff --git a/Pages/Component/Button.razor.css b/Pages/Component/Button.razor.css
new file mode 100644
index 0000000..5254030
--- /dev/null
+++ b/Pages/Component/Button.razor.css
@@ -0,0 +1,79 @@
+button {
+    align-items:   center;
+    background:    var(--col-pri);
+    border-radius: 10px;
+    border:        none;
+    box-sizing:    border-box;
+    color:         #fff;
+    cursor:        pointer;
+    display:       flex;
+    height:        30px;
+    margin:        10px 5px 0 5px;
+    padding:       0 9px 0 9px;
+    user-select:   none;
+}
+
+button > img, button > svg {
+    height:       15px;
+    margin-right: 5px;
+    width:        15px;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    button > ::deep :not(:first-child) {
+        display: none;
+    }
+
+    button > img, button > svg {
+        height:       20px;
+        margin-right: 0;
+        padding:      8px;
+        width:        20px;
+    }
+
+    /* disable hotkey underlines on mobile devices */
+    ::deep button > ::deep u {
+        text-decoration: none !important;
+    }
+}
+
+@media(hover: hover) {
+    button:hover:not(:active) {
+        filter: brightness(1.2) saturate(0.5);
+    }
+}
+
+button:active {
+    background: #fff;
+    color:      var(--col-pri);
+}
+
+
+button:disabled {
+    color:      var(--col-button-disabled)    !important;
+    background: var(--col-button-disabled-bg) !important;
+}
+
+button.error {
+    animation-iteration-count: 3;
+    animation-timing-function: linear;
+    animation:                 button-error 0.2s;
+}
+
+button > svg.loading {
+    animation:        loading-spin 1s linear infinite;
+    transform-origin: center;
+    will-change:      transform;
+}
+
+@keyframes button-error {
+      0% { transform: translateX(0);    }
+     33% { transform: translateX(-5px); }
+     66% { transform: translateX(+5px); }
+    100% { transform: translateX(0);    }
+}
+
+@keyframes loading-spin {
+      0% { transform: rotate(0deg);   }
+    100% { transform: rotate(360deg); }
+}