Fix order of primary and secondary, add more input styling, add more …

…utilities classes

packages/web/package.json

@@ -2,7 +2,7 @@
   "name": "@linwooddev/style",
   "description": "",
   "main": "index.js",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "sass --watch scss/:css/",
@@ -24,7 +24,7 @@
     "directory": "packages/web"
   },
   "devDependencies": {
-    "sass": "^1.71.0"
+    "sass": "^1.71.1"
   },
   "publishConfig": {
     "access": "public"

packages/web/scss/_button.scss

@@ -33,24 +33,6 @@ button, .btn {
     text-decoration: none;
   }
 
-  &.primary {
-    background-color: colors.$primary;
-    color: colors.$primary-text;
-    &.active {
-      background-color: colors.$primary-light;
-      &:hover {
-        background-color: colors.$primary;
-      }
-    }
-    &:hover {
-      box-shadow: vars.$box-shadow colors.$primary;
-    }
-    .highlight {
-      color: colors.$primary-text-highlight;
-      font-weight: bolder;
-    }
-  }
-
   &.secondary {
     background-color: colors.$elevation;
     backdrop-filter: vars.$elevation-filter;
@@ -78,4 +60,22 @@ button, .btn {
       }
     }
   }
+
+  &.primary {
+    background-color: colors.$primary;
+    color: colors.$primary-text;
+    &.active {
+      background-color: colors.$primary-light;
+      &:hover {
+        background-color: colors.$primary;
+      }
+    }
+    &:hover {
+      box-shadow: vars.$box-shadow colors.$primary;
+    }
+    .highlight {
+      color: colors.$primary-text-highlight;
+      font-weight: bolder;
+    }
+  }
 }

packages/web/scss/_card.scss

@@ -11,19 +11,19 @@
   border-width: 1px;
   border-color: colors.$elevation;
   transition: all 0.2s ease-in-out;
+  &.secondary {
+    border-color: colors.$elevation;
+  }
+  &.secondary:hover {
+    border-color: colors.$primary;
+  }
   &.primary {
     border-color: colors.$primary-light;
   }
   &.primary:hover {
     box-shadow: 0 0 10px 0px colors.$primary;
     border-color: colors.$primary;
   }
-  &.secondary {
-    border-color: colors.$elevation;
-  }
-  &.secondary:hover {
-    border-color: colors.$primary;
-  }
   &.fill, &.paper {
     backdrop-filter: vars.$elevation-filter;
     background-color: colors.$elevation;

packages/web/scss/_input.scss

@@ -32,4 +32,56 @@ input {
   input:not([type=checkbox]) {
     flex: 1;
   }
-}
+}
+
+select, textarea {
+  border: 0;
+  padding: 8px;
+  margin: 4px 0;
+  border-radius: vars.$border-radius;
+  backdrop-filter: vars.$elevation-filter;
+  background-color: colors.$elevation;
+  color: colors.$background-text;
+  background-repeat: no-repeat;
+  font-size: 1em;
+  appearance: none;
+  &:focus {
+    outline: 2px solid colors.$primary;
+  }
+}
+
+select {
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
+  background-position: calc(100% - 8px) calc(50% + 3px);
+  background-size: 12px;
+  padding-right: 28px;
+  background-color: colors.$elevation;
+}
+
+.resize-vertical {
+  resize: vertical;
+}
+
+option {
+  border: 0;
+  padding: 8px;
+  margin: 4px 0;
+  background-color: colors.$background;
+  color: colors.$background-text;
+}
+
+button, .btn {
+  &:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    background-color: colors.$background;
+    color: colors.$background-text;
+  }
+}
+
+input[type=text]:read-only, input[type=number]:read-only, textarea:read-only {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: colors.$background;
+  color: colors.$background-text;
+}

packages/web/scss/_layout.scss

@@ -52,13 +52,33 @@
   }
 }
 
+.overflow-y {
+  overflow-y: auto;
+}
+
+.overflow-x {
+  overflow-x: auto;
+}
+
 @each $breakpoint, $value in vars.$sizing {
   .w-#{$breakpoint} {
     width: $value;
   }
   .h-#{$breakpoint} {
     height: $value;
   }
+  .min-w-#{$breakpoint} {
+    min-width: $value;
+  }
+  .max-w-#{$breakpoint} {
+    min-width: $value;
+  }
+  .min-h-#{$breakpoint} {
+    min-height: $value;
+  }
+  .max-h-#{$breakpoint} {
+    max-height: $value;
+  }
 }
 
 .m-auto {

packages/web/scss/_typo.scss

@@ -126,3 +126,25 @@ hr, .v-divider {
   margin: 8px 0;
   background-color: colors.$elevation;
 }
+
+.no-decoration {
+  text-decoration: none;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.normal-color {
+  color: colors.$background-text;
+}
+
+.invert {
+  filter: invert(100%);
+}
+
+.icon {
+  width: 1.5em;
+  height: 1.5em;
+  display: block;
+}