From 5ff2f89afb71fd2976c487692ec73085241e09c7 Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sun, 6 Jun 2021 00:32:24 +0800
Subject: Stop use postcss-nested postcss-extend-rule

---
 src/components/Button.module.scss | 64 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/Button.module.scss

(limited to 'src/components/Button.module.scss')

diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss
new file mode 100644
index 0000000..3046d0c
--- /dev/null
+++ b/src/components/Button.module.scss
@@ -0,0 +1,64 @@
+.btn {
+  -webkit-appearance: none;
+  outline: none;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-btn-fg);
+  background: var(--color-btn-bg);
+  border: 1px solid #555;
+  border-radius: 100px;
+  &:focus {
+    border-color: var(--color-focus-blue);
+  }
+  &:hover {
+    background: #387cec;
+    border: 1px solid #387cec;
+    color: #fff;
+  }
+  &:active {
+    transform: scale(0.97);
+  }
+
+  font-size: 0.85em;
+  padding: 4px 7px;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+    padding: 6px 12px;
+  }
+
+  &.minimal {
+    border-color: transparent;
+    background: none;
+    &:focus {
+      border-color: var(--color-focus-blue);
+    }
+    &:hover {
+      color: #fff;
+      background: #387cec;
+      border: 1px solid #387cec;
+    }
+  }
+}
+
+.btn:disabled {
+  opacity: 0.5;
+}
+
+.btnStart {
+  margin-right: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loadingContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+}
-- 
cgit v1.3.1