sqlight: sqlite playground

2025-04-26 22:13:23 +08:00
commit f137bd53b5
97 changed files with 11234 additions and 0 deletions
--- a/assets/module.css/button_set.module.css
+++ b/assets/module.css/button_set.module.css
@@ -0,0 +1,135 @@
+$width: 1px;
+$radius: 4px;
+
+.-buttonReset {
+  color: var(--font-color);
+  border: none;
+  background: inherit;
+  background-color: transparent; /* IE 11 */
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.set {
+  display: flex;
+}
+
+.-border {
+  border-width: $width 0;
+  border-style: solid;
+
+  &:first-child {
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    border-left-width: $width;
+  }
+
+  &:last-child {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+    border-right-width: $width;
+  }
+}
+
+.-button {
+  --button-gap: 0.5em;
+  --button-side-padding: 1.25em;
+  --button-height: 3em;
+  --button-side-icon-nudge: 0.25em;
+
+  composes: -buttonReset;
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--button-gap);
+  align-content: center;
+  align-items: center;
+  padding: 0 var(--button-side-padding);
+  height: var(--button-height);
+  font-weight: 600;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  &:enabled {
+    cursor: pointer;
+  }
+}
+
+.small {
+  --button-gap: 0.25em;
+  --button-side-padding: 0.75em;
+  --button-height: 2.5em;
+  --button-side-icon-nudge: 0.125em;
+}
+
+.primary {
+  composes: -border -button;
+  background-color: var(--button-primary-bg-color);
+  border-color: var(--button-primary-border-color);
+  color: var(--button-primary-color);
+  font-weight: 700;
+
+  &:disabled {
+    background-color: var(--button-primary-bg-color-light);
+    border-color: var(--button-primary-border-color-light);
+  }
+
+  &:hover:enabled {
+    background-color: var(--button-primary-border-color);
+  }
+
+  &:active:enabled {
+    box-shadow: inset 0 0 5px var(--button-primary-active-color);
+  }
+}
+
+.secondary {
+  composes: -border -button;
+  background: var(--button-secondary-bg-color);
+  border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-color);
+
+  &:disabled {
+    background: inherit;
+    background-color: var(--button-secondary-bg-color-light);
+    border-color: var(--button-secondary-border-color-light);
+    color: var(--button-secondary-color-light);
+  }
+
+  &:visited {
+    color: var(--button-secondary-color);
+  }
+
+  &:hover:enabled {
+    background: inherit;
+    background-color: var(--button-secondary-border-color);
+  }
+
+  &:active:enabled {
+    box-shadow: inset 0 0 5px var(--button-secondary-active-color);
+  }
+}
+
+.iconLeft {
+  transform: translate(calc(-1 * var(--button-side-icon-nudge)), 0);
+}
+
+.iconRight {
+  transform: translate(var(--button-side-icon-nudge), 0);
+}
+
+.rule {
+  composes: -border;
+  background-color: var(--button-secondary-border-color);
+  width: 1px;
+  border-color: var(--button-secondary-border-color);
+}
+
+.icon {
+  composes: secondary;
+  padding: 0;
+  aspect-ratio: 1/1;
+  justify-items: center;
+}