Add show, hide, fix text decoratione

LinwoodDev · Mar 7, 2024 · a6f4dd7 · a6f4dd7
1 parent cb06aac
commit a6f4dd7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 5 deletions.
diff --git a/packages/docs/src/pages/index.astro b/packages/docs/src/pages/index.astro
@@ -119,6 +119,8 @@ import Layout from "../layouts/Layout.astro";
           </a>
         </li>
       </ul>
+      <h3>Or as button</h3>
+      <button class="card fill no-decoration p-xs">Button</button>
     </div>
     <div id="input" class="big-section">
       <h2>Input</h2>

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.0",
+  "version": "0.3.1",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "sass --watch scss/:css/",

diff --git a/packages/web/scss/_card.scss b/packages/web/scss/_card.scss
@@ -11,6 +11,7 @@
   border-width: 1px;
   border-color: colors.$elevation;
   transition: all 0.2s ease-in-out;
+  text-decoration: none;
   &.secondary {
     border-color: colors.$elevation;
   }
@@ -27,6 +28,7 @@
   &.fill, &.paper {
     backdrop-filter: vars.$elevation-filter;
     background-color: colors.$elevation;
+    color: colors.$background-text;
   }
   &.paper {
     border: 0;

diff --git a/packages/web/scss/_layout.scss b/packages/web/scss/_layout.scss
@@ -60,6 +60,19 @@
   overflow-x: auto;
 }
 
+@each $breakpoint, $value in vars.$breakpoints {
+  @container (max-width: #{$value}) {
+    .show-#{$breakpoint} {
+      display: none;
+    }
+  }
+  @container (min-width: #{$value}) {
+    .hide-#{$breakpoint} {
+      display: none;
+    }
+  }
+}
+
 @each $breakpoint, $value in vars.$sizing {
   .w-#{$breakpoint} {
     width: $value;

diff --git a/packages/web/scss/_typo.scss b/packages/web/scss/_typo.scss
@@ -29,6 +29,7 @@ b {
 }
 a, .link {
   color: colors.$primary;
+  text-decoration: underline;
 }
 nav a {
   margin-right: 10px;
@@ -127,17 +128,20 @@ hr, .v-divider {
   background-color: colors.$elevation;
 }
 
-.no-decoration {
+.no-decoration, .no-decoration:hover {
   text-decoration: none;
 }
 
 .bold {
   font-weight: bold;
 }
 
-.normal-color {
+.text {
   color: colors.$background-text;
 }
+.primary {
+  color: colors.$primary;
+}
 
 .invert {
   filter: invert(100%);

diff --git a/packages/web/scss/main.scss b/packages/web/scss/main.scss
@@ -1,9 +1,9 @@
 @forward 'vars';
 @use 'colors';
+@use 'typo';
+@use 'layout';
 @use 'card';
 @use 'input';
 @use 'button';
 @use 'hero';
-@use 'layout';
 @use 'nav';
-@use 'typo';