Fix background on button cards

LinwoodDev · Mar 23, 2024 · 1d820db · 1d820db
1 parent 0a95c56
commit 1d820db
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -2,7 +2,7 @@
   "name": "@linwooddev/style",
   "description": "",
   "main": "index.js",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "sass --watch scss/:css/",

diff --git a/packages/web/scss/_button.scss b/packages/web/scss/_button.scss
@@ -2,7 +2,10 @@
 @use "colors";
 
 button, .btn {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: map-get(vars.$spacing, 'xs');
   background: transparent;
   border: none;
   text-decoration: none;

diff --git a/packages/web/scss/_card.scss b/packages/web/scss/_card.scss
@@ -1,7 +1,8 @@
-@use 'colors';
-@use 'vars';
+@use "colors";
+@use "vars";
 
-.card, button.card {
+.card,
+button.card {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -22,6 +23,7 @@
     font-weight: bold;
   }
   &.secondary {
+    background-color: transparent;
     border-color: colors.$elevation;
   }
   &.secondary:hover {
@@ -32,12 +34,15 @@
   &.primary {
     border-color: colors.$primary-light;
     color: colors.$primary;
+    background-color: transparent;
   }
   &.primary:hover {
     box-shadow: 0 0 10px 0px colors.$primary;
     border-color: colors.$primary;
+    background-color: transparent;
   }
-  &.fill, &.paper {
+  &.fill,
+  &.paper {
     backdrop-filter: vars.$elevation-filter;
     background-color: colors.$elevation;
     color: colors.$background-text;